"use client";

import { useEffect, useRef, useState } from "react";
import { useRouter, useSearchParams } from "next/navigation";
import { Check, ChevronDown, Globe } from "@/components/ui/icons";
import { cn } from "@/lib/utils";

export type SiteSummary = {
  id: string;
  domain: string;
  label: string | null;
};

type Props = {
  sites: SiteSummary[];
  selectedId?: string;
};

export function SiteSwitcher({ sites, selectedId }: Props) {
  const router = useRouter();
  const searchParams = useSearchParams();
  const [open, setOpen] = useState(false);
  const ref = useRef<HTMLDivElement>(null);

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

  // Pas de site connecte : on n'affiche rien dans la topbar.
  if (sites.length === 0) return null;

  const selected = sites.find((s) => s.id === selectedId) ?? sites[0];

  // Cas mono-site : pas de dropdown, juste un libellé statique
  if (sites.length < 2) {
    return (
      <div className="inline-flex items-center gap-2 h-9 px-3 rounded-md border border-border bg-stone-900/[0.03] text-xs">
        <Globe className="size-3.5 text-accent" />
        <span className="font-mono text-text">{selected.domain}</span>
      </div>
    );
  }

  function select(id: string) {
    const params = new URLSearchParams(searchParams.toString());
    params.set("site", id);
    router.push(`?${params.toString()}`, { scroll: false });
    setOpen(false);
  }

  return (
    <div ref={ref} className="relative">
      <button
        type="button"
        onClick={() => setOpen((v) => !v)}
        className={cn(
          "inline-flex items-center gap-2 h-9 px-3 rounded-md border bg-stone-900/[0.03] text-xs transition-colors",
          open
            ? "border-accent/40 text-text"
            : "border-border text-text hover:border-border-strong",
        )}
      >
        <Globe className="size-3.5 text-accent" />
        <span className="font-medium">{selected.label ?? selected.domain}</span>
        <span className="text-text-dim font-mono">·</span>
        <span className="text-text-dim font-mono">{selected.domain}</span>
        <ChevronDown className={cn("size-3.5 text-text-dim transition-transform", open && "rotate-180")} />
      </button>

      {open && (
        <div className="absolute right-0 mt-2 w-80 panel-elev shadow-2xl z-40 overflow-hidden">
          <div className="px-3 py-2 border-b border-border">
            <div className="text-micro uppercase tracking-wider text-text-faint">
              Vos sites ({sites.length})
            </div>
          </div>
          <ul className="py-1 max-h-80 overflow-y-auto">
            {sites.map((s) => {
              const isSelected = s.id === selected.id;
              return (
                <li key={s.id}>
                  <button
                    type="button"
                    onClick={() => select(s.id)}
                    className={cn(
                      "w-full flex items-center gap-3 px-3 py-2.5 text-left transition-colors",
                      isSelected ? "bg-stone-900/[0.05]" : "hover:bg-stone-900/[0.03]",
                    )}
                  >
                    <span className="size-8 shrink-0 rounded-md bg-accent/10 border border-accent/30 text-accent-hi flex items-center justify-center">
                      <Globe className="size-4" />
                    </span>
                    <div className="min-w-0 flex-1">
                      <div className="text-sm font-medium text-text truncate">{s.label ?? s.domain}</div>
                      <div className="text-xxs font-mono text-text-dim truncate">{s.domain}</div>
                    </div>
                    {isSelected && <Check className="size-4 text-accent shrink-0" />}
                  </button>
                </li>
              );
            })}
          </ul>
        </div>
      )}
    </div>
  );
}