"use client";

import Link from "next/link";
import { Activity, FileText, Gauge, Wallet, Wifi, Zap } from "lucide-react";
import { useApi } from "@/lib/client";
import { Badge, Button, Card, CardHeader, DataTable, PageHeader, StatCard, type Column } from "@/components/ui";
import { formatDate, money } from "@/lib/utils";

interface PortalData {
  customer: {
    customerCode: string;
    name: string;
    mobile: string;
    status: string;
    internetStatus: string;
    expiryDate: string | null;
    dueAmount: string;
    balance: string;
    monthlyPrice: string;
    registrationDate: string;
    pppoeUsername: string | null;
    packageName: string | null;
    speed: string | null;
    routerName: string | null;
  };
  currentBill: {
    id: number;
    invoiceNo: string;
    period: string;
    dueDate: string;
    expiryDate: string;
    status: string;
    periodLabel: string;
    totals: { total: number; paid: number; due: number };
  } | null;
  bills: { id: number; invoiceNo: string; periodLabel: string; amount: string; paidAmount: string; dueAmount: string; status: string; dueDate: string }[];
  payments: { id: number; receiptNo: string; amount: string; methodName: string | null; paymentDate: string }[];
  tickets: { id: number; ticketNo: string; subject: string; status: string; createdAt: string }[];
  session: { ipAddress: string | null; uptime: string | null; downloadRate: string | null; uploadRate: string | null; seenAt: string } | null;
  paymentMethods: { id: number; name: string; accountNumber: string | null }[];
  totals: { due: number; paid: number };
}

