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

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

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

interface SiteSwitcherProps {
  sites: SiteSummary[];
  currentSiteId?: number;
}

export default function SiteSwitcher({ sites, currentSiteId }: SiteSwitcherProps) {
  const currentSite = sites.find((s) => s.id === currentSiteId);
  const { url } = usePage();

  const handleSiteSwitch = (siteId: number) => {
    // Try to maintain the current section when switching sites
    const siteMatch = url.match(/\/sites\/\d+(\/.*)?/);
    if (siteMatch && siteMatch[1]) {
      router.visit(`/sites/${siteId}${siteMatch[1]}`);
    } else {
      router.visit(route('onboarding.index', siteId));
    }
  };

  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button
          variant="outline"
          size="sm"
          className="gap-2"
          aria-label={`Switch site, current: ${currentSite?.name ?? 'none selected'}`}
        >
          <Globe className="h-4 w-4" />
          <span className="max-w-[150px] truncate">{currentSite?.name ?? 'Select site'}</span>
          <ChevronDown className="h-3 w-3 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>
  );
}