"use client";

import { useMemo, useState } from "react";
import { AlertCircle, Download, ReceiptText, Wallet, PackageCheck, XCircle } from "lucide-react";
import { PageHeader } from "@/components/ui/PageHeader";
import { StatCard } from "@/components/ui/StatCard";
import { NetworkBadge } from "@/components/NetworkBadge";
import { Button } from "@/components/ui/Button";
import { Skeleton } from "@/components/ui/Skeleton";
import { useAdminOrders } from "@/lib/data/admin-orders-provider";
import { formatCurrency, formatDate } from "@/lib/mock-data";
import { NetworkId } from "@/lib/types";
import { cn } from "@/lib/cn";

const RANGES = [
  { id: "7", label: "Last 7 Days" },
  { id: "30", label: "Last 30 Days" },
  { id: "90", label: "Last 90 Days" },
  { id: "all", label: "All Time" },
] as const;

export default function ReportsPage() {
  // Same live orders context Orders/Dashboard/Payments/Users already
  // share — reports are computed client-side from the real order history,
  // not a second disconnected data source.
  const { orders, loading, error } = useAdminOrders();
  const [range, setRange] = useState<(typeof RANGES)[number]["id"]>("30");

  const filteredOrders = useMemo(() => {
    if (range === "all") return orders;
    const days = Number(range);
    const cutoff = Date.now() - days * 24 * 60 * 60 * 1000;
    return orders.filter((o) => new Date(o.createdAt).getTime() >= cutoff);
  }, [orders, range]);

  const revenueOrders = filteredOrders.filter((o) => o.status === "completed" || o.status === "approved");
  const totalRevenue = revenueOrders.reduce((s, o) => s + o.amount, 0);
  const completedCount = filteredOrders.filter((o) => o.status === "completed").length;
  const rejectedCount = filteredOrders.filter((o) => o.status === "rejected").length;

  // Grouped by (network, packageName) — the name is the order's own
  // package_name_snapshot, so a report for last month still shows the
  // right name and network even if that package was since renamed,
  // discounted, or deleted from the catalog.
  const salesByPackage = useMemo(() => {
    const groups = new Map<string, { network: string; name: string; units: number; revenue: number }>();
    for (const o of filteredOrders) {
      const key = `${o.network}::${o.packageName}`;
      const existing = groups.get(key) ?? { network: o.network, name: o.packageName, units: 0, revenue: 0 };
      existing.units += 1;
      if (o.status === "completed" || o.status === "approved") existing.revenue += o.amount;
      groups.set(key, existing);
    }
    return Array.from(groups.values()).sort((a, b) => b.revenue - a.revenue);
  }, [filteredOrders]);

  function exportCsv() {
    const header = ["Order ID", "Customer", "Package", "Network", "Amount", "Status", "Date"];
    const rows = filteredOrders.map((o) => [
      o.id,
      o.customerName,
      o.packageName,
      o.network,
      String(o.amount),
      o.status,
      formatDate(o.createdAt),
    ]);
    const csv = [header, ...rows].map((r) => r.map((cell) => `"${cell}"`).join(",")).join("\n");
    const blob = new Blob([csv], { type: "text/csv;charset=utf-8;" });
    const url = URL.createObjectURL(blob);
    const a = document.createElement("a");
    a.href = url;
    a.download = `sharednet-report-${range}days.csv`;
    a.click();
    URL.revokeObjectURL(url);
  }

  return (
    <div>
      <PageHeader
        title="Reports"
        subtitle="Generate a snapshot of sales for any time range"
        action={
          <Button onClick={exportCsv} disabled={loading || filteredOrders.length === 0}>
            <Download size={15} /> Export CSV
          </Button>
        }
      />

      {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>
      )}

      <div className="mb-5 flex gap-1.5">
        {RANGES.map((r) => (
          <button
            key={r.id}
            onClick={() => setRange(r.id)}
            className={cn(
              "rounded-xl px-3.5 py-2 text-sm font-medium transition-colors",
              range === r.id ? "bg-gold text-ink font-semibold" : "panel !shadow-none text-muted hover:text-ink dark:hover:text-paper"
            )}
          >
            {r.label}
          </button>
        ))}
      </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="Orders in Range" value={String(filteredOrders.length)} icon={ReceiptText} tone="teal" />
          <StatCard label="Revenue in Range" value={formatCurrency(totalRevenue)} icon={Wallet} tone="gold" />
          <StatCard label="Completed" value={String(completedCount)} icon={PackageCheck} tone="zong" />
          <StatCard label="Rejected" value={String(rejectedCount)} icon={XCircle} tone="danger" />
        </div>
      )}

      <div className="panel mt-5">
        <div className="border-b border-black/[0.06] px-5 py-4 dark:border-white/[0.06]">
          <h3 className="font-display text-[15px] font-semibold">Sales by Package</h3>
          <p className="text-xs text-muted">Ranked by revenue for the selected range</p>
        </div>
        {loading ? (
          <div className="flex flex-col gap-2 p-4">
            {Array.from({ length: 4 }).map((_, i) => (
              <Skeleton key={i} className="h-12 w-full" />
            ))}
          </div>
        ) : salesByPackage.length === 0 ? (
          <p className="px-5 py-10 text-center text-sm text-muted">No orders in this range.</p>
        ) : (
          <div className="thin-scrollbar overflow-x-auto">
            <table className="w-full min-w-[520px] text-left text-sm">
              <thead>
                <tr className="border-b border-black/[0.06] text-[11px] uppercase tracking-wide text-muted dark:border-white/[0.06]">
                  <th className="px-5 py-3 font-medium">Package</th>
                  <th className="px-5 py-3 font-medium">Units Sold</th>
                  <th className="px-5 py-3 font-medium">Revenue</th>
                </tr>
              </thead>
              <tbody>
                {salesByPackage.map((row) => (
                  <tr key={`${row.network}-${row.name}`} className="border-b border-black/[0.04] last:border-0 dark:border-white/[0.04]">
                    <td className="px-5 py-3.5">
                      <div className="flex items-center gap-2.5">
                        <NetworkBadge network={row.network as NetworkId} size="sm" />
                        <span className="text-[13px] font-medium">{row.name}</span>
                      </div>
                    </td>
                    <td className="px-5 py-3.5 tnum text-[13px]">{row.units}</td>
                    <td className="px-5 py-3.5 tnum text-[13px] font-semibold">{formatCurrency(row.revenue)}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        )}
      </div>
    </div>
  );
}