"use client";

import { useState } from "react";
import { Network, Plus, Server, Trash2 } from "lucide-react";
import { api, useApi } from "@/lib/client";
import { Badge, Button, Card, CardHeader, DataTable, Field, Input, Modal, PageHeader, Select, useToast, type Column } from "@/components/ui";
import { formatDateTime } from "@/lib/utils";

interface Olt {
  id: number;
  name: string;
  ipAddress: string;
  vendor: string | null;
  location: string | null;
  ponPorts: number;
  status: string;
  notes: string | null;
}
interface Onu extends Record<string, unknown> {
  id: number;
  oltId: number | null;
  customerId: number | null;
  onuNo: string;
  serialNumber: string | null;
  macAddress: string | null;
  ponPort: string | null;
  signal: string | null;
  distance: string | null;
  status: string;
  lastSeenAt: string | null;
}

export default function OltPage() {
  const toast = useToast();
  const { data, loading, reload } = useApi<{ olts: Olt[]; onus: Onu[] }>("/api/olt");
  const { data: customers } = useApi<{ items: { id: number; name: string; customerCode: string }[] }>("/api/customers?pageSize=100");
  const [oltModal, setOltModal] = useState(false);
  const [onuModal, setOnuModal] = useState(false);
  const [busy, setBusy] = useState(false);
  const [oltForm, setOltForm] = useState({ name: "", ipAddress: "", vendor: "", location: "", ponPorts: "8", notes: "" });
  const [onuForm, setOnuForm] = useState({ oltId: "", customerId: "", onuNo: "", serialNumber: "", macAddress: "", ponPort: "", signal: "", distance: "", status: "unknown" });

  const onuColumns: Column<Onu>[] = [
    { key: "onuNo", label: "ONU", render: (r) => <span className="font-mono text-xs text-slate-100">{r.onuNo}</span> },
    { key: "serialNumber", label: "Serial", hideOnMobile: true, render: (r) => <span className="font-mono text-[11px] text-slate-400">{r.serialNumber ?? "—"}</span> },
    { key: "macAddress", label: "MAC", hideOnMobile: true, render: (r) => <span className="font-mono text-[11px] text-slate-400">{r.macAddress ?? "—"}</span> },
    { key: "ponPort", label: "PON port" },
    { key: "signal", label: "Signal", render: (r) => String(r.signal ?? "—") },
    { key: "distance", label: "Distance", hideOnMobile: true, render: (r) => String(r.distance ?? "—") },
    { key: "status", label: "Status", render: (r) => <Badge value={r.status} /> },
    { key: "lastSeenAt", label: "Last seen", hideOnMobile: true, render: (r) => formatDateTime(r.lastSeenAt) },
    {
      key: "actions",
      label: "",
      render: (r) => (
        <Button
          size="sm"
          variant="ghost"
          icon={<Trash2 className="h-3.5 w-3.5 text-rose-400" />}
          onClick={async () => {
            if (!confirm(`Delete ${r.onuNo}?`)) return;
            try {
              await api(`/api/onu?id=${r.id}`, { method: "DELETE" });
              toast.push("ONU deleted", "success");
              void reload();
            } catch (err) {
              toast.push(err instanceof Error ? err.message : "Delete failed", "error");
            }
          }}
        />
      ),
    },
  ];

  return (
    <>
      <PageHeader
        title="OLT / ONU management"
        subtitle="FTTH plant inventory — ready for SNMP / OLT API integration"
        icon={<Network className="h-5 w-5" />}
        actions={
          <>
            <Button variant="secondary" size="sm" icon={<Plus className="h-4 w-4" />} onClick={() => setOltModal(true)}>
              Add OLT
            </Button>
            <Button size="sm" icon={<Plus className="h-4 w-4" />} onClick={() => setOnuModal(true)}>
              Register ONU
            </Button>
          </>
        }
      />

      <div className="mb-4 grid gap-4 md:grid-cols-2 xl:grid-cols-3">
        {(data?.olts ?? []).map((olt) => (
          <Card key={olt.id} className="hover-lift">
            <CardHeader title={olt.name} subtitle={`${olt.ipAddress} · ${olt.location ?? "—"}`} icon={<Server className="h-4 w-4" />} action={<Badge value={olt.status} />} />
            <div className="space-y-2 p-4 text-xs text-slate-400">
              <p>Vendor: <span className="text-slate-200">{olt.vendor ?? "—"}</span></p>
              <p>PON ports: <span className="text-slate-200">{olt.ponPorts}</span></p>
              <p>Registered ONUs: <span className="text-slate-200">{(data?.onus ?? []).filter((o) => o.oltId === olt.id).length}</span></p>
              {olt.notes ? <p className="text-slate-500">{olt.notes}</p> : null}
              <div className="flex gap-2 pt-1">
                <Button
                  size="sm"
                  variant="ghost"
                  icon={<Trash2 className="h-3.5 w-3.5 text-rose-400" />}
                  onClick={async () => {
                    if (!confirm(`Delete OLT ${olt.name}?`)) return;
                    try {
                      await api(`/api/olt?id=${olt.id}`, { method: "DELETE" });
                      toast.push("OLT deleted", "success");
                      void reload();
                    } catch (err) {
                      toast.push(err instanceof Error ? err.message : "Delete failed", "error");
                    }
                  }}
                >
                  Delete
                </Button>
              </div>
            </div>
          </Card>
        ))}
      </div>

      <Card className="p-2">
        <CardHeader title="ONU register" subtitle={`${data?.onus.length ?? 0} device(s)`} />
        <DataTable columns={onuColumns} rows={data?.onus ?? []} loading={loading} rowKey={(r) => r.id} empty="No ONUs registered" />
      </Card>

      <Modal
        open={oltModal}
        onClose={() => setOltModal(false)}
        title="Add OLT"
        footer={
          <>
            <Button variant="secondary" onClick={() => setOltModal(false)}>
              Cancel
            </Button>
            <Button
              loading={busy}
              onClick={async () => {
                setBusy(true);
                try {
                  await api("/api/olt", { method: "POST", json: { ...oltForm, ponPorts: Number(oltForm.ponPorts), status: "online" } });
                  toast.push("OLT added", "success");
                  setOltModal(false);
                  void reload();
                } catch (err) {
                  toast.push(err instanceof Error ? err.message : "Save failed", "error");
                } finally {
                  setBusy(false);
                }
              }}
            >
              Save OLT
            </Button>
          </>
        }
      >
        <div className="grid gap-4 sm:grid-cols-2">
          <Field label="OLT name">
            <Input value={oltForm.name} onChange={(e) => setOltForm({ ...oltForm, name: e.target.value })} />
          </Field>
          <Field label="IP address">
            <Input value={oltForm.ipAddress} onChange={(e) => setOltForm({ ...oltForm, ipAddress: e.target.value })} />
          </Field>
          <Field label="Vendor / model">
            <Input value={oltForm.vendor} onChange={(e) => setOltForm({ ...oltForm, vendor: e.target.value })} />
          </Field>
          <Field label="Location">
            <Input value={oltForm.location} onChange={(e) => setOltForm({ ...oltForm, location: e.target.value })} />
          </Field>
          <Field label="PON ports">
            <Input type="number" value={oltForm.ponPorts} onChange={(e) => setOltForm({ ...oltForm, ponPorts: e.target.value })} />
          </Field>
        </div>
      </Modal>

      <Modal
        open={onuModal}
        onClose={() => setOnuModal(false)}
        title="Register ONU"
        subtitle="Links a physical ONU to a customer record"
        footer={
          <>
            <Button variant="secondary" onClick={() => setOnuModal(false)}>
              Cancel
            </Button>
            <Button
              loading={busy}
              onClick={async () => {
                setBusy(true);
                try {
                  await api("/api/onu", {
                    method: "POST",
                    json: { ...onuForm, oltId: onuForm.oltId ? Number(onuForm.oltId) : null, customerId: onuForm.customerId ? Number(onuForm.customerId) : null },
                  });
                  toast.push("ONU registered", "success");
                  setOnuModal(false);
                  void reload();
                } catch (err) {
                  toast.push(err instanceof Error ? err.message : "Save failed", "error");
                } finally {
                  setBusy(false);
                }
              }}
            >
              Save ONU
            </Button>
          </>
        }
      >
        <div className="grid gap-4 sm:grid-cols-2">
          <Field label="OLT">
            <Select value={onuForm.oltId} onChange={(e) => setOnuForm({ ...onuForm, oltId: e.target.value })}>
              <option value="">Select OLT</option>
              {(data?.olts ?? []).map((o) => (
                <option key={o.id} value={o.id}>
                  {o.name}
                </option>
              ))}
            </Select>
          </Field>
          <Field label="Customer">
            <Select value={onuForm.customerId} onChange={(e) => setOnuForm({ ...onuForm, customerId: e.target.value })}>
              <option value="">Unassigned</option>
              {(customers?.items ?? []).map((c) => (
                <option key={c.id} value={c.id}>
                  {c.name} — {c.customerCode}
                </option>
              ))}
            </Select>
          </Field>
          <Field label="ONU number">
            <Input value={onuForm.onuNo} onChange={(e) => setOnuForm({ ...onuForm, onuNo: e.target.value })} />
          </Field>
          <Field label="Serial number">
            <Input value={onuForm.serialNumber} onChange={(e) => setOnuForm({ ...onuForm, serialNumber: e.target.value })} />
          </Field>
          <Field label="MAC address">
            <Input value={onuForm.macAddress} onChange={(e) => setOnuForm({ ...onuForm, macAddress: e.target.value })} />
          </Field>
          <Field label="PON port">
            <Input value={onuForm.ponPort} onChange={(e) => setOnuForm({ ...onuForm, ponPort: e.target.value })} />
          </Field>
          <Field label="Signal">
            <Input value={onuForm.signal} onChange={(e) => setOnuForm({ ...onuForm, signal: e.target.value })} placeholder="-21.5 dBm" />
          </Field>
          <Field label="Distance">
            <Input value={onuForm.distance} onChange={(e) => setOnuForm({ ...onuForm, distance: e.target.value })} placeholder="1.2 km" />
          </Field>
          <Field label="Status">
            <Select value={onuForm.status} onChange={(e) => setOnuForm({ ...onuForm, status: e.target.value })}>
              {["online", "offline", "los", "dead", "unknown"].map((s) => (
                <option key={s} value={s}>
                  {s}
                </option>
              ))}
            </Select>
          </Field>
        </div>
      </Modal>
    </>
  );
}