"use client";
import * as React from "react";
import Link from "next/link";
import { Check, FolderMinus, MessageSquare, MessageSquarePlus, Plus, Search } from "lucide-react";
import { useApp, invalidateConversations, invalidateProjects } 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 { ResponsiveDialog, type ActionSheetItem } from "@/components/ui/sheet";
import { EmptyState, Skeleton } from "@/components/ui/misc";
import { toast } from "@/components/ui/toast";
import { ProviderIcon } from "@/components/brand/provider-icon";
import type { PublicConversation } from "@/lib/client/types";
import { formatRelative, cn } from "@/lib/utils";
import { RowMenu } from "./row-menu";

interface Unassigned {
  id: string;
  title: string;
  modelKey: string | null;
  updatedAt: string;
  messageCount: number;
}

/** Conversations tab: rows linking to chats, remove-from-project, and an "Add existing chats" picker. */
export function ProjectConversations({ projectId, conversations, onChanged, onNewChat }: { projectId: string; conversations: PublicConversation[]; onChanged: () => Promise<unknown> | void; onNewChat: () => void }) {
  const [adding, setAdding] = React.useState(false);

  const remove = async (c: PublicConversation) => {
    try {
      await api(`/api/projects/${projectId}`, { method: "POST", json: { action: "remove-conversations", conversationIds: [c.id] } });
      await Promise.all([onChanged(), invalidateConversations(), invalidateProjects()]);
      toast.success("Removed from project", "The chat is still in your history.");
    } catch (e) {
      toast.error("Could not remove chat", errorMessage(e));
    }
  };

  return (
    <div className="space-y-3">
      <div className="flex items-center gap-2">
        <p className="text-[13px] text-fg-muted tabular-nums">
          {conversations.length} chat{conversations.length === 1 ? "" : "s"}
        </p>
        <div className="flex-1" />
        <Button size="sm" variant="outline" onClick={() => setAdding(true)}>
          <Plus /> Add existing
        </Button>
        <Button size="sm" onClick={onNewChat}>
          <MessageSquarePlus /> New chat
        </Button>
      </div>
      {conversations.length === 0 ? (
        <EmptyState
          icon={<MessageSquare />}
          title="No chats in this project yet"
          description="Start a chat here — it will use the project's instructions and preferred models — or move existing chats in."
          action={
            <div className="flex flex-col gap-2 sm:flex-row">
              <Button onClick={onNewChat}>
                <MessageSquarePlus /> New chat in this project
              </Button>
              <Button variant="outline" onClick={() => setAdding(true)}>
                <Plus /> Add existing chats
              </Button>
            </div>
          }
        />
      ) : (
        <ul className="divide-y divide-hairline rounded-xl border border-border bg-bg-elevated">
          {conversations.map((c) => (
            <ConversationRow key={c.id} c={c} items={[{ key: "remove", label: "Remove from project", icon: <FolderMinus />, onSelect: () => void remove(c) }]} />
          ))}
        </ul>
      )}
      <AddConversationsSheet projectId={projectId} open={adding} onOpenChange={setAdding} onAdded={onChanged} />
    </div>
  );
}

function ConversationRow({ c, items }: { c: PublicConversation; items: (ActionSheetItem | "separator")[] }) {
  const { modelsByKey } = useApp();
  const isMobile = useIsMobile();
  const [menu, setMenu] = React.useState(false);
  const press = useLongPress({ onLongPress: () => setMenu(true), disabled: !isMobile });
  const model = c.modelKey ? modelsByKey.get(c.modelKey) : undefined;
  return (
    <li className="group flex min-h-[56px] items-center gap-3 px-3 py-2" {...press}>
      <Link href={`/app/chat/${c.id}`} className="flex min-w-0 flex-1 items-center gap-3">
        <span className="flex size-9 shrink-0 items-center justify-center rounded-lg bg-bg-muted text-fg-muted" aria-hidden>
          {c.provider ? <ProviderIcon provider={c.provider} size={16} /> : <MessageSquare className="size-4" />}
        </span>
        <span className="min-w-0 flex-1">
          <span className="block truncate text-[14px] font-medium leading-5">{c.title}</span>
          <span className="block truncate text-[12px] leading-4 text-fg-subtle tabular-nums">
            {model?.displayName ?? c.modelKey ?? "No model"} · {c.messageCount} message{c.messageCount === 1 ? "" : "s"} · {formatRelative(c.updatedAt)}
          </span>
        </span>
      </Link>
      <RowMenu items={items} title={c.title} open={menu} onOpenChange={setMenu} />
    </li>
  );
}

