import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { useTranslation } from "react-i18next";
import ReactCountryFlag from "react-country-flag";
import { cn } from "@/lib/utils";
import { useNodesStore } from "@/store/useNodesStore";
import { useVpnStore } from "@/store/useVpnStore";
import flagNl from "@/assets/flags/nl.svg";
import flagSg from "@/assets/flags/sg.svg";

// react-country-flag в режиме svg тянет иконки с внешнего CDN — это бьётся об
// CSP (img-src) и вообще не грузится без сети. Для известных статических
// узлов используем забандленные локальные SVG, а для остальных кодов —
// эмодзи-режим той же либы (без сети, просто текстовый глиф).
const LOCAL_FLAGS: Record<string, string> = {
  nl: flagNl,
  sg: flagSg,
};

export function CountrySelect() {
  const { t } = useTranslation();
  const { nodes, selectedId, selectNode, loading } = useNodesStore();
  const { status } = useVpnStore();

  const selectedNode = nodes.find((n) => n.id === selectedId);

  // Запрещаем смену сервера во время активного подключения.
  const disabled = loading || status !== "idle";

  return (
    <Select
      onValueChange={selectNode}
      value={selectedId ?? ""}
      disabled={disabled}
    >
      <SelectTrigger className="w-[280px] h-12 bg-white/5 backdrop-blur-lg border-white/10 hover:bg-white/10 transition-all rounded-xl shadow-lg ring-offset-0 focus:ring-0 disabled:opacity-60">
        <div
          className={cn(
            "flex items-center gap-2 w-full px-3",
            selectedNode ? "justify-start" : "justify-center",
          )}
        >
          <span className="truncate flex-1 text-left">
            <SelectValue
              placeholder={
                loading
                  ? t("loading_servers")
                  : t("select_location_placeholder")
              }
            />
          </span>
        </div>
      </SelectTrigger>

      <SelectContent
        className="bg-white/10 backdrop-blur-2xl border-white/10 rounded-xl overflow-hidden"
        style={{ width: "var(--radix-select-trigger-width)" }}
      >
        {nodes.map((node) => (
          <SelectItem
            key={node.id}
            value={node.id}
            className="cursor-pointer hover:bg-white/10 focus:bg-white/20 transition-colors"
          >
            <div className="flex items-center gap-3">
              {LOCAL_FLAGS[node.countryCode.toLowerCase()] ? (
                <img
                  src={LOCAL_FLAGS[node.countryCode.toLowerCase()]}
                  alt=""
                  className="size-5 rounded-sm object-cover"
                />
              ) : (
                <ReactCountryFlag
                  countryCode={node.countryCode.toUpperCase()}
                  className="size-5 rounded-sm"
                />
              )}
              <span className="font-medium text-foreground">{node.name}</span>
              <span className="ml-auto text-xs text-muted-foreground">
                {node.currentLoad}%
              </span>
            </div>
          </SelectItem>
        ))}
      </SelectContent>
    </Select>
  );
}
