"use client";
import * as React from "react";
import { GripVertical, RotateCcw, X } from "lucide-react";
import { useApp, invalidateProjects } from "@/components/app/store";
import { api } from "@/lib/client/api";
import { errorMessage } from "@/lib/client/humanize";
import { Button } from "@/components/ui/button";
import { Textarea, Field, Label } from "@/components/ui/input";
import { Badge } from "@/components/ui/badge";
import { toast } from "@/components/ui/toast";
import { ProviderIcon } from "@/components/brand/provider-icon";
import { ModelSelector } from "@/components/chat/model-selector";
import { ParametersForm, parameterChips, type Params } from "@/components/presets/parameters-form";
import { estimateTextTokens } from "@/lib/client/tokens";
import type { PublicProject } from "@/lib/client/types";
import { formatTokens, cn } from "@/lib/utils";

interface Draft {
  instructions: string;
  preferredModelKeys: string[];
  defaultSettings: Params;
}

const fromProject = (p: PublicProject): Draft => ({ instructions: p.instructions ?? "", preferredModelKeys: p.preferredModelKeys ?? [], defaultSettings: (p.defaultSettings ?? {}) as Params });
const same = (a: Draft, b: Draft) => a.instructions === b.instructions && JSON.stringify(a.preferredModelKeys) === JSON.stringify(b.preferredModelKeys) && JSON.stringify(a.defaultSettings) === JSON.stringify(b.defaultSettings);

