"use client";
import { useEffect, useRef, useState } from "react";
import { Bookmark, ChevronDown, Gem, Star, MinusCircle, Package, Check, Eye, FolderHeart, Tag, Play } from "lucide-react";
import { cn } from "@/lib/utils";
import type { FilterCriteria, FilterStatus, MarkOption, StatusAxisKey } from "@/lib/filters";
import { totalStatusActive, EMPTY_STATUS } from "@/lib/filters";

const MARK_OPTIONS: Array<{
  value: MarkOption;
  label: string;
  Icon: React.ComponentType<{ className?: string; style?: React.CSSProperties }>;
  tint: "cyan" | "amber" | "violet" | "muted";
}> = [
  { value: "vip",      label: "VIP",      Icon: Gem,         tint: "cyan" },
  { value: "favorite", label: "Favorite", Icon: Star,        tint: "amber" },
  { value: "owned",    label: "Owned",    Icon: Package,     tint: "violet" },
  { value: "unmarked", label: "Unmarked", Icon: MinusCircle, tint: "muted" },
];

type AxisOpt<V extends string> = { value: V; label: string };
type AxisConfig = {
  key: StatusAxisKey;
  label: string;
  Icon: React.ComponentType<{ className?: string }>;
  options: Array<AxisOpt<string>>;
};

const WATCH_AXES: AxisConfig[] = [
  { key: "watched", label: "Watched", Icon: Eye, options: [
    { value: "all", label: "ALL" },
    { value: "watched", label: "Watched" },
    { value: "unwatched", label: "Unwatched" },
  ]},
  { key: "rated", label: "Rated", Icon: Star, options: [
    { value: "all", label: "ALL" },
    { value: "rated", label: "Rated" },
    { value: "unrated", label: "No Rating" },
  ]},
];

const HAS_AXES: AxisConfig[] = [
  { key: "collection", label: "Collection", Icon: FolderHeart, options: [
    { value: "all", label: "ALL" },
    { value: "has", label: "Has" },
    { value: "missing", label: "Missing" },
  ]},
  { key: "tags", label: "Tags", Icon: Tag, options: [
    { value: "all", label: "ALL" },
    { value: "has", label: "Has" },
    { value: "missing", label: "Missing" },
  ]},
  { key: "video", label: "Video", Icon: Play, options: [
    { value: "all", label: "ALL" },
    { value: "has", label: "Has" },
    { value: "missing", label: "Missing" },
  ]},
];

