"use client";
import * as React from "react";
import Link from "next/link";
import { useRouter, useSearchParams } from "next/navigation";
import { Archive, ArchiveRestore, CheckCircle2, CircleOff, FileText, FolderKanban, MessageSquare, MessageSquarePlus, Pencil, Plus, Search, Trash2, WandSparkles } from "lucide-react";
import { useApp, invalidateProjects, invalidateConversations } from "@/components/app/store";
import { api, useApi } from "@/lib/client/api";
import { errorMessage } from "@/lib/client/humanize";
import { useIsMobile, useLongPress } from "@/lib/client/hooks";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Segmented } from "@/components/ui/segmented";
import { EmptyState, Skeleton } from "@/components/ui/misc";
import { toast } from "@/components/ui/toast";
import { ConfirmDialog } from "@/components/common/confirm-dialog";
import type { ActionSheetItem } from "@/components/ui/sheet";
import type { PublicProject } from "@/lib/client/types";
import { formatRelative, cn } from "@/lib/utils";
import { WorkspacePageHeader, WorkspacePageBody } from "./page-header";
import { ProjectFormSheet } from "./project-form-sheet";
import { ProjectIcon } from "./project-icon";
import { RowMenu } from "./row-menu";

type Scope = "active" | "archived";

export function ProjectsView() {
  const router = useRouter();
  const params = useSearchParams();
  const { activeProjectId, setActiveProjectId } = useApp();
  const { data, isLoading, error, mutate } = useApi<{ projects: PublicProject[] }>("/api/projects?archived=1");
  const [scope, setScope] = React.useState<Scope>("active");
  const [q, setQ] = React.useState("");
  const [form, setForm] = React.useState<{ open: boolean; project: PublicProject | null }>({ open: false, project: null });
  const [deleting, setDeleting] = React.useState<PublicProject | null>(null);

  // `/app/projects?new=1` (sidebar "+") opens the create sheet once.
  const wantsNew = params.get("new") === "1";
  React.useEffect(() => {
    if (!wantsNew) return;
    // eslint-disable-next-line react-hooks/set-state-in-effect
    setForm({ open: true, project: null });
    router.replace("/app/projects");
  }, [wantsNew, router]);

  const all = React.useMemo(() => data?.projects ?? [], [data]);
  const counts = React.useMemo(() => ({ active: all.filter((p) => !p.archived).length, archived: all.filter((p) => p.archived).length }), [all]);
  const list = React.useMemo(() => {
    const s = q.trim().toLowerCase();
    return all.filter((p) => (scope === "archived" ? p.archived : !p.archived)).filter((p) => (s ? [p.name, p.description ?? ""].some((x) => x.toLowerCase().includes(s)) : true));
  }, [all, scope, q]);

  const patch = async (p: PublicProject, body: Record<string, unknown>, ok: string) => {
    try {
      await api(`/api/projects/${p.id}`, { method: "PATCH", json: body });
      await Promise.all([mutate(), invalidateProjects()]);
      toast.success(ok);
    } catch (e) {
      toast.error("Could not update project", errorMessage(e));
    }
  };
  const remove = async (p: PublicProject) => {
    try {
      await api(`/api/projects/${p.id}`, { method: "DELETE" });
      if (activeProjectId === p.id) setActiveProjectId(null);
      await Promise.all([mutate(), invalidateProjects(), invalidateConversations()]);
      toast.success("Project deleted", "Its chats were kept.");
    } catch (e) {
      toast.error("Could not delete project", errorMessage(e));
      throw e;
    }
  };
  const newChat = (p: PublicProject) => {
    setActiveProjectId(p.id);
    router.push("/app/chat");
  };

  const itemsFor = (p: PublicProject): (ActionSheetItem | "separator")[] => [
    { key: "open", label: "Open", icon: <FolderKanban />, onSelect: () => router.push(`/app/projects/${p.id}`) },
    { key: "chat", label: "New chat in this project", icon: <MessageSquarePlus />, onSelect: () => newChat(p), disabled: p.archived },
    activeProjectId === p.id ? { key: "inactive", label: "Clear active project", icon: <CircleOff />, onSelect: () => setActiveProjectId(null) } : { key: "active", label: "Set as active project", icon: <CheckCircle2 />, onSelect: () => setActiveProjectId(p.id), disabled: p.archived },
    { key: "edit", label: "Edit", icon: <Pencil />, onSelect: () => setForm({ open: true, project: p }) },
    "separator",
    { key: "archive", label: p.archived ? "Unarchive" : "Archive", icon: p.archived ? <ArchiveRestore /> : <Archive />, onSelect: () => void patch(p, { archived: !p.archived }, p.archived ? "Project restored" : "Project archived") },
    { key: "delete", label: "Delete", icon: <Trash2 />, destructive: true, onSelect: () => setDeleting(p) },
  ];

  return (
    <div className="flex h-full min-h-0 flex-col">
      <WorkspacePageHeader
        title="Projects"
        subtitle={all.length ? `${counts.active} active${counts.archived ? ` · ${counts.archived} archived` : ""}` : undefined}
        actions={
          <Button size="sm" onClick={() => setForm({ open: true, project: null })}>
            <Plus /> <span className="hidden sm:inline">New project</span>
            <span className="sm:hidden">New</span>
          </Button>
        }
      />
      <WorkspacePageBody>
        {all.length > 0 ? (
          <div className="flex flex-col gap-3 sm:flex-row sm:items-center">
            <Segmented ariaLabel="Project scope" value={scope} onChange={setScope} options={[{ value: "active", label: "Active", count: counts.active }, { value: "archived", label: "Archived", count: counts.archived }]} />
            {all.length > 4 ? (
              <div className="relative sm:ml-auto sm:w-64">
                <Search className="pointer-events-none absolute left-2.5 top-1/2 size-4 -translate-y-1/2 text-fg-subtle" />
                <Input value={q} onChange={(e) => setQ(e.target.value)} placeholder="Search projects…" className="h-10 pl-8 sm:h-9" aria-label="Search projects" />
              </div>
            ) : null}
          </div>
        ) : null}

        <div className={cn(all.length > 0 && "mt-4")}>
          {isLoading && !data ? (
            <ul className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
              {Array.from({ length: 6 }).map((_, i) => (
                <li key={i}>
                  <Skeleton className="h-36 rounded-xl" />
                </li>
              ))}
            </ul>
          ) : error ? (
            <EmptyState title="Could not load projects" description={errorMessage(error)} action={<Button variant="outline" onClick={() => mutate()}>Retry</Button>} />
          ) : all.length === 0 ? (
            <EmptyState
              icon={<FolderKanban />}
              title="No projects yet"
              description="Group chats, files, prompts and instructions. New chats in a project start with its system instructions and preferred models."
              action={
                <Button onClick={() => setForm({ open: true, project: null })}>
                  <Plus /> Create your first project
                </Button>
              }
            />
          ) : list.length === 0 ? (
            <EmptyState title={scope === "archived" ? "No archived projects" : "No matches"} description={q ? `Nothing matches “${q}”.` : scope === "archived" ? "Archived projects are hidden from the sidebar and the switcher." : undefined} />
          ) : (
            <ul className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
              {list.map((p) => (
                <ProjectCard key={p.id} project={p} active={p.id === activeProjectId} items={itemsFor(p)} onNewChat={() => newChat(p)} />
              ))}
            </ul>
          )}
        </div>
      </WorkspacePageBody>

      <ProjectFormSheet open={form.open} onOpenChange={(o) => setForm((s) => ({ ...s, open: o }))} project={form.project} onSaved={(p) => { void mutate(); if (!form.project) router.push(`/app/projects/${p.id}`); }} />
      <ConfirmDialog open={deleting !== null} onOpenChange={(o) => !o && setDeleting(null)} destructive title={`Delete “${deleting?.name ?? ""}”?`} description={`Chats stay in your history (${deleting?.conversationCount ?? 0}); the project's files (${deleting?.fileCount ?? 0}) are deleted and its prompts (${deleting?.promptCount ?? 0}) are detached.`} confirmLabel="Delete project" onConfirm={() => (deleting ? remove(deleting) : Promise.resolve())} />
    </div>
  );
}