/** "Instructions & models" tab: system instructions, preferred models (first = default), default generation settings. */
export function ProjectSetup({ project, onSaved }: { project: PublicProject; onSaved: () => Promise<unknown> | void }) {
  const { modelsByKey, connectedProviders } = useApp();
  const [draft, setDraft] = React.useState<Draft>(() => fromProject(project));
  const [saving, setSaving] = React.useState(false);
  const base = React.useMemo(() => fromProject(project), [project]);
  const dirty = !same(draft, base);

  // Re-sync when the project changes underneath (another tab saved, SWR refresh) and nothing is being edited.
  const lastId = React.useRef(project.updatedAt);
  React.useEffect(() => {
    if (lastId.current !== project.updatedAt) {
      lastId.current = project.updatedAt;
      setDraft(fromProject(project));
    }
  }, [project]);

  const selected = React.useMemo(() => new Set(draft.preferredModelKeys), [draft.preferredModelKeys]);
  const toggle = (key: string) =>
    setDraft((d) => {
      const has = d.preferredModelKeys.includes(key);
      if (!has && d.preferredModelKeys.length >= 8) {
        toast.warning("Up to 8 preferred models per project");
        return d;
      }
      return { ...d, preferredModelKeys: has ? d.preferredModelKeys.filter((k) => k !== key) : [...d.preferredModelKeys, key] };
    });
  const moveFirst = (key: string) => setDraft((d) => ({ ...d, preferredModelKeys: [key, ...d.preferredModelKeys.filter((k) => k !== key)] }));
  const firstModel = draft.preferredModelKeys[0] ? modelsByKey.get(draft.preferredModelKeys[0]) : null;
  const chips = parameterChips(draft.defaultSettings);

  const save = async () => {
    setSaving(true);
    try {
      await api(`/api/projects/${project.id}`, { method: "PATCH", json: { instructions: draft.instructions.trim() ? draft.instructions : null, preferredModelKeys: draft.preferredModelKeys, defaultSettings: draft.defaultSettings } });
      await Promise.all([onSaved(), invalidateProjects()]);
      toast.success("Project setup saved", "New chats in this project will use it.");
    } catch (e) {
      toast.error("Could not save", errorMessage(e));
    } finally {
      setSaving(false);
    }
  };

  return (
    <div className="space-y-6">
      <Field label="Instructions" htmlFor="project-instructions" hint={`Prepended as the system prompt of every new chat in this project · ~${formatTokens(estimateTextTokens(draft.instructions))} tokens`}>
        <Textarea id="project-instructions" value={draft.instructions} onChange={(e) => setDraft((d) => ({ ...d, instructions: e.target.value }))} rows={8} maxLength={50_000} className="min-h-[160px] font-mono text-[13px] leading-5" placeholder={"You are helping with the “Acme redesign” project. Always answer in French, prefer concise bullet points, and cite the file you used…"} spellCheck={false} />
      </Field>

      <div className="space-y-2">
        <div className="flex items-center justify-between gap-2">
          <Label>Preferred models</Label>
          <ModelSelector value={null} multiple selected={selected} onToggle={toggle} buttonLabel={draft.preferredModelKeys.length ? "Add or remove models" : "Choose models"} size="sm" />
        </div>
        {draft.preferredModelKeys.length === 0 ? (
          <p className="rounded-lg border border-dashed border-border px-3 py-3 text-[13px] text-fg-subtle">No preferred models — new chats use your current selection. The first model in this list becomes the default for the project.</p>
        ) : (
          <ul className="divide-y divide-hairline rounded-xl border border-border bg-bg-elevated">
            {draft.preferredModelKeys.map((key, i) => {
              const m = modelsByKey.get(key);
              const usable = m ? connectedProviders.has(m.provider) : false;
              return (
                <li key={key} className="flex min-h-[48px] items-center gap-2 px-2.5 py-1.5">
                  <GripVertical className="size-4 shrink-0 text-fg-subtle/60" aria-hidden />
                  {m ? <ProviderIcon provider={m.provider} size={15} /> : null}
                  <span className="min-w-0 flex-1 truncate text-[14px]">
                    {m?.displayName ?? key}
                    {i === 0 ? <span className="ml-2 rounded-full bg-accent-soft px-1.5 py-0.5 text-[10px] font-medium uppercase tracking-wide text-accent">Default</span> : null}
                    {m && !usable ? <span className="ml-2 text-[11px] text-warning">provider not connected</span> : null}
                  </span>
                  {i > 0 ? (
                    <Button variant="ghost" size="xs" onClick={() => moveFirst(key)} className="hidden sm:inline-flex">
                      Make default
                    </Button>
                  ) : null}
                  <Button variant="ghost" size="icon-sm" className="tap" onClick={() => toggle(key)} aria-label={`Remove ${m?.displayName ?? key}`}>
                    <X />
                  </Button>
                </li>
              );
            })}
          </ul>
        )}
      </div>

      <div className="space-y-2">
        <div className="flex items-center justify-between gap-2">
          <Label>Default settings</Label>
          {chips.length ? (
            <Button variant="ghost" size="xs" onClick={() => setDraft((d) => ({ ...d, defaultSettings: {} }))}>
              <RotateCcw /> Reset
            </Button>
          ) : null}
        </div>
        <p className="text-[12px] text-fg-subtle">{firstModel ? `Controls follow what ${firstModel.displayName} supports.` : "Generic controls — pick a default model above to see its exact parameter sheet."}</p>
        <div className="rounded-xl border border-border bg-bg-elevated p-3 sm:p-4">
          <ParametersForm compact value={draft.defaultSettings} onChange={(p) => setDraft((d) => ({ ...d, defaultSettings: p }))} model={firstModel ?? null} />
        </div>
        {chips.length ? (
          <div className="flex flex-wrap gap-1.5">
            {chips.map((c) => (
              <Badge key={c}>{c}</Badge>
            ))}
          </div>
        ) : null}
      </div>

      <div className={cn("sticky bottom-0 -mx-4 flex items-center gap-2 border-t border-border bg-bg/90 px-4 py-3 backdrop-blur sm:mx-0 sm:rounded-xl sm:border sm:px-3", !dirty && "opacity-0 pointer-events-none")} aria-hidden={!dirty}>
        <span className="text-[13px] text-fg-muted">Unsaved changes</span>
        <div className="flex-1" />
        <Button variant="ghost" onClick={() => setDraft(base)} disabled={saving}>
          Discard
        </Button>
        <Button loading={saving} onClick={save}>
          Save setup
        </Button>
      </div>
    </div>
  );
}