"use client";
import * as React from "react";
import { Check } from "lucide-react";
import { ResponsiveDialog } from "@/components/ui/sheet";
import { Button } from "@/components/ui/button";
import { Input, Textarea, Field } from "@/components/ui/input";
import { toast } from "@/components/ui/toast";
import { api } from "@/lib/client/api";
import { errorMessage } from "@/lib/client/humanize";
import { invalidateProjects } from "@/components/app/store";
import { ProjectIcon, PROJECT_COLORS, PROJECT_EMOJIS } from "./project-icon";
import type { PublicProject } from "@/lib/client/types";
import { cn } from "@/lib/utils";

interface Draft {
  name: string;
  icon: string;
  color: string;
  description: string;
}

/**
 * Create / edit a project (name, emoji icon, colour, description). Bottom sheet on phones, dialog on desktop.
 * Instructions, models, settings and notes live on the project page.
 */
export function ProjectFormSheet({ open, onOpenChange, project, onSaved }: { open: boolean; onOpenChange: (o: boolean) => void; project?: PublicProject | null; onSaved?: (p: PublicProject) => void }) {
  const [draft, setDraft] = React.useState<Draft>({ name: "", icon: "", color: "", description: "" });
  const [saving, setSaving] = React.useState(false);
  const nameRef = React.useRef<HTMLInputElement>(null);

  React.useEffect(() => {
    if (!open) return;
    // eslint-disable-next-line react-hooks/set-state-in-effect
    setDraft({ name: project?.name ?? "", icon: project?.icon ?? "", color: project?.color ?? "", description: project?.description ?? "" });
    const t = setTimeout(() => nameRef.current?.focus(), 80);
    return () => clearTimeout(t);
  }, [open, project]);

  const set = (patch: Partial<Draft>) => setDraft((d) => ({ ...d, ...patch }));
  const valid = draft.name.trim().length > 0;

  const save = async () => {
    if (!valid || saving) return;
    setSaving(true);
    const body = { name: draft.name.trim(), icon: draft.icon.trim() || null, color: draft.color || null, description: draft.description.trim() || null };
    try {
      const res = project ? await api<{ project: PublicProject }>(`/api/projects/${project.id}`, { method: "PATCH", json: body }) : await api<{ project: PublicProject }>("/api/projects", { method: "POST", json: body });
      await invalidateProjects();
      toast.success(project ? "Project updated" : "Project created");
      onOpenChange(false);
      onSaved?.(res.project);
    } catch (e) {
      toast.error(project ? "Could not update project" : "Could not create project", errorMessage(e));
    } finally {
      setSaving(false);
    }
  };

  return (
    <ResponsiveDialog
      open={open}
      onOpenChange={onOpenChange}
      title={project ? "Edit project" : "New project"}
      description={project ? undefined : "Group chats, files, prompts and instructions."}
      size="md"
      footer={
        <div className="flex gap-2 sm:justify-end">
          <Button variant="ghost" className="flex-1 sm:flex-none" onClick={() => onOpenChange(false)} disabled={saving}>
            Cancel
          </Button>
          <Button className="flex-1 sm:flex-none" loading={saving} disabled={!valid} onClick={save}>
            {project ? "Save changes" : "Create project"}
          </Button>
        </div>
      }
    >
      <form
        className="space-y-5 pt-1"
        onSubmit={(e) => {
          e.preventDefault();
          void save();
        }}
      >
        <div className="flex items-center gap-3">
          <ProjectIcon icon={draft.icon} color={draft.color} size="xl" />
          <div className="min-w-0 flex-1">
            <Field label="Name" htmlFor="project-name">
              <Input ref={nameRef} id="project-name" value={draft.name} onChange={(e) => set({ name: e.target.value })} placeholder="Research, Client X, Side project…" maxLength={80} required className="h-11 sm:h-9" />
            </Field>
          </div>
        </div>

        <Field label="Icon" hint="Pick one or paste any emoji.">
          <div className="flex flex-wrap gap-1.5">
            <Input value={draft.icon} onChange={(e) => set({ icon: e.target.value.slice(0, 4) })} placeholder="✨" maxLength={4} aria-label="Custom emoji" className="h-10 w-14 text-center text-lg sm:h-9" />
            {PROJECT_EMOJIS.map((e) => (
              <button key={e} type="button" onClick={() => set({ icon: draft.icon === e ? "" : e })} className={cn("flex size-10 items-center justify-center rounded-md text-[18px] transition-colors sm:size-9", draft.icon === e ? "bg-accent-soft ring-2 ring-accent/50" : "bg-bg-muted hover:bg-border")} aria-label={`Use ${e}`} aria-pressed={draft.icon === e}>
                {e}
              </button>
            ))}
          </div>
        </Field>

        <Field label="Colour">
          <div className="flex flex-wrap gap-2" role="radiogroup" aria-label="Project colour">
            <button type="button" role="radio" aria-checked={!draft.color} onClick={() => set({ color: "" })} className={cn("flex size-10 items-center justify-center rounded-full border border-dashed text-[11px] text-fg-subtle sm:size-8", !draft.color ? "border-fg" : "border-border-strong")} aria-label="No colour">
              {!draft.color ? <Check className="size-4" /> : "—"}
            </button>
            {PROJECT_COLORS.map((c) => (
              <button key={c} type="button" role="radio" aria-checked={draft.color === c} onClick={() => set({ color: c })} className={cn("flex size-10 items-center justify-center rounded-full ring-offset-2 ring-offset-bg-elevated transition-shadow sm:size-8", draft.color === c && "ring-2 ring-fg")} style={{ backgroundColor: c }} aria-label={`Colour ${c}`}>
                {draft.color === c ? <Check className="size-4 text-white" /> : null}
              </button>
            ))}
          </div>
        </Field>

        <Field label="Description" htmlFor="project-desc" hint="Optional — shown on the project card.">
          <Textarea id="project-desc" value={draft.description} onChange={(e) => set({ description: e.target.value })} rows={2} maxLength={600} placeholder="What this project is about" className="min-h-[64px]" />
        </Field>
      </form>
    </ResponsiveDialog>
  );
}