"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, Settings2, StickyNote, Trash2, WandSparkles } from "lucide-react";
import { useApp, invalidateProjects, invalidateConversations } from "@/components/app/store";
import { api, useApi, ClientApiError } from "@/lib/client/api";
import { errorMessage } from "@/lib/client/humanize";
import { Button } from "@/components/ui/button";
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 { ProjectDetail as Detail, PublicProject, PublicPrompt } from "@/lib/client/types";
import { formatTokens, formatUsd, formatRelative } from "@/lib/utils";
import { FileList } from "@/components/library/file-list";
import { UploadButton } from "@/components/library/upload-button";
import { PromptCard } from "@/components/prompts/prompt-card";
import { PromptEditorSheet } from "@/components/prompts/prompt-editor-sheet";
import { PromptUseSheet, insertPromptIntoChat } from "@/components/prompts/prompt-use-sheet";
import { variablesToAsk } from "@/lib/prompts/variables";
import { WorkspacePageHeader, WorkspacePageBody } from "./page-header";
import { ProjectFormSheet } from "./project-form-sheet";
import { ProjectIcon } from "./project-icon";
import { RowMenu } from "./row-menu";
import { ProjectConversations } from "./project-conversations";
import { ProjectSetup } from "./project-setup";
import { ProjectNotes } from "./project-notes";

type Tab = "chats" | "files" | "prompts" | "setup" | "notes";
const TABS: Tab[] = ["chats", "files", "prompts", "setup", "notes"];

