"use client";

import Link from "next/link";
import { useEffect, useState } from "react";
import {
  Wallet,
  ReceiptText,
  Clock3,
  Users,
  ArrowRight,
  Check,
  X,
} from "lucide-react";
import { PageHeader } from "@/components/ui/PageHeader";
import { StatCard } from "@/components/ui/StatCard";
import { StatusBadge } from "@/components/ui/StatusBadge";
import { Avatar } from "@/components/ui/Avatar";
import { NetworkBadge } from "@/components/NetworkBadge";
import { Skeleton } from "@/components/ui/Skeleton";
import { AlertCircle } from "lucide-react";
import dynamic from "next/dynamic";
import { formatCurrency, timeAgo } from "@/lib/mock-data";
import { useAdminOrders } from "@/lib/data/admin-orders-provider";
import {
  totalRevenue,
  countByStatus,
  revenueLastNDays,
  ordersByNetwork,
  fetchActiveCustomerCount,
} from "@/lib/data/dashboard-stats";
import { NetworkId } from "@/lib/types";

// recharts is genuinely heavy and doesn't benefit from SSR — dynamic +
// ssr:false defers its JS until after the main dashboard content is
// interactive, instead of blocking on it.
const RevenueChart = dynamic(
  () => import("@/components/charts/RevenueChart").then((m) => m.RevenueChart),
  { ssr: false, loading: () => <Skeleton className="h-[260px] w-full" /> }
);
const NetworkDonut = dynamic(
  () => import("@/components/charts/NetworkDonut").then((m) => m.NetworkDonut),
  { ssr: false, loading: () => <Skeleton className="h-[220px] w-full" /> }
);

