"use client";
import * as React from "react";
import Link from "next/link";
import { usePathname, useRouter } from "next/navigation";
import { Archive, BarChart3, Boxes, ChevronDown, ChevronRight, Copy, Download, Folder as FolderIcon, FolderPlus, MessageSquare, MoreHorizontal, PanelLeftClose, Pencil, Pin, PinOff, Plus, Search, Settings, ShieldCheck, Sparkles, Swords, Trash2, WandSparkles, X, Share2, LogOut, Library, BookMarked } from "lucide-react";
import { useApp, invalidateConversations } from "./store";
import { useApi, api } from "@/lib/client/api";
import type { ConversationsResponse, PublicConversation } from "@/lib/client/types";
import { Logo } from "@/components/brand/logo";
import { ProviderIcon } from "@/components/brand/provider-icon";
import { Button } from "@/components/ui/button";
import { Kbd, Skeleton } from "@/components/ui/misc";
import { Tooltip } from "@/components/ui/tooltip";
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger, DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuSubContent, DropdownMenuLabel } from "@/components/ui/dropdown-menu";
import { ActionSheet, type ActionSheetItem } from "@/components/ui/sheet";
import { PromptDialog } from "@/components/common/prompt-dialog";
import { ConfirmDialog } from "@/components/common/confirm-dialog";
import { ProjectsSidebarSection } from "@/components/projects/sidebar-section";
import { toast } from "@/components/ui/toast";
import { useIsMobile, useLongPress } from "@/lib/client/hooks";
import { cn } from "@/lib/utils";
import { signOut } from "@/lib/auth-client";

const NAV = [
  { href: "/app/chat", label: "Chat", icon: MessageSquare, match: /^\/app\/chat/ },
  { href: "/app/arena", label: "Arena", icon: Swords, match: /^\/app\/arena/ },
  { href: "/app/models", label: "Models", icon: Boxes, match: /^\/app\/models/ },
  { href: "/app/prompts", label: "Prompts", icon: WandSparkles, match: /^\/app\/prompts/ },
  { href: "/app/presets", label: "Presets", icon: Sparkles, match: /^\/app\/presets/ },
  { href: "/app/library", label: "Library", icon: Library, match: /^\/app\/library/ },
  { href: "/app/usage", label: "Usage", icon: BarChart3, match: /^\/app\/usage/ },
];

type Modal = { kind: "rename"; c: PublicConversation } | { kind: "delete"; c: PublicConversation } | { kind: "new-folder" } | { kind: "delete-folder"; id: string; name: string } | null;

/**
 * Conversation sidebar. Desktop: persistent column. Phone (`mobile`): content of the slide-over drawer
 * with 44px rows, long-press actions (ActionSheet) and no browser `prompt()`/`confirm()` dialogs.
 */
