"use client";

import Link from "next/link";
import {
  Activity,
  AlertTriangle,
  Ban,
  Cpu,
  FilePlus2,
  HardDrive,
  MemoryStick,
  Radio,
  Router,
  Timer,
  TrendingUp,
  UserCheck,
  Users,
  Wallet,
  Zap,
} from "lucide-react";
import { useApi } from "@/lib/client";
import { BarChart, DoughnutChart, LineChart } from "@/components/charts";
import { Badge, Button, Card, CardHeader, DataTable, PageHeader, StatCard, type Column } from "@/components/ui";
import { formatDateTime, money, periodLabel } from "@/lib/utils";

interface DashboardData {
  cards: Record<string, number>;
  monitoring: {
    routers: {
      id: number;
      name: string;
      status: string;
      cpuUsage: number;
      ramUsage: number;
      uptime: string;
      activeUsers: number;
      downloadTraffic: string;
      uploadTraffic: string;
      totalTraffic: string;
    }[];
    cpuAvg: number;
    ramAvg: number;
    uptimeSeconds: number;
  };
  charts: {
    monthlyRevenue: { period: string; total: number }[];
    customerGrowth: { period: string; count: number }[];
    billStatus: { status: string; count: number }[];
    customerStatus: { status: string; count: number }[];
    networkTraffic: { name: string; download: string; upload: string }[];
  };
  widgets: {
    recentPayments: { id: number; receiptNo: string; amount: string; methodName: string; paymentDate: string; customerName: string }[];
    recentCustomers: { id: number; name: string; customerCode: string; mobile: string; status: string; registrationDate: string }[];
    recentTickets: { id: number; ticketNo: string; subject: string; status: string; priority: string; customerName: string }[];
    offlineRouters: { id: number; name: string; ipAddress: string; status: string }[];
    recentActivity: { id: number; action: string; module: string; description: string | null; userName: string; createdAt: string }[];
    notifications: { id: number; title: string; message: string | null; level: string; createdAt: string }[];
  };
}

function uptimeLabel(seconds: number) {
  const d = Math.floor(seconds / 86400);
  const h = Math.floor((seconds % 86400) / 3600);
  const m = Math.floor((seconds % 3600) / 60);
  return `${d}d ${h}h ${m}m`;
}