export function MergedFilterPopover({
  criteria,
  onChange,
}: {
  criteria: FilterCriteria;
  onChange: (next: FilterCriteria) => void;
}) {
  const [open, setOpen] = useState(false);
  const wrapRef = useRef<HTMLDivElement>(null);

  const markCount = criteria.marks.length;
  const stateCount = totalStatusActive(criteria);
  const total = markCount + stateCount;
  const active = total > 0;

  useEffect(() => {
    if (!open) return;
    const onDoc = (e: MouseEvent) => {
      if (!wrapRef.current?.contains(e.target as Node)) setOpen(false);
    };
    document.addEventListener("mousedown", onDoc);
    return () => document.removeEventListener("mousedown", onDoc);
  }, [open]);

  useEffect(() => {
    if (!open) return;
    const onKey = (e: KeyboardEvent) => { if (e.key === "Escape") setOpen(false); };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [open]);

  function toggleMark(value: MarkOption) {
    const has = criteria.marks.includes(value);
    const next = has ? criteria.marks.filter((m) => m !== value) : [...criteria.marks, value];
    onChange({ ...criteria, marks: next });
  }

  function setAxis<K extends StatusAxisKey>(key: K, value: FilterStatus[K]) {
    onChange({ ...criteria, status: { ...criteria.status, [key]: value } });
  }

  function resetAll() {
    onChange({ ...criteria, marks: [], status: { ...EMPTY_STATUS } });
  }

  // Watch / Has section counts (used for the footer breakdown text only).
  const watchCount = (["watched", "rated"] as StatusAxisKey[]).filter((k) => criteria.status[k] !== "all").length;
  const hasCount = (["collection", "tags", "video"] as StatusAxisKey[]).filter((k) => criteria.status[k] !== "all").length;

  return (
    <div className="relative" ref={wrapRef}>
      <button
        type="button"
        onClick={() => setOpen((v) => !v)}
        className={cn(
          "flex items-center gap-1.5 px-3 py-1.5 rounded-full border text-sm transition-colors min-w-[140px] justify-between",
          active
            ? "bg-[var(--color-cyan)]/10 border-[var(--color-cyan)]/40 text-[var(--color-cyan)]"
            : "glass glass-hover text-[var(--color-fg-dim)]",
        )}
      >
        <span className="inline-flex items-center gap-1.5">
          <Bookmark className="w-3.5 h-3.5" />
          Filter
        </span>
        <span className="inline-flex items-center gap-1.5">
          <span
            className={cn(
              "inline-flex items-center justify-center min-w-[18px] h-[18px] px-1 rounded-full bg-[var(--color-cyan)] text-black text-[10px] font-mono font-bold tabular-nums",
              !active && "invisible",
            )}
          >
            {total || 0}
          </span>
          <ChevronDown className="w-3 h-3 opacity-70" />
        </span>
      </button>

      {open && (
        <div
          className="absolute left-0 top-[calc(100%+6px)] z-30 bg-[var(--color-bg-0)] border border-[var(--color-glass-border-strong)] rounded-2xl shadow-2xl overflow-hidden w-[460px]"
          onClick={(e) => e.stopPropagation()}
        >
          {/* Section 1 — Marks (multi-select OR) */}
          <div className="p-3 border-b border-[var(--color-glass-border)]">
            <div className="grid grid-cols-4 gap-1">
              {MARK_OPTIONS.map(({ value, label, Icon, tint }) => {
                const on = criteria.marks.includes(value);
                return (
                  <button
                    key={value}
                    type="button"
                    onClick={() => toggleMark(value)}
                    className={cn(
                      "flex items-center gap-1.5 px-2 py-1.5 rounded-md text-xs text-left transition-colors whitespace-nowrap",
                      on
                        ? tint === "cyan"   ? "bg-[var(--color-cyan)]/15 text-[var(--color-cyan)]"
                        : tint === "amber"  ? "text-amber-200"
                        : tint === "violet" ? "bg-[var(--color-violet)]/15 text-[var(--color-violet)]"
                        : "bg-[var(--color-glass-strong)] text-[var(--color-fg)]"
                        : "text-[var(--color-fg-dim)] hover:text-[var(--color-fg)] hover:bg-[var(--color-glass)]",
                    )}
                    style={on && tint === "amber" ? { background: "rgba(251,191,36,0.15)" } : undefined}
                  >
                    <span className={cn(
                      "w-4 h-4 rounded border flex items-center justify-center shrink-0",
                      on
                        ? tint === "cyan"   ? "bg-[var(--color-cyan)]/30 border-[var(--color-cyan)]"
                        : tint === "amber"  ? "border-amber-400"
                        : tint === "violet" ? "bg-[var(--color-violet)]/30 border-[var(--color-violet)]"
                        : "bg-[var(--color-fg-dim)]/30 border-[var(--color-fg-dim)]"
                        : "border-[var(--color-glass-border-strong)]",
                    )}
                    style={on && tint === "amber" ? { background: "rgba(251,191,36,0.25)" } : undefined}>
                      {on && (
                        <Check
                          className="w-3 h-3"
                          strokeWidth={3}
                          style={{
                            color: tint === "cyan" ? "var(--color-cyan)"
                              : tint === "amber" ? "#fbbf24"
                              : tint === "violet" ? "var(--color-violet)"
                              : "var(--color-fg)",
                          }}
                        />
                      )}
                    </span>
                    <Icon
                      className={cn("w-3.5 h-3.5", on && tint === "amber" && "fill-amber-300")}
                      style={{
                        color: tint === "cyan" ? "var(--color-cyan)"
                          : tint === "amber" ? "#fbbf24"
                          : tint === "violet" ? "var(--color-violet)"
                          : "var(--color-fg-muted)",
                      }}
                    />
                    <span>{label}</span>
                  </button>
                );
              })}
            </div>
          </div>

          {/* Section 2 — Watch State */}
          <AxisSection axes={WATCH_AXES} status={criteria.status} onSet={setAxis} />

          {/* Section 3 — Has… */}
          <AxisSection axes={HAS_AXES} status={criteria.status} onSet={setAxis} />

          {/* Footer */}
          <div className="flex items-center justify-between px-4 py-2.5 bg-[var(--color-bg-1)] border-t border-[var(--color-glass-border)] text-[11px] font-mono text-[var(--color-fg-muted)]">
            <span>
              {total === 0
                ? "no filters set"
                : `${total} filter${total === 1 ? "" : "s"}` +
                  (markCount > 0 ? ` · ${markCount} mark${markCount === 1 ? "" : "s"}` : "") +
                  (watchCount > 0 ? ` · ${watchCount} watch` : "") +
                  (hasCount > 0 ? ` · ${hasCount} has` : "")}
            </span>
            <button
              type="button"
              onClick={resetAll}
              disabled={!active}
              className="text-[var(--color-cyan)] hover:underline disabled:opacity-40 disabled:no-underline"
            >
              Reset All
            </button>
          </div>
        </div>
      )}
    </div>
  );
}

function AxisSection({
  axes,
  status,
  onSet,
}: {
  axes: AxisConfig[];
  status: FilterStatus;
  onSet: <K extends StatusAxisKey>(key: K, value: FilterStatus[K]) => void;
}) {
  return (
    <div className="p-3 border-b border-[var(--color-glass-border)] last:border-b-0 space-y-2.5">
      {axes.map(({ key, label, Icon, options }) => {
        const current = status[key];
        return (
          <div key={key}>
            <div className="flex items-center gap-1.5 text-[10px] uppercase tracking-wider font-mono text-[var(--color-fg-muted)] mb-1">
              <Icon className="w-3 h-3" />
              {label}
            </div>
            <div className="flex border border-[var(--color-glass-border)] rounded-lg overflow-hidden">
              {options.map((o) => {
                const on = current === o.value;
                return (
                  <button
                    key={o.value}
                    type="button"
                    onClick={() => onSet(key, o.value as FilterStatus[typeof key])}
                    className={cn(
                      "flex-1 text-center px-2 py-1.5 text-xs font-mono whitespace-nowrap transition-colors border-r border-[var(--color-glass-border)] last:border-r-0",
                      on
                        ? "bg-[var(--color-cyan)]/20 text-[var(--color-cyan)] font-bold"
                        : "text-[var(--color-fg-muted)] hover:text-[var(--color-fg)] hover:bg-[var(--color-glass)]",
                    )}
                  >
                    {o.label}
                  </button>
                );
              })}
            </div>
          </div>
        );
      })}
    </div>
  );
}