import React, { useMemo, useState } from "react";
import { motion } from "framer-motion";
import { Activity, AlertTriangle, CheckCircle2, Clock, MapPinned, Network, Router, Server, Wifi, Search, BarChart3 } from "lucide-react";
import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";

const sedes = [
  {
    id: 1,
    nombre: "Sede Mitre",
    ubicacion: "Berazategui",
    estado: "down",
    router: "MK-MITRE",
    ip: "181.30.60.254",
    disponibilidad: 96.4,
    caidasHoy: 3,
    ultimaCaida: "28/04/2026 17:42:10",
    ultimoUp: "28/04/2026 18:03:55",
    equipos: [
      { nombre: "Uplink ether1", tipo: "puerto", estado: "down" },
      { nombre: "Switch Core", tipo: "switch", estado: "down" },
      { nombre: "AP Galpón", tipo: "ap", estado: "up" },
      { nombre: "Cámara Acceso", tipo: "camara", estado: "unknown" },
    ],
  },
  {
    id: 2,
    nombre: "Sede Centro",
    ubicacion: "Quilmes",
    estado: "up",
    router: "MK-CENTRO",
    ip: "10.10.20.1",
    disponibilidad: 99.8,
    caidasHoy: 0,
    ultimaCaida: "27/04/2026 22:11:04",
    ultimoUp: "27/04/2026 22:12:18",
    equipos: [
      { nombre: "Uplink sfp1", tipo: "puerto", estado: "up" },
      { nombre: "Switch Piso 1", tipo: "switch", estado: "up" },
      { nombre: "AP Recepción", tipo: "ap", estado: "up" },
    ],
  },
  {
    id: 3,
    nombre: "Sede Norte",
    ubicacion: "Hudson",
    estado: "warning",
    router: "MK-NORTE",
    ip: "10.10.30.1",
    disponibilidad: 98.2,
    caidasHoy: 1,
    ultimaCaida: "28/04/2026 09:18:41",
    ultimoUp: "28/04/2026 09:25:03",
    equipos: [
      { nombre: "Uplink ether2", tipo: "puerto", estado: "up" },
      { nombre: "Switch Cámaras", tipo: "switch", estado: "warning" },
      { nombre: "AP Patio", tipo: "ap", estado: "up" },
    ],
  },
  {
    id: 4,
    nombre: "Sede Sur",
    ubicacion: "Ezpeleta",
    estado: "up",
    router: "MK-SUR",
    ip: "10.10.40.1",
    disponibilidad: 99.1,
    caidasHoy: 0,
    ultimaCaida: "26/04/2026 03:02:10",
    ultimoUp: "26/04/2026 03:04:22",
    equipos: [
      { nombre: "Uplink sfp1", tipo: "puerto", estado: "up" },
      { nombre: "Switch Clientes", tipo: "switch", estado: "up" },
    ],
  },
  {
    id: 5,
    nombre: "Sede Oeste",
    ubicacion: "Florencio Varela",
    estado: "up",
    router: "MK-OESTE",
    ip: "10.10.50.1",
    disponibilidad: 99.5,
    caidasHoy: 0,
    ultimaCaida: "25/04/2026 11:44:31",
    ultimoUp: "25/04/2026 11:45:02",
    equipos: [
      { nombre: "Uplink ether1", tipo: "puerto", estado: "up" },
      { nombre: "AP Torre", tipo: "ap", estado: "up" },
    ],
  },
];

const eventos = [
  { fecha: "28/04/2026 18:03:55", sede: "Sede Mitre", equipo: "MK-MITRE", detalle: "Ping volvió a responder", evento: "ping_up" },
  { fecha: "28/04/2026 17:42:10", sede: "Sede Mitre", equipo: "Uplink ether1", detalle: "Cable desconectado / link down", evento: "port_down" },
  { fecha: "28/04/2026 09:25:03", sede: "Sede Norte", equipo: "Switch Cámaras", detalle: "Equipo volvió a responder", evento: "ping_up" },
  { fecha: "28/04/2026 09:18:41", sede: "Sede Norte", equipo: "Switch Cámaras", detalle: "Pérdida de ping", evento: "ping_down" },
  { fecha: "27/04/2026 22:12:18", sede: "Sede Centro", equipo: "MK-CENTRO", detalle: "Router online", evento: "ping_up" },
];

