import { createFileRoute, Link } from "@tanstack/react-router";
import { useQuery } from "@tanstack/react-query";
import { Card, CardContent } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import { advertiserCampaigns } from "@/lib/mock-data";
import { listCampaignsFn } from "@/lib/campaigns/campaigns.functions";
import { CHANNELS, formatCount, formatNaira } from "@/lib/campaign-data";
import { Search, MoreHorizontal, Megaphone, Plus } from "lucide-react";

export const Route = createFileRoute("/campaigns/")({
  component: CampaignsIndex,
});

function statusVariant(s: string) {
  if (s === "Live") return "default" as const;
  if (s === "Under review") return "secondary" as const;
  if (s === "Scheduled") return "outline" as const;
  if (s === "Draft") return "secondary" as const;
  return "secondary" as const;
}

function CampaignsIndex() {
  const campaignsQuery = useQuery({
    queryKey: ["campaigns", "all"],
    queryFn: () => listCampaignsFn({ data: {} }),
  });
  const storedCampaigns = (campaignsQuery.data ?? []).map((campaign) => ({
    name: campaign.name,
    channel: campaign.channels
      .map((id) => CHANNELS.find((channel) => channel.id === id)?.name ?? id)
      .join(" + "),
    region: campaign.audience.description || campaign.audience.name,
    status: campaign.status === "scheduled" ? "Scheduled" : campaign.status === "draft" ? "Draft" : "Archived",
    reach: formatCount(campaign.estimate.estimatedUniqueReach),
    spend: formatNaira(campaign.estimate.total),
    ctr: "—",
  }));
  const campaigns = storedCampaigns.length ? storedCampaigns : advertiserCampaigns;

  return (
    <div className="space-y-4">
      <div className="flex items-center gap-2">
        <div className="relative flex-1 max-w-sm">
          <Search className="absolute left-2.5 top-2.5 h-3.5 w-3.5 text-muted-foreground" />
          <Input placeholder="Search campaigns…" className="pl-8 h-9" />
        </div>
        <Button variant="outline" size="sm">
          All channels
        </Button>
        <Button variant="outline" size="sm">
          All status
        </Button>
        <div className="flex-1" />
        <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>

      <Card>
        <CardContent className="p-0">
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>Campaign</TableHead>
                <TableHead>Channels</TableHead>
                <TableHead>Region</TableHead>
                <TableHead>Status</TableHead>
                <TableHead className="text-right">Reach</TableHead>
                <TableHead className="text-right">Spend</TableHead>
                <TableHead className="text-right">CTR</TableHead>
                <TableHead className="w-8" />
              </TableRow>
            </TableHeader>
            <TableBody>
              {campaigns.map((c) => (
                <TableRow key={c.name}>
                  <TableCell className="font-medium">
                    <div className="flex items-center gap-2">
                      <span className="h-7 w-7 grid place-items-center rounded-md bg-primary/10 text-primary">
                        <Megaphone className="h-3.5 w-3.5" />
                      </span>
                      {c.name}
                    </div>
                  </TableCell>
                  <TableCell className="text-xs text-muted-foreground">{c.channel}</TableCell>
                  <TableCell className="text-xs">{c.region}</TableCell>
                  <TableCell>
                    <Badge variant={statusVariant(c.status)} className="text-[10px]">
                      {c.status}
                    </Badge>
                  </TableCell>
                  <TableCell className="text-right tabular-nums">{c.reach}</TableCell>
                  <TableCell className="text-right tabular-nums">{c.spend}</TableCell>
                  <TableCell className="text-right tabular-nums">{c.ctr}</TableCell>
                  <TableCell>
                    <Button variant="ghost" size="icon" className="h-7 w-7">
                      <MoreHorizontal className="h-3.5 w-3.5" />
                    </Button>
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </CardContent>
      </Card>
    </div>
  );
}