import { createFileRoute } from "@tanstack/react-router";
import { useState } from "react";
import { useQuery, useQueryClient } from "@tanstack/react-query";
import { DashboardLayout } from "@/components/dashboard-layout";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";
import { Progress } from "@/components/ui/progress";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Separator } from "@/components/ui/separator";
import { ScrollArea } from "@/components/ui/scroll-area";
import { DashboardHeader, MetricCard } from "@/components/dashboard/widgets";
import {
  complianceQueue,
  complianceTimeline,
  complianceKpis,
  policyRules,
  riskColor,
  type ComplianceItem,
} from "@/lib/ai-data";
import {
  ShieldCheck,
  ShieldAlert,
  AlertTriangle,
  CheckCircle2,
  XCircle,
  Clock,
  Search,
  Sparkles,
  FileText,
  Filter,
  Download,
  BookOpen,
  Eye,
  MessageSquare,
  ChevronRight,
  Activity,
  Gavel,
  Bot,
  User as UserIcon,
  Upload,
} from "lucide-react";
import { cn } from "@/lib/utils";

import { requireRole } from "@/lib/auth/guards";
import { listAdvertiserApplicationsFn, updateAdvertiserStatusFn } from "@/lib/auth/auth.functions";
import { ACCOUNT_STATUS_LABELS, type AccountStatus } from "@/lib/auth/roles";
import { toast } from "sonner";

export const Route = createFileRoute("/compliance")({
  beforeLoad: ({ context, location }) => requireRole(context, location, "compliance", "superadmin"),
  head: () => ({
    meta: [
      { title: "Compliance Center — VotersAlert" },
      {
        name: "description",
        content: "INEC & NCC compliance scoring, policy review and approval workflows.",
      },
    ],
  }),
  component: ComplianceCenter,
});

const statusBadge: Record<
  ComplianceItem["status"],
  { label: string; cls: string; icon: typeof CheckCircle2 }
> = {
  pending: {
    label: "Pending",
    cls: "bg-warning/10 text-warning-foreground border-warning/30",
    icon: Clock,
  },
  approved: {
    label: "Approved",
    cls: "bg-success/10 text-success border-success/30",
    icon: CheckCircle2,
  },
  rejected: {
    label: "Rejected",
    cls: "bg-destructive/10 text-destructive border-destructive/30",
    icon: XCircle,
  },
  "changes-requested": {
    label: "Changes requested",
    cls: "bg-primary/10 text-primary border-primary/30",
    icon: MessageSquare,
  },
};

interface AdvertiserApplication {
  id: string;
  email: string;
  firstName: string;
  lastName: string;
  legalName: string | null;
  organizationType: string | null;
  state: string | null;
  lga: string | null;
  accountStatus: AccountStatus;
  accountRejectionReason: string | null;
  documents: Array<{ id: string; type: string; fileName: string; uploadedAt: string }>;
}

const accountStatusTone: Record<AccountStatus, string> = {
  PENDING_SUBMISSION: "bg-muted text-muted-foreground border-border",
  UNDER_REVIEW: "bg-warning/10 text-warning-foreground border-warning/30",
  VERIFIED: "bg-success/10 text-success border-success/30",
  REJECTED: "bg-destructive/10 text-destructive border-destructive/30",
};

