import { createFileRoute } from "@tanstack/react-router";
import { DashboardLayout } from "@/components/dashboard-layout";
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import { Progress } from "@/components/ui/progress";
import { DashboardHeader, MetricCard, ChartWidget } from "@/components/dashboard/widgets";
import {
  ReachAreaChart,
  RevenueLineChart,
  ChannelMixChart,
  StateReachBarChart,
} from "@/components/dashboard/charts";
import { reachTrend, revenueTrend, channelMix, stateReach, adminCampaigns } from "@/lib/mock-data";
import { deliveryReport, fmtNGN } from "@/lib/billing-data";
import { Download, FileBarChart, Calendar } from "lucide-react";
import { requireAuth } from "@/lib/auth/guards";

export const Route = createFileRoute("/reports")({
  beforeLoad: ({ context, location }) => requireAuth(context, location),
  head: () => ({ meta: [{ title: "Reporting Center — VotersAlert" }] }),
  component: ReportsPage,
});

function ReportsPage() {
  return (
    <DashboardLayout>
      <div className="p-4 md:p-6 space-y-6 animate-fade-in">
        <DashboardHeader
          eyebrow={
            <>
              <FileBarChart className="h-3 w-3" /> Reporting
            </>
          }
          title="Reporting Center"
          subtitle="Executive-grade reports across campaigns, delivery, performance and revenue."
          actions={
            <>
              <Button variant="outline">
                <Calendar className="h-4 w-4" /> Last 30 days
              </Button>
              <Button>
                <Download className="h-4 w-4" /> Export
              </Button>
            </>
          }
        />

        <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
          <MetricCard label="Messages sent" value="3.98M" delta="+18.2%" trend="up" />
          <MetricCard
            label="Delivery rate"
            value="96.8%"
            delta="+0.4 pts"
            trend="up"
            accent="accent"
          />
          <MetricCard
            label="Engagement"
            value="14.2%"
            delta="+2.1 pts"
            trend="up"
            accent="accent"
          />
          <MetricCard label="Revenue (MTD)" value={fmtNGN(62_400_000)} delta="+24.6%" trend="up" />
        </div>

        <Tabs defaultValue="campaign" className="space-y-4">
          <TabsList>
            <TabsTrigger value="campaign">Campaign</TabsTrigger>
            <TabsTrigger value="delivery">Delivery</TabsTrigger>
            <TabsTrigger value="performance">Performance</TabsTrigger>
            <TabsTrigger value="revenue">Revenue</TabsTrigger>
          </TabsList>

          <TabsContent value="campaign" className="space-y-4">
            <ChartWidget title="Reach & engagement" description="Last 7 days across all channels.">
              <ReachAreaChart data={reachTrend} />
            </ChartWidget>
            <Card>
              <CardHeader>
                <CardTitle>Top campaigns</CardTitle>
              </CardHeader>
              <CardContent className="p-0 overflow-x-auto">
                <Table>
                  <TableHeader>
                    <TableRow>
                      <TableHead>Advertiser</TableHead>
                      <TableHead>Campaign</TableHead>
                      <TableHead className="text-right">Spend</TableHead>
                      <TableHead>Status</TableHead>
                      <TableHead className="text-right">Flagged</TableHead>
                    </TableRow>
                  </TableHeader>
                  <TableBody>
                    {adminCampaigns.map((c) => (
                      <TableRow key={c.name}>
                        <TableCell className="text-sm">{c.advertiser}</TableCell>
                        <TableCell className="font-medium">{c.name}</TableCell>
                        <TableCell className="text-right tabular-nums">{c.spend}</TableCell>
                        <TableCell>
                          <Badge variant="secondary" className="text-[10px]">
                            {c.status}
                          </Badge>
                        </TableCell>
                        <TableCell className="text-right">
                          {c.flagged > 0 ? (
                            <Badge variant="destructive" className="text-[10px]">
                              {c.flagged}
                            </Badge>
                          ) : (
                            <span className="text-xs text-muted-foreground">0</span>
                          )}
                        </TableCell>
                      </TableRow>
                    ))}
                  </TableBody>
                </Table>
              </CardContent>
            </Card>
          </TabsContent>

          <TabsContent value="delivery">
            <Card>
              <CardHeader>
                <CardTitle>Delivery report</CardTitle>
                <CardDescription>
                  Per-channel delivery success rates for the last 30 days.
                </CardDescription>
              </CardHeader>
              <CardContent className="space-y-4">
                {deliveryReport.map((r) => (
                  <div key={r.channel} className="space-y-1.5">
                    <div className="flex items-center justify-between text-sm">
                      <span className="font-medium flex items-center gap-2">
                        <Badge variant="secondary" className="text-[10px]">
                          {r.channel}
                        </Badge>
                        <span className="text-muted-foreground tabular-nums">
                          {r.delivered.toLocaleString()} / {r.sent.toLocaleString()}
                        </span>
                      </span>
                      <span className="tabular-nums font-medium">{r.rate}%</span>
                    </div>
                    <Progress value={r.rate} className="h-1.5" />
                  </div>
                ))}
              </CardContent>
            </Card>
          </TabsContent>

          <TabsContent value="performance" className="space-y-4">
            <div className="grid gap-4 lg:grid-cols-2">
              <ChartWidget title="Channel mix">
                <ChannelMixChart data={channelMix} />
              </ChartWidget>
              <ChartWidget title="Top states by reach">
                <StateReachBarChart data={stateReach} />
              </ChartWidget>
            </div>
          </TabsContent>

          <TabsContent value="revenue">
            <ChartWidget
              title="Revenue & payouts"
              description="Monthly platform revenue against advertiser payouts (₦M)."
              badge="+24.6% YoY"
            >
              <RevenueLineChart data={revenueTrend} />
            </ChartWidget>
          </TabsContent>
        </Tabs>
      </div>
    </DashboardLayout>
  );
}