"use client";
import * as React from "react";
import { useRouter } from "next/navigation";
import { Copy, MessageSquarePlus } from "lucide-react";
import { ResponsiveDialog } from "@/components/ui/sheet";
import { Button } from "@/components/ui/button";
import { Input, Textarea, Field } from "@/components/ui/input";
import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from "@/components/ui/select";
import { toast } from "@/components/ui/toast";
import { api } from "@/lib/client/api";
import { errorMessage } from "@/lib/client/humanize";
import { useCopy } from "@/lib/client/hooks";
import { labelFor, renderTemplate, variablesToAsk, type PromptVariable } from "@/lib/prompts/variables";
import type { PublicPrompt, UsePromptResult } from "@/lib/client/types";
import { dispatchPromptInsert, promptChatHref, toInsertDetail } from "./insert";

/** Records the use, renders with `variables`, dispatches the insert event and navigates to the chat. */
export async function insertPromptIntoChat(prompt: Pick<PublicPrompt, "id" | "name">, variables: Record<string, string>, router: { push: (href: string) => void }) {
  const res = await api<UsePromptResult>(`/api/prompts/${prompt.id}/use`, { method: "POST", json: { variables } });
  dispatchPromptInsert(toInsertDetail(res, variables));
  router.push(promptChatHref(prompt.id, variables));
  toast.success(res.kind === "system" ? `System prompt “${prompt.name}” applied` : `“${prompt.name}” inserted`, res.missing.length ? `Left empty: ${res.missing.join(", ")}` : undefined);
  return res;
}

/**
 * Fill-in sheet for `{{variables}}`: one input (or select when `options` exist) per variable, live preview,
 * then "Insert into chat". Prompts without variables to ask should call `insertPromptIntoChat` directly.
 */
export function PromptUseSheet({ prompt, open, onOpenChange }: { prompt: PublicPrompt | null; open: boolean; onOpenChange: (o: boolean) => void }) {
  const router = useRouter();
  const [values, setValues] = React.useState<Record<string, string>>({});
  const [busy, setBusy] = React.useState(false);
  const [copied, copy] = useCopy();
  const firstRef = React.useRef<HTMLInputElement & HTMLTextAreaElement>(null);

  const vars: PromptVariable[] = React.useMemo(() => prompt?.variables ?? [], [prompt]);
  const ask = React.useMemo(() => variablesToAsk(vars), [vars]);

  React.useEffect(() => {
    if (!open || !prompt) return;
    // eslint-disable-next-line react-hooks/set-state-in-effect
    setValues(Object.fromEntries(vars.map((v) => [v.name, v.default ?? ""])));
    const t = setTimeout(() => firstRef.current?.focus(), 80);
    return () => clearTimeout(t);
  }, [open, prompt, vars]);

  const preview = React.useMemo(() => (prompt ? renderTemplate(prompt.content, values, vars) : null), [prompt, values, vars]);
  const missingRequired = ask.filter((v) => v.required && !values[v.name]?.trim()).map((v) => labelFor(v));

  const submit = async () => {
    if (!prompt || busy) return;
    setBusy(true);
    try {
      await insertPromptIntoChat(prompt, values, router);
      onOpenChange(false);
    } catch (e) {
      toast.error("Could not use prompt", errorMessage(e));
    } finally {
      setBusy(false);
    }
  };

  return (
    <ResponsiveDialog
      open={open && prompt !== null}
      onOpenChange={onOpenChange}
      title={prompt?.name ?? "Use prompt"}
      description={ask.length ? `Fill in ${ask.length} variable${ask.length === 1 ? "" : "s"} before inserting.` : "Review and insert into a new chat."}
      size="lg"
      snap="full"
      footer={
        <div className="flex gap-2 sm:justify-end">
          <Button variant="ghost" className="sm:flex-none" onClick={() => preview && copy(preview.text)} disabled={!preview}>
            <Copy /> {copied ? "Copied" : "Copy"}
          </Button>
          <div className="flex-1 sm:hidden" />
          <Button className="flex-1 sm:flex-none" loading={busy} disabled={missingRequired.length > 0} onClick={submit}>
            <MessageSquarePlus /> Insert into chat
          </Button>
        </div>
      }
    >
      <form
        className="space-y-4 pt-1"
        onSubmit={(e) => {
          e.preventDefault();
          void submit();
        }}
      >
        {vars.length ? (
          <div className="grid gap-3 sm:grid-cols-2">
            {vars.map((v, i) => {
              const id = `var-${v.name}`;
              const label = labelFor(v);
              const val = values[v.name] ?? "";
              return (
                <Field key={v.name} label={`${label}${v.required ? " *" : ""}`} htmlFor={id} hint={v.default && val === v.default ? "Using the default" : undefined} className={v.options?.length ? "" : val.length > 60 ? "sm:col-span-2" : ""}>
                  {v.options?.length ? (
                    <Select value={val || undefined} onValueChange={(x) => setValues((s) => ({ ...s, [v.name]: x }))}>
                      <SelectTrigger id={id} className="h-11 sm:h-9">
                        <SelectValue placeholder={`Choose ${label.toLowerCase()}`} />
                      </SelectTrigger>
                      <SelectContent>
                        {v.options.map((o) => (
                          <SelectItem key={o} value={o}>
                            {o}
                          </SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                  ) : val.length > 60 || val.includes("\n") ? (
                    <Textarea ref={i === 0 ? firstRef : undefined} id={id} value={val} onChange={(e) => setValues((s) => ({ ...s, [v.name]: e.target.value }))} rows={3} placeholder={v.default ? `Default: ${v.default}` : `{{${v.name}}}`} />
                  ) : (
                    <Input ref={i === 0 ? firstRef : undefined} id={id} value={val} onChange={(e) => setValues((s) => ({ ...s, [v.name]: e.target.value }))} placeholder={v.default ? `Default: ${v.default}` : `{{${v.name}}}`} className="h-11 sm:h-9" />
                  )}
                </Field>
              );
            })}
          </div>
        ) : null}
        {missingRequired.length ? <p className="text-[12px] text-warning">Required: {missingRequired.join(", ")}</p> : null}
        <Field label="Preview" hint={preview?.missing.length ? `Empty: ${preview.missing.join(", ")}` : undefined}>
          <pre className="max-h-[40dvh] overflow-auto whitespace-pre-wrap break-words rounded-lg border border-border bg-bg-subtle p-3 font-mono text-[12.5px] leading-5 text-fg-muted">{preview?.text || " "}</pre>
        </Field>
      </form>
    </ResponsiveDialog>
  );
}