"use client";
import * as React from "react";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { ArrowLeftRight, FolderKanban, Plus } from "lucide-react";
import { useApp } from "@/components/app/store";
import { useApi } from "@/lib/client/api";
import { Skeleton } from "@/components/ui/misc";
import { Tooltip } from "@/components/ui/tooltip";
import type { PublicProject } from "@/lib/client/types";
import { ProjectIcon } from "./project-icon";
import { ProjectSwitcher } from "./project-switcher";
import { cn } from "@/lib/utils";

const MAX_ROWS = 8;

/**
 * Projects list rendered inside the sidebar / mobile drawer.
 * - rows link to the project page; the current page's project is highlighted
 * - the *active* project (used for new chats) shows a coloured dot + "Active" hint
 * - the ⇄ button opens the quick switcher (ActionSheet on phones, dropdown on desktop)
 */
export function ProjectsSidebarSection({ onNavigate }: { onNavigate?: () => void }) {
  const { activeProjectId } = useApp();
  const pathname = usePathname();
  const { data, isLoading } = useApi<{ projects: PublicProject[] }>("/api/projects");
  const all = React.useMemo(() => (data?.projects ?? []).filter((p) => !p.archived), [data]);
  const list = React.useMemo(() => {
    // Keep the active project visible even when it is not among the first rows.
    const head = all.slice(0, MAX_ROWS);
    const active = activeProjectId ? all.find((p) => p.id === activeProjectId) : undefined;
    if (active && !head.some((p) => p.id === active.id)) return [active, ...head.slice(0, MAX_ROWS - 1)];
    return head;
  }, [all, activeProjectId]);
  const currentId = pathname.match(/^\/app\/projects\/([^/]+)/)?.[1];
  const overflow = all.length - list.length;

  return (
    <div className="pt-2">
      <div className="flex items-center justify-between px-2 pb-0.5">
        <Link href="/app/projects" onClick={onNavigate} className="tap inline-flex items-center gap-1 text-[11px] font-medium uppercase tracking-wide text-fg-subtle hover:text-fg">
          <FolderKanban className="size-3" /> Projects
          {all.length ? <span className="ml-1 font-normal text-fg-subtle/70">{all.length}</span> : null}
        </Link>
        <div className="flex items-center gap-0.5">
          {all.length ? (
            <ProjectSwitcher onNavigate={onNavigate}>
              <button type="button" className={cn("tap rounded p-0.5 hover:text-fg", activeProjectId ? "text-accent" : "text-fg-subtle")} aria-label="Switch active project">
                <ArrowLeftRight className="size-3.5" />
              </button>
            </ProjectSwitcher>
          ) : null}
          <Tooltip content="New project">
            <Link href="/app/projects?new=1" onClick={onNavigate} className="tap rounded p-0.5 text-fg-subtle hover:text-fg" aria-label="New project">
              <Plus className="size-3.5" />
            </Link>
          </Tooltip>
        </div>
      </div>
      {isLoading && !data ? (
        <div className="space-y-1 px-2 pt-1">
          <Skeleton className="h-7" />
          <Skeleton className="h-7" />
        </div>
      ) : list.length === 0 ? (
        <Link href="/app/projects?new=1" onClick={onNavigate} className="mx-2 mt-1 block rounded-md border border-dashed border-border px-2.5 py-2 text-[12px] text-fg-subtle hover:border-border-strong hover:text-fg">
          Group chats, files and instructions into a project.
        </Link>
      ) : (
        <div className="space-y-px">
          {list.map((p) => {
            const isActive = p.id === activeProjectId;
            const isCurrent = p.id === currentId;
            return (
              <Link key={p.id} href={`/app/projects/${p.id}`} onClick={onNavigate} aria-current={isCurrent ? "page" : undefined} className={cn("group flex min-h-[36px] items-center gap-2 rounded-md px-2 text-[13px] md:min-h-[30px]", isCurrent ? "bg-bg-muted text-fg" : "text-fg-muted hover:bg-bg-muted/70 hover:text-fg")}>
                <ProjectIcon icon={p.icon} color={p.color} size="sm" className="size-5 text-[12px]" />
                <span className="min-w-0 flex-1 truncate">{p.name}</span>
                {isActive ? (
                  <span className="inline-flex items-center gap-1 text-[10px] font-medium uppercase tracking-wide text-accent" title="Active project for new chats">
                    <span className="size-1.5 rounded-full bg-accent" aria-hidden />
                    Active
                  </span>
                ) : null}
              </Link>
            );
          })}
          {overflow > 0 ? (
            <Link href="/app/projects" onClick={onNavigate} className="block rounded-md px-2 py-1 text-[12px] text-fg-subtle hover:bg-bg-muted/70 hover:text-fg">
              +{overflow} more…
            </Link>
          ) : null}
        </div>
      )}
    </div>
  );
}