"use client";
import * as React from "react";
import { Star, X } from "lucide-react";
import { ResponsiveDialog } from "@/components/ui/sheet";
import { Button } from "@/components/ui/button";
import { Input, Textarea, Field, Label } from "@/components/ui/input";
import { Switch } from "@/components/ui/switch";
import { Segmented } from "@/components/ui/segmented";
import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from "@/components/ui/select";
import { toast } from "@/components/ui/toast";
import { ModelSelect } from "@/components/presets/model-select";
import { api, useApi } from "@/lib/client/api";
import { errorMessage } from "@/lib/client/humanize";
import { mergeVariables, labelFor, type PromptVariable } from "@/lib/prompts/variables";
import type { PublicPrompt, PromptKind, PublicProject } from "@/lib/client/types";
import { PROMPT_KIND_META, PROMPT_KIND_ORDER } from "./prompt-kind";
import { cn } from "@/lib/utils";

interface Draft {
  kind: PromptKind;
  name: string;
  description: string;
  content: string;
  variables: PromptVariable[];
  schemaText: string;
  folder: string;
  tags: string[];
  favorite: boolean;
  defaultModelKey: string | null;
  projectId: string | null;
}

const NONE = "__none__";
const EMPTY: Draft = { kind: "user", name: "", description: "", content: "", variables: [], schemaText: "", folder: "", tags: [], favorite: false, defaultModelKey: null, projectId: null };

function toDraft(p: PublicPrompt): Draft {
  return { kind: p.kind, name: p.name, description: p.description ?? "", content: p.content, variables: p.variables, schemaText: p.schema ? JSON.stringify(p.schema, null, 2) : "", folder: p.folder ?? "", tags: p.tags, favorite: p.favorite, defaultModelKey: p.defaultModelKey, projectId: p.projectId };
}

export interface PromptEditorSheetProps {
  open: boolean;
  onOpenChange: (o: boolean) => void;
  /** Existing prompt to edit; omit for a new one. */
  prompt?: PublicPrompt | null;
  /** Pre-filled values for a new prompt (e.g. `{ projectId }`, or `{ kind: "system", content }` from "Save as prompt"). */
  initial?: Partial<Pick<Draft, "kind" | "name" | "content" | "projectId" | "folder">>;
  folders?: string[];
  onSaved?: (p: PublicPrompt) => void;
}

/**
 * Prompt editor: kind, name, description, body with live `{{variable}}` detection (label / default / options /
 * required per variable), JSON schema for structured prompts, folder, tags, favourite, default model, project.
 */