export default function DashboardPage() {
  const { data, loading, reload } = useApi<DashboardData>("/api/dashboard");
  const cards = data?.cards;

  const paymentColumns: Column<Record<string, unknown>>[] = [
    { key: "receiptNo", label: "Receipt", render: (r) => <span className="font-mono text-xs text-slate-300">{String(r.receiptNo)}</span> },
    { key: "customerName", label: "Customer" },
    { key: "methodName", label: "Method", hideOnMobile: true },
    { key: "amount", label: "Amount", render: (r) => <span className="font-semibold text-emerald-300">{money(r.amount)}</span> },
    { key: "paymentDate", label: "Date", hideOnMobile: true, render: (r) => String(r.paymentDate) },
  ];

  return (
    <>
      <PageHeader
        title="Operations dashboard"
        subtitle="Live view of customers, revenue, routers and support activity"
        icon={<Activity className="h-5 w-5" />}
        actions={
          <>
            <Button variant="secondary" size="sm" icon={<TrendingUp className="h-4 w-4" />} onClick={() => void reload()}>
              Refresh
            </Button>
            <Link href="/admin/billing">
              <Button size="sm" icon={<FilePlus2 className="h-4 w-4" />}>
                Generate bills
              </Button>
            </Link>
          </>
        }
      />

      <div className="grid grid-cols-2 gap-3 sm:grid-cols-3 xl:grid-cols-6">
        <StatCard label="Total customers" value={cards?.totalCustomers ?? "—"} icon={<Users className="h-5 w-5" />} tone="brand" />
        <StatCard label="Active" value={cards?.activeCustomers ?? "—"} icon={<UserCheck className="h-5 w-5" />} tone="green" />
        <StatCard label="Offline / disabled" value={cards?.offlineCustomers ?? "—"} icon={<Ban className="h-5 w-5" />} tone="rose" />
        <StatCard label="Suspended" value={cards?.suspendedCustomers ?? "—"} icon={<AlertTriangle className="h-5 w-5" />} tone="amber" />
        <StatCard label="Free users" value={cards?.freeCustomers ?? "—"} icon={<Zap className="h-5 w-5" />} tone="violet" />
        <StatCard label="Monthly revenue" value={money(cards?.monthlyRevenue)} icon={<Wallet className="h-5 w-5" />} tone="cyan" />
        <StatCard label="Today collection" value={money(cards?.todayCollection)} icon={<Wallet className="h-5 w-5" />} tone="green" />
        <StatCard label="Total due" value={money(cards?.dueAmount)} icon={<AlertTriangle className="h-5 w-5" />} tone="amber" />
        <StatCard label="Routers" value={cards?.totalRouters ?? "—"} icon={<Router className="h-5 w-5" />} tone="brand" hint={`${cards?.onlineRouters ?? 0} online · ${cards?.offlineRouters ?? 0} offline`} />
        <StatCard label="Online routers" value={cards?.onlineRouters ?? "—"} icon={<Radio className="h-5 w-5" />} tone="green" />
        <StatCard label="Offline routers" value={cards?.offlineRouters ?? "—"} icon={<Ban className="h-5 w-5" />} tone="rose" />
        <StatCard label="Live PPPoE users" value={cards?.livePppoeUsers ?? "—"} icon={<Zap className="h-5 w-5" />} tone="cyan" />
      </div>

      <div className="mt-5 grid gap-4 xl:grid-cols-3">
        <Card className="xl:col-span-2">
          <CardHeader title="Monthly revenue" subtitle="Collected payments over the last 6 months" icon={<TrendingUp className="h-4 w-4" />} />
          <div className="p-4">
            {loading || !data ? (
              <div className="skeleton h-[260px] rounded-xl" />
            ) : (
              <LineChart
                labels={data.charts.monthlyRevenue.map((m) => periodLabel(m.period))}
                datasets={[{ label: "Collection", data: data.charts.monthlyRevenue.map((m) => Number(m.total)), color: "#4f8cff", fill: true }]}
              />
            )}
          </div>
        </Card>

        <Card>
          <CardHeader title="Payment status" subtitle="Bills for the current period" icon={<Wallet className="h-4 w-4" />} />
          <div className="p-4">
            {loading || !data ? (
              <div className="skeleton h-[240px] rounded-xl" />
            ) : (
              <DoughnutChart labels={data.charts.billStatus.map((b) => b.status)} data={data.charts.billStatus.map((b) => Number(b.count))} />
            )}
          </div>
        </Card>
      </div>

      <div className="mt-4 grid gap-4 xl:grid-cols-3">
        <Card>
          <CardHeader title="Customer growth" subtitle="New registrations per month" icon={<Users className="h-4 w-4" />} />
          <div className="p-4">
            {loading || !data ? (
              <div className="skeleton h-[220px] rounded-xl" />
            ) : (
              <BarChart labels={data.charts.customerGrowth.map((m) => periodLabel(m.period))} datasets={[{ label: "Customers", data: data.charts.customerGrowth.map((m) => Number(m.count)), color: "#22d3ee" }]} height={220} />
            )}
          </div>
        </Card>

        <Card>
          <CardHeader title="Active vs inactive" subtitle="Customer status distribution" icon={<UserCheck className="h-4 w-4" />} />
          <div className="p-4">
            {loading || !data ? (
              <div className="skeleton h-[220px] rounded-xl" />
            ) : (
              <DoughnutChart labels={data.charts.customerStatus.map((s) => s.status)} data={data.charts.customerStatus.map((s) => Number(s.count))} height={220} />
            )}
          </div>
        </Card>

        <Card>
          <CardHeader title="System monitoring" subtitle={`Uptime ${uptimeLabel(data?.monitoring.uptimeSeconds ?? 0)}`} icon={<Cpu className="h-4 w-4" />} />
          <div className="space-y-3 p-4">
            <div>
              <div className="flex items-center justify-between text-xs text-slate-400">
                <span className="flex items-center gap-1.5">
                  <Cpu className="h-3.5 w-3.5" /> MikroTik CPU (avg)
                </span>
                <span className="font-mono">{data?.monitoring.cpuAvg ?? 0}%</span>
              </div>
              <div className="mt-1.5 h-2 overflow-hidden rounded-full bg-white/8">
                <div className="h-full rounded-full bg-gradient-to-r from-brand-500 to-cyan-400 transition-all" style={{ width: `${data?.monitoring.cpuAvg ?? 0}%` }} />
              </div>
            </div>
            <div>
              <div className="flex items-center justify-between text-xs text-slate-400">
                <span className="flex items-center gap-1.5">
                  <MemoryStick className="h-3.5 w-3.5" /> MikroTik RAM (avg)
                </span>
                <span className="font-mono">{data?.monitoring.ramAvg ?? 0}%</span>
              </div>
              <div className="mt-1.5 h-2 overflow-hidden rounded-full bg-white/8">
                <div className="h-full rounded-full bg-gradient-to-r from-violet-500 to-fuchsia-400 transition-all" style={{ width: `${data?.monitoring.ramAvg ?? 0}%` }} />
              </div>
            </div>
            <div className="grid grid-cols-2 gap-2 pt-1">
              <div className="rounded-xl border border-white/8 bg-white/4 p-2.5">
                <p className="text-[10px] uppercase tracking-wider text-slate-500">Download</p>
                <p className="font-mono text-xs text-slate-100">{data?.monitoring.routers[0]?.downloadTraffic ?? "—"}</p>
              </div>
              <div className="rounded-xl border border-white/8 bg-white/4 p-2.5">
                <p className="text-[10px] uppercase tracking-wider text-slate-500">Upload</p>
                <p className="font-mono text-xs text-slate-100">{data?.monitoring.routers[0]?.uploadTraffic ?? "—"}</p>
              </div>
            </div>
            <p className="flex items-center gap-1.5 text-[11px] text-slate-500">
              <Timer className="h-3.5 w-3.5" /> Router uptime: {data?.monitoring.routers[0]?.uptime ?? "—"}
            </p>
          </div>
        </Card>
      </div>

      <div className="mt-4 grid gap-4 xl:grid-cols-2">
        <Card>
          <CardHeader title="Router health" subtitle="CPU, RAM, sessions and traffic" icon={<HardDrive className="h-4 w-4" />} action={<Link href="/admin/routers" className="text-xs text-brand-400 hover:underline">Manage</Link>} />
          <div className="space-y-2 p-3">
            {(data?.monitoring.routers ?? []).map((r) => (
              <div key={r.id} className="rounded-xl border border-white/8 bg-white/4 p-3">
                <div className="flex items-center justify-between gap-2">
                  <div className="min-w-0">
                    <p className="truncate text-sm font-semibold text-slate-100">{r.name}</p>
                    <p className="text-[11px] text-slate-500">
                      {r.activeUsers} active · {r.uptime}
                    </p>
                  </div>
                  <Badge value={r.status} />
                </div>
                <div className="mt-2 grid grid-cols-2 gap-2">
                  <div>
                    <p className="text-[10px] text-slate-500">CPU {r.cpuUsage}%</p>
                    <div className="h-1.5 overflow-hidden rounded-full bg-white/8">
                      <div className="h-full bg-brand-500" style={{ width: `${r.cpuUsage}%` }} />
                    </div>
                  </div>
                  <div>
                    <p className="text-[10px] text-slate-500">RAM {r.ramUsage}%</p>
                    <div className="h-1.5 overflow-hidden rounded-full bg-white/8">
                      <div className="h-full bg-violet-500" style={{ width: `${r.ramUsage}%` }} />
                    </div>
                  </div>
                </div>
                <p className="mt-2 font-mono text-[10px] text-slate-500">
                  ↓ {r.downloadTraffic} · ↑ {r.uploadTraffic}
                </p>
              </div>
            ))}
            {!data?.monitoring.routers.length ? <p className="py-6 text-center text-xs text-slate-500">No routers configured</p> : null}
          </div>
        </Card>

        <Card>
          <CardHeader title="Recent payments" subtitle="Latest collections" icon={<Wallet className="h-4 w-4" />} action={<Link href="/admin/payments" className="text-xs text-brand-400 hover:underline">All payments</Link>} />
          <div className="p-2">
            <DataTable
              columns={paymentColumns}
              rows={(data?.widgets.recentPayments ?? []) as unknown as Record<string, unknown>[]}
              loading={loading}
              rowKey={(r) => String(r.id)}
            />
          </div>
        </Card>
      </div>

      <div className="mt-4 grid gap-4 xl:grid-cols-3">
        <Card>
          <CardHeader title="Recent customers" icon={<Users className="h-4 w-4" />} />
          <ul className="divide-y divide-white/6">
            {(data?.widgets.recentCustomers ?? []).map((c) => (
              <li key={c.id}>
                <Link href={`/admin/customers/${c.id}`} className="flex items-center justify-between gap-3 px-4 py-2.5 transition hover:bg-white/5">
                  <div className="min-w-0">
                    <p className="truncate text-sm text-slate-100">{c.name}</p>
                    <p className="text-[11px] text-slate-500">
                      {c.customerCode} · {c.mobile}
                    </p>
                  </div>
                  <Badge value={c.status} />
                </Link>
              </li>
            ))}
          </ul>
        </Card>

        <Card>
          <CardHeader title="Recent tickets" icon={<AlertTriangle className="h-4 w-4" />} action={<Link href="/admin/tickets" className="text-xs text-brand-400 hover:underline">Open queue</Link>} />
          <ul className="divide-y divide-white/6">
            {(data?.widgets.recentTickets ?? []).map((t) => (
              <li key={t.id}>
                <Link href={`/admin/tickets/${t.id}`} className="flex items-start justify-between gap-3 px-4 py-2.5 transition hover:bg-white/5">
                  <div className="min-w-0">
                    <p className="truncate text-sm text-slate-100">{t.subject}</p>
                    <p className="text-[11px] text-slate-500">
                      {t.ticketNo} · {t.customerName}
                    </p>
                  </div>
                  <div className="flex shrink-0 gap-1">
                    <Badge value={t.priority} />
                    <Badge value={t.status} />
                  </div>
                </Link>
              </li>
            ))}
          </ul>
        </Card>

        <Card>
          <CardHeader title="Offline routers & alerts" icon={<Ban className="h-4 w-4" />} />
          <div className="p-3">
            {(data?.widgets.offlineRouters ?? []).length ? (
              <div className="space-y-2">
                {(data?.widgets.offlineRouters ?? []).map((r) => (
                  <div key={r.id} className="flex items-center justify-between rounded-xl border border-rose-500/20 bg-rose-500/8 px-3 py-2">
                    <div>
                      <p className="text-sm text-rose-100">{r.name}</p>
                      <p className="font-mono text-[11px] text-rose-300/70">{r.ipAddress}</p>
                    </div>
                    <Badge value={r.status} />
                  </div>
                ))}
              </div>
            ) : (
              <p className="rounded-xl border border-emerald-500/20 bg-emerald-500/8 px-3 py-2 text-xs text-emerald-200">All routers are reachable.</p>
            )}
            <div className="mt-3 space-y-2">
              {(data?.widgets.notifications ?? []).slice(0, 4).map((n) => (
                <div key={n.id} className="rounded-xl border border-white/8 bg-white/4 px-3 py-2">
                  <p className="text-xs font-semibold text-slate-100">{n.title}</p>
                  {n.message ? <p className="text-[11px] text-slate-500">{n.message}</p> : null}
                  <p className="mt-0.5 text-[10px] text-slate-600">{formatDateTime(n.createdAt)}</p>
                </div>
              ))}
            </div>
          </div>
        </Card>
      </div>
    </>
  );
}