"use client";

import { useEffect } from "react";
import type { GraphNode } from "@/lib/types";

interface MobileActionSheetProps {
  node: GraphNode;
  onShowDescription?: () => void;
  onAddComment: () => void;
  onClaimTask?: () => void;
  onUnclaimTask?: () => void;
  onCollapseEpic?: () => void;
  onUncollapseEpic?: () => void;
  onFocusEpic?: () => void;
  onExitFocusEpic?: () => void;
  onClose: () => void;
}

export function MobileActionSheet({
  node,
  onShowDescription,
  onAddComment,
  onClaimTask,
  onUnclaimTask,
  onCollapseEpic,
  onUncollapseEpic,
  onFocusEpic,
  onExitFocusEpic,
  onClose,
}: MobileActionSheetProps) {
  // Escape key dismissal
  useEffect(() => {
    const handler = (e: KeyboardEvent) => {
      if (e.key === "Escape") onClose();
    };
    window.addEventListener("keydown", handler);
    return () => window.removeEventListener("keydown", handler);
  }, [onClose]);

  return (
    <>
      {/* Backdrop */}
      <div
        className="fixed inset-0 z-[99] bg-black/30"
        onClick={onClose}
      />

      {/* Action sheet */}
      <div className="fixed inset-x-0 bottom-0 z-[100] bg-white dark:bg-zinc-900 rounded-t-2xl shadow-2xl max-h-[70vh] overflow-y-auto animate-slide-up-sheet">
        {/* Drag handle */}
        <div className="w-10 h-1 bg-zinc-300 dark:bg-zinc-700 rounded-full mx-auto mt-3 mb-2" />

        {/* Node info header */}
        <div className="px-5 py-3 border-b border-zinc-100 dark:border-zinc-800">
          <div className="flex items-center gap-2">
            <span className="text-[11px] font-mono text-zinc-400 dark:text-zinc-400">{node.id}</span>
          </div>
          <div className="text-sm font-medium text-zinc-700 dark:text-zinc-300 truncate mt-0.5">
            {node.title}
          </div>
        </div>

        {/* Actions */}
        <div className="py-1">
          {onShowDescription && (
            <button
              onClick={onShowDescription}
              className="w-full flex items-center gap-3 px-5 py-4 text-sm font-medium text-zinc-700 dark:text-zinc-300 active:bg-zinc-50 dark:active:bg-zinc-800 transition-colors"
            >
              <svg
                className="w-4 h-4 text-zinc-400"
                fill="none"
                viewBox="0 0 24 24"
                strokeWidth={1.5}
                stroke="currentColor"
              >
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z"
                />
              </svg>
              Show description
            </button>
          )}

          <button
            onClick={onAddComment}
            className="w-full flex items-center gap-3 px-5 py-4 text-sm font-medium text-zinc-700 dark:text-zinc-300 active:bg-zinc-50 dark:active:bg-zinc-800 transition-colors"
          >
            <svg
              className="w-4 h-4 text-zinc-400"
              fill="none"
              viewBox="0 0 24 24"
              strokeWidth={1.5}
              stroke="currentColor"
            >
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                d="M12 20.25c4.97 0 9-3.694 9-8.25s-4.03-8.25-9-8.25S3 7.444 3 12c0 2.104.859 4.023 2.273 5.48.432.447.74 1.04.586 1.641a4.483 4.483 0 01-.923 1.785A5.969 5.969 0 006 21c1.282 0 2.47-.402 3.445-1.087.81.22 1.668.337 2.555.337z"
              />
            </svg>
            Add comment
          </button>

          {onClaimTask && (
            <button
              onClick={onClaimTask}
              className="w-full flex items-center gap-3 px-5 py-4 text-sm font-medium text-zinc-700 dark:text-zinc-300 active:bg-zinc-50 dark:active:bg-zinc-800 transition-colors"
            >
              <svg
                className="w-4 h-4 text-zinc-400"
                fill="none"
                viewBox="0 0 24 24"
                strokeWidth={1.5}
                stroke="currentColor"
              >
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z"
                />
              </svg>
              Claim task
            </button>
          )}

          {onUnclaimTask && (
            <button
              onClick={onUnclaimTask}
              className="w-full flex items-center gap-3 px-5 py-4 text-sm font-medium text-red-500 active:bg-red-50 dark:active:bg-red-950 transition-colors"
            >
              <svg
                className="w-4 h-4 text-red-400"
                fill="none"
                viewBox="0 0 24 24"
                strokeWidth={1.5}
                stroke="currentColor"
              >
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  d="M22 10.5h-6m-2.25-4.125a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zM4 19.235v-.11a6.375 6.375 0 0112.75 0v.109A12.318 12.318 0 0110.374 21c-2.331 0-4.512-.645-6.374-1.766z"
                />
              </svg>
              Unclaim task
            </button>
          )}

          {onCollapseEpic && (
            <button
              onClick={onCollapseEpic}
              className="w-full flex items-center gap-3 px-5 py-4 text-sm font-medium text-zinc-700 dark:text-zinc-300 active:bg-zinc-50 dark:active:bg-zinc-800 transition-colors"
            >
              <svg
                className="w-4 h-4 text-zinc-400"
                fill="none"
                viewBox="0 0 24 24"
                strokeWidth={1.5}
                stroke="currentColor"
              >
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  d="M9 9V4.5M9 9H4.5M9 9 3.75 3.75M9 15v4.5M9 15H4.5M9 15l-5.25 5.25M15 9h4.5M15 9V4.5M15 9l5.25-5.25M15 15h4.5M15 15v4.5m0-4.5 5.25 5.25"
                />
              </svg>
              Collapse epic
            </button>
          )}

          {onUncollapseEpic && (
            <button
              onClick={onUncollapseEpic}
              className="w-full flex items-center gap-3 px-5 py-4 text-sm font-medium text-zinc-700 dark:text-zinc-300 active:bg-zinc-50 dark:active:bg-zinc-800 transition-colors"
            >
              <svg
                className="w-4 h-4 text-zinc-400"
                fill="none"
                viewBox="0 0 24 24"
                strokeWidth={1.5}
                stroke="currentColor"
              >
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  d="M3.75 3.75v4.5m0-4.5h4.5m-4.5 0L9 9M3.75 20.25v-4.5m0 4.5h4.5m-4.5 0L9 15M20.25 3.75h-4.5m4.5 0v4.5m0-4.5L15 9m5.25 11.25h-4.5m4.5 0v-4.5m0 4.5L15 15"
                />
              </svg>
              Uncollapse epic
            </button>
          )}

          {onFocusEpic && (
            <button
              onClick={onFocusEpic}
              className="w-full flex items-center gap-3 px-5 py-4 text-sm font-medium text-zinc-700 dark:text-zinc-300 active:bg-zinc-50 dark:active:bg-zinc-800 transition-colors"
            >
              <svg
                className="w-4 h-4 text-zinc-400"
                fill="none"
                viewBox="0 0 24 24"
                strokeWidth={1.5}
                stroke="currentColor"
              >
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  d="M7.5 3.75H6A2.25 2.25 0 003.75 6v1.5M16.5 3.75H18A2.25 2.25 0 0120.25 6v1.5M16.5 20.25H18A2.25 2.25 0 0020.25 18v-1.5M7.5 20.25H6A2.25 2.25 0 013.75 18v-1.5"
                />
              </svg>
              Focus on epic
            </button>
          )}

          {onExitFocusEpic && (
            <button
              onClick={onExitFocusEpic}
              className="w-full flex items-center gap-3 px-5 py-4 text-sm font-medium text-emerald-600 dark:text-emerald-400 active:bg-emerald-50 dark:active:bg-emerald-950 transition-colors"
            >
              <svg
                className="w-4 h-4 text-emerald-500"
                fill="none"
                viewBox="0 0 24 24"
                strokeWidth={1.5}
                stroke="currentColor"
              >
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  d="M3.75 3.75v4.5m0-4.5h4.5m-4.5 0L9 9M3.75 20.25v-4.5m0 4.5h4.5m-4.5 0L9 15M20.25 3.75h-4.5m4.5 0v4.5m0-4.5L15 9m5.25 11.25h-4.5m4.5 0v-4.5m0 4.5L15 15"
                />
              </svg>
              Show full graph
            </button>
          )}
        </div>

        {/* Cancel button */}
        <div className="border-t border-zinc-100 dark:border-zinc-800">
          <button
            onClick={onClose}
            className="w-full py-4 text-sm font-medium text-zinc-400 dark:text-zinc-400 active:bg-zinc-50 dark:active:bg-zinc-800 transition-colors"
          >
            Cancel
          </button>
        </div>

        {/* Safe area padding for phones with home indicator */}
        <div className="h-[env(safe-area-inset-bottom)]" />
      </div>
    </>
  );
}