import { ChevronDown, Globe, LayoutGrid, Plus } from 'lucide-react';

import { Link, router } from '@inertiajs/react';

import { Button } from '@/Components/ui/button';
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from '@/Components/ui/dropdown-menu';
import { cn } from '@/lib/utils';
import type { SiteSummary } from '@/types';

interface SidebarSiteSwitcherProps {
  sites: SiteSummary[];
  currentSite: SiteSummary | null;
  collapsed: boolean;
}

export function SidebarSiteSwitcher({ sites, currentSite, collapsed }: SidebarSiteSwitcherProps) {
  const handleSiteSwitch = (siteId: number) => {
    router.visit(route('onboarding.index', siteId));
  };

  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button
          variant="ghost"
          size="sm"
          className={cn('w-full justify-start gap-2 px-2', collapsed && 'justify-center px-0')}
          aria-label={`Switch site, current: ${currentSite?.name ?? 'none selected'}`}
        >
          <Globe className="h-4 w-4 shrink-0" />
          {!collapsed && (
            <>
              <span className="flex-1 truncate text-left text-sm font-medium">
                {currentSite?.name ?? 'Select site'}
              </span>
              <ChevronDown className="h-3 w-3 shrink-0 opacity-50" />
            </>
          )}
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent align="start" className="w-56">
        {sites.map((site) => (
          <DropdownMenuItem key={site.id} className="cursor-pointer" onSelect={() => handleSiteSwitch(site.id)}>
            <div className="flex flex-col">
              <span className="font-medium">{site.name}</span>
              <span className="text-xs text-muted-foreground">{site.domain}</span>
            </div>
          </DropdownMenuItem>
        ))}
        {sites.length > 0 && <DropdownMenuSeparator />}
        <DropdownMenuItem asChild className="cursor-pointer">
          <Link href={route('sites.create')}>
            <Plus className="mr-2 h-4 w-4" />
            Create new site
          </Link>
        </DropdownMenuItem>
        {sites.length >= 2 && (
          <>
            <DropdownMenuSeparator />
            <DropdownMenuItem asChild className="cursor-pointer">
              <Link href={route('portfolio')}>
                <LayoutGrid className="mr-2 h-4 w-4" />
                View Portfolio
              </Link>
            </DropdownMenuItem>
          </>
        )}
      </DropdownMenuContent>
    </DropdownMenu>
  );
}