import { useQuery } from "@tanstack/react-query";
import { Globe2, Network, RadioTower, ShieldCheck } from "lucide-react";
import { api } from "../api/client";
import type { Device, Page } from "../api/types";
import { Badge, Card, CardHeader, EmptyState, PageHeader } from "../components/ui";
import { useI18n } from "../lib/i18n";

const protocols = [
  ["DDP", "UDP 4048", "Handmatig"], ["E1.31 / sACN", "UDP 5568", "Unicast / multicast"],
  ["Philips Hue", "HTTP + entertainment", "Bridge discovery"], ["Philips WiZ", "UDP 38899", "LAN discovery"],
  ["Nanoleaf", "HTTP + UDP", "Discovery / token"], ["LIFX", "UDP 56700", "LAN discovery"],
  ["Govee", "UDP 4001–4003", "Multicast"], ["Kasa", "TCP 9999", "LAN"],
  ["Yeelight", "TCP 55443", "LAN discovery"], ["Espurna", "HTTP/TCP", "Handmatig + API-key"],
  ["Elgato", "HTTP 9123", "mDNS / LAN"],
];

export function NetworkPage() {
  const { text } = useI18n();
  const devices = useQuery({ queryKey: ["devices"], queryFn: () => api<Page<Device>>("/api/v1/devices?limit=500") });
  const networkDevices = devices.data?.items.filter((device) => device.ip_address || device.source !== "openrgb") ?? [];
  return <>
    <PageHeader eyebrow={text("LAN-verlichting", "LAN lighting")} title={text("Netwerkapparaten", "Network devices")} description={text("OpenRGB-netwerkcontrollers en toekomstige native connectorapparaten met expliciet eigenaarschap.", "OpenRGB network controllers and future native connector devices with explicit ownership.")} />
    <div className="alert alert--info"><ShieldCheck size={20} /><div><strong>Dubbele aansturing wordt voorkomen</strong><p>Kies per fysiek apparaat één eigenaar: OpenRGB, native connector, Home Assistant of onbeheerd.</p></div></div>
    <section className="section-block"><div className="section-heading"><div><h2>Gevonden netwerkapparaten</h2><p>Apparaten met een IP-adres of externe connectorbron.</p></div></div>{networkDevices.length ? <div className="grid grid--cards">{networkDevices.map((device) => <Card key={device.id} className="network-device"><span><Globe2 size={20} /></span><div><h3>{device.alias || device.name}</h3><p>{device.ip_address || device.source}</p></div><Badge tone={device.online ? "success" : "neutral"}>{device.owner}</Badge></Card>)}</div> : <EmptyState icon={Network} title="Nog geen netwerkapparaten" description="Activeer discovery of voeg een ondersteund doel handmatig toe via OpenRGB." />}</section>
    <Card><CardHeader title="Ondersteund door OpenRGB 1.0rc3" description="Discovery kan host networking nodig hebben; de SDK blijft altijd loopback-only." /><div className="table-wrap"><table><thead><tr><th>Familie</th><th>Transport</th><th>Toevoegen</th></tr></thead><tbody>{protocols.map(([name, transport, discovery]) => <tr key={name}><td><RadioTower size={15} /> {name}</td><td>{transport}</td><td>{discovery}</td></tr>)}</tbody></table></div></Card>
  </>;
}