"use client"
import { useMemo, useState } from "react"
import { Input } from "@/components/ui/input"
import { cn } from "@/lib/utils"
import { CheckIcon } from "lucide-react"
export interface GatewayOption { id: string; name: string; ip: string; status: "active" | "inactive" | "unknown" }
export function RecursiveGatewayChoices({ gateways, selectedValue, endpointNumber, onChange }: { gateways: GatewayOption[]; selectedValue: string; endpointNumber: number; onChange: (value: string) => void }) {
  const [search, setSearch] = useState("")
  const matches = useMemo(() => gateways.filter(g => (g.ip + "%" + g.name).toLowerCase().includes(search.toLowerCase())), [gateways, search])
  const selected = matches.find(g => g.ip + "%" + g.name === selectedValue)
  const visible = (selected ? [selected, ...matches.filter(g => g.id !== selected.id)] : matches).slice(0, 5)
  return <div className="flex flex-col gap-1.5">
    {gateways.length > 5 && <Input aria-label={"Поиск шлюза для endpoint " + endpointNumber} placeholder="IP или имя шлюза…" value={search} onChange={event => setSearch(event.target.value)} />}
    {gateways.length > 5 && <p role="status" className="text-xs text-muted-foreground">Показано {visible.length} из {matches.length} шлюзов. Поиск охватывает весь список.</p>}
    {search && matches.length === 0 && <p role="status" className="text-xs text-muted-foreground">Шлюзы не найдены. Измените поиск или введите адрес вручную.</p>}
                  {visible.map((g) => {
                const value = `${g.ip}%${g.name}`
                const selected = selectedValue === value
                return (
                  <button
                    key={g.id}
                    type="button"
                    aria-label={`Выбрать шлюз ${value}`}
                    aria-pressed={selected}
                    onClick={() => onChange(value)}
                    className={cn(
                      "text-left rounded-lg border px-3 py-2.5 transition-all",
                      selected
                        ? "border-primary bg-primary/5 ring-1 ring-primary/30"
                        : "border-border hover:border-muted-foreground/40 hover:bg-muted/40",
                    )}
                  >
                    <div className="flex items-center gap-2">
                      <span className={cn("size-1.5 rounded-full shrink-0", g.status === "active" ? "bg-success" : "bg-muted-foreground")} />
                      <span className="font-mono text-xs font-semibold flex-1 truncate">{g.name}</span>
                      <span className="text-xs text-muted-foreground">{g.status === "active" ? "Активный маршрут" : g.status === "inactive" ? "Неактивный маршрут" : "Статус неизвестен"}</span>
                      {selected && <CheckIcon aria-hidden="true" className="size-3.5 text-primary shrink-0" />}
                    </div>
                    <div className="mt-1.5 grid grid-cols-[auto_auto_1fr] items-start gap-2 text-[11px] text-muted-foreground font-mono">
                      <span className="text-muted-foreground/50 break-all">{g.ip}</span>
                      <span className="text-muted-foreground/30">→</span>
                      <span className={cn("min-w-0 break-all whitespace-normal leading-tight", selected ? "text-primary font-medium" : "")}>
                        {value}
                      </span>
                    </div>
                  </button>
                )
              })}
  </div>
}