function AddConversationsSheet({ projectId, open, onOpenChange, onAdded }: { projectId: string; open: boolean; onOpenChange: (o: boolean) => void; onAdded: () => Promise<unknown> | void }) {
  const { modelsByKey } = useApp();
  const { data, isLoading } = useApi<{ conversations: Unassigned[] }>(open ? `/api/projects/${projectId}?unassigned=1` : null);
  const [selected, setSelected] = React.useState<Set<string>>(new Set());
  const [q, setQ] = React.useState("");
  const [busy, setBusy] = React.useState(false);
  React.useEffect(() => {
    if (!open) return;
    // eslint-disable-next-line react-hooks/set-state-in-effect
    setSelected(new Set());
    setQ("");
  }, [open]);
  const list = React.useMemo(() => {
    const s = q.trim().toLowerCase();
    return (data?.conversations ?? []).filter((c) => (s ? c.title.toLowerCase().includes(s) : true));
  }, [data, q]);
  const toggle = (id: string) =>
    setSelected((prev) => {
      const n = new Set(prev);
      if (n.has(id)) n.delete(id);
      else n.add(id);
      return n;
    });
  const add = async () => {
    setBusy(true);
    try {
      const res = await api<{ moved: number }>(`/api/projects/${projectId}`, { method: "POST", json: { action: "add-conversations", conversationIds: [...selected] } });
      await Promise.all([onAdded(), invalidateConversations(), invalidateProjects()]);
      toast.success(`${res.moved} chat${res.moved === 1 ? "" : "s"} added to the project`);
      onOpenChange(false);
    } catch (e) {
      toast.error("Could not add chats", errorMessage(e));
    } finally {
      setBusy(false);
    }
  };
  return (
    <ResponsiveDialog
      open={open}
      onOpenChange={onOpenChange}
      title="Add existing chats"
      description="Chats that are not in any project."
      size="md"
      snap="full"
      flush
      header={
        <div className="px-4 pb-2 sm:px-6">
          <div className="relative">
            <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 chats…" className="h-10 pl-8 sm:h-9" aria-label="Search chats" />
          </div>
        </div>
      }
      footer={
        <div className="flex items-center gap-2">
          <span className="text-[13px] text-fg-muted tabular-nums">{selected.size} selected</span>
          <div className="flex-1" />
          <Button variant="ghost" onClick={() => onOpenChange(false)}>
            Cancel
          </Button>
          <Button disabled={!selected.size} loading={busy} onClick={add}>
            Add{selected.size ? ` (${selected.size})` : ""}
          </Button>
        </div>
      }
    >
      <div className="px-4 sm:px-6">
        {isLoading && !data ? (
          <div className="space-y-2 py-2">
            {Array.from({ length: 5 }).map((_, i) => (
              <Skeleton key={i} className="h-12" />
            ))}
          </div>
        ) : list.length === 0 ? (
          <EmptyState title={q ? "No matches" : "Every chat already belongs to a project"} className="my-4 border-0 py-8" />
        ) : (
          <ul className="divide-y divide-hairline">
            {list.map((c) => {
              const on = selected.has(c.id);
              const model = c.modelKey ? modelsByKey.get(c.modelKey) : undefined;
              return (
                <li key={c.id}>
                  <button type="button" onClick={() => toggle(c.id)} className="flex min-h-[52px] w-full items-center gap-3 py-2 text-left" aria-pressed={on}>
                    <span className="min-w-0 flex-1">
                      <span className="block truncate text-[14px] font-medium">{c.title}</span>
                      <span className="block truncate text-[12px] text-fg-subtle tabular-nums">
                        {model?.displayName ?? c.modelKey ?? "No model"} · {c.messageCount} msg · {formatRelative(c.updatedAt)}
                      </span>
                    </span>
                    <span className={cn("flex size-6 shrink-0 items-center justify-center rounded-full border transition-colors", on ? "border-accent bg-accent text-accent-fg" : "border-border-strong")} aria-hidden>
                      {on ? <Check className="size-3.5" /> : null}
                    </span>
                  </button>
                </li>
              );
            })}
          </ul>
        )}
      </div>
    </ResponsiveDialog>
  );
}