const stateClass = {
  up: "border-emerald-500/40 bg-emerald-500/10 text-emerald-300",
  down: "border-red-500/50 bg-red-500/10 text-red-300",
  warning: "border-amber-500/50 bg-amber-500/10 text-amber-300",
  unknown: "border-slate-500/50 bg-slate-500/10 text-slate-300",
};

const dotClass = {
  up: "bg-emerald-400",
  down: "bg-red-400",
  warning: "bg-amber-400",
  unknown: "bg-slate-400",
};

function Badge({ estado }) {
  const label = estado === "up" ? "UP" : estado === "down" ? "DOWN" : estado === "warning" ? "WARNING" : "UNKNOWN";
  return <span className={`rounded-full border px-3 py-1 text-xs font-bold ${stateClass[estado]}`}>{label}</span>;
}

function iconByType(tipo) {
  if (tipo === "ap") return <Wifi className="h-4 w-4" />;
  if (tipo === "puerto") return <Network className="h-4 w-4" />;
  if (tipo === "switch") return <Server className="h-4 w-4" />;
  return <Activity className="h-4 w-4" />;
}

export default function MonitorMikrotikDemo() {
  const [selected, setSelected] = useState(sedes[0]);
  const [query, setQuery] = useState("");

  const resumen = useMemo(() => {
    const up = sedes.filter((s) => s.estado === "up").length;
    const down = sedes.filter((s) => s.estado === "down").length;
    const warning = sedes.filter((s) => s.estado === "warning").length;
    const equipos = sedes.reduce((acc, s) => acc + s.equipos.length, 0);
    return { up, down, warning, equipos };
  }, []);

  const sedesFiltradas = sedes.filter((s) => `${s.nombre} ${s.ubicacion} ${s.router}`.toLowerCase().includes(query.toLowerCase()));

  return (
    <div className="min-h-screen bg-slate-950 text-slate-100">
      <div className="mx-auto max-w-7xl p-5">
        <div className="mb-6 flex flex-col gap-4 rounded-3xl border border-slate-800 bg-slate-900/80 p-5 shadow-2xl md:flex-row md:items-center md:justify-between">
          <div>
            <div className="mb-2 flex items-center gap-2 text-sm text-cyan-300">
              <Router className="h-4 w-4" /> Monitor MikroTik multi-sede
            </div>
            <h1 className="text-2xl font-bold md:text-4xl">Panel de monitoreo de red</h1>
            <p className="mt-2 text-sm text-slate-400">Vista de muestra: 5 sedes, eventos, topología, disponibilidad y estado de puertos.</p>
          </div>
          <Button className="rounded-2xl bg-cyan-500 px-5 py-3 text-slate-950 hover:bg-cyan-400">Actualizar ahora</Button>
        </div>

        <div className="mb-6 grid grid-cols-2 gap-4 md:grid-cols-4">
          <Card className="rounded-3xl border-slate-800 bg-slate-900"><CardContent className="p-5"><CheckCircle2 className="mb-3 h-6 w-6 text-emerald-300" /><div className="text-3xl font-bold">{resumen.up}</div><div className="text-sm text-slate-400">Sedes UP</div></CardContent></Card>
          <Card className="rounded-3xl border-slate-800 bg-slate-900"><CardContent className="p-5"><AlertTriangle className="mb-3 h-6 w-6 text-red-300" /><div className="text-3xl font-bold">{resumen.down}</div><div className="text-sm text-slate-400">Sedes DOWN</div></CardContent></Card>
          <Card className="rounded-3xl border-slate-800 bg-slate-900"><CardContent className="p-5"><Clock className="mb-3 h-6 w-6 text-amber-300" /><div className="text-3xl font-bold">{resumen.warning}</div><div className="text-sm text-slate-400">Con alerta</div></CardContent></Card>
          <Card className="rounded-3xl border-slate-800 bg-slate-900"><CardContent className="p-5"><Network className="mb-3 h-6 w-6 text-cyan-300" /><div className="text-3xl font-bold">{resumen.equipos}</div><div className="text-sm text-slate-400">Equipos / puertos</div></CardContent></Card>
        </div>

        <div className="grid gap-6 lg:grid-cols-[1.1fr_.9fr]">
          <Card className="rounded-3xl border-slate-800 bg-slate-900">
            <CardContent className="p-5">
              <div className="mb-4 flex items-center justify-between">
                <div>
                  <h2 className="text-xl font-bold">Topología general</h2>
                  <p className="text-sm text-slate-400">Nodo central conectado a las 5 sedes.</p>
                </div>
                <MapPinned className="h-6 w-6 text-cyan-300" />
              </div>

              <div className="relative min-h-[420px] overflow-hidden rounded-3xl border border-slate-800 bg-slate-950 p-4">
                <div className="absolute left-1/2 top-8 z-10 -translate-x-1/2 rounded-2xl border border-cyan-500/50 bg-cyan-500/15 px-5 py-3 text-center shadow-lg shadow-cyan-900/20">
                  <Router className="mx-auto mb-1 h-6 w-6 text-cyan-300" />
                  <div className="font-bold">CORE / INTERNET</div>
                  <div className="text-xs text-slate-400">Monitor central</div>
                </div>

                <div className="absolute left-1/2 top-24 h-20 w-px bg-slate-700" />
                <div className="absolute left-[12%] right-[12%] top-44 h-px bg-slate-700" />

                <div className="mt-52 grid grid-cols-1 gap-4 md:grid-cols-5">
                  {sedes.map((s) => (
                    <motion.button
                      whileHover={{ y: -4 }}
                      key={s.id}
                      onClick={() => setSelected(s)}
                      className={`rounded-3xl border p-4 text-left transition ${selected.id === s.id ? "border-cyan-400 bg-cyan-500/10" : "border-slate-800 bg-slate-900/80"}`}
                    >
                      <div className={`mb-3 h-3 w-3 rounded-full ${dotClass[s.estado]}`} />
                      <div className="font-bold">{s.nombre}</div>
                      <div className="text-xs text-slate-400">{s.router}</div>
                      <div className="mt-3"><Badge estado={s.estado} /></div>
                    </motion.button>
                  ))}
                </div>
              </div>
            </CardContent>
          </Card>

          <Card className="rounded-3xl border-slate-800 bg-slate-900">
            <CardContent className="p-5">
              <div className="mb-4 flex items-center justify-between">
                <div>
                  <h2 className="text-xl font-bold">Detalle de sede</h2>
                  <p className="text-sm text-slate-400">{selected.ubicacion} · {selected.ip}</p>
                </div>
                <Badge estado={selected.estado} />
              </div>

              <div className="mb-5 rounded-3xl border border-slate-800 bg-slate-950 p-4">
                <div className="flex items-center justify-between">
                  <div>
                    <div className="text-sm text-slate-400">{selected.router}</div>
                    <div className="text-2xl font-bold">{selected.nombre}</div>
                  </div>
                  <Router className="h-9 w-9 text-cyan-300" />
                </div>
                <div className="mt-4 grid grid-cols-3 gap-3 text-center">
                  <div className="rounded-2xl bg-slate-900 p-3"><div className="text-lg font-bold">{selected.disponibilidad}%</div><div className="text-xs text-slate-400">Uptime</div></div>
                  <div className="rounded-2xl bg-slate-900 p-3"><div className="text-lg font-bold">{selected.caidasHoy}</div><div className="text-xs text-slate-400">Caídas hoy</div></div>
                  <div className="rounded-2xl bg-slate-900 p-3"><div className="text-lg font-bold">{selected.equipos.length}</div><div className="text-xs text-slate-400">Items</div></div>
                </div>
              </div>

              <div className="space-y-3">
                {selected.equipos.map((e) => (
                  <div key={e.nombre} className="flex items-center justify-between rounded-2xl border border-slate-800 bg-slate-950 p-3">
                    <div className="flex items-center gap-3">
                      <div className="rounded-xl bg-slate-900 p-2 text-cyan-300">{iconByType(e.tipo)}</div>
                      <div>
                        <div className="font-medium">{e.nombre}</div>
                        <div className="text-xs text-slate-500">{e.tipo}</div>
                      </div>
                    </div>
                    <Badge estado={e.estado} />
                  </div>
                ))}
              </div>
            </CardContent>
          </Card>
        </div>

        <div className="mt-6 grid gap-6 lg:grid-cols-[.8fr_1.2fr]">
          <Card className="rounded-3xl border-slate-800 bg-slate-900">
            <CardContent className="p-5">
              <div className="mb-4 flex items-center gap-2"><BarChart3 className="h-5 w-5 text-cyan-300" /><h2 className="text-xl font-bold">Gráfico de disponibilidad</h2></div>
              <div className="space-y-4">
                {sedes.map((s) => (
                  <div key={s.id}>
                    <div className="mb-1 flex justify-between text-sm"><span>{s.nombre}</span><span>{s.disponibilidad}%</span></div>
                    <div className="h-3 rounded-full bg-slate-800">
                      <div className={`h-3 rounded-full ${s.estado === "down" ? "bg-red-400" : s.estado === "warning" ? "bg-amber-400" : "bg-emerald-400"}`} style={{ width: `${s.disponibilidad}%` }} />
                    </div>
                  </div>
                ))}
              </div>
            </CardContent>
          </Card>

          <Card className="rounded-3xl border-slate-800 bg-slate-900">
            <CardContent className="p-5">
              <div className="mb-4 flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
                <div>
                  <h2 className="text-xl font-bold">Sedes monitoreadas</h2>
                  <p className="text-sm text-slate-400">Filtro rápido por nombre, router o ubicación.</p>
                </div>
                <div className="flex items-center gap-2 rounded-2xl border border-slate-800 bg-slate-950 px-3 py-2">
                  <Search className="h-4 w-4 text-slate-500" />
                  <input value={query} onChange={(e) => setQuery(e.target.value)} placeholder="Buscar sede..." className="bg-transparent text-sm outline-none placeholder:text-slate-600" />
                </div>
              </div>
              <div className="overflow-hidden rounded-2xl border border-slate-800">
                <table className="w-full text-left text-sm">
                  <thead className="bg-slate-950 text-slate-400">
                    <tr><th className="p-3">Sede</th><th className="p-3">Router</th><th className="p-3">Estado</th><th className="p-3">Última caída</th></tr>
                  </thead>
                  <tbody>
                    {sedesFiltradas.map((s) => (
                      <tr key={s.id} className="border-t border-slate-800 hover:bg-slate-950/70">
                        <td className="p-3 font-medium">{s.nombre}<div className="text-xs text-slate-500">{s.ubicacion}</div></td>
                        <td className="p-3 text-slate-300">{s.router}</td>
                        <td className="p-3"><Badge estado={s.estado} /></td>
                        <td className="p-3 text-slate-400">{s.ultimaCaida}</td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            </CardContent>
          </Card>
        </div>

        <Card className="mt-6 rounded-3xl border-slate-800 bg-slate-900">
          <CardContent className="p-5">
            <h2 className="mb-4 text-xl font-bold">Últimos eventos</h2>
            <div className="overflow-hidden rounded-2xl border border-slate-800">
              <table className="w-full text-left text-sm">
                <thead className="bg-slate-950 text-slate-400"><tr><th className="p-3">Fecha</th><th className="p-3">Sede</th><th className="p-3">Equipo</th><th className="p-3">Evento</th><th className="p-3">Detalle</th></tr></thead>
                <tbody>
                  {eventos.map((ev, i) => (
                    <tr key={i} className="border-t border-slate-800">
                      <td className="p-3 text-slate-400">{ev.fecha}</td>
                      <td className="p-3">{ev.sede}</td>
                      <td className="p-3">{ev.equipo}</td>
                      <td className={`p-3 font-bold ${ev.evento.includes("down") ? "text-red-300" : "text-emerald-300"}`}>{ev.evento}</td>
                      <td className="p-3 text-slate-400">{ev.detalle}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </CardContent>
        </Card>
      </div>
    </div>
  );
}