function ProjectCard({ project: p, active, items, onNewChat }: { project: PublicProject; active: boolean; items: (ActionSheetItem | "separator")[]; onNewChat: () => void }) {
  const isMobile = useIsMobile();
  const [menu, setMenu] = React.useState(false);
  const press = useLongPress({ onLongPress: () => setMenu(true), disabled: !isMobile });
  return (
    <li className={cn("group relative flex h-full flex-col rounded-xl border bg-bg-elevated p-4 transition-colors hover:border-border-strong", active ? "border-accent/60 shadow-[0_0_0_1px_var(--accent-soft)]" : "border-border", p.archived && "opacity-70")} {...press}>
      <div className="flex items-start gap-3">
        <Link href={`/app/projects/${p.id}`} className="shrink-0 rounded-lg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/40" aria-hidden tabIndex={-1}>
          <ProjectIcon icon={p.icon} color={p.color} size="lg" />
        </Link>
        <div className="min-w-0 flex-1">
          <h3 className="flex items-center gap-2 text-[15px] font-semibold leading-6">
            <Link href={`/app/projects/${p.id}`} className="truncate after:absolute after:inset-0 after:content-[''] focus-visible:outline-none">
              {p.name}
            </Link>
            {active ? <span className="relative z-10 inline-flex shrink-0 items-center gap-1 rounded-full bg-accent-soft px-1.5 py-0.5 text-[10px] font-medium uppercase tracking-wide text-accent">Active</span> : null}
            {p.archived ? <span className="relative z-10 shrink-0 rounded-full bg-bg-muted px-1.5 py-0.5 text-[10px] font-medium uppercase tracking-wide text-fg-subtle">Archived</span> : null}
          </h3>
          {p.description ? <p className="mt-0.5 line-clamp-2 text-[13px] text-fg-muted">{p.description}</p> : <p className="mt-0.5 text-[13px] text-fg-subtle">No description</p>}
        </div>
        <div className="relative z-10">
          <RowMenu items={items} title={p.name} open={menu} onOpenChange={setMenu} />
        </div>
      </div>
      <div className="mt-4 flex items-center gap-3 text-[12px] text-fg-muted tabular-nums">
        <span className="inline-flex items-center gap-1" title="Chats">
          <MessageSquare className="size-3.5 text-fg-subtle" /> {p.conversationCount}
        </span>
        <span className="inline-flex items-center gap-1" title="Files">
          <FileText className="size-3.5 text-fg-subtle" /> {p.fileCount}
        </span>
        <span className="inline-flex items-center gap-1" title="Prompts">
          <WandSparkles className="size-3.5 text-fg-subtle" /> {p.promptCount}
        </span>
        <span className="ml-auto text-fg-subtle">{formatRelative(p.updatedAt)}</span>
      </div>
      {!p.archived ? (
        <div className="relative z-10 mt-3 border-t border-border pt-3">
          <Button size="sm" variant="secondary" className="w-full sm:w-auto" onClick={onNewChat}>
            <MessageSquarePlus /> New chat here
          </Button>
        </div>
      ) : null}
    </li>
  );
}