import { Link } from 'react-router';
import { Check, ChevronsUpDown, Loader2, Settings2 } from 'lucide-react';
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';
import { photosSectionPath } from './shared';
import { usePhotosAccountActions, usePhotosAccounts, usePhotosHealth } from './usePhotosData';

// Which Immich library you are looking at, and how to change it.
//
// The subtitle under "Photos" was already the connection state, so the switcher lives there rather than
// adding a second control saying nearly the same thing. With one account it is exactly what it was: a line
// of text plus a way into the settings screen.
//
// Switching invalidates the whole ['photos'] key, because it changes the answer to every query in the
// workspace without changing any of their inputs — the grid, the albums, the map are all the other library's
// now. Anything less and the previous account's thumbnails stay on screen.

export const AccountSwitcher = () => {
  const { data } = usePhotosAccounts();
  const { data: health } = usePhotosHealth();
  const { activate } = usePhotosAccountActions();

  const accounts = data?.accounts ?? [];
  const active = accounts.find((account) => account.isActive) ?? null;

  // Before the registry answers, fall back to health — it is the query that was already driving this line.
  const status = active?.label ?? (health?.ok ? (health.version ?? 'connected') : 'not connected');

  if (accounts.length < 2) {
    return (
      <Link
        to={photosSectionPath('settings')}
        className="block truncate text-xs text-muted-foreground hover:text-foreground"
      >
        {status}
      </Link>
    );
  }

  return (
    <DropdownMenu>
      <DropdownMenuTrigger className="flex w-full items-center gap-1 text-xs text-muted-foreground hover:text-foreground">
        <span className="truncate">{status}</span>
        {activate.isPending ? (
          <Loader2 className="h-3 w-3 shrink-0 animate-spin" />
        ) : (
          <ChevronsUpDown className="h-3 w-3 shrink-0" />
        )}
      </DropdownMenuTrigger>
      <DropdownMenuContent align="start" className="w-60">
        <DropdownMenuLabel className="text-xs font-normal text-muted-foreground">Immich accounts</DropdownMenuLabel>
        {accounts.map((account) => (
          <DropdownMenuItem
            key={account.id}
            disabled={account.isActive || activate.isPending}
            onSelect={() => void activate.mutateAsync(account.id).catch(() => undefined)}
            className="gap-2"
          >
            <Check className={`h-3.5 w-3.5 shrink-0 ${account.isActive ? 'opacity-100' : 'opacity-0'}`} />
            <span className="min-w-0 flex-1">
              <span className="block truncate">{account.label}</span>
              <span className="block truncate text-[11px] text-muted-foreground">{account.url}</span>
            </span>
          </DropdownMenuItem>
        ))}
        <DropdownMenuSeparator />
        <DropdownMenuItem asChild>
          <Link to={photosSectionPath('settings')} className="gap-2">
            <Settings2 className="h-3.5 w-3.5" />
            Manage accounts
          </Link>
        </DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  );
};