export default function PortalDashboard() {
  const { data, loading } = useApi<PortalData>("/api/portal");

  const billColumns: Column<Record<string, unknown>>[] = [
    { key: "invoiceNo", label: "Invoice", render: (r) => <Link href={`/invoice/${r.id}`} className="font-mono text-xs text-brand-400 hover:underline">{String(r.invoiceNo)}</Link> },
    { key: "periodLabel", label: "Period" },
    { key: "amount", label: "Amount", render: (r) => money(r.amount) },
    { key: "paidAmount", label: "Paid", render: (r) => money(r.paidAmount) },
    { key: "dueAmount", label: "Due", render: (r) => <span className={Number(r.dueAmount) > 0 ? "text-rose-300" : ""}>{money(r.dueAmount)}</span> },
    { key: "dueDate", label: "Due date", hideOnMobile: true, render: (r) => formatDate(r.dueDate) },
    { key: "status", label: "Status", render: (r) => <Badge value={String(r.status)} /> },
  ];

  if (loading && !data) return <div className="skeleton h-96 rounded-2xl" />;

  return (
    <>
      <PageHeader
        title={`Hello, ${data?.customer.name.split(" ")[0] ?? ""}`}
        subtitle={`${data?.customer.packageName ?? "No package"} · ${data?.customer.speed ?? ""}`}
        icon={<Wifi className="h-5 w-5" />}
        actions={
          <>
            <Link href="/portal/tickets">
              <Button size="sm" variant="secondary">
                Raise a ticket
              </Button>
            </Link>
            {data?.currentBill ? (
              <Link href={`/invoice/${data.currentBill.id}`}>
                <Button size="sm" icon={<FileText className="h-4 w-4" />}>
                  View invoice
                </Button>
              </Link>
            ) : null}
          </>
        }
      />

      <div className="grid grid-cols-2 gap-3 lg:grid-cols-4">
        <StatCard label="Connection" value={data?.customer.internetStatus === "enabled" ? "Online" : "Offline"} icon={<Zap className="h-5 w-5" />} tone={data?.customer.internetStatus === "enabled" ? "green" : "rose"} />
        <StatCard label="Outstanding due" value={money(data?.totals.due)} icon={<Wallet className="h-5 w-5" />} tone="amber" />
        <StatCard label="Monthly charge" value={money(data?.customer.monthlyPrice)} icon={<Gauge className="h-5 w-5" />} tone="brand" />
        <StatCard label="Expiry date" value={formatDate(data?.customer.expiryDate)} icon={<Activity className="h-5 w-5" />} tone="cyan" />
      </div>

      <div className="mt-4 grid gap-4 lg:grid-cols-3">
        <Card className="lg:col-span-2">
          <CardHeader title="Current bill" subtitle={data?.currentBill?.periodLabel ?? "No open bill"} icon={<FileText className="h-4 w-4" />} action={data?.currentBill ? <Badge value={data.currentBill.status} /> : null} />
          <div className="p-4">
            {data?.currentBill ? (
              <div className="grid grid-cols-2 gap-3 sm:grid-cols-4">
                <div className="rounded-xl border border-white/8 bg-white/4 p-3">
                  <p className="text-[10px] uppercase tracking-wider text-slate-500">Invoice</p>
                  <p className="font-mono text-sm text-slate-100">{data.currentBill.invoiceNo}</p>
                </div>
                <div className="rounded-xl border border-white/8 bg-white/4 p-3">
                  <p className="text-[10px] uppercase tracking-wider text-slate-500">Total</p>
                  <p className="text-sm text-slate-100">{money(data.currentBill.totals.total)}</p>
                </div>
                <div className="rounded-xl border border-white/8 bg-white/4 p-3">
                  <p className="text-[10px] uppercase tracking-wider text-slate-500">Paid</p>
                  <p className="text-sm text-emerald-300">{money(data.currentBill.totals.paid)}</p>
                </div>
                <div className="rounded-xl border border-white/8 bg-white/4 p-3">
                  <p className="text-[10px] uppercase tracking-wider text-slate-500">Balance</p>
                  <p className="text-sm text-rose-300">{money(data.currentBill.totals.due)}</p>
                </div>
              </div>
            ) : (
              <p className="rounded-xl border border-emerald-500/20 bg-emerald-500/8 px-4 py-3 text-sm text-emerald-200">You have no outstanding bills. Thank you!</p>
            )}

            <p className="mt-4 text-xs font-semibold uppercase tracking-wider text-slate-500">Payment channels</p>
            <div className="mt-2 grid gap-2 sm:grid-cols-2">
              {(data?.paymentMethods ?? []).map((m) => (
                <div key={m.id} className="flex items-center justify-between rounded-xl border border-white/8 bg-white/4 px-3 py-2">
                  <span className="text-sm text-slate-200">{m.name}</span>
                  <span className="font-mono text-[11px] text-slate-400">{m.accountNumber ?? "—"}</span>
                </div>
              ))}
            </div>
          </div>
        </Card>

        <Card>
          <CardHeader title="Connection status" subtitle={data?.session ? "Live PPPoE session" : "No active session"} icon={<Wifi className="h-4 w-4" />} />
          <div className="space-y-2 p-4 text-sm">
            <div className="flex items-center justify-between">
              <span className="text-slate-400">Status</span>
              <Badge value={data?.customer.internetStatus === "enabled" ? "active" : "disabled"} label={data?.customer.internetStatus} />
            </div>
            <div className="flex items-center justify-between">
              <span className="text-slate-400">Username</span>
              <span className="font-mono text-xs text-slate-200">{data?.customer.pppoeUsername ?? "—"}</span>
            </div>
            <div className="flex items-center justify-between">
              <span className="text-slate-400">IP address</span>
              <span className="font-mono text-xs text-slate-200">{data?.session?.ipAddress ?? "—"}</span>
            </div>
            <div className="flex items-center justify-between">
              <span className="text-slate-400">Session uptime</span>
              <span className="font-mono text-xs text-slate-200">{data?.session?.uptime ?? "—"}</span>
            </div>
            <div className="flex items-center justify-between">
              <span className="text-slate-400">Speed</span>
              <span className="font-mono text-xs text-slate-200">
                ↓{data?.session?.downloadRate ?? "—"} ↑{data?.session?.uploadRate ?? "—"}
              </span>
            </div>
            <div className="flex items-center justify-between">
              <span className="text-slate-400">Account status</span>
              <Badge value={data?.customer.status} />
            </div>
          </div>
        </Card>
      </div>

      <div className="mt-4 grid gap-4 lg:grid-cols-2">
        <Card className="p-2">
          <CardHeader title="Billing history" subtitle="Download invoices anytime" />
          <DataTable columns={billColumns} rows={(data?.bills ?? []) as unknown as Record<string, unknown>[]} loading={loading} rowKey={(r) => String(r.invoiceNo)} empty="No bills yet" />
        </Card>

        <div className="space-y-4">
          <Card>
            <CardHeader title="Payment history" subtitle={`${data?.payments.length ?? 0} payment(s)`} icon={<Wallet className="h-4 w-4" />} />
            <ul className="divide-y divide-white/6">
              {(data?.payments ?? []).slice(0, 6).map((p) => (
                <li key={p.id} className="flex items-center justify-between px-4 py-2.5">
                  <div>
                    <p className="font-mono text-xs text-slate-200">{p.receiptNo}</p>
                    <p className="text-[11px] text-slate-500">
                      {p.methodName ?? "—"} · {formatDate(p.paymentDate)}
                    </p>
                  </div>
                  <span className="text-sm font-semibold text-emerald-300">{money(p.amount)}</span>
                </li>
              ))}
              {!data?.payments.length ? <li className="px-4 py-6 text-center text-xs text-slate-500">No payments recorded</li> : null}
            </ul>
          </Card>

          <Card>
            <CardHeader title="My tickets" icon={<FileText className="h-4 w-4" />} action={<Link href="/portal/tickets" className="text-xs text-brand-400 hover:underline">View all</Link>} />
            <ul className="divide-y divide-white/6">
              {(data?.tickets ?? []).slice(0, 4).map((t) => (
                <li key={t.id} className="flex items-center justify-between gap-2 px-4 py-2.5">
                  <div className="min-w-0">
                    <p className="truncate text-sm text-slate-100">{t.subject}</p>
                    <p className="font-mono text-[11px] text-slate-500">{t.ticketNo}</p>
                  </div>
                  <Badge value={t.status} />
                </li>
              ))}
              {!data?.tickets.length ? <li className="px-4 py-6 text-center text-xs text-slate-500">No tickets raised</li> : null}
            </ul>
          </Card>
        </div>
      </div>
    </>
  );
}