import { createFileRoute } from "@tanstack/react-router";
import { queryOptions, useSuspenseQuery } from "@tanstack/react-query";
import { getAdminOverview } from "@/lib/admin.functions";
import { Users, DollarSign, BookOpen, ShoppingCart, AlertCircle } from "lucide-react";

const q = queryOptions({ queryKey: ["admin-overview"], queryFn: () => getAdminOverview() });

export const Route = createFileRoute("/_authenticated/admin/")({
  loader: ({ context }) => context.queryClient.ensureQueryData(q),
  component: AdminOverview,
});

function AdminOverview() {
  const { data } = useSuspenseQuery(q);
  const maxRev = Math.max(1, ...data.monthly.map((m) => m.revenue));
  const maxSales = Math.max(1, ...data.monthly.map((m) => m.sales));

  return (
    <div>
      <h1 className="mb-6 font-display text-3xl font-bold">Overview</h1>

      {data.pendingPayments > 0 && (
        <div className="mb-6 flex items-center gap-3 rounded-xl border border-warning/30 bg-warning/10 p-4 text-sm">
          <AlertCircle className="h-5 w-5 text-warning" />
          <span><strong>{data.pendingPayments}</strong> payment{data.pendingPayments > 1 ? "s" : ""} awaiting your review</span>
        </div>
      )}

      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
        <Stat label="Total Students" value={data.totalStudents.toLocaleString()} icon={Users} />
        <Stat label="Total Sales" value={data.totalSales.toLocaleString()} icon={ShoppingCart} />
        <Stat label="Total Revenue" value={`৳${data.totalRevenue.toLocaleString("en-BD")}`} icon={DollarSign} accent />
        <Stat label="Courses" value={data.totalCourses.toLocaleString()} icon={BookOpen} />
      </div>

      <div className="mt-8 grid gap-5 lg:grid-cols-2">
        <Card title="Revenue (Last 6 Months)">
          <div className="flex h-48 items-end gap-3">
            {data.monthly.map((m) => (
              <div key={m.label} className="flex flex-1 flex-col items-center gap-2">
                <div className="w-full rounded-t bg-gradient-primary transition-all" style={{ height: `${(m.revenue / maxRev) * 100}%`, minHeight: 4 }} />
                <span className="text-xs text-muted-foreground">{m.label}</span>
              </div>
            ))}
          </div>
        </Card>
        <Card title="New Sales (Last 6 Months)">
          <div className="flex h-48 items-end gap-3">
            {data.monthly.map((m) => (
              <div key={m.label} className="flex flex-1 flex-col items-center gap-2">
                <div className="w-full rounded-t bg-gradient-gold transition-all" style={{ height: `${(m.sales / maxSales) * 100}%`, minHeight: 4 }} />
                <span className="text-xs text-muted-foreground">{m.label}</span>
              </div>
            ))}
          </div>
        </Card>
      </div>

      <Card title="Recent Payments" className="mt-8">
        <div className="overflow-x-auto">
          <table className="w-full text-sm">
            <thead className="text-xs uppercase text-muted-foreground">
              <tr><th className="py-2 text-left">Date</th><th className="text-left">Name</th><th className="text-left">TrxID</th><th className="text-right">Amount</th><th className="text-left">Status</th></tr>
            </thead>
            <tbody className="divide-y divide-border">
              {data.recentPayments.map((p: any) => (
                <tr key={p.id}>
                  <td className="py-2 text-muted-foreground">{new Date(p.created_at).toLocaleDateString()}</td>
                  <td>{p.full_name}</td>
                  <td className="font-mono text-xs">{p.transaction_id}</td>
                  <td className="text-right font-semibold">৳{Number(p.amount).toLocaleString("en-BD")}</td>
                  <td><StatusPill s={p.status} /></td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </Card>
    </div>
  );
}

function Stat({ label, value, icon: Icon, accent }: { label: string; value: string; icon: any; accent?: boolean }) {
  return (
    <div className={`rounded-2xl border border-border bg-card p-5 ${accent ? "shadow-gold" : ""}`}>
      <div className="flex items-center justify-between">
        <span className="text-xs font-medium uppercase tracking-wider text-muted-foreground">{label}</span>
        <Icon className={`h-5 w-5 ${accent ? "text-gold" : "text-primary"}`} />
      </div>
      <div className={`mt-2 font-display text-2xl font-bold ${accent ? "text-gradient-gold" : ""}`}>{value}</div>
    </div>
  );
}

function Card({ title, children, className }: { title: string; children: React.ReactNode; className?: string }) {
  return (
    <div className={`rounded-2xl border border-border bg-card p-6 ${className ?? ""}`}>
      <h3 className="mb-4 font-semibold">{title}</h3>
      {children}
    </div>
  );
}

function StatusPill({ s }: { s: string }) {
  const map: Record<string, string> = {
    pending: "bg-warning/15 text-warning",
    approved: "bg-success/15 text-success",
    rejected: "bg-destructive/15 text-destructive",
  };
  return <span className={`rounded-full px-2 py-0.5 text-xs font-semibold ${map[s]}`}>{s}</span>;
}