"use client";

/**
 * Template picker (slash "Insert template"): lists the workspace templates
 * and applies one — the server duplicates the template into the page's
 * parent, the caller links to the new page.
 */
import { useEffect, useState } from "react";
import { Wand2 } from "lucide-react";
import { templateApi } from "@/lib/api";
import { toast } from "@/stores/ui-store";
import type { TemplateInfo } from "@/lib/types";

export interface TemplateDialogProps {
  workspaceId: string;
  onClose: () => void;
  /** Invoked when the user picks a template; resolves when applied. */
  onApply: (templateId: string, title: string) => Promise<void>;
}

export function TemplateDialog({ workspaceId, onClose, onApply }: TemplateDialogProps) {
  const [templates, setTemplates] = useState<TemplateInfo[]>([]);
  const [loading, setLoading] = useState(true);
  const [busyId, setBusyId] = useState<string | null>(null);

  useEffect(() => {
    if (!workspaceId) {
      setLoading(false);
      return;
    }
    templateApi
      .list(workspaceId)
      .then(setTemplates)
      .catch(() => setTemplates([]))
      .finally(() => setLoading(false));
  }, [workspaceId]);

  useEffect(() => {
    const onKey = (e: KeyboardEvent) => {
      if (e.key === "Escape") onClose();
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [onClose]);

  const apply = async (t: TemplateInfo) => {
    setBusyId(t.id);
    try {
      await onApply(t.id, t.name || "Untitled");
    } catch (err) {
      toast("error", "Could not insert template", err instanceof Error ? err.message : undefined);
    } finally {
      setBusyId(null);
    }
  };

  return (
    <div className="fixed inset-0 z-[85] flex items-center justify-center p-4">
      <div className="absolute inset-0 bg-black/40" onClick={onClose} aria-hidden />
      <div
        role="dialog"
        aria-modal="true"
        aria-label="Insert template"
        className="relative w-full max-w-md rounded-lg border border-border bg-card shadow-2xl"
      >
        <div className="flex items-center justify-between border-b border-border px-4 py-3">
          <h2 className="flex items-center gap-2 text-base font-semibold">
            <Wand2 className="size-4 text-muted-foreground" aria-hidden />
            Insert template
          </h2>
          <button
            type="button"
            onClick={onClose}
            className="rounded p-1 text-muted-foreground hover:bg-accent hover:text-foreground"
            aria-label="Close template picker"
          >
            ✕
          </button>
        </div>
        <div className="max-h-80 overflow-y-auto p-2">
          {loading ? (
            <p className="px-2 py-4 text-sm text-muted-foreground">Loading…</p>
          ) : templates.length === 0 ? (
            <p className="px-2 py-4 text-sm text-muted-foreground">
              No templates yet — save one from the Templates page.
            </p>
          ) : (
            <ul className="space-y-0.5">
              {templates.map((t) => (
                <li key={t.id}>
                  <button
                    type="button"
                    disabled={busyId !== null}
                    onClick={() => void apply(t)}
                    className="flex w-full items-center gap-2 rounded-md px-2 py-2 text-left text-sm hover:bg-accent disabled:opacity-50"
                  >
                    <span className="text-lg leading-none" aria-hidden>
                      {t.icon ?? "📄"}
                    </span>
                    <span className="min-w-0 flex-1 truncate font-medium">{t.name || "Untitled"}</span>
                    {busyId === t.id ? <span className="text-xs text-muted-foreground">Applying…</span> : null}
                  </button>
                </li>
              ))}
            </ul>
          )}
        </div>
      </div>
    </div>
  );
}