export function Sidebar({ onCollapse, mobile }: { onCollapse: () => void; mobile?: boolean }) {
  const { user, folders, refreshFolders, setPaletteOpen, setSearchOpen } = useApp();
  const pathname = usePathname();
  const router = useRouter();
  const isMobile = useIsMobile();
  const [q, setQ] = React.useState("");
  const [showArchived, setShowArchived] = React.useState(false);
  const [modal, setModal] = React.useState<Modal>(null);
  const [sheetFor, setSheetFor] = React.useState<PublicConversation | null>(null);
  const key = `/api/conversations?limit=120${showArchived ? "&archived=1" : ""}${q ? `&q=${encodeURIComponent(q)}` : ""}`;
  const { data, isLoading, mutate } = useApi<ConversationsResponse>(key, { keepPreviousData: true });
  const list = React.useMemo(() => data?.conversations ?? [], [data]);
  const activeId = pathname.match(/^\/app\/chat\/([^/]+)/)?.[1];
  const groups = React.useMemo(() => groupConversations(list, folders.map((f) => ({ id: f.id, name: f.name }))), [list, folders]);

  const patch = async (id: string, body: Record<string, unknown>) => {
    await api(`/api/conversations/${id}`, { method: "PATCH", json: body });
    await mutate();
    invalidateConversations();
  };
  const onDelete = async (c: PublicConversation) => {
    await api(`/api/conversations/${c.id}`, { method: "DELETE" });
    await mutate();
    invalidateConversations();
    if (activeId === c.id) router.push("/app/chat");
    toast.success("Conversation deleted");
  };
  const onDuplicate = async (c: PublicConversation) => {
    const res = await api<{ conversation: PublicConversation }>(`/api/conversations/${c.id}/actions`, { method: "POST", json: { action: "duplicate" } });
    await mutate();
    router.push(`/app/chat/${res.conversation.id}`);
  };
  const onExport = async (c: PublicConversation, format: "json" | "markdown") => {
    const res = await fetch(`/api/conversations/${c.id}/actions`, { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ action: "export", format }) });
    const blob = await res.blob();
    const a = document.createElement("a");
    a.href = URL.createObjectURL(blob);
    a.download = res.headers.get("content-disposition")?.match(/filename="([^"]+)"/)?.[1] ?? `conversation.${format === "json" ? "json" : "md"}`;
    a.click();
    URL.revokeObjectURL(a.href);
  };
  const onShare = async (c: PublicConversation) => {
    const res = await api<{ id: string }>(`/api/conversations/${c.id}/actions`, { method: "POST", json: { action: "share" } });
    const url = `${window.location.origin}/share/${res.id}`;
    await navigator.clipboard.writeText(url).catch(() => {});
    toast.success("Share link copied", url);
  };

  const rowActions = (c: PublicConversation) => ({
    onRename: () => setModal({ kind: "rename", c }),
    onPin: () => patch(c.id, { pinned: !c.pinned }),
    onArchive: () => patch(c.id, { archived: !c.archived }),
    onDelete: () => setModal({ kind: "delete", c }),
    onDuplicate: () => onDuplicate(c),
    onExport: (f: "json" | "markdown") => onExport(c, f),
    onShare: () => onShare(c),
    onMove: (folderId: string | null) => patch(c.id, { folderId }),
  });

  const sheetItems = (c: PublicConversation): (ActionSheetItem | "separator")[] => {
    const a = rowActions(c);
    return [
      { key: "rename", label: "Rename", icon: <Pencil />, onSelect: a.onRename },
      { key: "pin", label: c.pinned ? "Unpin" : "Pin", icon: c.pinned ? <PinOff /> : <Pin />, onSelect: a.onPin },
      { key: "share", label: "Copy share link", icon: <Share2 />, onSelect: a.onShare },
      { key: "dup", label: "Duplicate", icon: <Copy />, onSelect: a.onDuplicate },
      { key: "md", label: "Export Markdown", icon: <Download />, onSelect: () => a.onExport("markdown") },
      ...(folders.length ? ([{ key: "nofolder", label: "Remove from folder", icon: <FolderIcon />, onSelect: () => a.onMove(null), disabled: !c.folderId }] as ActionSheetItem[]) : []),
      ...folders.map<ActionSheetItem>((f) => ({ key: `f-${f.id}`, label: `Move to ${f.name}`, icon: <FolderIcon />, onSelect: () => a.onMove(f.id), selected: c.folderId === f.id })),
      "separator",
      { key: "archive", label: c.archived ? "Unarchive" : "Archive", icon: <Archive />, onSelect: a.onArchive },
      { key: "delete", label: "Delete", icon: <Trash2 />, onSelect: a.onDelete, destructive: true },
    ];
  };

  return (
    <div className="flex h-full flex-col">
      <div className="flex items-center justify-between px-3 pb-1 pt-3">
        <Link href="/app/chat" className="rounded-md px-1 py-0.5 hover:bg-bg-muted">
          <Logo size={22} />
        </Link>
        <Tooltip content={mobile ? "Close" : "Collapse sidebar ⌘B"}>
          <Button variant="ghost" size={mobile ? "icon" : "icon-sm"} onClick={onCollapse} aria-label={mobile ? "Close" : "Collapse sidebar"}>
            {mobile ? <X /> : <PanelLeftClose />}
          </Button>
        </Tooltip>
      </div>

      <div className="flex gap-1.5 px-3 pb-2 pt-1">
        <Button asChild variant="primary" size={mobile ? "lg" : "md"} className={cn("flex-1 justify-between", mobile ? "rounded-xl text-[15px]" : "")}>
          <Link href="/app/chat">
            <span className="inline-flex items-center gap-2">
              <Plus className="size-4" /> New chat
            </span>
            {!mobile ? <Kbd className="border-border-strong/40 bg-transparent text-bg/70">⌘N</Kbd> : null}
          </Link>
        </Button>
        <Tooltip content="Search (⌘K)">
          <Button variant="outline" size={mobile ? "icon-lg" : "icon"} onClick={() => (isMobile ? setSearchOpen(true) : setPaletteOpen(true))} aria-label="Search conversations">
            <Search />
          </Button>
        </Tooltip>
      </div>

      <nav className="px-2 pb-1">
        {NAV.map((n) => {
          const active = n.match.test(pathname);
          return (
            <Link key={n.href} href={n.href} className={cn("flex items-center gap-2.5 rounded-md px-2.5 text-[13.5px] font-medium transition-colors", mobile ? "min-h-[42px] text-[15px]" : "py-1.5", active ? "bg-bg-muted text-fg" : "text-fg-muted hover:bg-bg-muted/70 hover:text-fg")}>
              <n.icon className={cn("size-4", active ? "text-accent" : "text-fg-subtle")} />
              {n.label}
            </Link>
          );
        })}
      </nav>

      <div className="mx-3 my-1.5">
        <div className="relative">
          <Search className="pointer-events-none absolute left-2.5 top-1/2 size-3.5 -translate-y-1/2 text-fg-subtle" />
          <input value={q} onChange={(e) => setQ(e.target.value)} placeholder="Filter chats" className={cn("w-full rounded-md border border-border bg-bg pl-8 pr-2 text-[13px] outline-none placeholder:text-fg-subtle focus:border-accent", mobile ? "h-10 text-[15px]" : "h-8")} aria-label="Filter conversations" />
        </div>
      </div>

      <div className="min-h-0 flex-1 overflow-y-auto px-2 pb-2 scrollbar-thin contain-scroll">
        <ProjectsSidebarSection onNavigate={mobile ? onCollapse : undefined} />
        {isLoading && !data ? (
          <div className="space-y-1.5 px-1 pt-3">
            {Array.from({ length: 8 }).map((_, i) => (
              <Skeleton key={i} className={mobile ? "h-9" : "h-7"} />
            ))}
          </div>
        ) : list.length === 0 ? (
          <div className="px-2 pt-8 text-center">
            <BookMarked className="mx-auto size-5 text-fg-subtle" />
            <p className="mt-2 text-xs text-fg-subtle">{q ? "No conversations match." : showArchived ? "No archived conversations." : "No conversations yet. Start a new chat."}</p>
          </div>
        ) : (
          groups.map((g) => (
            <Group key={g.key} title={g.title} count={g.items.length} icon={g.folderId ? <FolderIcon className="size-3.5" /> : undefined} defaultOpen={g.key !== "older"} onDeleteFolder={g.folderId ? () => setModal({ kind: "delete-folder", id: g.folderId!, name: g.title }) : undefined}>
              {g.items.map((c) => (
                <ConversationRow key={c.id} c={c} active={c.id === activeId} mobile={Boolean(mobile)} folders={folders} onLongPress={() => setSheetFor(c)} {...rowActions(c)} />
              ))}
            </Group>
          ))
        )}
      </div>

      <div className="border-t border-border px-2 py-2">
        <div className="flex items-center justify-between px-1 pb-1">
          <button onClick={() => setShowArchived((v) => !v)} className={cn("tap inline-flex items-center gap-1.5 rounded px-1.5 py-1 text-[12px] text-fg-subtle hover:text-fg", showArchived && "text-fg")}>
            <Archive className="size-3.5" /> {showArchived ? "Hide archived" : "Archived"}
          </button>
          <Tooltip content="New folder">
            <Button variant="ghost" size="icon-sm" onClick={() => setModal({ kind: "new-folder" })} aria-label="New folder">
              <FolderPlus />
            </Button>
          </Tooltip>
        </div>
        <DropdownMenu>
          <DropdownMenuTrigger asChild>
            <button className={cn("flex w-full items-center gap-2.5 rounded-md px-2 text-left hover:bg-bg-muted", mobile ? "min-h-[48px]" : "py-1.5")}>
              <span className="flex size-7 items-center justify-center rounded-full bg-accent-soft text-[12px] font-semibold text-accent">{(user.name || user.email).slice(0, 1).toUpperCase()}</span>
              <span className="min-w-0 flex-1">
                <span className="block truncate text-[13px] font-medium">{user.name || user.email.split("@")[0]}</span>
                <span className="block truncate text-[11.5px] text-fg-subtle">{user.email}</span>
              </span>
              <MoreHorizontal className="size-4 text-fg-subtle" />
            </button>
          </DropdownMenuTrigger>
          <DropdownMenuContent side="top" align="start" className="w-60">
            <DropdownMenuItem onSelect={() => router.push("/app/settings/account")}>
              <Settings /> Settings
            </DropdownMenuItem>
            <DropdownMenuItem onSelect={() => router.push("/app/settings/providers")}>
              <ShieldCheck /> Providers &amp; keys
            </DropdownMenuItem>
            {user.isAdmin ? (
              <DropdownMenuItem onSelect={() => router.push("/admin/providers")}>
                <BarChart3 /> Admin diagnostics
              </DropdownMenuItem>
            ) : null}
            <DropdownMenuSeparator />
            <DropdownMenuItem
              onSelect={async () => {
                await signOut();
                router.push("/login");
              }}
            >
              <LogOut /> Sign out
            </DropdownMenuItem>
          </DropdownMenuContent>
        </DropdownMenu>
      </div>

      {/* Mobile long-press actions */}
      <ActionSheet open={Boolean(sheetFor)} onOpenChange={(o) => !o && setSheetFor(null)} title={sheetFor?.title} items={sheetFor ? sheetItems(sheetFor) : []} />

      {/* Dialogs (replace window.prompt/confirm) */}
      <PromptDialog open={modal?.kind === "rename"} onOpenChange={(o) => !o && setModal(null)} title="Rename conversation" defaultValue={modal?.kind === "rename" ? modal.c.title : ""} onSubmit={async (v) => { if (modal?.kind === "rename") await patch(modal.c.id, { title: v }); }} />
      <PromptDialog open={modal?.kind === "new-folder"} onOpenChange={(o) => !o && setModal(null)} title="New folder" placeholder="Research, Clients, Ideas…" confirmLabel="Create" onSubmit={async (v) => { await api("/api/folders", { method: "POST", json: { name: v } }); await refreshFolders(); }} />
      <ConfirmDialog open={modal?.kind === "delete"} onOpenChange={(o) => !o && setModal(null)} title="Delete conversation?" description={modal?.kind === "delete" ? `“${modal.c.title}” and its messages will be permanently deleted.` : undefined} confirmLabel="Delete" destructive onConfirm={async () => { if (modal?.kind === "delete") await onDelete(modal.c); }} />
      <ConfirmDialog open={modal?.kind === "delete-folder"} onOpenChange={(o) => !o && setModal(null)} title="Delete folder?" description={modal?.kind === "delete-folder" ? `“${modal.name}” will be removed. Conversations inside are kept.` : undefined} confirmLabel="Delete folder" destructive onConfirm={async () => { if (modal?.kind !== "delete-folder") return; await api(`/api/folders?id=${modal.id}`, { method: "DELETE" }); await Promise.all([refreshFolders(), mutate()]); }} />
    </div>
  );
}