function ComplianceCenter() {
  const [selected, setSelected] = useState<ComplianceItem>(complianceQueue[1]);
  const [query, setQuery] = useState("");
  const list = complianceQueue.filter((c) =>
    c.campaign.toLowerCase().includes(query.toLowerCase()),
  );

  return (
    <DashboardLayout>
      <div className="p-4 sm:p-6 lg:p-8 space-y-6 max-w-[1600px] mx-auto">
        <DashboardHeader
          eyebrow={
            <>
              <ShieldCheck className="h-3 w-3" />
              <span>INEC & NCC monitored · AI-assisted</span>
            </>
          }
          title="Compliance Center"
          subtitle="Review risk scores, resolve flagged content, and audit every campaign decision."
          actions={
            <>
              <Button variant="outline" size="sm" className="gap-1.5">
                <BookOpen className="h-3.5 w-3.5" /> Policy library
              </Button>
              <Button variant="outline" size="sm" className="gap-1.5">
                <Download className="h-3.5 w-3.5" /> Audit log
              </Button>
              <Button size="sm" className="gap-1.5">
                <Sparkles className="h-3.5 w-3.5" /> Auto-fix queue
              </Button>
            </>
          }
        />

        {/* KPIs */}
        <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
          {complianceKpis.map((k, i) => (
            <MetricCard
              key={k.label}
              label={k.label}
              value={k.value}
              delta={k.delta}
              hint={k.hint}
              icon={[Clock, CheckCircle2, Activity, ShieldAlert][i]}
              accent={i % 2 === 0 ? "primary" : "accent"}
            />
          ))}
        </div>

        <Tabs defaultValue="queue" className="space-y-4">
          <TabsList>
            <TabsTrigger value="queue" className="gap-1.5">
              <Filter className="h-3.5 w-3.5" /> Review queue
            </TabsTrigger>
            <TabsTrigger value="advertisers" className="gap-1.5">
              <ShieldCheck className="h-3.5 w-3.5" /> Pending advertisers
            </TabsTrigger>
            <TabsTrigger value="timeline" className="gap-1.5">
              <Activity className="h-3.5 w-3.5" /> Timeline
            </TabsTrigger>
            <TabsTrigger value="policies" className="gap-1.5">
              <Gavel className="h-3.5 w-3.5" /> Policies
            </TabsTrigger>
          </TabsList>

          {/* Queue + detail */}
          <TabsContent value="queue" className="m-0">
            <div className="grid lg:grid-cols-[1fr_1.3fr] gap-4">
              <Card className="flex flex-col h-[calc(100vh-340px)] min-h-[600px]">
                <CardHeader className="pb-3 space-y-2 border-b">
                  <div className="flex items-center justify-between">
                    <CardTitle className="text-sm">Review queue</CardTitle>
                    <Badge variant="secondary" className="text-[10px]">
                      {list.length} items
                    </Badge>
                  </div>
                  <div className="relative">
                    <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-muted-foreground" />
                    <Input
                      value={query}
                      onChange={(e) => setQuery(e.target.value)}
                      placeholder="Search campaigns"
                      className="h-8 pl-8 text-xs"
                    />
                  </div>
                </CardHeader>
                <ScrollArea className="flex-1">
                  <div className="p-2 space-y-1.5">
                    {list.map((item) => {
                      const s = statusBadge[item.status];
                      const active = selected.id === item.id;
                      return (
                        <button
                          key={item.id}
                          onClick={() => setSelected(item)}
                          className={cn(
                            "w-full text-left rounded-lg border p-3 transition-colors",
                            active
                              ? "border-primary bg-primary/5"
                              : "border-border hover:bg-muted/50",
                          )}
                        >
                          <div className="flex items-start justify-between gap-2">
                            <div className="min-w-0 flex-1">
                              <div className="text-sm font-medium truncate">{item.campaign}</div>
                              <div className="text-[11px] text-muted-foreground mt-0.5 flex items-center gap-1.5">
                                <span>{item.channel}</span>
                                <span>·</span>
                                <span>{item.submitted}</span>
                              </div>
                            </div>
                            <RiskRing score={item.score} level={item.risk} />
                          </div>
                          <div className="mt-2 flex items-center justify-between gap-2">
                            <Badge variant="outline" className={cn("text-[10px] gap-1", s.cls)}>
                              <s.icon className="h-3 w-3" />
                              {s.label}
                            </Badge>
                            <span className="text-[10px] text-muted-foreground truncate">
                              {item.reviewer}
                            </span>
                          </div>
                        </button>
                      );
                    })}
                  </div>
                </ScrollArea>
              </Card>

              <ComplianceDetail item={selected} />
            </div>
          </TabsContent>

          <TabsContent value="advertisers" className="m-0">
            <AdvertiserReviewDashboard />
          </TabsContent>

          <TabsContent value="timeline" className="m-0">
            <Card>
              <CardHeader className="pb-3">
                <CardTitle className="text-sm flex items-center gap-1.5">
                  <Activity className="h-4 w-4 text-primary" /> Compliance timeline · today
                </CardTitle>
              </CardHeader>
              <CardContent>
                <ol className="relative border-l border-border ml-2 space-y-5">
                  {complianceTimeline.map((e, i) => {
                    const map = {
                      scan: { icon: Sparkles, color: "bg-primary/15 text-primary" },
                      approve: { icon: CheckCircle2, color: "bg-success/15 text-success" },
                      reject: { icon: XCircle, color: "bg-destructive/15 text-destructive" },
                      change: { icon: MessageSquare, color: "bg-primary/15 text-primary" },
                      policy: { icon: Gavel, color: "bg-warning/15 text-warning-foreground" },
                      submit: { icon: FileText, color: "bg-muted text-foreground" },
                    } as const;
                    const { icon: Icon, color } = map[e.type];
                    return (
                      <li key={i} className="ml-4">
                        <span
                          className={cn(
                            "absolute -left-3 flex h-6 w-6 items-center justify-center rounded-full ring-4 ring-background",
                            color,
                          )}
                        >
                          <Icon className="h-3 w-3" />
                        </span>
                        <div className="flex items-center justify-between gap-2">
                          <div className="text-sm font-medium">{e.title}</div>
                          <span className="text-[10px] text-muted-foreground tabular-nums">
                            {e.time}
                          </span>
                        </div>
                        <div className="text-xs text-muted-foreground mt-0.5">{e.description}</div>
                      </li>
                    );
                  })}
                </ol>
              </CardContent>
            </Card>
          </TabsContent>

          <TabsContent value="policies" className="m-0">
            <Card>
              <CardHeader className="pb-3 flex flex-row items-center justify-between space-y-0">
                <CardTitle className="text-sm flex items-center gap-1.5">
                  <Gavel className="h-4 w-4 text-primary" /> Active policies
                </CardTitle>
                <Badge variant="secondary" className="text-[10px]">
                  5 enforced · last update 2026-02-20
                </Badge>
              </CardHeader>
              <CardContent className="space-y-2">
                {policyRules.map((p) => (
                  <div
                    key={p.code}
                    className="flex items-start gap-3 rounded-lg border bg-background/60 p-3 hover:border-primary/40 transition-colors"
                  >
                    <Badge variant="outline" className="font-mono text-[10px] shrink-0">
                      {p.code}
                    </Badge>
                    <div className="flex-1 min-w-0">
                      <div className="text-sm font-medium">{p.title}</div>
                      <div className="text-xs text-muted-foreground mt-0.5">{p.description}</div>
                    </div>
                    <Badge
                      variant="outline"
                      className={cn("text-[10px] shrink-0", riskColor[p.level])}
                    >
                      {p.level}
                    </Badge>
                  </div>
                ))}
              </CardContent>
            </Card>
          </TabsContent>
        </Tabs>
      </div>
    </DashboardLayout>
  );
}

