"use client";
import * as React from "react";
import { useRouter, useSearchParams } from "next/navigation";
import { Folder, Plus, Search, Star, WandSparkles, X } from "lucide-react";
import { api, useApi } from "@/lib/client/api";
import { errorMessage } from "@/lib/client/humanize";
import { useDebounced } from "@/lib/client/hooks";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Segmented, ChipRow } from "@/components/ui/segmented";
import { EmptyState, Skeleton } from "@/components/ui/misc";
import { toast } from "@/components/ui/toast";
import { ConfirmDialog } from "@/components/common/confirm-dialog";
import type { PublicPrompt, PromptKind } from "@/lib/client/types";
import { variablesToAsk } from "@/lib/prompts/variables";
import { WorkspacePageHeader, WorkspacePageBody } from "@/components/projects/page-header";
import { PromptCard } from "./prompt-card";
import { PromptEditorSheet } from "./prompt-editor-sheet";
import { PromptUseSheet, insertPromptIntoChat } from "./prompt-use-sheet";
import { LegacyPresets } from "./legacy-presets";
import { PROMPT_KIND_META, PROMPT_KIND_ORDER } from "./prompt-kind";
import { cn } from "@/lib/utils";

interface ListResponse {
  prompts: PublicPrompt[];
  folders: string[];
  tags: string[];
  total: number;
}

type KindFilter = PromptKind | "all";