function Group({ title, count, children, icon, defaultOpen = true, onDeleteFolder }: { title: string; count: number; children: React.ReactNode; icon?: React.ReactNode; defaultOpen?: boolean; onDeleteFolder?: () => void }) {
  const [open, setOpen] = React.useState(defaultOpen);
  return (
    <div className="pt-2">
      <div className="group flex items-center justify-between px-2 pb-0.5">
        <button onClick={() => setOpen((o) => !o)} className="tap inline-flex items-center gap-1 text-[11px] font-medium uppercase tracking-wide text-fg-subtle hover:text-fg" aria-expanded={open}>
          {open ? <ChevronDown className="size-3" /> : <ChevronRight className="size-3" />}
          {icon}
          {title}
          <span className="ml-1 font-normal text-fg-subtle/70">{count}</span>
        </button>
        {onDeleteFolder ? (
          <button onClick={onDeleteFolder} className="hover-reveal tap rounded p-0.5 text-fg-subtle hover:text-danger" aria-label="Delete folder">
            <Trash2 className="size-3" />
          </button>
        ) : null}
      </div>
      {open ? <div className="space-y-px">{children}</div> : null}
    </div>
  );
}

function ConversationRow({ c, active, mobile, folders, onLongPress, onRename, onPin, onArchive, onDelete, onDuplicate, onExport, onShare, onMove }: { c: PublicConversation; active: boolean; mobile: boolean; folders: { id: string; name: string }[]; onLongPress: () => void; onRename: () => void; onPin: () => void; onArchive: () => void; onDelete: () => void; onDuplicate: () => void; onExport: (f: "json" | "markdown") => void; onShare: () => void; onMove: (folderId: string | null) => void }) {
  const router = useRouter();
  const press = useLongPress({ onLongPress, onClick: () => router.push(`/app/chat/${c.id}`), disabled: !mobile });
  return (
    <div className={cn("group relative flex items-center rounded-md", active ? "bg-bg-muted" : "hover:bg-bg-muted/70")}>
      {mobile ? (
        <button type="button" {...press} className="flex min-h-[44px] min-w-0 flex-1 select-none items-center gap-2.5 px-2 text-left" style={{ WebkitTouchCallout: "none" }}>
          <ProviderIcon provider={c.provider} size={14} className="opacity-80" />
          <span className={cn("min-w-0 flex-1 truncate text-[15px]", active ? "text-fg" : "text-fg-muted")}>{c.title}</span>
          {c.pinned ? <Pin className="size-3 text-fg-subtle" /> : null}
        </button>
      ) : (
        <Link href={`/app/chat/${c.id}`} className="flex min-w-0 flex-1 items-center gap-2 px-2 py-1.5">
          <ProviderIcon provider={c.provider} size={13} className="opacity-80" />
          <span className={cn("min-w-0 flex-1 truncate text-[13px]", active ? "text-fg" : "text-fg-muted group-hover:text-fg")}>{c.title}</span>
          {c.pinned ? <Pin className="size-3 text-fg-subtle" /> : null}
        </Link>
      )}
      {mobile ? (
        <button onClick={onLongPress} className="tap mr-1 rounded p-2 text-fg-subtle" aria-label="Conversation actions">
          <MoreHorizontal className="size-4" />
        </button>
      ) : (
        <DropdownMenu>
          <DropdownMenuTrigger asChild>
            <button className={cn("mr-1 rounded p-1 text-fg-subtle hover:bg-border hover:text-fg", active ? "" : "invisible group-hover:visible data-[state=open]:visible")} aria-label="Conversation actions">
              <MoreHorizontal className="size-3.5" />
            </button>
          </DropdownMenuTrigger>
          <DropdownMenuContent align="start" className="w-52">
            <DropdownMenuItem onSelect={onRename}>
              <Pencil /> Rename
            </DropdownMenuItem>
            <DropdownMenuItem onSelect={onPin}>
              {c.pinned ? <PinOff /> : <Pin />} {c.pinned ? "Unpin" : "Pin"}
            </DropdownMenuItem>
            <DropdownMenuSub>
              <DropdownMenuSubTrigger>
                <FolderIcon /> Move to folder
              </DropdownMenuSubTrigger>
              <DropdownMenuSubContent>
                <DropdownMenuLabel>Folders</DropdownMenuLabel>
                <DropdownMenuItem onSelect={() => onMove(null)}>No folder</DropdownMenuItem>
                {folders.map((f) => (
                  <DropdownMenuItem key={f.id} onSelect={() => onMove(f.id)}>
                    {f.name}
                  </DropdownMenuItem>
                ))}
                {folders.length === 0 ? <p className="px-2 py-1 text-xs text-fg-subtle">Create a folder from the sidebar footer.</p> : null}
              </DropdownMenuSubContent>
            </DropdownMenuSub>
            <DropdownMenuItem onSelect={onDuplicate}>
              <Copy /> Duplicate
            </DropdownMenuItem>
            <DropdownMenuItem onSelect={onShare}>
              <Share2 /> Share link
            </DropdownMenuItem>
            <DropdownMenuSub>
              <DropdownMenuSubTrigger>
                <Download /> Export
              </DropdownMenuSubTrigger>
              <DropdownMenuSubContent>
                <DropdownMenuItem onSelect={() => onExport("markdown")}>Markdown (.md)</DropdownMenuItem>
                <DropdownMenuItem onSelect={() => onExport("json")}>JSON</DropdownMenuItem>
              </DropdownMenuSubContent>
            </DropdownMenuSub>
            <DropdownMenuItem onSelect={onArchive}>
              <Archive /> {c.archived ? "Unarchive" : "Archive"}
            </DropdownMenuItem>
            <DropdownMenuSeparator />
            <DropdownMenuItem destructive onSelect={onDelete}>
              <Trash2 /> Delete
            </DropdownMenuItem>
          </DropdownMenuContent>
        </DropdownMenu>
      )}
    </div>
  );
}