export default function DashboardPage() {
  const { orders, loading, error, approveOrder, rejectOrder } = useAdminOrders();
  const [activeCustomers, setActiveCustomers] = useState<number | null>(null);
  const [customerError, setCustomerError] = useState<string | null>(null);
  const [actingOn, setActingOn] = useState<string | null>(null);

  useEffect(() => {
    fetchActiveCustomerCount()
      .then(setActiveCustomers)
      .catch((err) => {
        setActiveCustomers(null);
        setCustomerError(err instanceof Error ? err.message : "Couldn't load customer count.");
      });
  }, []);

  const revenueData = revenueLastNDays(orders, 14);
  const networkData = ordersByNetwork(orders);
  const recentOrders = orders.slice(0, 6);
  const pendingOrders = orders.filter((o) => o.status === "pending").slice(0, 5);

  async function quickAction(orderId: string, action: "approve" | "reject") {
    const order = orders.find((o) => o.dbId === orderId);
    if (!order) return;
    setActingOn(orderId);
    try {
      if (action === "approve") await approveOrder(order);
      else await rejectOrder(order);
    } finally {
      setActingOn(null);
    }
  }

  return (
    <div>
      <PageHeader
        title="Dashboard"
        subtitle="Here's what's happening with SharedNet today"
      />

      {(error || customerError) && (
        <div className="mb-4 flex items-center gap-2 rounded-xl bg-danger/10 px-4 py-3 text-sm text-danger">
          <AlertCircle size={16} className="shrink-0" />
          {error || customerError}
        </div>
      )}

      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-4">
        <StatCard label="Total Revenue" value={formatCurrency(totalRevenue(orders))} icon={Wallet} tone="gold" />
        <StatCard label="Total Orders" value={String(orders.length)} icon={ReceiptText} tone="teal" />
        <StatCard
          label="Pending Verification"
          value={String(countByStatus(orders, "pending"))}
          icon={Clock3}
          tone="danger"
        />
        <StatCard
          label="Active Customers"
          value={activeCustomers === null ? "—" : String(activeCustomers)}
          icon={Users}
          tone="zong"
        />
      </div>

      <div className="mt-5 grid grid-cols-1 gap-4 xl:grid-cols-3">
        <div className="panel p-5 xl:col-span-2">
          <div className="mb-1 flex items-center justify-between">
            <div>
              <h3 className="font-display text-[15px] font-semibold">Revenue</h3>
              <p className="text-xs text-muted">Last 14 days</p>
            </div>
          </div>
          <RevenueChart data={revenueData} />
        </div>

        <div className="panel p-5">
          <h3 className="mb-1 font-display text-[15px] font-semibold">Orders by Network</h3>
          <p className="mb-2 text-xs text-muted">All-time distribution</p>
          <NetworkDonut data={networkData} />
          <div className="mt-2 flex flex-col gap-2">
            {(["zong", "jazz", "ufone"] as const).map((id) => (
              <div key={id} className="flex items-center justify-between text-xs">
                <div className="flex items-center gap-2">
                  <span
                    className="h-2.5 w-2.5 rounded-full"
                    style={{ background: { zong: "#8DD124", jazz: "#6B2027", ufone: "#F2760D" }[id] }}
                  />
                  <span className="capitalize text-muted">{id}</span>
                </div>
                <span className="font-semibold">{networkData[id] ?? 0}</span>
              </div>
            ))}
          </div>
        </div>
      </div>

      <div className="mt-5 grid grid-cols-1 gap-4 xl:grid-cols-3">
        <div className="panel xl:col-span-2">
          <div className="flex items-center justify-between px-5 pt-5">
            <h3 className="font-display text-[15px] font-semibold">Recent Orders</h3>
            <Link
              href="/orders"
              className="flex items-center gap-1 text-xs font-semibold text-gold-dim dark:text-gold-bright"
            >
              View all <ArrowRight size={13} />
            </Link>
          </div>
          {loading ? (
            <div className="flex flex-col gap-2 p-5">
              {Array.from({ length: 4 }).map((_, i) => (
                <Skeleton key={i} className="h-12 w-full" />
              ))}
            </div>
          ) : recentOrders.length === 0 ? (
            <p className="px-5 py-10 text-center text-sm text-muted">No orders yet.</p>
          ) : (
            <div className="thin-scrollbar mt-3 overflow-x-auto">
              <table className="w-full min-w-[560px] text-left text-sm">
                <thead>
                  <tr className="border-y border-black/[0.06] text-[11px] uppercase tracking-wide text-muted dark:border-white/[0.06]">
                    <th className="px-5 py-2.5 font-medium">Customer</th>
                    <th className="px-5 py-2.5 font-medium">Package</th>
                    <th className="px-5 py-2.5 font-medium">Amount</th>
                    <th className="px-5 py-2.5 font-medium">Status</th>
                  </tr>
                </thead>
                <tbody>
                  {recentOrders.map((o) => (
                    <tr
                      key={o.dbId}
                      className="border-b border-black/[0.04] last:border-0 dark:border-white/[0.04]"
                    >
                      <td className="px-5 py-3">
                        <div className="flex items-center gap-2.5">
                          <Avatar name={o.customerName} size="sm" />
                          <div className="min-w-0">
                            <p className="truncate text-[13px] font-medium">{o.customerName}</p>
                            <p className="text-[11px] text-muted" suppressHydrationWarning>
                              {timeAgo(o.createdAt)}
                            </p>
                          </div>
                        </div>
                      </td>
                      <td className="px-5 py-3">
                        <div className="flex items-center gap-2">
                          <NetworkBadge network={o.network as NetworkId} size="sm" />
                          <span className="text-[13px] text-muted">{o.packageName}</span>
                        </div>
                      </td>
                      <td className="px-5 py-3 tnum text-[13px] font-semibold">
                        {formatCurrency(o.amount)}
                      </td>
                      <td className="px-5 py-3">
                        <StatusBadge status={o.status} compact />
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          )}
        </div>

        <div className="panel p-5">
          <div className="mb-1 flex items-center justify-between">
            <h3 className="font-display text-[15px] font-semibold">Pending Orders</h3>
            <Link
              href="/orders?status=pending"
              className="text-xs font-semibold text-gold-dim dark:text-gold-bright"
            >
              See all
            </Link>
          </div>
          <p className="mb-3 text-xs text-muted">Needs your verification</p>
          <div className="flex flex-col gap-3">
            {loading ? (
              <Skeleton className="h-24 w-full" />
            ) : pendingOrders.length === 0 ? (
              <p className="py-8 text-center text-xs text-muted">All caught up 🎉</p>
            ) : (
              pendingOrders.map((o) => (
                <div key={o.dbId} className="rounded-2xl border border-black/[0.06] p-3 dark:border-white/[0.06]">
                  <div className="flex items-center gap-2.5">
                    <Avatar name={o.customerName} size="sm" />
                    <div className="min-w-0 flex-1">
                      <p className="truncate text-[13px] font-medium">{o.customerName}</p>
                      <p className="truncate text-[11px] text-muted">{o.packageName}</p>
                    </div>
                    <p className="tnum text-[13px] font-semibold">{formatCurrency(o.amount)}</p>
                  </div>
                  <div className="mt-2.5 flex gap-2">
                    <button
                      disabled={actingOn === o.dbId}
                      onClick={() => quickAction(o.dbId, "approve")}
                      className="flex flex-1 items-center justify-center gap-1 rounded-xl bg-success/12 py-1.5 text-xs font-semibold text-success disabled:opacity-50"
                    >
                      <Check size={13} /> Approve
                    </button>
                    <button
                      disabled={actingOn === o.dbId}
                      onClick={() => quickAction(o.dbId, "reject")}
                      className="flex flex-1 items-center justify-center gap-1 rounded-xl bg-danger/12 py-1.5 text-xs font-semibold text-danger disabled:opacity-50"
                    >
                      <X size={13} /> Reject
                    </button>
                  </div>
                </div>
              ))
            )}
          </div>
        </div>
      </div>
    </div>
  );
}