function RiskRing({ score, level }: { score: number; level: ComplianceItem["risk"] }) {
  const color =
    level === "low"
      ? "text-success"
      : level === "medium"
        ? "text-warning-foreground"
        : level === "high"
          ? "text-orange-500"
          : "text-destructive";
  const circumference = 2 * Math.PI * 14;
  const offset = circumference - (score / 100) * circumference;
  return (
    <div className="relative h-10 w-10 shrink-0">
      <svg className="h-10 w-10 -rotate-90" viewBox="0 0 32 32">
        <circle cx="16" cy="16" r="14" strokeWidth="3" className="stroke-muted" fill="none" />
        <circle
          cx="16"
          cy="16"
          r="14"
          strokeWidth="3"
          className={cn("transition-all", color)}
          stroke="currentColor"
          fill="none"
          strokeDasharray={circumference}
          strokeDashoffset={offset}
          strokeLinecap="round"
        />
      </svg>
      <div
        className={cn(
          "absolute inset-0 flex items-center justify-center text-[10px] font-semibold tabular-nums",
          color,
        )}
      >
        {score}
      </div>
    </div>
  );
}

function AdvertiserReviewDashboard() {
  const queryClient = useQueryClient();
  const [selectedId, setSelectedId] = useState<string | null>(null);
  const [reasonCode, setReasonCode] = useState("DOCS_COMPLETE");
  const [notes, setNotes] = useState("");
  const [updating, setUpdating] = useState(false);
  const { data = [], isLoading } = useQuery({
    queryKey: ["compliance", "advertiser-applications"],
    queryFn: () => listAdvertiserApplicationsFn() as Promise<AdvertiserApplication[]>,
  });
  const selected = data.find((app) => app.id === selectedId) ?? data[0];

  const updateStatus = async (status: AccountStatus) => {
    if (!selected) return;
    setUpdating(true);
    try {
      await updateAdvertiserStatusFn({
        data: { userId: selected.id, status, reasonCode, notes: notes || null },
      });
      await queryClient.invalidateQueries({ queryKey: ["compliance", "advertiser-applications"] });
      toast.success(`Advertiser marked ${ACCOUNT_STATUS_LABELS[status].toLowerCase()}`);
    } catch (err) {
      toast.error(err instanceof Error ? err.message : "Could not update advertiser status.");
    } finally {
      setUpdating(false);
    }
  };

  if (isLoading)
    return (
      <Card>
        <CardContent className="p-6 text-sm text-muted-foreground">
          Loading advertiser applications…
        </CardContent>
      </Card>
    );

  return (
    <div className="grid lg:grid-cols-[1fr_1.35fr] gap-4">
      <Card className="min-h-[560px]">
        <CardHeader className="pb-3 border-b">
          <CardTitle className="text-sm flex items-center justify-between">
            Pending advertisers{" "}
            <Badge variant="secondary" className="text-[10px]">
              {data.length}
            </Badge>
          </CardTitle>
        </CardHeader>
        <CardContent className="p-2 space-y-2">
          {data.length === 0 && (
            <div className="p-4 text-xs text-muted-foreground">
              No advertisers awaiting manual review.
            </div>
          )}
          {data.map((app) => (
            <button
              key={app.id}
              onClick={() => setSelectedId(app.id)}
              className={cn(
                "w-full rounded-lg border p-3 text-left",
                selected?.id === app.id ? "border-primary bg-primary/5" : "hover:bg-muted/50",
              )}
            >
              <div className="flex items-start justify-between gap-2">
                <div>
                  <div className="text-sm font-medium">{app.legalName ?? app.email}</div>
                  <div className="text-[11px] text-muted-foreground">
                    {app.organizationType ?? "Organization"} · {app.state ?? "State"} /{" "}
                    {app.lga ?? "LGA"}
                  </div>
                </div>
                <Badge
                  variant="outline"
                  className={cn("text-[10px]", accountStatusTone[app.accountStatus])}
                >
                  {ACCOUNT_STATUS_LABELS[app.accountStatus]}
                </Badge>
              </div>
              <div className="mt-2 text-[11px] text-muted-foreground">
                {app.documents.length}/3 documents uploaded · {app.email}
              </div>
            </button>
          ))}
        </CardContent>
      </Card>

      <Card className="min-h-[560px]">
        <CardHeader className="pb-3 border-b">
          <CardTitle className="text-sm flex items-center gap-1.5">
            <ShieldCheck className="h-4 w-4 text-primary" /> Manual review
          </CardTitle>
        </CardHeader>
        <CardContent className="p-4 space-y-4">
          {!selected ? (
            <div className="text-sm text-muted-foreground">Select an advertiser to review.</div>
          ) : (
            <>
              <div className="rounded-lg border bg-muted/30 p-3">
                <div className="text-base font-semibold">
                  {selected.legalName ?? selected.email}
                </div>
                <div className="mt-1 text-xs text-muted-foreground">
                  Admin: {selected.firstName} {selected.lastName} · {selected.email}
                </div>
                <div className="mt-2 flex flex-wrap gap-2">
                  {[selected.organizationType, selected.state, selected.lga]
                    .filter(Boolean)
                    .map((item) => (
                      <Badge key={String(item)} variant="secondary" className="text-[10px]">
                        {item}
                      </Badge>
                    ))}
                </div>
              </div>

              <div className="grid md:grid-cols-3 gap-2">
                {selected.documents.map((doc) => (
                  <div key={doc.id} className="rounded-lg border p-3">
                    <FileText className="h-4 w-4 text-primary" />
                    <div className="mt-2 text-xs font-medium truncate">{doc.fileName}</div>
                    <div className="text-[10px] text-muted-foreground">
                      {doc.type.replaceAll("_", " ")}
                    </div>
                    <Button size="sm" variant="outline" className="mt-3 h-7 text-xs gap-1.5">
                      <Eye className="h-3 w-3" /> Review
                    </Button>
                  </div>
                ))}
                {selected.documents.length < 3 && (
                  <div className="rounded-lg border border-dashed p-3 text-xs text-muted-foreground">
                    <Upload className="mb-2 h-4 w-4" /> Awaiting remaining documents.
                  </div>
                )}
              </div>

              <div className="space-y-2">
                <label className="text-xs font-medium">Reason code</label>
                <select
                  value={reasonCode}
                  onChange={(e) => setReasonCode(e.target.value)}
                  className="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm"
                >
                  {[
                    "DOCS_COMPLETE",
                    "INEC_CERT_INVALID",
                    "IDENTITY_MISMATCH",
                    "AUTHORIZATION_MISSING",
                    "MANUAL_ESCALATION",
                  ].map((code) => (
                    <option key={code} value={code}>
                      {code}
                    </option>
                  ))}
                </select>
              </div>
              <div className="space-y-2">
                <label className="text-xs font-medium">Reviewer notes</label>
                <Textarea
                  value={notes}
                  onChange={(e) => setNotes(e.target.value)}
                  placeholder="Document findings, call notes, or rejection details…"
                />
              </div>
              <div className="flex flex-wrap justify-end gap-2 border-t pt-3">
                <Button
                  variant="outline"
                  size="sm"
                  onClick={() => updateStatus("UNDER_REVIEW")}
                  disabled={updating}
                >
                  Mark under review
                </Button>
                <Button
                  variant="outline"
                  size="sm"
                  className="text-destructive hover:text-destructive"
                  onClick={() => updateStatus("REJECTED")}
                  disabled={updating}
                >
                  <XCircle className="h-3.5 w-3.5" /> Reject
                </Button>
                <Button size="sm" onClick={() => updateStatus("VERIFIED")} disabled={updating}>
                  <CheckCircle2 className="h-3.5 w-3.5" /> Approve advertiser
                </Button>
              </div>
            </>
          )}
        </CardContent>
      </Card>
    </div>
  );
}