export function PromptEditorSheet({ open, onOpenChange, prompt, initial, folders = [], onSaved }: PromptEditorSheetProps) {
  const [d, setD] = React.useState<Draft>(EMPTY);
  const [saving, setSaving] = React.useState(false);
  const [tagInput, setTagInput] = React.useState("");
  const nameRef = React.useRef<HTMLInputElement>(null);
  const { data: projData } = useApi<{ projects: PublicProject[] }>(open ? "/api/projects" : null);
  const projects = React.useMemo(() => (projData?.projects ?? []).filter((p) => !p.archived), [projData]);

  React.useEffect(() => {
    if (!open) return;
    const base = prompt ? toDraft(prompt) : { ...EMPTY, ...initial, variables: mergeVariables(initial?.content ?? "", []) };
    // eslint-disable-next-line react-hooks/set-state-in-effect
    setD(base);
    setTagInput("");
    const t = setTimeout(() => nameRef.current?.focus(), 80);
    return () => clearTimeout(t);
  }, [open, prompt, initial]);

  const set = (patch: Partial<Draft>) => setD((s) => ({ ...s, ...patch }));
  const setContent = (content: string) => setD((s) => ({ ...s, content, variables: mergeVariables(content, s.variables) }));
  const setVar = (name: string, patch: Partial<PromptVariable>) => setD((s) => ({ ...s, variables: s.variables.map((v) => (v.name === name ? { ...v, ...patch } : v)) }));

  const schemaError = React.useMemo(() => {
    if (d.kind !== "structured" || !d.schemaText.trim()) return null;
    try {
      const v = JSON.parse(d.schemaText);
      return v && typeof v === "object" && !Array.isArray(v) ? null : "Schema must be a JSON object";
    } catch (e) {
      return `Invalid JSON: ${(e as Error).message}`;
    }
  }, [d.kind, d.schemaText]);

  const valid = d.name.trim().length > 0 && d.content.trim().length > 0 && !schemaError;

  const addTag = (raw: string) => {
    const tags = raw
      .split(/[,\n]/)
      .map((t) => t.trim().toLowerCase())
      .filter(Boolean);
    if (!tags.length) return;
    set({ tags: Array.from(new Set([...d.tags, ...tags])).slice(0, 12) });
    setTagInput("");
  };

  const save = async () => {
    if (!valid || saving) return;
    setSaving(true);
    const body = {
      kind: d.kind,
      name: d.name.trim(),
      description: d.description.trim() || null,
      content: d.content,
      variables: d.variables.map((v) => ({ name: v.name, label: v.label?.trim() || undefined, default: v.default || undefined, required: v.required || undefined, options: v.options?.length ? v.options : undefined })),
      schema: d.kind === "structured" && d.schemaText.trim() ? (JSON.parse(d.schemaText) as Record<string, unknown>) : null,
      folder: d.folder.trim() || null,
      tags: d.tags,
      favorite: d.favorite,
      defaultModelKey: d.defaultModelKey,
      projectId: d.projectId,
    };
    try {
      const res = prompt ? await api<{ prompt: PublicPrompt }>(`/api/prompts/${prompt.id}`, { method: "PATCH", json: body }) : await api<{ prompt: PublicPrompt }>("/api/prompts", { method: "POST", json: body });
      toast.success(prompt ? "Prompt updated" : "Prompt saved to your library");
      onOpenChange(false);
      onSaved?.(res.prompt);
    } catch (e) {
      toast.error("Could not save prompt", errorMessage(e));
    } finally {
      setSaving(false);
    }
  };

  const meta = PROMPT_KIND_META[d.kind];

  return (
    <ResponsiveDialog
      open={open}
      onOpenChange={onOpenChange}
      title={prompt ? "Edit prompt" : "New prompt"}
      description={meta.description}
      size="lg"
      snap="full"
      footer={
        <div className="flex items-center gap-2">
          <button type="button" onClick={() => set({ favorite: !d.favorite })} className={cn("tap inline-flex h-11 items-center gap-1.5 rounded-md px-2 text-[13px] sm:h-9", d.favorite ? "text-warning" : "text-fg-muted hover:text-fg")} aria-pressed={d.favorite} aria-label="Favourite">
            <Star className={cn("size-4", d.favorite && "fill-current")} /> <span className="hidden sm:inline">{d.favorite ? "Favourite" : "Add to favourites"}</span>
          </button>
          <div className="flex-1" />
          <Button variant="ghost" onClick={() => onOpenChange(false)} disabled={saving}>
            Cancel
          </Button>
          <Button loading={saving} disabled={!valid} onClick={save}>
            {prompt ? "Save changes" : "Save prompt"}
          </Button>
        </div>
      }
    >
      <form
        className="space-y-4 pt-1"
        onSubmit={(e) => {
          e.preventDefault();
          void save();
        }}
      >
        <Segmented ariaLabel="Prompt kind" value={d.kind} onChange={(k) => set({ kind: k })} options={PROMPT_KIND_ORDER.map((k) => ({ value: k, label: PROMPT_KIND_META[k].short, icon: PROMPT_KIND_META[k].icon }))} fill className="w-full" />

        <Field label="Name" htmlFor="prompt-name">
          <Input ref={nameRef} id="prompt-name" value={d.name} onChange={(e) => set({ name: e.target.value })} placeholder={d.kind === "system" ? "Senior code reviewer" : "Summarize an article"} maxLength={120} required className="h-11 sm:h-9" />
        </Field>
        <Field label="Description" htmlFor="prompt-desc" hint="Optional — one line about when to use it.">
          <Input id="prompt-desc" value={d.description} onChange={(e) => set({ description: e.target.value })} placeholder="Reviews diffs for correctness, then style" maxLength={600} className="h-11 sm:h-9" />
        </Field>
        <Field label={d.kind === "system" ? "System prompt" : "Prompt"} htmlFor="prompt-content" hint={`${d.content.length.toLocaleString()} characters · use {{variable}} for fill-in fields`}>
          <Textarea id="prompt-content" value={d.content} onChange={(e) => setContent(e.target.value)} rows={8} maxLength={100_000} required className="min-h-[160px] font-mono text-[13px] leading-5" placeholder={d.kind === "system" ? "You are a senior engineer reviewing pull requests…" : "Summarize {{article}} in {{length}} bullet points for a {{audience}} audience."} spellCheck={false} />
        </Field>

        {d.variables.length ? (
          <div className="space-y-2 rounded-xl bg-bg-subtle p-3">
            <div className="flex items-center justify-between">
              <Label>Variables ({d.variables.length})</Label>
              <span className="text-[11px] text-fg-subtle">Detected from the prompt</span>
            </div>
            <ul className="space-y-2">
              {d.variables.map((v) => (
                <li key={v.name} className="rounded-lg border border-border bg-bg-elevated p-2.5">
                  <div className="flex items-center gap-2">
                    <code className="rounded bg-bg-muted px-1.5 py-0.5 font-mono text-[12px] text-fg">{`{{${v.name}}}`}</code>
                    <div className="flex-1" />
                    <label className="inline-flex items-center gap-1.5 text-[12px] text-fg-muted">
                      Required <Switch size="sm" checked={Boolean(v.required)} onCheckedChange={(c) => setVar(v.name, { required: c })} aria-label={`${v.name} required`} />
                    </label>
                  </div>
                  <div className="mt-2 grid gap-2 sm:grid-cols-3">
                    <Input value={v.label ?? ""} onChange={(e) => setVar(v.name, { label: e.target.value })} placeholder={`Label (${labelFor({ name: v.name })})`} maxLength={80} className="h-10 sm:h-8 sm:text-[13px]" aria-label={`${v.name} label`} />
                    <Input value={v.default ?? ""} onChange={(e) => setVar(v.name, { default: e.target.value })} placeholder="Default value" maxLength={4000} className="h-10 sm:h-8 sm:text-[13px]" aria-label={`${v.name} default`} />
                    <Input
                      value={(v.options ?? []).join(", ")}
                      onChange={(e) =>
                        setVar(v.name, {
                          options: e.target.value
                            .split(",")
                            .map((o) => o.trim())
                            .filter(Boolean),
                        })
                      }
                      onBlur={(e) => setVar(v.name, { options: Array.from(new Set(e.target.value.split(",").map((o) => o.trim()).filter(Boolean))) })}
                      placeholder="Options (comma-separated)"
                      className="h-10 sm:h-8 sm:text-[13px]"
                      aria-label={`${v.name} options`}
                    />
                  </div>
                </li>
              ))}
            </ul>
          </div>
        ) : null}

        {d.kind === "structured" ? (
          <Field label="JSON schema" htmlFor="prompt-schema" error={schemaError} hint={schemaError ? undefined : "Requested as response_format json_schema on models that support structured output."}>
            <Textarea id="prompt-schema" value={d.schemaText} onChange={(e) => set({ schemaText: e.target.value })} rows={6} className="min-h-[120px] font-mono text-[12.5px] leading-5" placeholder={'{\n  "type": "object",\n  "properties": { "summary": { "type": "string" } },\n  "required": ["summary"],\n  "additionalProperties": false\n}'} spellCheck={false} />
          </Field>
        ) : null}

        <div className="grid gap-4 sm:grid-cols-2">
          <Field label="Folder" htmlFor="prompt-folder" hint="Type a new name or pick an existing folder.">
            <Input id="prompt-folder" list="prompt-folders" value={d.folder} onChange={(e) => set({ folder: e.target.value })} placeholder="Writing, Coding, Clients…" maxLength={60} className="h-11 sm:h-9" />
            <datalist id="prompt-folders">
              {folders.map((f) => (
                <option key={f} value={f} />
              ))}
            </datalist>
          </Field>
          <Field label="Tags" htmlFor="prompt-tags" hint="Press Enter or comma to add.">
            <div className="flex min-h-11 flex-wrap items-center gap-1 rounded-md border border-border bg-bg-elevated px-2 py-1 focus-within:border-accent focus-within:ring-2 focus-within:ring-accent/25 sm:min-h-9">
              {d.tags.map((t) => (
                <span key={t} className="inline-flex items-center gap-0.5 rounded-full bg-bg-muted px-2 py-0.5 text-[12px]">
                  #{t}
                  <button type="button" onClick={() => set({ tags: d.tags.filter((x) => x !== t) })} className="tap -mr-1 rounded-full p-0.5 text-fg-subtle hover:text-fg" aria-label={`Remove tag ${t}`}>
                    <X className="size-3" />
                  </button>
                </span>
              ))}
              <input
                id="prompt-tags"
                value={tagInput}
                onChange={(e) => (e.target.value.includes(",") ? addTag(e.target.value) : setTagInput(e.target.value))}
                onKeyDown={(e) => {
                  if (e.key === "Enter") {
                    e.preventDefault();
                    addTag(tagInput);
                  } else if (e.key === "Backspace" && !tagInput && d.tags.length) set({ tags: d.tags.slice(0, -1) });
                }}
                onBlur={() => addTag(tagInput)}
                placeholder={d.tags.length ? "" : "review, email, fr"}
                className="min-w-[80px] flex-1 bg-transparent text-[15px] outline-none placeholder:text-fg-subtle sm:text-sm"
                maxLength={32}
              />
            </div>
          </Field>
        </div>

        <div className="grid gap-4 sm:grid-cols-2">
          <Field label="Default model" hint="Optional. Only connected providers are listed.">
            <ModelSelect value={d.defaultModelKey} onChange={(k) => set({ defaultModelKey: k })} allowNone noneLabel="Current chat model" className="h-11 sm:h-9" />
          </Field>
          <Field label="Project" hint="Optional. Project prompts show up on the project page.">
            <Select value={d.projectId ?? NONE} onValueChange={(v) => set({ projectId: v === NONE ? null : v })}>
              <SelectTrigger className="h-11 sm:h-9" aria-label="Project">
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value={NONE}>No project</SelectItem>
                {projects.map((p) => (
                  <SelectItem key={p.id} value={p.id}>
                    <span className="flex items-center gap-2">
                      <span aria-hidden>{p.icon ?? "◆"}</span> {p.name}
                    </span>
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
          </Field>
        </div>
      </form>
    </ResponsiveDialog>
  );
}