import { useState } from "react";
import { X, Check, Copy, Play } from "lucide-react";
import {
  fetchSamples,
  insertSamples,
  updateSamples,
  deleteSamples,
  upsertSamples,
  relationshipSamples,
} from "../constants/samples";
import CodeBlock from "./CodeBlock";

export interface QueryGuideModalProps {
  isOpen: boolean;
  onClose: () => void;
  setQuery: (query: string) => void;
  addActivity: (
    message: string,
    category: "storage" | "query" | "server" | "stream",
    type?: "info" | "success" | "warn" | "error",
  ) => void;
}

export default function QueryGuideModal({
  isOpen,
  onClose,
  setQuery,
  addActivity,
}: QueryGuideModalProps) {
  const [helpActiveTab, setHelpActiveTab] = useState<
    "fetch" | "insert" | "upsert" | "update" | "delete" | "relationship"
  >("fetch");
  const [copiedText, setCopiedText] = useState("");

  if (!isOpen) return null;

  const handleCopy = (text: string) => {
    navigator.clipboard.writeText(text);
    setCopiedText(text);
    setTimeout(() => setCopiedText(""), 2000);
  };

  const getActiveSamples = () => {
    switch (helpActiveTab) {
      case "fetch":
        return fetchSamples;
      case "insert":
        return insertSamples;
      case "upsert":
        return upsertSamples;
      case "update":
        return updateSamples;
      case "delete":
        return deleteSamples;
      case "relationship":
        return relationshipSamples;
      default:
        return fetchSamples;
    }
  };

  const getTabLabel = (tab: string) => {
    switch (tab) {
      case "fetch":
        return "Fetch";
      case "insert":
        return "Insert";
      case "upsert":
        return "Upsert";
      case "update":
        return "Update";
      case "delete":
        return "Delete";
      case "relationship":
        return "Relations";
      default:
        return tab;
    }
  };

  return (
    <div className="fixed inset-0 bg-zinc-50 dark:bg-zinc-900 flex flex-col z-[100] select-none animate-fade-in w-screen h-screen overflow-hidden">
      <div className="w-full max-w-6xl mx-auto flex-1 flex flex-col h-full overflow-hidden px-6 md:px-12 pt-6 pb-8">
        {/* Header */}
        <div className="flex items-center justify-between border-b border-slate-200 dark:border-zinc-800 pb-5 shrink-0">
          <div>
            <h4 className="font-bold text-slate-900 dark:text-white text-2xl flex items-center gap-2.5 tracking-tight">
              Query Guide
            </h4>
          </div>
          <button
            onClick={onClose}
            className="p-2 rounded text-slate-400 hover:text-slate-600 dark:hover:text-slate-200 hover:bg-slate-100 dark:hover:bg-slate-900 border border-slate-200 dark:border-zinc-800 transition-all hover:scale-105 active:scale-95 shadow-sm"
          >
            <X className="w-6 h-6" />
          </button>
        </div>

        {/* Tab buttons */}
        <div className="flex items-center gap-2 p-1.5 bg-body-bg/80 dark:bg-zinc-900 border border-slate-200/50 dark:border-zinc-800 rounded-md mt-5 shrink-0 w-fit">
          {(
            [
              "fetch",
              "insert",
              "upsert",
              "update",
              "delete",
              "relationship",
            ] as const
          ).map((tab) => (
            <button
              key={tab}
              onClick={() => setHelpActiveTab(tab)}
              className={`px-5 py-2 text-xs font-bold transition-all rounded-sm capitalize ${
                helpActiveTab === tab
                  ? "bg-zinc-600 dark:bg-zinc-800 text-gray-200 rounded-lg"
                  : "text-slate-500 dark:text-slate-400 hover:text-slate-800 dark:hover:text-slate-200"
              }`}
            >
              {getTabLabel(tab)}
            </button>
          ))}
        </div>

        {/* Tab content */}
        <div className="flex-1 overflow-y-auto pr-1 mt-6 ">
          <div className="space-y-4 animate-fade-in pb-12">
            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              {getActiveSamples().map((sample, idx) => (
                <div
                  key={idx}
                  className="p-6 rounded-md border border-slate-200/80 dark:border-zinc-800/80 bg-panel-bg/70 dark:bg-panel-bg/40 hover:border-primary/40 dark:hover:border-primary/30 hover:shadow-md hover:translate-y-[-2px] transition-all duration-300 flex flex-col justify-between space-y-4 group shadow-sm"
                >
                  <div className="space-y-2">
                    <div className="flex items-center justify-between gap-2">
                      <span className="font-bold text-slate-900 dark:text-slate-100 text-[15px] tracking-tight">
                        {sample.title}
                      </span>
                      {(sample as any).badge && (
                        <span className="text-[10px] font-extrabold uppercase tracking-widest px-2 py-0.5 rounded-sm bg-zinc-200 dark:bg-zinc-800 text-zinc-500 dark:text-zinc-400 shrink-0">
                          {(sample as any).badge}
                        </span>
                      )}
                    </div>
                    <p className="text-xs leading-relaxed text-slate-500 dark:text-slate-400 font-medium">
                      {sample.desc}
                    </p>
                  </div>

                  {/* IDE-style Code Block */}
                  <div className="space-y-3.5">
                    <CodeBlock language="liven" code={sample.code} />

                    {/* Actions bar */}
                    <div className="flex items-center justify-end gap-3 pt-1">
                      <button
                        onClick={() => handleCopy(sample.code)}
                        className="flex items-center gap-1.5 px-3 py-1.5 rounded-sm text-xs font-semibold text-slate-500 hover:text-slate-800 dark:text-slate-400 dark:hover:text-slate-200 hover:bg-slate-100 dark:hover:bg-slate-800/60 transition-all"
                      >
                        {copiedText === sample.code ? (
                          <>
                            <Check className="w-3.5 h-3.5 text-accent" />{" "}
                            <span className="text-accent font-bold">
                              Copied
                            </span>
                          </>
                        ) : (
                          <>
                            <Copy className="w-3.5 h-3.5" /> <span>Copy</span>
                          </>
                        )}
                      </button>
                      <span className="w-px h-3.5 bg-slate-200 dark:bg-slate-800" />
                      <button
                        onClick={() => {
                          setQuery(sample.code);
                          onClose();
                          addActivity(
                            `Loaded template query: ${sample.code}`,
                            "query",
                            "info",
                          );
                        }}
                        className="flex items-center gap-1.5 px-3.5 py-1.5 rounded-sm bg-primary text-white hover:bg-primary-hover transition-all text-xs font-bold shadow-sm hover:/25"
                      >
                        <Play className="w-3.5 h-3.5 fill-current" />
                        <span>Load Query</span>
                      </button>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>

        {/* Footer */}
        <div className="border-t border-slate-200 dark:border-zinc-800 pt-5 flex justify-end shrink-0">
          <button
            onClick={onClose}
            className="py-2.5 px-6 rounded bg-zinc-800 text-white text-xs font-bold transition-all active:scale-[0.98]"
          >
            Close
          </button>
        </div>
      </div>
    </div>
  );
}
