import { createFileRoute, Link, Outlet, useRouterState } from "@tanstack/react-router";
import { DashboardLayout } from "@/components/dashboard-layout";
import { DashboardHeader } from "@/components/dashboard/widgets";
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";
import { Database, Plus, Sparkles, Upload, Users } from "lucide-react";
import { requireRole } from "@/lib/auth/guards";

export const Route = createFileRoute("/audiences")({
  beforeLoad: ({ context, location }) => requireRole(context, location, "advertiser", "superadmin"),
  head: () => ({
    meta: [
      { title: "Audiences — VotersAlert" },
      {
        name: "description",
        content: "Manage supporter database, build segments and import contacts.",
      },
    ],
  }),
  component: AudiencesLayout,
});

const tabs = [
  { to: "/audiences", label: "Database", icon: Database, exact: true },
  { to: "/audiences/builder", label: "Audience builder", icon: Sparkles },
  { to: "/audiences/import", label: "Import", icon: Upload },
];

function AudiencesLayout() {
  const pathname = useRouterState({ select: (r) => r.location.pathname });
  return (
    <DashboardLayout>
      <div className="p-4 sm:p-6 lg:p-8 space-y-6 max-w-[1600px] mx-auto">
        <DashboardHeader
          eyebrow={
            <>
              <Users className="h-3 w-3" /> <span>4.82M supporters · 92.4% opted-in</span>
            </>
          }
          title="Audience intelligence"
          subtitle="Search, segment and import voter contacts with full consent tracking."
          actions={
            <>
              <Button variant="outline" size="sm" className="gap-1.5" asChild>
                <Link to="/audiences/import">
                  <Upload className="h-3.5 w-3.5" /> Import
                </Link>
              </Button>
              <Button size="sm" className="gap-1.5" asChild>
                <Link to="/audiences/builder">
                  <Plus className="h-3.5 w-3.5" /> New segment
                </Link>
              </Button>
            </>
          }
        />

        <div className="flex items-center gap-1 border-b">
          {tabs.map((t) => {
            const active = t.exact ? pathname === t.to : pathname.startsWith(t.to);
            return (
              <Link
                key={t.to}
                to={t.to}
                className={cn(
                  "flex items-center gap-1.5 px-3 py-2 text-sm border-b-2 -mb-px transition-colors",
                  active
                    ? "border-primary text-foreground font-medium"
                    : "border-transparent text-muted-foreground hover:text-foreground",
                )}
              >
                <t.icon className="h-3.5 w-3.5" /> {t.label}
              </Link>
            );
          })}
        </div>

        <Outlet />
      </div>
    </DashboardLayout>
  );
}