"use client";
import * as React from "react";
import { Check, CircleOff, FolderKanban, Plus } from "lucide-react";
import { useRouter } from "next/navigation";
import { useApp } from "@/components/app/store";
import { useApi } from "@/lib/client/api";
import { useIsMobile } from "@/lib/client/hooks";
import { ActionSheet, type ActionSheetItem } from "@/components/ui/sheet";
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
import { toast } from "@/components/ui/toast";
import { ProjectIcon } from "./project-icon";
import type { PublicProject } from "@/lib/client/types";

/**
 * Active-project quick switcher. Phone: iOS-style ActionSheet; desktop: dropdown.
 * Wrap any trigger (`children`); selecting sets `activeProjectId` (new chats inherit the project).
 */
export function ProjectSwitcher({ children, onNavigate }: { children: React.ReactElement; onNavigate?: () => void }) {
  const { activeProjectId, setActiveProjectId } = useApp();
  const isMobile = useIsMobile();
  const router = useRouter();
  const [open, setOpen] = React.useState(false);
  const { data } = useApi<{ projects: PublicProject[] }>(open || !isMobile ? "/api/projects" : null);
  const projects = React.useMemo(() => (data?.projects ?? []).filter((p) => !p.archived), [data]);

  const choose = (id: string | null) => {
    setActiveProjectId(id);
    const p = id ? projects.find((x) => x.id === id) : null;
    toast.info(p ? `Active project: ${p.name}` : "No active project", p ? "New chats will use its instructions and models." : "New chats start without project context.");
  };

  if (isMobile) {
    const items: (ActionSheetItem | "separator")[] = [
      { key: "none", label: "No project", icon: <CircleOff />, selected: !activeProjectId, onSelect: () => choose(null) },
      ...projects.map<ActionSheetItem>((p) => ({ key: p.id, label: p.name, icon: <ProjectIcon icon={p.icon} color={p.color} size="sm" />, selected: p.id === activeProjectId, hint: p.conversationCount ? `${p.conversationCount}` : undefined, onSelect: () => choose(p.id) })),
      "separator",
      {
        key: "new",
        label: "New project",
        icon: <Plus />,
        onSelect: () => {
          onNavigate?.();
          router.push("/app/projects?new=1");
        },
      },
    ];
    return (
      <>
        {React.cloneElement(children as React.ReactElement<{ onClick?: () => void }>, { onClick: () => setOpen(true) })}
        <ActionSheet open={open} onOpenChange={setOpen} title="Active project" description="New chats inherit the active project." items={items} />
      </>
    );
  }

  return (
    <DropdownMenu open={open} onOpenChange={setOpen}>
      <DropdownMenuTrigger asChild>{children}</DropdownMenuTrigger>
      <DropdownMenuContent align="end" className="w-64">
        <DropdownMenuLabel className="flex items-center gap-1.5">
          <FolderKanban className="size-3.5" /> Active project
        </DropdownMenuLabel>
        <DropdownMenuItem onSelect={() => choose(null)}>
          <CircleOff /> <span className="flex-1">No project</span> {!activeProjectId ? <Check className="text-accent" /> : null}
        </DropdownMenuItem>
        {projects.length ? <DropdownMenuSeparator /> : null}
        {projects.map((p) => (
          <DropdownMenuItem key={p.id} onSelect={() => choose(p.id)}>
            <ProjectIcon icon={p.icon} color={p.color} size="sm" />
            <span className="min-w-0 flex-1 truncate">{p.name}</span>
            {p.id === activeProjectId ? <Check className="text-accent" /> : null}
          </DropdownMenuItem>
        ))}
        <DropdownMenuSeparator />
        <DropdownMenuItem
          onSelect={() => {
            onNavigate?.();
            router.push("/app/projects?new=1");
          }}
        >
          <Plus /> New project
        </DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  );
}