import { createFileRoute, Navigate, useNavigate } from "@tanstack/react-router";
import { useEffect, useState } from "react";
import { useAuth } from "@/contexts/AuthContext";
import { supabase } from "@/integrations/supabase/client";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { LogOut, CheckCircle2, XCircle, Inbox } from "lucide-react";
import { toast } from "sonner";
import logo from "@/assets/tirs-logo.png";

export const Route = createFileRoute("/admin")({
  component: AdminPage,
  head: () => ({ meta: [{ title: "Admin — TIRS" }] }),
});

interface PendingUser {
  id: string; full_name: string; rank: string; email: string;
  persal_number: string; status: string; created_at: string;
}

function AdminPage() {
  const { isLocalAdmin, signOut } = useAuth();
  const navigate = useNavigate();
  const [pending, setPending] = useState<PendingUser[]>([]);
  const [stats, setStats] = useState({ users: 0, tattoos: 0, cases: 0 });

  useEffect(() => {
    if (!isLocalAdmin) return;
    void loadData();
  }, [isLocalAdmin]);

  const loadData = async () => {
    const [{ data: p }, { count: u }, { count: t }, { count: c }] = await Promise.all([
      supabase.from("profiles").select("id,full_name,rank,email,persal_number,status,created_at").order("created_at", { ascending: false }),
      supabase.from("profiles").select("*", { count: "exact", head: true }),
      supabase.from("tattoos").select("*", { count: "exact", head: true }),
      supabase.from("cases").select("*", { count: "exact", head: true }),
    ]);
    setPending((p as PendingUser[]) ?? []);
    setStats({ users: u ?? 0, tattoos: t ?? 0, cases: c ?? 0 });
  };

  if (!isLocalAdmin) return <Navigate to="/login" />;

  const decide = async (id: string, status: "approved" | "rejected") => {
    const { error } = await supabase.from("profiles").update({ status, approved_at: new Date().toISOString() }).eq("id", id);
    if (error) return toast.error(error.message);
    toast.success(`User ${status}`);
    void loadData();
  };

  return (
    <div className="min-h-screen bg-background">
      <header className="bg-gradient-hero text-primary-foreground shadow-elevated">
        <div className="max-w-6xl mx-auto px-4 py-3 flex items-center justify-between">
          <div className="flex items-center gap-3">
            <img src={logo} alt="TIRS" width={1024} height={1024} loading="lazy" className="h-10 w-10 object-contain" />
            <div>
              <h1 className="font-bold leading-tight">TIRS Admin</h1>
              <p className="text-xs opacity-80">System Administrator</p>
            </div>
          </div>
          <Button size="sm" variant="ghost" onClick={async () => { await signOut(); navigate({ to: "/login" }); }} className="text-primary-foreground hover:bg-white/10">
            <LogOut className="h-4 w-4 mr-1" /> Sign out
          </Button>
        </div>
      </header>

      <main className="max-w-6xl mx-auto px-4 py-6 space-y-6">
        <div className="grid sm:grid-cols-3 gap-4">
          <StatCard label="Registered Users" value={stats.users} />
          <StatCard label="Tattoos in Registry" value={stats.tattoos} />
          <StatCard label="Active Cases" value={stats.cases} />
        </div>

        <Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2"><Inbox className="h-5 w-5" /> User Inbox — Pending Approvals</CardTitle>
            <CardDescription>Approve or reject new SAPS member registrations</CardDescription>
          </CardHeader>
          <CardContent>
            {pending.length === 0 && <p className="text-sm text-muted-foreground">No registrations yet.</p>}
            <div className="space-y-2">
              {pending.map((u) => (
                <div key={u.id} className="flex items-center justify-between p-3 border rounded-md">
                  <div>
                    <p className="font-medium">{u.full_name} <Badge variant="outline" className="ml-2">{u.rank}</Badge></p>
                    <p className="text-xs text-muted-foreground">{u.email} · PERSAL {u.persal_number}</p>
                  </div>
                  <div className="flex items-center gap-2">
                    <Badge variant={u.status === "approved" ? "default" : u.status === "rejected" ? "destructive" : "secondary"}>{u.status}</Badge>
                    {u.status === "pending" && (
                      <>
                        <Button size="sm" onClick={() => decide(u.id, "approved")}><CheckCircle2 className="h-4 w-4 mr-1" />Approve</Button>
                        <Button size="sm" variant="destructive" onClick={() => decide(u.id, "rejected")}><XCircle className="h-4 w-4 mr-1" />Reject</Button>
                      </>
                    )}
                  </div>
                </div>
              ))}
            </div>
          </CardContent>
        </Card>
      </main>
    </div>
  );
}

function StatCard({ label, value }: { label: string; value: number }) {
  return (
    <Card>
      <CardContent className="pt-6">
        <p className="text-sm text-muted-foreground">{label}</p>
        <p className="text-3xl font-bold text-primary">{value}</p>
      </CardContent>
    </Card>
  );
}