import { createFileRoute, Link } from "@tanstack/react-router";
import { DashboardLayout } from "@/components/dashboard-layout";
import { DashboardHeader, MetricCard } from "@/components/dashboard/widgets";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { Progress } from "@/components/ui/progress";
import { CHANNELS } from "@/lib/campaign-data";
import { Send, Plus, ArrowRight, Activity } from "lucide-react";
import { requireRole } from "@/lib/auth/guards";

export const Route = createFileRoute("/channels")({
  beforeLoad: ({ context, location }) => requireRole(context, location, "advertiser", "superadmin"),
  head: () => ({ meta: [{ title: "Channels — VotersAlert" }] }),
  component: ChannelsPage,
});

const stats = [
  { id: "whatsapp", health: 99.4, sent: "1.84M", cost: "₦8.3M" },
  { id: "sms", health: 99.8, sent: "4.12M", cost: "₦9.1M" },
  { id: "voice", health: 96.2, sent: "412K", cost: "₦4.7M" },
  { id: "facebook", health: 97.5, sent: "12.4M impr.", cost: "₦3.2M" },
  { id: "google", health: 98.1, sent: "284K clicks", cost: "₦1.8M" },
] as const;

function ChannelsPage() {
  return (
    <DashboardLayout>
      <div className="p-4 sm:p-6 lg:p-8 max-w-[1600px] mx-auto space-y-6">
        <DashboardHeader
          eyebrow={
            <>
              <Activity className="h-3 w-3" />
              <span>All gateways operational · last sync 2 min ago</span>
            </>
          }
          title="Channels"
          subtitle="Multi-channel delivery infrastructure for SMS, WhatsApp, Voice and paid social."
          actions={
            <Button size="sm" className="gap-1.5" asChild>
              <Link to="/campaigns/new">
                <Plus className="h-3.5 w-3.5" /> New campaign
              </Link>
            </Button>
          }
        />

        <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
          <MetricCard label="Messages sent (30d)" value="6.74M" delta="+18.4%" icon={Send} />
          <MetricCard label="Avg. delivery rate" value="98.2%" delta="+0.6 pts" accent="accent" />
          <MetricCard label="Channel spend (30d)" value="₦27.1M" delta="+12.1%" />
          <MetricCard
            label="Active integrations"
            value="5 / 5"
            delta="All healthy"
            trend="flat"
            accent="accent"
          />
        </div>

        <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
          {CHANNELS.map((c) => {
            const Icon = c.icon;
            const s = stats.find((x) => x.id === c.id)!;
            return (
              <Card key={c.id} className="overflow-hidden">
                <CardHeader className="pb-3">
                  <div className="flex items-center justify-between">
                    <div className="flex items-center gap-2">
                      <span
                        className={`h-9 w-9 grid place-items-center rounded-md bg-gradient-to-br ${c.accent}`}
                      >
                        <Icon className="h-4 w-4" />
                      </span>
                      <CardTitle className="text-base">{c.name}</CardTitle>
                    </div>
                    <Badge variant="secondary" className="text-[10px]">
                      ₦{c.costPerMessage.toFixed(2)}/{c.unit}
                    </Badge>
                  </div>
                </CardHeader>
                <CardContent className="space-y-3">
                  <p className="text-xs text-muted-foreground line-clamp-2">{c.description}</p>
                  <div className="grid grid-cols-2 gap-2 text-xs">
                    <div className="rounded-md bg-muted/40 p-2">
                      <div className="text-[10px] text-muted-foreground">Sent 30d</div>
                      <div className="font-semibold tabular-nums">{s.sent}</div>
                    </div>
                    <div className="rounded-md bg-muted/40 p-2">
                      <div className="text-[10px] text-muted-foreground">Spend 30d</div>
                      <div className="font-semibold tabular-nums">{s.cost}</div>
                    </div>
                  </div>
                  <div>
                    <div className="flex items-center justify-between text-[11px] mb-1">
                      <span className="text-muted-foreground">Gateway health</span>
                      <span className="font-semibold text-success">{s.health}%</span>
                    </div>
                    <Progress value={s.health} className="h-1" />
                  </div>
                  <Button size="sm" variant="outline" className="w-full gap-1.5" asChild>
                    <Link to="/campaigns/new">
                      Launch on {c.name} <ArrowRight className="h-3 w-3" />
                    </Link>
                  </Button>
                </CardContent>
              </Card>
            );
          })}
        </div>
      </div>
    </DashboardLayout>
  );
}