function ComplianceDetail({ item }: { item: ComplianceItem }) {
  const s = statusBadge[item.status];
  return (
    <Card className="flex flex-col h-[calc(100vh-340px)] min-h-[600px]">
      <CardHeader className="pb-3 border-b">
        <div className="flex items-start justify-between gap-3">
          <div className="min-w-0">
            <div className="flex items-center gap-2 text-[11px] text-muted-foreground">
              <span>{item.channel}</span>
              <ChevronRight className="h-3 w-3" />
              <span>Submitted {item.submitted}</span>
            </div>
            <CardTitle className="text-base mt-1">{item.campaign}</CardTitle>
            <div className="mt-2 flex items-center gap-2">
              <Badge variant="outline" className={cn("text-[10px] gap-1", s.cls)}>
                <s.icon className="h-3 w-3" />
                {s.label}
              </Badge>
              <Badge variant="outline" className={cn("text-[10px]", riskColor[item.risk])}>
                {item.risk} risk · score {item.score}
              </Badge>
              <span className="text-[11px] text-muted-foreground flex items-center gap-1">
                {item.reviewer.startsWith("Auto") ? (
                  <Bot className="h-3 w-3" />
                ) : (
                  <UserIcon className="h-3 w-3" />
                )}
                {item.reviewer}
              </span>
            </div>
          </div>
          <Button size="sm" variant="outline" className="gap-1.5 shrink-0">
            <Eye className="h-3.5 w-3.5" /> Preview
          </Button>
        </div>
      </CardHeader>

      <ScrollArea className="flex-1">
        <div className="p-4 space-y-4">
          {/* Risk breakdown */}
          <div className="rounded-lg border bg-gradient-to-br from-muted/40 to-transparent p-4">
            <div className="flex items-center justify-between mb-2">
              <div className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
                Risk breakdown
              </div>
              <span className="text-[10px] text-muted-foreground">100 = highest risk</span>
            </div>
            <div className="flex items-end gap-4">
              <div className="text-4xl font-semibold tabular-nums">{item.score}</div>
              <div className="flex-1 space-y-1.5 pb-1">
                <Progress value={item.score} className="h-2" />
                <div className="flex justify-between text-[10px] text-muted-foreground">
                  <span>Safe</span>
                  <span>Caution</span>
                  <span>Block</span>
                </div>
              </div>
            </div>
          </div>

          {/* Flags */}
          <div className="space-y-2">
            <div className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
              Policy flags ({item.flags.length})
            </div>
            {item.flags.map((f, i) => (
              <div key={i} className="rounded-lg border bg-background/60 p-3 space-y-1.5">
                <div className="flex items-center justify-between gap-2">
                  <div className="flex items-center gap-2">
                    <AlertTriangle
                      className={cn(
                        "h-3.5 w-3.5",
                        f.severity === "critical"
                          ? "text-destructive"
                          : f.severity === "high"
                            ? "text-orange-500"
                            : f.severity === "medium"
                              ? "text-warning-foreground"
                              : "text-success",
                      )}
                    />
                    <span className="text-sm font-medium">{f.rule}</span>
                  </div>
                  <Badge variant="outline" className={cn("text-[10px]", riskColor[f.severity])}>
                    {f.severity}
                  </Badge>
                </div>
                <div className="text-xs text-muted-foreground pl-6">{f.note}</div>
              </div>
            ))}
          </div>

          {/* AI explanation */}
          <div className="rounded-lg border border-primary/30 bg-primary/5 p-3 space-y-2">
            <div className="flex items-center gap-1.5 text-xs font-semibold">
              <Sparkles className="h-3.5 w-3.5 text-primary" /> AI explanation
            </div>
            <p className="text-xs text-muted-foreground leading-relaxed">
              This creative was flagged because it references an opposing candidate without a cited
              public source (INEC-04) and uses in-group framing common to ethnic-bias filters.
              Rewriting with neutral phrasing and adding a footnote to the cited record will drop
              the risk score to ~22 (low).
            </p>
            <Button size="sm" className="h-7 text-xs gap-1">
              <Sparkles className="h-3 w-3" /> Generate compliant rewrite
            </Button>
          </div>

          <Separator />

          {/* Approval workflow */}
          <div className="space-y-2">
            <div className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
              Approval workflow
            </div>
            <div className="grid grid-cols-3 gap-2">
              {[
                { label: "Auto-scan", done: true },
                { label: "Human review", done: item.status !== "pending" },
                { label: "Final approval", done: item.status === "approved" },
              ].map((step, i) => (
                <div
                  key={step.label}
                  className={cn(
                    "rounded-md border p-2 text-center",
                    step.done ? "border-success/40 bg-success/5" : "border-border bg-muted/30",
                  )}
                >
                  <div
                    className={cn(
                      "text-[10px] font-semibold uppercase",
                      step.done ? "text-success" : "text-muted-foreground",
                    )}
                  >
                    Step {i + 1}
                  </div>
                  <div className="text-xs font-medium mt-0.5">{step.label}</div>
                  {step.done && <CheckCircle2 className="h-3 w-3 text-success mx-auto mt-1" />}
                </div>
              ))}
            </div>
          </div>
        </div>
      </ScrollArea>

      <div className="border-t p-3 flex flex-wrap items-center justify-end gap-2">
        <Button variant="outline" size="sm">
          Request changes
        </Button>
        <Button
          variant="outline"
          size="sm"
          className="gap-1.5 text-destructive hover:text-destructive"
        >
          <XCircle className="h-3.5 w-3.5" /> Reject
        </Button>
        <Button size="sm" className="gap-1.5">
          <CheckCircle2 className="h-3.5 w-3.5" /> Approve & schedule
        </Button>
      </div>
    </Card>
  );
}