import { useMemo } from "react";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Checkbox } from "@/components/ui/checkbox";
import { Label } from "@/components/ui/label";
import { Slider } from "@/components/ui/slider";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion";
import { AGE_BANDS, GENDERS, LANGUAGES, NIGERIA_GEO } from "@/lib/audience-data";
import { cn } from "@/lib/utils";
import { Filter, MapPin, RotateCcw, Search, Users } from "lucide-react";

export interface AudienceFilters {
  states: string[];
  lgas: string[];
  wards: string[];
  genders: string[];
  ageRange: [number, number];
  languages: string[];
  consentOnly: boolean;
  search: string;
}

export const DEFAULT_FILTERS: AudienceFilters = {
  states: [],
  lgas: [],
  wards: [],
  genders: [],
  ageRange: [18, 70],
  languages: [],
  consentOnly: true,
  search: "",
};

interface Props {
  filters: AudienceFilters;
  onChange: (next: AudienceFilters) => void;
  compact?: boolean;
}

export function FilterPanel({ filters, onChange, compact }: Props) {
  const toggle = (key: "states" | "lgas" | "wards" | "genders" | "languages", value: string) => {
    const set = new Set(filters[key]);
    if (set.has(value)) {
      set.delete(value);
    } else {
      set.add(value);
    }
    onChange({ ...filters, [key]: Array.from(set) });
  };

  const availableLgas = useMemo(() => {
    if (filters.states.length === 0) return NIGERIA_GEO.flatMap((s) => s.lgas);
    return NIGERIA_GEO.filter((s) => filters.states.includes(s.name)).flatMap((s) => s.lgas);
  }, [filters.states]);

  const availableWards = useMemo(() => {
    const scope = filters.lgas.length
      ? availableLgas.filter((l) => filters.lgas.includes(l.name))
      : availableLgas;
    return Array.from(new Set(scope.flatMap((l) => l.wards)));
  }, [availableLgas, filters.lgas]);

  const activeCount =
    filters.states.length +
    filters.lgas.length +
    filters.wards.length +
    filters.genders.length +
    filters.languages.length +
    (filters.consentOnly ? 0 : 1) +
    (filters.search ? 1 : 0);

  return (
    <Card className={cn(compact && "border-0 shadow-none")}>
      <CardHeader
        className={cn(
          "flex flex-row items-center justify-between space-y-0 pb-3",
          compact && "px-0 pt-0",
        )}
      >
        <div className="flex items-center gap-2">
          <Filter className="h-4 w-4 text-primary" />
          <CardTitle className="text-sm">Audience filters</CardTitle>
          {activeCount > 0 && (
            <Badge variant="secondary" className="text-[10px] h-4">
              {activeCount}
            </Badge>
          )}
        </div>
        <Button
          variant="ghost"
          size="sm"
          className="h-7 px-2 text-[11px] gap-1"
          onClick={() => onChange(DEFAULT_FILTERS)}
        >
          <RotateCcw className="h-3 w-3" /> Reset
        </Button>
      </CardHeader>

      <CardContent className={cn("space-y-4", compact && "px-0")}>
        {/* Search */}
        <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={filters.search}
            onChange={(e) => onChange({ ...filters, search: e.target.value })}
            placeholder="Name, phone or ID…"
            className="h-9 pl-8 text-sm"
          />
        </div>

        <Accordion type="multiple" defaultValue={["geo", "demo"]} className="w-full">
          <AccordionItem value="geo" className="border-border">
            <AccordionTrigger className="text-xs font-semibold py-2 hover:no-underline">
              <span className="flex items-center gap-2">
                <MapPin className="h-3.5 w-3.5 text-primary" /> Geography
              </span>
            </AccordionTrigger>
            <AccordionContent className="space-y-3 pt-1">
              <div>
                <Label className="text-[11px] uppercase tracking-wide text-muted-foreground">
                  States
                </Label>
                <div className="mt-2 grid grid-cols-2 gap-1.5 max-h-40 overflow-auto pr-1">
                  {NIGERIA_GEO.map((s) => (
                    <FilterCheck
                      key={s.name}
                      label={s.name}
                      checked={filters.states.includes(s.name)}
                      onChange={() => toggle("states", s.name)}
                    />
                  ))}
                </div>
              </div>

              <div>
                <Label className="text-[11px] uppercase tracking-wide text-muted-foreground">
                  LGAs
                </Label>
                <div className="mt-2 grid grid-cols-2 gap-1.5 max-h-40 overflow-auto pr-1">
                  {availableLgas.length === 0 && (
                    <div className="text-[11px] text-muted-foreground col-span-2">
                      Select a state to see LGAs.
                    </div>
                  )}
                  {availableLgas.map((l) => (
                    <FilterCheck
                      key={l.name}
                      label={l.name}
                      checked={filters.lgas.includes(l.name)}
                      onChange={() => toggle("lgas", l.name)}
                    />
                  ))}
                </div>
              </div>

              <div>
                <Label className="text-[11px] uppercase tracking-wide text-muted-foreground">
                  Wards
                </Label>
                <div className="mt-2 flex flex-wrap gap-1.5 max-h-32 overflow-auto">
                  {availableWards.length === 0 && (
                    <div className="text-[11px] text-muted-foreground">
                      Select an LGA to see wards.
                    </div>
                  )}
                  {availableWards.slice(0, 24).map((w) => {
                    const active = filters.wards.includes(w);
                    return (
                      <button
                        key={w}
                        onClick={() => toggle("wards", w)}
                        className={cn(
                          "rounded-full border px-2.5 py-0.5 text-[10px] transition-colors",
                          active
                            ? "border-primary bg-primary text-primary-foreground"
                            : "border-border hover:border-primary/40 hover:bg-muted",
                        )}
                      >
                        {w}
                      </button>
                    );
                  })}
                </div>
              </div>
            </AccordionContent>
          </AccordionItem>

          <AccordionItem value="demo" className="border-border">
            <AccordionTrigger className="text-xs font-semibold py-2 hover:no-underline">
              <span className="flex items-center gap-2">
                <Users className="h-3.5 w-3.5 text-primary" /> Demographics
              </span>
            </AccordionTrigger>
            <AccordionContent className="space-y-4 pt-1">
              <div>
                <Label className="text-[11px] uppercase tracking-wide text-muted-foreground">
                  Gender
                </Label>
                <div className="mt-2 flex gap-1.5">
                  {GENDERS.map((g) => {
                    const active = filters.genders.includes(g);
                    return (
                      <button
                        key={g}
                        onClick={() => toggle("genders", g)}
                        className={cn(
                          "flex-1 rounded-md border px-3 py-1.5 text-xs transition-colors",
                          active
                            ? "border-primary bg-primary/10 text-primary font-medium"
                            : "border-border hover:bg-muted",
                        )}
                      >
                        {g}
                      </button>
                    );
                  })}
                </div>
              </div>

              <div>
                <div className="flex items-center justify-between">
                  <Label className="text-[11px] uppercase tracking-wide text-muted-foreground">
                    Age range
                  </Label>
                  <span className="text-xs font-medium tabular-nums">
                    {filters.ageRange[0]} – {filters.ageRange[1]}
                  </span>
                </div>
                <Slider
                  className="mt-3"
                  min={18}
                  max={80}
                  step={1}
                  value={filters.ageRange}
                  onValueChange={(v) =>
                    onChange({ ...filters, ageRange: [v[0], v[1]] as [number, number] })
                  }
                />
                <div className="mt-2 flex gap-1 flex-wrap">
                  {AGE_BANDS.map((b) => (
                    <button
                      key={b.id}
                      onClick={() => {
                        const [lo, hi] =
                          b.id === "55+"
                            ? [55, 80]
                            : (b.id.split("-").map(Number) as [number, number]);
                        onChange({ ...filters, ageRange: [lo, hi] });
                      }}
                      className="rounded-full border border-border px-2 py-0.5 text-[10px] hover:border-primary/40 hover:bg-muted"
                    >
                      {b.label}
                    </button>
                  ))}
                </div>
              </div>

              <div>
                <Label className="text-[11px] uppercase tracking-wide text-muted-foreground">
                  Language
                </Label>
                <div className="mt-2 flex flex-wrap gap-1.5">
                  {LANGUAGES.map((l) => {
                    const active = filters.languages.includes(l);
                    return (
                      <button
                        key={l}
                        onClick={() => toggle("languages", l)}
                        className={cn(
                          "rounded-full border px-2.5 py-0.5 text-[10px] transition-colors",
                          active
                            ? "border-primary bg-primary text-primary-foreground"
                            : "border-border hover:border-primary/40 hover:bg-muted",
                        )}
                      >
                        {l}
                      </button>
                    );
                  })}
                </div>
              </div>

              <label className="flex items-center gap-2 rounded-md border border-border bg-muted/30 px-3 py-2 text-xs cursor-pointer hover:bg-muted/50">
                <Checkbox
                  checked={filters.consentOnly}
                  onCheckedChange={(c) => onChange({ ...filters, consentOnly: c === true })}
                />
                <div className="flex-1">
                  <div className="font-medium">Opted-in supporters only</div>
                  <div className="text-[10px] text-muted-foreground">
                    Required for compliant outreach
                  </div>
                </div>
              </label>
            </AccordionContent>
          </AccordionItem>
        </Accordion>
      </CardContent>
    </Card>
  );
}

function FilterCheck({
  label,
  checked,
  onChange,
}: {
  label: string;
  checked: boolean;
  onChange: () => void;
}) {
  return (
    <label
      className={cn(
        "flex items-center gap-2 rounded-md px-2 py-1 text-xs cursor-pointer transition-colors",
        checked ? "bg-primary/10 text-primary font-medium" : "hover:bg-muted",
      )}
    >
      <Checkbox checked={checked} onCheckedChange={onChange} className="h-3.5 w-3.5" />
      <span className="truncate">{label}</span>
    </label>
  );
}