"use client";
import * as React from "react";
import { useRouter } from "next/navigation";
import { ArrowDownToLine, Check, History, MessageSquare, Trash2, WandSparkles } from "lucide-react";
import { Button } from "@/components/ui/button";
import { toast } from "@/components/ui/toast";
import { ConfirmDialog } from "@/components/common/confirm-dialog";
import { RowMenu } from "@/components/projects/row-menu";
import { api, useApi } from "@/lib/client/api";
import { errorMessage } from "@/lib/client/humanize";
import { truncate } from "@/lib/utils";
import type { PromptPreset, PublicPrompt } from "@/lib/client/types";
import type { ActionSheetItem } from "@/components/ui/sheet";

interface PresetsResponse {
  promptPresets: PromptPreset[];
}

/**
 * Legacy `prompt_presets` (pre-library system prompts). They still work in chat via `?prompt=<id>`;
 * "Import to library" copies one into the new prompt library as a `system` prompt.
 */
export function LegacyPresets({ onImported }: { onImported?: (p: PublicPrompt) => void }) {
  const router = useRouter();
  const q = useApi<PresetsResponse>("/api/presets");
  const [imported, setImported] = React.useState<Set<string>>(new Set());
  const [busy, setBusy] = React.useState<string | null>(null);
  const [deleting, setDeleting] = React.useState<PromptPreset | null>(null);
  const presets = React.useMemo(() => q.data?.promptPresets ?? [], [q.data]);

  if (q.isLoading || !presets.length) return null;

  const importOne = async (p: PromptPreset) => {
    setBusy(p.id);
    try {
      const res = await api<{ prompt: PublicPrompt }>("/api/prompts", {
        method: "POST",
        json: { kind: "system", name: p.name, description: p.description ?? null, content: p.systemPrompt, defaultModelKey: p.defaultModelKey ?? null, tags: ["imported"], folder: "Imported presets" },
      });
      setImported((s) => new Set(s).add(p.id));
      toast.success(`Imported “${p.name}”`, "Find it in the library above. The legacy preset is unchanged.");
      onImported?.(res.prompt);
    } catch (e) {
      toast.error("Could not import", errorMessage(e));
    } finally {
      setBusy(null);
    }
  };
  const remove = async (p: PromptPreset) => {
    try {
      await api(`/api/presets?kind=prompt&id=${p.id}`, { method: "DELETE" });
      await q.mutate();
      toast.success("Legacy preset deleted");
    } catch (e) {
      toast.error("Could not delete", errorMessage(e));
      throw e;
    }
  };
  const items = (p: PromptPreset): (ActionSheetItem | "separator")[] => [
    { key: "import", label: imported.has(p.id) ? "Import again" : "Import to library", icon: <ArrowDownToLine />, onSelect: () => void importOne(p) },
    { key: "use", label: "Use in chat (legacy)", icon: <MessageSquare />, onSelect: () => router.push(`/app/chat?prompt=${p.id}`) },
    "separator",
    { key: "delete", label: "Delete legacy preset", icon: <Trash2 />, destructive: true, onSelect: () => setDeleting(p) },
  ];

  return (
    <section className="mt-10" aria-labelledby="legacy-presets">
      <div className="flex items-end justify-between gap-3">
        <div className="min-w-0">
          <h2 id="legacy-presets" className="flex items-center gap-1.5 text-[15px] font-semibold tracking-tight">
            <History className="size-4 text-fg-subtle" /> Legacy presets
          </h2>
          <p className="mt-0.5 text-[13px] text-fg-muted">System prompts saved before the library existed. They keep working in chat; import them to get variables, folders and tags.</p>
        </div>
        {presets.length > 1 ? (
          <Button
            variant="outline"
            size="sm"
            className="shrink-0"
            loading={busy === "*"}
            onClick={async () => {
              setBusy("*");
              for (const p of presets) if (!imported.has(p.id)) await importOne(p);
              setBusy(null);
            }}
          >
            <ArrowDownToLine /> Import all
          </Button>
        ) : null}
      </div>
      <ul className="mt-3 divide-y divide-hairline rounded-xl border border-border bg-bg-elevated">
        {presets.map((p) => (
          <li key={p.id} className="group flex min-h-[56px] items-center gap-3 px-3 py-2">
            <span className="flex size-9 shrink-0 items-center justify-center rounded-lg bg-bg-muted text-[16px] leading-none text-fg-muted" aria-hidden>
              {p.icon || <WandSparkles className="size-4" />}
            </span>
            <div className="min-w-0 flex-1">
              <p className="truncate text-[14px] font-medium leading-5">{p.name}</p>
              <p className="truncate text-[12px] leading-4 text-fg-subtle">{p.description || truncate(p.systemPrompt, 90)}</p>
            </div>
            {imported.has(p.id) ? (
              <span className="hidden items-center gap-1 text-[12px] text-success sm:inline-flex">
                <Check className="size-3.5" /> Imported
              </span>
            ) : (
              <Button size="sm" variant="secondary" className="hidden sm:inline-flex" loading={busy === p.id} onClick={() => importOne(p)}>
                <ArrowDownToLine /> Import
              </Button>
            )}
            <RowMenu items={items(p)} title={p.name} alwaysVisible />
          </li>
        ))}
      </ul>
      <ConfirmDialog open={deleting !== null} onOpenChange={(o) => !o && setDeleting(null)} destructive title={`Delete legacy preset “${deleting?.name ?? ""}”?`} description="Conversations that used it are not affected. Import it first if you want to keep it in the library." confirmLabel="Delete" onConfirm={() => (deleting ? remove(deleting) : Promise.resolve())} />
    </section>
  );
}