import { createFileRoute } from "@tanstack/react-router";
import { useEffect, useState } from "react";
import { supabase } from "@/integrations/supabase/client";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { kes } from "@/lib/portal";
import { Users, Wrench, Inbox, Clock, CheckCircle2, Megaphone, ClipboardList, Wallet } from "lucide-react";

export const Route = createFileRoute("/admin/")({
  component: AdminDashboard,
});

type Stats = {
  users: number;
  requests: number;
  pending: number;
  completed: number;
  announcements: number;
  services: number;
  orders: number;
  openOrders: number;
  revenue: number;
  recentUsers: Array<{ id: string; full_name: string | null; email: string | null; created_at: string }>;
  recentRequests: Array<{ id: string; service_name: string; contact_name: string; status: string; created_at: string }>;
};

function AdminDashboard() {
  const [s, setS] = useState<Stats | null>(null);

  useEffect(() => {
    (async () => {
      const [users, reqs, pending, completed, ann, svc, ords, openOrds, paid, recentU, recentR] = await Promise.all([
        supabase.from("profiles").select("id", { count: "exact", head: true }),
        supabase.from("service_requests").select("id", { count: "exact", head: true }),
        supabase.from("service_requests").select("id", { count: "exact", head: true }).eq("status", "pending"),
        supabase.from("service_requests").select("id", { count: "exact", head: true }).eq("status", "completed"),
        supabase.from("announcements").select("id", { count: "exact", head: true }).eq("is_active", true),
        supabase.from("catalog_services").select("id", { count: "exact", head: true }).eq("is_active", true),
        supabase.from("orders").select("id", { count: "exact", head: true }),
        supabase.from("orders").select("id", { count: "exact", head: true }).neq("status", "completed").neq("status", "cancelled"),
        supabase.from("orders").select("price, discount").eq("payment_status", "paid"),
        supabase.from("profiles").select("id, full_name, email, created_at").order("created_at", { ascending: false }).limit(5),
        supabase.from("orders").select("id, service_name, contact_name, status, created_at").order("created_at", { ascending: false }).limit(5),
      ]);
      setS({
        users: users.count ?? 0,
        requests: reqs.count ?? 0,
        pending: pending.count ?? 0,
        completed: completed.count ?? 0,
        announcements: ann.count ?? 0,
        services: svc.count ?? 0,
        orders: ords.count ?? 0,
        openOrders: openOrds.count ?? 0,
        revenue: (paid.data ?? []).reduce((sum, o) => sum + Math.max(Number(o.price ?? 0) - Number(o.discount ?? 0), 0), 0),
        recentUsers: recentU.data ?? [],
        recentRequests: recentR.data ?? [],
      });
    })();
  }, []);

  const cards = [
    { label: "Registered users", value: s?.users ?? "—", icon: Users, color: "text-blue-500" },
    { label: "Services offered", value: s?.services ?? "—", icon: Wrench, color: "text-purple-500" },
    { label: "Total orders", value: s?.orders ?? "—", icon: ClipboardList, color: "text-cyan-500" },
    { label: "Open orders", value: s?.openOrders ?? "—", icon: Clock, color: "text-amber-500" },
    { label: "Paid revenue", value: s ? kes(s.revenue) : "—", icon: Wallet, color: "text-emerald-500" },
    { label: "Legacy requests", value: s?.requests ?? "—", icon: Inbox, color: "text-slate-500" },
    { label: "Completed requests", value: s?.completed ?? "—", icon: CheckCircle2, color: "text-green-500" },
    { label: "Active announcements", value: s?.announcements ?? "—", icon: Megaphone, color: "text-pink-500" },
  ];

  return (
    <div className="space-y-6">
      <div>
        <h1 className="text-2xl font-bold tracking-tight">Dashboard</h1>
        <p className="text-sm text-muted-foreground">Overview of your Flexflares Cyber Services operations.</p>
      </div>
      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
        {cards.map((c) => {
          const Icon = c.icon;
          return (
            <Card key={c.label} className="glass">
              <CardContent className="flex items-center justify-between p-5">
                <div>
                  <div className="text-xs uppercase tracking-wide text-muted-foreground">{c.label}</div>
                  <div className="mt-1 text-3xl font-bold">{c.value}</div>
                </div>
                <Icon className={`h-8 w-8 ${c.color}`} />
              </CardContent>
            </Card>
          );
        })}
      </div>
      <div className="grid gap-4 lg:grid-cols-2">
        <Card className="glass">
          <CardHeader><CardTitle>Recent registrations</CardTitle></CardHeader>
          <CardContent className="space-y-2">
            {(s?.recentUsers ?? []).length === 0 && <p className="text-sm text-muted-foreground">No users yet.</p>}
            {s?.recentUsers.map((u) => (
              <div key={u.id} className="flex items-center justify-between rounded-lg border p-2 text-sm">
                <div className="min-w-0">
                  <div className="truncate font-medium">{u.full_name ?? "Unnamed"}</div>
                  <div className="truncate text-xs text-muted-foreground">{u.email ?? ""}</div>
                </div>
                <div className="text-xs text-muted-foreground">{new Date(u.created_at).toLocaleDateString()}</div>
              </div>
            ))}
          </CardContent>
        </Card>
        <Card className="glass">
          <CardHeader><CardTitle>Recent orders</CardTitle></CardHeader>
          <CardContent className="space-y-2">
            {(s?.recentRequests ?? []).length === 0 && <p className="text-sm text-muted-foreground">No orders yet.</p>}
            {s?.recentRequests.map((r) => (
              <div key={r.id} className="flex items-center justify-between rounded-lg border p-2 text-sm">
                <div className="min-w-0">
                  <div className="truncate font-medium">{r.service_name}</div>
                  <div className="truncate text-xs text-muted-foreground">{r.contact_name}</div>
                </div>
                <span className="rounded-full bg-primary/10 px-2 py-0.5 text-xs capitalize text-primary">{r.status}</span>
              </div>
            ))}
          </CardContent>
        </Card>
      </div>
    </div>
  );
}