import {prisma} from "@/lib/db/prisma";

function BarChart({data, label, color = "bg-blue-500"}: {data: {label: string; value: number}[]; label: string; color?: string}) {
  const max = Math.max(...data.map((d) => d.value), 1);
  return (
    <div>
      <p className="mb-3 text-sm font-semibold text-slate-700">{label}</p>
      <div className="space-y-2">
        {data.map((item, i) => (
          <div key={i} className="flex items-center gap-3">
            <span className="w-24 shrink-0 truncate text-right text-xs text-slate-500">{item.label}</span>
            <div className="flex-1 rounded-full bg-slate-100 h-4 overflow-hidden">
              <div className={`h-full rounded-full ${color}`} style={{width: `${(item.value / max) * 100}%`}} />
            </div>
            <span className="w-10 shrink-0 text-right text-xs font-semibold text-slate-700">{item.value}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

export default async function AnalyticsPage() {
  const [tenants, bookings, payments, users] = await Promise.all([
    prisma.tenant.findMany({select: {status: true, createdAt: true, currency: true}}),
    prisma.booking.findMany({select: {status: true, totalAmount: true, createdAt: true, tenantId: true}}),
    prisma.paymentTransaction.findMany({where: {status: "PAID"}, select: {amount: true, paidAt: true, currency: true}}),
    prisma.user.findMany({select: {createdAt: true, status: true}})
  ]);

  const now = new Date();

  // Revenue by month (last 6 months)
  const revenueByMonth = [];
  for (let i = 5; i >= 0; i--) {
    const d = new Date(now.getFullYear(), now.getMonth() - i, 1);
    const end = new Date(now.getFullYear(), now.getMonth() - i + 1, 1);
    const label = d.toLocaleDateString("en", {month: "short", year: "2-digit"});
    const value = payments
      .filter((p) => p.paidAt && p.paidAt >= d && p.paidAt < end)
      .reduce((s, p) => s + Number(p.amount), 0);
    revenueByMonth.push({label, value: Math.round(value)});
  }

  // New tenants by month
  const tenantsByMonth = [];
  for (let i = 5; i >= 0; i--) {
    const d = new Date(now.getFullYear(), now.getMonth() - i, 1);
    const end = new Date(now.getFullYear(), now.getMonth() - i + 1, 1);
    const label = d.toLocaleDateString("en", {month: "short", year: "2-digit"});
    const value = tenants.filter((t) => t.createdAt >= d && t.createdAt < end).length;
    tenantsByMonth.push({label, value});
  }

  // New users by month
  const usersByMonth = [];
  for (let i = 5; i >= 0; i--) {
    const d = new Date(now.getFullYear(), now.getMonth() - i, 1);
    const end = new Date(now.getFullYear(), now.getMonth() - i + 1, 1);
    const label = d.toLocaleDateString("en", {month: "short", year: "2-digit"});
    const value = users.filter((u) => u.createdAt >= d && u.createdAt < end).length;
    usersByMonth.push({label, value});
  }

  // Bookings by status
  const bookingStatusDist: Record<string, number> = {};
  for (const b of bookings) {
    bookingStatusDist[b.status] = (bookingStatusDist[b.status] ?? 0) + 1;
  }

  // Tenant status dist
  const tenantStatusDist: Record<string, number> = {};
  for (const t of tenants) {
    tenantStatusDist[t.status] = (tenantStatusDist[t.status] ?? 0) + 1;
  }

  const totalRevenue = payments.reduce((s, p) => s + Number(p.amount), 0);

  return (
    <div className="space-y-8 p-6">
      <div>
        <h1 className="text-2xl font-bold text-slate-900">Platform Analytics</h1>
        <p className="mt-1 text-slate-500">Aggregated data across all tenants</p>
      </div>

      {/* KPIs */}
      <div className="grid grid-cols-2 gap-4 lg:grid-cols-4">
        {[
          {label: "Total Tenants", value: tenants.length},
          {label: "Total Bookings", value: bookings.length},
          {label: "Total Users", value: users.length},
          {label: "Platform Revenue", value: `$${totalRevenue.toFixed(0)}`}
        ].map((stat) => (
          <div key={stat.label} className="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm text-center">
            <p className="text-3xl font-bold text-slate-900">{stat.value}</p>
            <p className="mt-1 text-xs font-medium text-slate-500 uppercase">{stat.label}</p>
          </div>
        ))}
      </div>

      {/* Charts grid */}
      <div className="grid gap-6 lg:grid-cols-2">
        <div className="rounded-2xl border border-slate-200 bg-white p-6 shadow-sm">
          <h2 className="mb-5 font-semibold text-slate-900">Revenue — Last 6 Months</h2>
          <BarChart data={revenueByMonth} label="USD" color="bg-green-500" />
        </div>
        <div className="rounded-2xl border border-slate-200 bg-white p-6 shadow-sm">
          <h2 className="mb-5 font-semibold text-slate-900">New Tenants — Last 6 Months</h2>
          <BarChart data={tenantsByMonth} label="Tenants" color="bg-violet-500" />
        </div>
        <div className="rounded-2xl border border-slate-200 bg-white p-6 shadow-sm">
          <h2 className="mb-5 font-semibold text-slate-900">New Users — Last 6 Months</h2>
          <BarChart data={usersByMonth} label="Users" color="bg-blue-500" />
        </div>
        <div className="rounded-2xl border border-slate-200 bg-white p-6 shadow-sm">
          <h2 className="mb-5 font-semibold text-slate-900">Booking Status Distribution</h2>
          <BarChart
            data={Object.entries(bookingStatusDist).map(([label, value]) => ({label: label.replace(/_/g, " "), value}))}
            label="Bookings"
            color="bg-amber-500"
          />
        </div>
      </div>
    </div>
  );
}