export function ProjectDetail({ id }: { id: string }) {
  const router = useRouter();
  const params = useSearchParams();
  const { activeProjectId, setActiveProjectId } = useApp();
  const { data, error, isLoading, mutate } = useApi<Detail>(`/api/projects/${id}`);
  const { data: projData } = useApi<{ projects: PublicProject[] }>("/api/projects");
  const initialTab = params.get("tab");
  const [tab, setTab] = React.useState<Tab>(TABS.includes(initialTab as Tab) ? (initialTab as Tab) : "chats");
  const [editing, setEditing] = React.useState(false);
  const [deleting, setDeleting] = React.useState(false);
  const [promptEditor, setPromptEditor] = React.useState<{ open: boolean; prompt: PublicPrompt | null }>({ open: false, prompt: null });
  const [using, setUsing] = React.useState<PublicPrompt | null>(null);
  const [deletingPrompt, setDeletingPrompt] = React.useState<PublicPrompt | null>(null);

  const changeTab = (t: Tab) => {
    setTab(t);
    const url = new URL(window.location.href);
    if (t === "chats") url.searchParams.delete("tab");
    else url.searchParams.set("tab", t);
    window.history.replaceState(null, "", url.toString());
  };

  const project = data?.project;
  const isActive = project?.id === activeProjectId;

  const newChat = () => {
    if (!project) return;
    setActiveProjectId(project.id);
    router.push("/app/chat");
  };
  const patch = async (body: Record<string, unknown>, ok: string) => {
    try {
      await api(`/api/projects/${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 () => {
    try {
      await api(`/api/projects/${id}`, { method: "DELETE" });
      if (isActive) setActiveProjectId(null);
      await Promise.all([invalidateProjects(), invalidateConversations()]);
      toast.success("Project deleted", "Its chats were kept.");
      router.replace("/app/projects");
    } catch (e) {
      toast.error("Could not delete project", errorMessage(e));
      throw e;
    }
  };

  const runPrompt = (p: PublicPrompt) => {
    if (variablesToAsk(p.variables).length) setUsing(p);
    else void insertPromptIntoChat(p, {}, router).catch((e) => toast.error("Could not use prompt", errorMessage(e)));
  };
  const promptActions = {
    onUse: runPrompt,
    onEdit: (p: PublicPrompt) => setPromptEditor({ open: true, prompt: p }),
    onToggleFavorite: async (p: PublicPrompt) => {
      await api(`/api/prompts/${p.id}`, { method: "PATCH", json: { favorite: !p.favorite } });
      await mutate();
    },
    onDelete: (p: PublicPrompt) => setDeletingPrompt(p),
  };

  const menuItems: (ActionSheetItem | "separator")[] = project
    ? [
        { key: "edit", label: "Edit name, icon, colour", icon: <Pencil />, onSelect: () => setEditing(true) },
        isActive ? { key: "inactive", label: "Clear active project", icon: <CircleOff />, onSelect: () => setActiveProjectId(null) } : { key: "active", label: "Set as active project", icon: <CheckCircle2 />, onSelect: () => setActiveProjectId(project.id), disabled: project.archived },
        "separator",
        { key: "archive", label: project.archived ? "Unarchive" : "Archive", icon: project.archived ? <ArchiveRestore /> : <Archive />, onSelect: () => void patch({ archived: !project.archived }, project.archived ? "Project restored" : "Project archived") },
        { key: "delete", label: "Delete project", icon: <Trash2 />, destructive: true, onSelect: () => setDeleting(true) },
      ]
    : [];

  if (error) {
    const notFound = error instanceof ClientApiError && error.status === 404;
    return (
      <div className="flex h-full min-h-0 flex-col">
        <WorkspacePageHeader title="Project" back="/app/projects" />
        <WorkspacePageBody>
          <EmptyState
            icon={<FolderKanban />}
            title={notFound ? "Project not found" : "Could not load project"}
            description={notFound ? "It may have been deleted." : errorMessage(error)}
            action={
              <Button asChild variant="outline">
                <Link href="/app/projects">All projects</Link>
              </Button>
            }
          />
        </WorkspacePageBody>
      </div>
    );
  }

  return (
    <div className="flex h-full min-h-0 flex-col">
      <WorkspacePageHeader
        back="/app/projects"
        leading={project ? <ProjectIcon icon={project.icon} color={project.color} size="sm" className="size-7 text-[15px]" /> : <Skeleton className="size-7 rounded-md" />}
        title={project ? project.name : <Skeleton className="h-4 w-40" />}
        subtitle={project ? (isActive ? "Active project · new chats start here" : project.archived ? "Archived" : `${data.stats.conversations} chats · ${data.stats.files} files`) : undefined}
        actions={
          project ? (
            <>
              <Button size="sm" onClick={newChat} disabled={project.archived}>
                <MessageSquarePlus /> <span className="hidden sm:inline">New chat in project</span>
                <span className="sm:hidden">New chat</span>
              </Button>
              <RowMenu items={menuItems} title={project.name} alwaysVisible />
            </>
          ) : null
        }
      />

      <WorkspacePageBody>
        {isLoading && !data ? (
          <div className="space-y-4">
            <Skeleton className="h-16" />
            <Skeleton className="h-9 w-80 max-w-full" />
            <Skeleton className="h-48" />
          </div>
        ) : project && data ? (
          <>
            {project.description || data.stats.conversations || data.stats.files ? (
              <section className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
                {project.description ? <p className="max-w-2xl text-[14px] text-fg-muted">{project.description}</p> : <span />}
                <dl className="grid shrink-0 grid-cols-4 gap-x-4 text-[12px] text-fg-subtle tabular-nums sm:flex sm:gap-x-5">
                  <div>
                    <dt className="sr-only">Chats</dt>
                    <dd className="inline-flex items-center gap-1"><MessageSquare className="size-3.5" /> {data.stats.conversations}</dd>
                  </div>
                  <div>
                    <dt className="sr-only">Files</dt>
                    <dd className="inline-flex items-center gap-1"><FileText className="size-3.5" /> {data.stats.files}</dd>
                  </div>
                  <div>
                    <dt className="sr-only">Context tokens</dt>
                    <dd title="Estimated tokens of instructions + files">~{formatTokens(data.stats.fileTokens)} tok</dd>
                  </div>
                  <div>
                    <dt className="sr-only">Cost</dt>
                    <dd title="Total cost of chats in this project">{formatUsd(data.stats.totalCostUsd)}</dd>
                  </div>
                </dl>
              </section>
            ) : null}

            <Segmented
              ariaLabel="Project sections"
              value={tab}
              onChange={changeTab}
              className="mt-4 w-full sm:w-auto"
              options={[
                { value: "chats", label: "Chats", icon: <MessageSquare />, count: data.stats.conversations },
                { value: "files", label: "Files", icon: <FileText />, count: data.stats.files },
                { value: "prompts", label: "Prompts", icon: <WandSparkles />, count: data.stats.prompts },
                { value: "setup", label: "Instructions & models", icon: <Settings2 /> },
                { value: "notes", label: "Notes", icon: <StickyNote /> },
              ]}
            />

            <div className="mt-4">
              {tab === "chats" ? <ProjectConversations projectId={project.id} conversations={data.conversations} onChanged={() => mutate()} onNewChat={newChat} /> : null}

              {tab === "files" ? (
                <div className="space-y-3">
                  <div className="flex items-center gap-2">
                    <p className="text-[13px] text-fg-muted tabular-nums">
                      {data.files.length} file{data.files.length === 1 ? "" : "s"}
                      {data.stats.fileTokens ? ` · ~${formatTokens(data.stats.fileTokens)} tokens` : ""}
                    </p>
                    <div className="flex-1" />
                    <Button asChild size="sm" variant="ghost">
                      <Link href={`/app/library?project=${project.id}`}>Open library</Link>
                    </Button>
                    <UploadButton size="sm" projectId={project.id} onUploaded={() => mutate()} />
                  </div>
                  <FileList files={data.files} projects={projData?.projects} onChanged={() => mutate()} contextProjectId={project.id} emptyTitle="No files in this project" emptyDescription="Upload PDFs, images, code or data. Attach them to any chat from the composer's “From library” option." emptyAction={<UploadButton projectId={project.id} onUploaded={() => mutate()} />} />
                </div>
              ) : null}

              {tab === "prompts" ? (
                <div className="space-y-3">
                  <div className="flex items-center gap-2">
                    <p className="text-[13px] text-fg-muted tabular-nums">
                      {data.prompts.length} prompt{data.prompts.length === 1 ? "" : "s"}
                    </p>
                    <div className="flex-1" />
                    <Button asChild size="sm" variant="ghost">
                      <Link href="/app/prompts">Open prompt library</Link>
                    </Button>
                    <Button size="sm" onClick={() => setPromptEditor({ open: true, prompt: null })}>
                      <Plus /> New prompt
                    </Button>
                  </div>
                  {data.prompts.length === 0 ? (
                    <EmptyState
                      icon={<WandSparkles />}
                      title="No prompts in this project"
                      description="Save the prompts you reuse for this work — with {{variables}} to fill in before sending."
                      action={
                        <Button onClick={() => setPromptEditor({ open: true, prompt: null })}>
                          <Plus /> New prompt
                        </Button>
                      }
                    />
                  ) : (
                    <ul className="divide-y divide-hairline rounded-xl border border-border bg-bg-elevated">
                      {data.prompts.map((p) => (
                        <PromptCard key={p.id} prompt={p} actions={promptActions} compact />
                      ))}
                    </ul>
                  )}
                </div>
              ) : null}

              {tab === "setup" ? <ProjectSetup project={project} onSaved={() => mutate()} /> : null}
              {tab === "notes" ? <ProjectNotes project={project} onSaved={() => mutate()} /> : null}
            </div>

            {data.stats.lastActivityAt ? <p className="mt-8 text-[11.5px] text-fg-subtle">Last activity {formatRelative(data.stats.lastActivityAt)} · created {formatRelative(project.createdAt)}</p> : null}
          </>
        ) : null}
      </WorkspacePageBody>

      <ProjectFormSheet open={editing} onOpenChange={setEditing} project={project ?? null} onSaved={() => mutate()} />
      <ConfirmDialog open={deleting} onOpenChange={setDeleting} destructive title={`Delete “${project?.name ?? ""}”?`} description={`Chats stay in your history (${data?.stats.conversations ?? 0}); the project's files (${data?.stats.files ?? 0}) are deleted and its prompts (${data?.stats.prompts ?? 0}) are detached.`} confirmLabel="Delete project" onConfirm={remove} />
      <PromptEditorSheet open={promptEditor.open} onOpenChange={(o) => setPromptEditor((s) => ({ ...s, open: o }))} prompt={promptEditor.prompt} initial={{ projectId: id }} onSaved={() => mutate()} />
      <PromptUseSheet prompt={using} open={using !== null} onOpenChange={(o) => !o && setUsing(null)} />
      <ConfirmDialog
        open={deletingPrompt !== null}
        onOpenChange={(o) => !o && setDeletingPrompt(null)}
        destructive
        title={`Delete “${deletingPrompt?.name ?? ""}”?`}
        confirmLabel="Delete"
        onConfirm={async () => {
          if (!deletingPrompt) return;
          await api(`/api/prompts/${deletingPrompt.id}`, { method: "DELETE" });
          await mutate();
          toast.success("Prompt deleted");
        }}
      />
    </div>
  );
}