import { Check, Network, Plus } from 'lucide-react';
import { Link } from 'react-router';
import { headscaleSectionPath } from './shared';
import { useHeadscaleServers } from './useHeadscaleServers';

// Top-left panel of the /headscale workspace: which server everything else acts on.
//
// It is its own panel rather than a block inside HeadscaleNav because the two answer different questions —
// "which server" and "which section" — and only one of them is navigation. Activating a server is a mutation
// (a DB write that re-scopes every other query), so these stay buttons with no URL of their own, while the
// section list below is real links.
//
// Every registered server is listed, including when there is only one: the panel's whole job is to say what
// the rest of the screen is talking to, and a picker that hides itself at one server makes that invisible.

export const HeadscaleServerPicker = () => {
  const { servers, active, activate, isLoading } = useHeadscaleServers();

  return (
    <div className="flex h-full flex-col overflow-y-auto bg-muted/30">
      <div className="flex items-center gap-3 px-4 py-4">
        <div className="flex h-9 w-9 items-center justify-center rounded-xl bg-indigo-500/15 text-indigo-400 ring-1 ring-black/5">
          <Network className="h-5 w-5" />
        </div>
        <div className="min-w-0">
          <div className="truncate text-sm font-semibold leading-tight">Headscale</div>
          <div className="truncate text-xs text-muted-foreground">{active ? active.name : 'no server'}</div>
        </div>
      </div>

      <div className="flex flex-col gap-0.5 px-2 pb-3">
        {servers.map((server) => (
          <button
            key={server.id}
            type="button"
            onClick={() => !server.isActive && activate.mutate(server.id)}
            disabled={activate.isPending}
            title={server.url}
            className={`flex items-center gap-2 rounded-lg px-3 py-1.5 text-left text-xs transition-colors ${
              server.isActive ? 'bg-muted font-medium text-foreground' : 'text-muted-foreground hover:bg-muted'
            }`}
          >
            <Check className={`h-3.5 w-3.5 shrink-0 ${server.isActive ? 'text-primary' : 'opacity-0'}`} />
            <span className="min-w-0 flex-1 truncate">{server.name}</span>
          </button>
        ))}

        {servers.length === 0 && !isLoading && (
          <Link
            to={headscaleSectionPath('servers')}
            className="flex items-center gap-2 rounded-lg px-3 py-1.5 text-xs text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
          >
            <Plus className="h-3.5 w-3.5 shrink-0" />
            Register a server
          </Link>
        )}
      </div>
    </div>
  );
};