function groupConversations(list: PublicConversation[], folders: { id: string; name: string }[]) {
  const now = new Date();
  const startOfToday = new Date(now.getFullYear(), now.getMonth(), now.getDate()).getTime();
  const startOfYesterday = startOfToday - 86_400_000;
  const week = startOfToday - 7 * 86_400_000;
  const groups: { key: string; title: string; items: PublicConversation[]; folderId?: string }[] = [];
  const pinned = list.filter((c) => c.pinned);
  if (pinned.length) groups.push({ key: "pinned", title: "Pinned", items: pinned });
  for (const f of folders) {
    const items = list.filter((c) => !c.pinned && c.folderId === f.id);
    if (items.length) groups.push({ key: `folder:${f.id}`, title: f.name, items, folderId: f.id });
  }
  const rest = list.filter((c) => !c.pinned && !folders.some((f) => f.id === c.folderId));
  const by = (pred: (t: number) => boolean) => rest.filter((c) => pred(new Date(c.updatedAt).getTime()));
  const today = by((t) => t >= startOfToday);
  const yesterday = by((t) => t >= startOfYesterday && t < startOfToday);
  const thisWeek = by((t) => t >= week && t < startOfYesterday);
  const older = by((t) => t < week);
  if (today.length) groups.push({ key: "today", title: "Today", items: today });
  if (yesterday.length) groups.push({ key: "yesterday", title: "Yesterday", items: yesterday });
  if (thisWeek.length) groups.push({ key: "week", title: "Previous 7 days", items: thisWeek });
  if (older.length) groups.push({ key: "older", title: "Older", items: older });
  return groups;
}