export function PromptLibrary() {
  const router = useRouter();
  const params = useSearchParams();
  const [q, setQ] = React.useState("");
  const dq = useDebounced(q, 150);
  const [kind, setKind] = React.useState<KindFilter>("all");
  const [folder, setFolder] = React.useState<string | null>(null);
  const [tag, setTag] = React.useState<string | null>(null);
  const [favOnly, setFavOnly] = React.useState(false);
  const [editor, setEditor] = React.useState<{ open: boolean; prompt: PublicPrompt | null; initial?: { kind?: PromptKind; content?: string; name?: string } }>({ open: false, prompt: null });
  const [using, setUsing] = React.useState<PublicPrompt | null>(null);
  const [deleting, setDeleting] = React.useState<PublicPrompt | null>(null);

  const key = React.useMemo(() => {
    const p = new URLSearchParams();
    if (dq.trim()) p.set("q", dq.trim());
    if (kind !== "all") p.set("kind", kind);
    if (folder) p.set("folder", folder);
    if (tag) p.set("tag", tag);
    if (favOnly) p.set("favorite", "1");
    const s = p.toString();
    return `/api/prompts${s ? `?${s}` : ""}`;
  }, [dq, kind, folder, tag, favOnly]);
  const { data, isLoading, error, mutate } = useApi<ListResponse>(key, { keepPreviousData: true });
  const prompts = React.useMemo(() => data?.prompts ?? [], [data]);
  const total = data?.total ?? 0;
  const filtered = kind !== "all" || Boolean(folder) || Boolean(tag) || favOnly || Boolean(dq.trim());

  // `?new=1` / `?edit=new` open a blank editor; `?edit=<id>` edits; `?content=` prefills (e.g. "Save as prompt" from chat).
  const editParam = params.get("edit") ?? (params.get("new") === "1" ? "new" : null);
  const contentParam = params.get("content");
  const kindParam = params.get("kind");
  const handled = React.useRef(false);
  React.useEffect(() => {
    if (handled.current || (!editParam && !contentParam)) return;
    if (editParam && editParam !== "new" && !data) return; // wait for the list
    handled.current = true;
    const target = editParam && editParam !== "new" ? prompts.find((p) => p.id === editParam) ?? null : null;
    // eslint-disable-next-line react-hooks/set-state-in-effect
    setEditor({ open: true, prompt: target, initial: target ? undefined : { content: contentParam ?? undefined, kind: (PROMPT_KIND_ORDER as string[]).includes(kindParam ?? "") ? (kindParam as PromptKind) : undefined } });
    router.replace("/app/prompts");
  }, [editParam, contentParam, kindParam, data, prompts, router]);

  const refresh = () => Promise.all([mutate()]);

  const use = (p: PublicPrompt) => {
    if (variablesToAsk(p.variables).length) setUsing(p);
    else void insertPromptIntoChat(p, {}, router).catch((e) => toast.error("Could not use prompt", errorMessage(e)));
  };
  const toggleFavorite = async (p: PublicPrompt) => {
    try {
      await api(`/api/prompts/${p.id}`, { method: "PATCH", json: { favorite: !p.favorite } });
      await refresh();
    } catch (e) {
      toast.error("Could not update", errorMessage(e));
    }
  };
  const duplicate = async (p: PublicPrompt) => {
    try {
      await api("/api/prompts", { method: "POST", json: { kind: p.kind, name: `${p.name} (copy)`, description: p.description, content: p.content, variables: p.variables, schema: p.schema, folder: p.folder, tags: p.tags, defaultModelKey: p.defaultModelKey, projectId: p.projectId } });
      await refresh();
      toast.success("Prompt duplicated");
    } catch (e) {
      toast.error("Could not duplicate", errorMessage(e));
    }
  };
  const remove = async (p: PublicPrompt) => {
    try {
      await api(`/api/prompts/${p.id}`, { method: "DELETE" });
      await refresh();
      toast.success("Prompt deleted");
    } catch (e) {
      toast.error("Could not delete", errorMessage(e));
      throw e;
    }
  };
  const actions = { onUse: use, onEdit: (p: PublicPrompt) => setEditor({ open: true, prompt: p }), onDuplicate: duplicate, onToggleFavorite: toggleFavorite, onDelete: setDeleting };

  const clearFilters = () => {
    setKind("all");
    setFolder(null);
    setTag(null);
    setFavOnly(false);
    setQ("");
  };

  return (
    <div className="flex h-full min-h-0 flex-col">
      <WorkspacePageHeader
        title="Prompts"
        subtitle={total ? `${total} in your library` : undefined}
        actions={
          <Button size="sm" onClick={() => setEditor({ open: true, prompt: null })}>
            <Plus /> <span className="hidden sm:inline">New prompt</span>
            <span className="sm:hidden">New</span>
          </Button>
        }
      />
      <WorkspacePageBody>
        {total > 0 || filtered ? (
          <div className="space-y-3">
            <div className="flex flex-col gap-2 sm:flex-row sm:items-center">
              <div className="relative flex-1 sm:max-w-sm">
                <Search className="pointer-events-none absolute left-2.5 top-1/2 size-4 -translate-y-1/2 text-fg-subtle" />
                <Input value={q} onChange={(e) => setQ(e.target.value)} placeholder="Search name, content, tags…" className="h-10 pl-8 sm:h-9" aria-label="Search prompts" />
              </div>
              <Segmented ariaLabel="Prompt kind" value={kind} onChange={setKind} size="sm" className="max-w-full" options={[{ value: "all" as KindFilter, label: "All" }, ...PROMPT_KIND_ORDER.map((k) => ({ value: k as KindFilter, label: PROMPT_KIND_META[k].short, icon: PROMPT_KIND_META[k].icon }))]} />
            </div>
            {(data?.folders.length ?? 0) + (data?.tags.length ?? 0) > 0 || favOnly ? (
              <div className="-mx-4 flex gap-1.5 overflow-x-auto px-4 scrollbar-none sm:mx-0 sm:flex-wrap sm:px-0">
                <button type="button" role="checkbox" aria-checked={favOnly} onClick={() => setFavOnly((v) => !v)} className={cn("inline-flex h-8 shrink-0 items-center gap-1.5 rounded-full border px-3 text-[13px] font-medium transition-colors [&_svg]:size-3.5", favOnly ? "border-fg bg-fg text-bg" : "border-border bg-bg-elevated text-fg-muted hover:border-border-strong hover:text-fg")}>
                  <Star className={cn(favOnly && "fill-current")} /> Favourites
                </button>
                {data?.folders.length ? <ChipRow value={folder} onChange={(f) => setFolder(folder === f ? null : f)} options={data.folders.map((f) => ({ value: f, label: f, icon: <Folder /> }))} className="shrink-0 overflow-visible" /> : null}
                {data?.tags.length ? <ChipRow value={tag} onChange={(t) => setTag(tag === t ? null : t)} options={data.tags.slice(0, 12).map((t) => ({ value: t, label: `#${t}` }))} className="shrink-0 overflow-visible" /> : null}
                {filtered ? (
                  <button type="button" onClick={clearFilters} className="inline-flex h-8 shrink-0 items-center gap-1 rounded-full px-2 text-[13px] text-fg-subtle hover:text-fg">
                    <X className="size-3.5" /> Clear
                  </button>
                ) : null}
              </div>
            ) : null}
          </div>
        ) : null}

        <div className={cn((total > 0 || filtered) && "mt-4")}>
          {isLoading && !data ? (
            <ul className="grid gap-3 sm:grid-cols-2 xl:grid-cols-3">
              {Array.from({ length: 6 }).map((_, i) => (
                <li key={i}>
                  <Skeleton className="h-44 rounded-xl" />
                </li>
              ))}
            </ul>
          ) : error ? (
            <EmptyState title="Could not load prompts" description={errorMessage(error)} action={<Button variant="outline" onClick={() => mutate()}>Retry</Button>} />
          ) : total === 0 && !filtered ? (
            <EmptyState
              icon={<WandSparkles />}
              title="No prompts yet"
              description="Save the prompts you keep retyping — a code reviewer, a translator, a strict JSON extractor. Add {{variables}} to fill in before sending."
              action={
                <Button onClick={() => setEditor({ open: true, prompt: null })}>
                  <Plus /> Create your first prompt
                </Button>
              }
            />
          ) : prompts.length === 0 ? (
            <EmptyState title="No matches" description={dq ? `Nothing matches “${dq}”.` : "No prompts match these filters."} action={<Button variant="outline" onClick={clearFilters}>Clear filters</Button>} />
          ) : (
            <ul className={cn("grid gap-3 sm:grid-cols-2 xl:grid-cols-3", isLoading && "opacity-70 transition-opacity")}>
              {prompts.map((p) => (
                <PromptCard key={p.id} prompt={p} actions={actions} />
              ))}
            </ul>
          )}
        </div>

        <LegacyPresets onImported={() => refresh()} />
      </WorkspacePageBody>

      <PromptEditorSheet open={editor.open} onOpenChange={(o) => setEditor((s) => ({ ...s, open: o }))} prompt={editor.prompt} initial={editor.initial} folders={data?.folders} onSaved={() => refresh()} />
      <PromptUseSheet prompt={using} open={using !== null} onOpenChange={(o) => !o && setUsing(null)} />
      <ConfirmDialog open={deleting !== null} onOpenChange={(o) => !o && setDeleting(null)} destructive title={`Delete “${deleting?.name ?? ""}”?`} description="Conversations that used this prompt are not affected." confirmLabel="Delete" onConfirm={() => (deleting ? remove(deleting) : Promise.resolve())} />
    </div>
  );
}