"use client"

import { useState, useEffect } from "react"
import { useSession } from "next-auth/react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Table, TableHeader, TableBody, TableRow, TableHead, TableCell } from "@/components/ui/table"
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs"
import {
  Shield, Building2, Users, Banknote, Calendar, TrendingUp, Loader2, AlertTriangle
} from "lucide-react"

interface AdminData {
  platform: { orgs: number; users: number; events: number; pledges: number; totalPledgedPence: number; totalCollectedPence: number; collectionRate: number }
  orgs: Array<{ id: string; name: string; slug: string; hasBank: boolean; users: number; events: number; pledges: number; createdAt: string }>
  users: Array<{ id: string; email: string; name: string | null; role: string; orgName: string; createdAt: string }>
  byStatus: Record<string, { count: number; amount: number }>
  recentPledges: Array<{ id: string; reference: string; amountPence: number; status: string; donorName: string | null; eventName: string; orgName: string; dueDate: string | null; createdAt: string }>
}

const fmt = (p: number) => `£${(p / 100).toLocaleString("en-GB", { minimumFractionDigits: 0 })}`

export default function AdminPage() {
  const { data: session } = useSession()
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  const user = session?.user as any
  const [data, setData] = useState<AdminData | null>(null)
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState("")
  const [tab, setTab] = useState("orgs")

  useEffect(() => {
    fetch("/api/admin")
      .then(r => { if (!r.ok) throw new Error("Forbidden"); return r.json() })
      .then(d => setData(d))
      .catch(e => setError(e.message))
      .finally(() => setLoading(false))
  }, [])

  if (user?.role !== "super_admin") {
    return (
      <div className="text-center py-20 space-y-3">
        <Shield className="h-10 w-10 text-danger-red mx-auto" />
        <h2 className="text-xl font-bold">Access Denied</h2>
        <p className="text-sm text-muted-foreground">Super admin access required.</p>
      </div>
    )
  }

  if (loading) return <div className="flex items-center justify-center py-20"><Loader2 className="h-8 w-8 text-trust-blue animate-spin" /></div>
  if (error || !data) return <div className="text-center py-20"><AlertTriangle className="h-8 w-8 text-danger-red mx-auto mb-2" /><p className="text-muted-foreground">{error}</p></div>

  const p = data.platform

  return (
    <div className="space-y-6">
      <div className="flex items-center gap-3">
        <Shield className="h-6 w-6 text-trust-blue" />
        <div>
          <h1 className="text-2xl font-black text-gray-900">Super Admin</h1>
          <p className="text-xs text-muted-foreground">Platform-wide view · {user?.email}</p>
        </div>
      </div>

      {/* Platform stats */}
      <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-7 gap-3">
        {[
          { label: "Orgs", value: p.orgs, icon: Building2, color: "text-trust-blue" },
          { label: "Users", value: p.users, icon: Users, color: "text-warm-amber" },
          { label: "Events", value: p.events, icon: Calendar, color: "text-purple-500" },
          { label: "Pledges", value: p.pledges, icon: TrendingUp, color: "text-success-green" },
          { label: "Pledged", value: fmt(p.totalPledgedPence), icon: Banknote, color: "text-trust-blue" },
          { label: "Collected", value: fmt(p.totalCollectedPence), icon: Banknote, color: "text-success-green" },
          { label: "Rate", value: `${p.collectionRate}%`, icon: TrendingUp, color: p.collectionRate > 50 ? "text-success-green" : "text-warm-amber" },
        ].map(s => (
          <Card key={s.label}>
            <CardContent className="pt-4 pb-3">
              <div className="flex items-center gap-1.5">
                <s.icon className={`h-3.5 w-3.5 ${s.color}`} />
                <span className="text-[10px] text-muted-foreground">{s.label}</span>
              </div>
              <p className="text-lg font-black mt-0.5">{s.value}</p>
            </CardContent>
          </Card>
        ))}
      </div>

      {/* Pipeline */}
      <Card>
        <CardHeader className="pb-2">
          <CardTitle className="text-sm">Pipeline</CardTitle>
        </CardHeader>
        <CardContent>
          <div className="flex gap-3 overflow-x-auto">
            {Object.entries(data.byStatus).map(([status, { count, amount }]) => (
              <div key={status} className="flex-shrink-0 rounded-xl bg-muted/50 px-4 py-2 text-center min-w-[100px]">
                <Badge variant={status === "paid" ? "success" : status === "overdue" ? "destructive" : "secondary"} className="text-[10px]">{status}</Badge>
                <p className="text-lg font-bold mt-1">{count}</p>
                <p className="text-[10px] text-muted-foreground">{fmt(amount)}</p>
              </div>
            ))}
          </div>
        </CardContent>
      </Card>

      <Tabs value={tab} onValueChange={setTab}>
        <TabsList>
          <TabsTrigger value="orgs">Organisations ({data.orgs.length})</TabsTrigger>
          <TabsTrigger value="users">Users ({data.users.length})</TabsTrigger>
          <TabsTrigger value="pledges">Recent Pledges</TabsTrigger>
        </TabsList>

        <TabsContent value="orgs">
          <Card>
            <CardContent className="p-0">
              <Table>
                <TableHeader>
                  <TableRow>
                    <TableHead>Name</TableHead>
                    <TableHead>Bank</TableHead>
                    <TableHead>Users</TableHead>
                    <TableHead>Events</TableHead>
                    <TableHead>Pledges</TableHead>
                    <TableHead>Created</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {data.orgs.map(o => (
                    <TableRow key={o.id}>
                      <TableCell>
                        <p className="font-medium text-sm">{o.name}</p>
                        <p className="text-[10px] text-muted-foreground font-mono">{o.slug}</p>
                      </TableCell>
                      <TableCell>
                        {o.hasBank ? <Badge variant="success" className="text-[10px]">✓ Set</Badge> : <Badge variant="warning" className="text-[10px]">Missing</Badge>}
                      </TableCell>
                      <TableCell className="font-medium">{o.users}</TableCell>
                      <TableCell className="font-medium">{o.events}</TableCell>
                      <TableCell className="font-medium">{o.pledges}</TableCell>
                      <TableCell className="text-xs text-muted-foreground">{new Date(o.createdAt).toLocaleDateString("en-GB", { day: "numeric", month: "short" })}</TableCell>
                    </TableRow>
                  ))}
                </TableBody>
              </Table>
            </CardContent>
          </Card>
        </TabsContent>

        <TabsContent value="users">
          <Card>
            <CardContent className="p-0">
              <Table>
                <TableHeader>
                  <TableRow>
                    <TableHead>Email</TableHead>
                    <TableHead>Name</TableHead>
                    <TableHead>Role</TableHead>
                    <TableHead>Organisation</TableHead>
                    <TableHead>Joined</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {data.users.map(u => (
                    <TableRow key={u.id}>
                      <TableCell className="font-mono text-xs">{u.email}</TableCell>
                      <TableCell className="text-sm">{u.name || "—"}</TableCell>
                      <TableCell>
                        <Badge variant={u.role === "super_admin" ? "default" : u.role === "org_admin" ? "success" : "secondary"} className="text-[10px]">
                          {u.role === "super_admin" ? "🛡️ Super" : u.role === "org_admin" ? "Admin" : u.role}
                        </Badge>
                      </TableCell>
                      <TableCell className="text-sm">{u.orgName}</TableCell>
                      <TableCell className="text-xs text-muted-foreground">{new Date(u.createdAt).toLocaleDateString("en-GB", { day: "numeric", month: "short" })}</TableCell>
                    </TableRow>
                  ))}
                </TableBody>
              </Table>
            </CardContent>
          </Card>
        </TabsContent>

        <TabsContent value="pledges">
          <Card>
            <CardContent className="p-0">
              <Table>
                <TableHeader>
                  <TableRow>
                    <TableHead>Reference</TableHead>
                    <TableHead>Donor</TableHead>
                    <TableHead>Amount</TableHead>
                    <TableHead>Status</TableHead>
                    <TableHead>Event</TableHead>
                    <TableHead>Org</TableHead>
                    <TableHead>Date</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {data.recentPledges.map(p => (
                    <TableRow key={p.id}>
                      <TableCell className="font-mono text-xs">{p.reference}</TableCell>
                      <TableCell className="text-sm">{p.donorName || "Anon"}</TableCell>
                      <TableCell className="font-bold text-sm">{fmt(p.amountPence)}</TableCell>
                      <TableCell>
                        <Badge variant={p.status === "paid" ? "success" : p.status === "overdue" ? "destructive" : "secondary"} className="text-[10px]">{p.status}</Badge>
                      </TableCell>
                      <TableCell className="text-xs truncate max-w-[120px]">{p.eventName}</TableCell>
                      <TableCell className="text-xs text-muted-foreground">{p.orgName}</TableCell>
                      <TableCell className="text-xs text-muted-foreground">{new Date(p.createdAt).toLocaleDateString("en-GB", { day: "numeric", month: "short" })}</TableCell>
                    </TableRow>
                  ))}
                </TableBody>
              </Table>
            </CardContent>
          </Card>
        </TabsContent>
      </Tabs>
    </div>
  )
}
