"use client";

import { AlertCircle, TrendingUp, Wallet, ReceiptText, Percent } from "lucide-react";
import { PageHeader } from "@/components/ui/PageHeader";
import { StatCard } from "@/components/ui/StatCard";
import { NetworkBadge } from "@/components/NetworkBadge";
import { Skeleton } from "@/components/ui/Skeleton";
import dynamic from "next/dynamic";
import { formatCurrency, getNetwork } from "@/lib/mock-data";
import { useAdminOrders } from "@/lib/data/admin-orders-provider";
import { NetworkId } from "@/lib/types";

// recharts is genuinely heavy and doesn't benefit from SSR — same
// treatment as the Dashboard page.
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" /> }
);
const StatusBarChart = dynamic(
  () => import("@/components/charts/StatusBarChart").then((m) => m.StatusBarChart),
  { ssr: false, loading: () => <Skeleton className="h-[220px] w-full" /> }
);
import {
  revenueLastNDays,
  ordersByNetwork,
  ordersByStatus,
  topPackages,
  revenueByNetwork,
  averageOrderValue,
  totalRevenue,
  countByStatus,
} from "@/lib/data/dashboard-stats";

export default function AnalyticsPage() {
  // Same live context every other admin page shares — Analytics is a
  // different *view* of the real orders, not a second data source.
  const { orders, loading, error } = useAdminOrders();

  const revenueData = revenueLastNDays(orders, 30);
  const networkData = ordersByNetwork(orders);
  const statusData = ordersByStatus(orders);
  const top = topPackages(orders, 5);
  const revByNetwork = revenueByNetwork(orders);
  const maxTopCount = Math.max(...top.map((t) => t.count), 1);
  const totalOrders = orders.length;
  const approvalRate =
    totalOrders === 0
      ? 0
      : Math.round(
          ((countByStatus(orders, "completed") + countByStatus(orders, "approved")) / totalOrders) * 100
        );

  return (
    <div>
      <PageHeader title="Analytics" subtitle="Business performance at a glance" />

      {error && (
        <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}
        </div>
      )}

      {loading ? (
        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-4">
          {Array.from({ length: 4 }).map((_, i) => (
            <Skeleton key={i} className="h-24 w-full" />
          ))}
        </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(totalOrders)} icon={ReceiptText} tone="teal" />
          <StatCard label="Avg. Order Value" value={formatCurrency(averageOrderValue(orders))} icon={TrendingUp} tone="zong" />
          <StatCard label="Approval Rate" value={`${approvalRate}%`} icon={Percent} tone="gold" />
        </div>
      )}

      <div className="mt-5 grid grid-cols-1 gap-4 xl:grid-cols-3">
        <div className="panel p-5 xl:col-span-2">
          <h3 className="font-display text-[15px] font-semibold">Revenue Trend</h3>
          <p className="mb-2 text-xs text-muted">Last 30 days</p>
          {loading ? <Skeleton className="h-[260px] w-full" /> : <RevenueChart data={revenueData} />}
        </div>
        <div className="panel p-5">
          <h3 className="font-display text-[15px] font-semibold">Orders by Status</h3>
          <p className="mb-2 text-xs text-muted">All-time breakdown</p>
          {loading ? <Skeleton className="h-[220px] w-full" /> : <StatusBarChart data={statusData} />}
        </div>
      </div>

      <div className="mt-5 grid grid-cols-1 gap-4 xl:grid-cols-3">
        <div className="panel p-5">
          <h3 className="font-display text-[15px] font-semibold">Orders by Network</h3>
          <p className="mb-2 text-xs text-muted">All-time distribution</p>
          {loading ? <Skeleton className="h-[220px] w-full" /> : <NetworkDonut data={networkData} />}
        </div>

        <div className="panel p-5">
          <h3 className="mb-3 font-display text-[15px] font-semibold">Revenue by Network</h3>
          {loading ? (
            <div className="flex flex-col gap-4">
              {Array.from({ length: 3 }).map((_, i) => (
                <Skeleton key={i} className="h-8 w-full" />
              ))}
            </div>
          ) : (
            <div className="flex flex-col gap-4">
              {(["zong", "jazz", "ufone"] as const).map((id) => {
                const network = getNetwork(id);
                const max = Math.max(...Object.values(revByNetwork), 1);
                const pct = ((revByNetwork[id] ?? 0) / max) * 100;
                return (
                  <div key={id}>
                    <div className="mb-1.5 flex items-center justify-between">
                      <div className="flex items-center gap-2">
                        <NetworkBadge network={id} size="sm" />
                        <span className="text-xs text-muted">{network?.label}</span>
                      </div>
                      <span className="tnum text-xs font-semibold">
                        {formatCurrency(revByNetwork[id] ?? 0)}
                      </span>
                    </div>
                    <div className="h-2 overflow-hidden rounded-full bg-black/[0.05] dark:bg-white/[0.06]">
                      <div
                        className="h-full rounded-full"
                        style={{
                          width: `${pct}%`,
                          background: { zong: "#8DD124", jazz: "#6B2027", ufone: "#F2760D" }[id],
                        }}
                      />
                    </div>
                  </div>
                );
              })}
            </div>
          )}
        </div>

        <div className="panel p-5">
          <h3 className="mb-3 font-display text-[15px] font-semibold">Top Packages</h3>
          {loading ? (
            <div className="flex flex-col gap-4">
              {Array.from({ length: 4 }).map((_, i) => (
                <Skeleton key={i} className="h-8 w-full" />
              ))}
            </div>
          ) : top.length === 0 ? (
            <p className="py-6 text-center text-xs text-muted">No orders yet.</p>
          ) : (
            <div className="flex flex-col gap-4">
              {top.map((row) => (
                <div key={`${row.network}-${row.name}`}>
                  <div className="mb-1.5 flex items-center justify-between">
                    <div className="flex min-w-0 items-center gap-2">
                      <NetworkBadge network={row.network as NetworkId} size="sm" />
                      <span className="truncate text-xs text-muted">{row.name}</span>
                    </div>
                    <span className="tnum shrink-0 text-xs font-semibold">{row.count} orders</span>
                  </div>
                  <div className="h-2 overflow-hidden rounded-full bg-black/[0.05] dark:bg-white/[0.06]">
                    <div
                      className="h-full rounded-full bg-gold"
                      style={{ width: `${(row.count / maxTopCount) * 100}%` }}
                    />
                  </div>
                </div>
              ))}
            </div>
          )}
        </div>
      </div>
    </div>
  );
}