"use client";

import { useEffect, useState } from "react";
import { useRouter } from "next/navigation";
import { apiFetch } from "@/lib/apiClient";
import { formatNaira } from "@/lib/utils";

interface MonthlyRevenue {
  month: string;
  revenue: number;
  count: number;
}

interface ReportData {
  totalRevenue: number;
  monthlyRevenue: MonthlyRevenue[];
  byPackage: Array<{ name: string; revenue: number; count: number }>;
  conversionRate: number;
  avgDepositSize: number;
}

function SimpleBar({ data }: { data: MonthlyRevenue[] }) {
  if (!data.length) return null;
  const max = Math.max(...data.map((d) => d.revenue), 1);
  return (
    <div className="flex items-end gap-2 h-40 mt-4">
      {data.map((d) => (
        <div key={d.month} className="flex-1 flex flex-col items-center gap-1">
          <div className="w-full rounded-t-lg transition-all" style={{ height: `${(d.revenue / max) * 100}%`, background: "#B8952A", minHeight: 4 }} />
          <p className="text-[#9CA3AF] text-[8px] text-center">{d.month}</p>
        </div>
      ))}
    </div>
  );
}

export default function AdminReportsPage() {
  const router = useRouter();
  const [data, setData] = useState<ReportData | null>(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    apiFetch<ReportData>("/admin/reports")
      .then(setData)
      .catch((err) => { if (err?.status === 401 || err?.status === 403) router.replace("/admin/login"); })
      .finally(() => setLoading(false));
  }, [router]);

  const stats = [
    { label: "Total Revenue", value: formatNaira(data?.totalRevenue ?? 0), icon: "💰" },
    { label: "Avg Deposit", value: formatNaira(data?.avgDepositSize ?? 0), icon: "📊" },
    { label: "Conversion Rate", value: `${Math.round((data?.conversionRate ?? 0) * 100)}%`, icon: "📈" },
  ];

  return (
    <div className="p-6 max-w-6xl">
      <div className="mb-6">
        <h1 className="text-[#111111] font-black text-2xl" style={{ fontFamily: "'Plus Jakarta Sans', sans-serif" }}>Reports</h1>
        <p className="text-[#6B7280] text-sm mt-0.5">Financial overview</p>
      </div>

      {/* Summary stats */}
      <div className="grid grid-cols-3 gap-4 mb-6">
        {stats.map(({ label, value, icon }) => (
          <div key={label} className="bg-white rounded-2xl p-5" style={{ boxShadow: "0 2px 12px rgba(0,0,0,0.04)" }}>
            <p className="text-2xl mb-2">{icon}</p>
            <p className="text-[#111111] font-black text-xl" style={{ fontFamily: "'Plus Jakarta Sans', sans-serif" }}>
              {loading ? <span className="inline-block w-20 h-6 bg-gray-100 rounded animate-pulse" /> : value}
            </p>
            <p className="text-[#9CA3AF] text-xs uppercase tracking-wider mt-0.5">{label}</p>
          </div>
        ))}
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-2 gap-5">
        {/* Monthly revenue bar chart */}
        <div className="bg-white rounded-2xl p-5" style={{ boxShadow: "0 2px 12px rgba(0,0,0,0.04)" }}>
          <h2 className="font-bold text-[#111111] mb-1" style={{ fontFamily: "'Plus Jakarta Sans', sans-serif" }}>Monthly Revenue</h2>
          <p className="text-[#9CA3AF] text-xs">Last 12 months</p>
          {loading
            ? <div className="h-40 bg-gray-50 rounded-xl animate-pulse mt-4" />
            : <SimpleBar data={data?.monthlyRevenue ?? []} />
          }
        </div>

        {/* Revenue by package */}
        <div className="bg-white rounded-2xl p-5" style={{ boxShadow: "0 2px 12px rgba(0,0,0,0.04)" }}>
          <h2 className="font-bold text-[#111111] mb-4" style={{ fontFamily: "'Plus Jakarta Sans', sans-serif" }}>Revenue by Package</h2>
          {loading ? (
            <div className="space-y-3">
              {[1, 2, 3].map((i) => <div key={i} className="h-12 bg-gray-50 rounded-xl animate-pulse" />)}
            </div>
          ) : (
            <div className="space-y-3">
              {(data?.byPackage ?? []).map((pkg, i) => {
                const maxRev = Math.max(...(data?.byPackage ?? []).map((p) => p.revenue), 1);
                const pct = Math.round((pkg.revenue / maxRev) * 100);
                return (
                  <div key={i}>
                    <div className="flex justify-between text-sm mb-1">
                      <span className="text-[#111111] font-semibold truncate">{pkg.name}</span>
                      <span className="text-[#B8952A] font-bold shrink-0 ml-2">{formatNaira(pkg.revenue)}</span>
                    </div>
                    <div className="h-1.5 rounded-full bg-gray-100">
                      <div className="h-full rounded-full bg-[#B8952A]" style={{ width: `${pct}%` }} />
                    </div>
                    <p className="text-[#9CA3AF] text-xs mt-0.5">{pkg.count} deposits</p>
                  </div>
                );
              })}
              {(data?.byPackage ?? []).length === 0 && (
                <p className="text-[#6B7280] text-sm text-center py-8">No revenue data yet</p>
              )}
            </div>
          )}
        </div>
      </div>
    </div>
  );
}