"use client";

import { Check, ChevronDown, FolderPlus, LayoutDashboard } from "lucide-react";
import Link from "next/link";
import { useEffect, useRef, useState } from "react";
import {
  selectActiveProjectName,
  useProjectsHydrated,
} from "@/hooks/use-projects-hydrated";
import { cn } from "@/lib/utils";
import { useProjectsStore } from "@/store/projects-store";

export function ProjectSwitcher() {
  const hydrated = useProjectsHydrated();
  const projects = useProjectsStore((s) => (Array.isArray(s.projects) ? s.projects : []));
  const activeProjectId = useProjectsStore((s) => s.activeProjectId);
  const activeName = useProjectsStore(selectActiveProjectName);
  const switchProject = useProjectsStore((s) => s.switchProject);

  const [open, setOpen] = useState(false);
  const ref = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const onClick = (e: MouseEvent) => {
      if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false);
    };
    document.addEventListener("mousedown", onClick);
    return () => document.removeEventListener("mousedown", onClick);
  }, []);

  const label = !hydrated ? "Select project" : activeName?.trim() || "Select project";

  return (
    <div ref={ref} className="relative z-[100] shrink-0 px-4 py-4">
      <p className="mb-2 px-1 text-[10px] font-semibold uppercase tracking-wider text-white/50">
        Current Project
      </p>
      <button
        type="button"
        onClick={() => setOpen((v) => !v)}
        className="flex w-full items-center justify-between rounded-full border border-white/20 bg-white/10 px-4 py-2 text-sm font-medium transition-colors hover:bg-white/15"
      >
        <span className="truncate" suppressHydrationWarning>
          {label}
        </span>
        <ChevronDown
          className={cn("h-4 w-4 shrink-0 opacity-70 transition-transform", open && "rotate-180")}
        />
      </button>

      {open && hydrated && (
        <div className="absolute left-4 right-4 top-full z-[110] mt-2 overflow-hidden rounded-xl border border-white/10 bg-brand-800 shadow-xl">
          <div className="max-h-64 overflow-y-auto py-1">
            {projects.length === 0 ? (
              <p className="px-4 py-3 text-xs text-white/60">No projects yet</p>
            ) : (
              projects.map((project) => {
                const selected = project.id === activeProjectId;
                return (
                  <button
                    key={project.id}
                    type="button"
                    onClick={() => {
                      switchProject(project.id);
                      setOpen(false);
                    }}
                    className={cn(
                      "flex w-full items-center gap-2 px-4 py-2.5 text-left text-sm transition-colors",
                      selected ? "bg-white/15 text-white" : "text-white/80 hover:bg-white/10",
                    )}
                  >
                    <span className="min-w-0 flex-1 truncate">{project.name}</span>
                    {selected && <Check className="h-4 w-4 shrink-0" />}
                  </button>
                );
              })
            )}
          </div>
          <div className="border-t border-white/10 p-1">
            <Link
              href="/dashboard"
              onClick={() => setOpen(false)}
              className="flex w-full items-center gap-2 rounded-lg px-3 py-2 text-sm text-white/80 hover:bg-white/10"
            >
              <LayoutDashboard className="h-4 w-4" />
              All projects
            </Link>
            <Link
              href="/my-project?new=1"
              onClick={() => setOpen(false)}
              className="flex w-full items-center gap-2 rounded-lg px-3 py-2 text-sm text-white/80 hover:bg-white/10"
            >
              <FolderPlus className="h-4 w-4" />
              New project
            </Link>
          </div>
        </div>
      )}
    </div>
  );
}