"use client";

import { ChevronDown } from "lucide-react";
import React, { useEffect, useId, useRef, useState } from "react";
import {
  toggleFilterValue,
  type FilterOption,
} from "../utils/overview-filters";

/**
 * Filter dropdown with a checkbox list (PM app style). An empty selection
 * means "Alle"; the "Alle" entry clears the selection. Closes on outside
 * click and Escape.
 */
export function MultiSelectDropdown({
  label,
  options,
  selected,
  onChange,
  emptyLabel = "Keine Einträge vorhanden",
}: {
  label: string;
  options: readonly FilterOption[];
  selected: readonly string[];
  onChange: (selected: string[]) => void;
  emptyLabel?: string;
}) {
  const [isOpen, setIsOpen] = useState(false);
  const containerRef = useRef<HTMLDivElement>(null);
  const toggleRef = useRef<HTMLButtonElement>(null);
  const labelId = useId();
  const valueId = useId();
  const panelId = useId();

  useEffect(() => {
    if (!isOpen) {
      return;
    }
    function handlePointerDown(event: MouseEvent) {
      if (
        containerRef.current &&
        !containerRef.current.contains(event.target as Node)
      ) {
        setIsOpen(false);
      }
    }
    function handleKeyDown(event: KeyboardEvent) {
      if (event.key === "Escape") {
        setIsOpen(false);
        toggleRef.current?.focus();
      }
    }
    document.addEventListener("mousedown", handlePointerDown);
    document.addEventListener("keydown", handleKeyDown);
    return () => {
      document.removeEventListener("mousedown", handlePointerDown);
      document.removeEventListener("keydown", handleKeyDown);
    };
  }, [isOpen]);

  const summary =
    selected.length === 0
      ? "Alle"
      : selected.length === 1
        ? options.find((option) => option.id === selected[0])?.label ??
          "1 ausgewählt"
        : `${selected.length} ausgewählt`;

  return (
    <div className="filter-dropdown" ref={containerRef}>
      <span className="filter-bar-label" id={labelId}>
        {label}
      </span>
      <button
        aria-controls={panelId}
        aria-expanded={isOpen}
        aria-haspopup="true"
        aria-labelledby={`${labelId} ${valueId}`}
        className={`filter-dropdown-toggle${selected.length ? " is-active" : ""}`}
        onClick={() => setIsOpen((current) => !current)}
        ref={toggleRef}
        title={summary}
        type="button"
      >
        <span className="filter-dropdown-value" id={valueId}>
          {summary}
        </span>
        <ChevronDown aria-hidden="true" size={14} strokeWidth={2} />
      </button>
      {isOpen ? (
        <div
          aria-labelledby={labelId}
          className="filter-dropdown-panel"
          id={panelId}
          role="group"
        >
          {options.length === 0 ? (
            <div className="filter-dropdown-empty">{emptyLabel}</div>
          ) : (
            <>
              <label className="filter-dropdown-option filter-dropdown-option-all">
                <input
                  checked={selected.length === 0}
                  onChange={() => onChange([])}
                  type="checkbox"
                />
                Alle
              </label>
              {options.map((option) => (
                <label className="filter-dropdown-option" key={option.id}>
                  <input
                    checked={selected.includes(option.id)}
                    onChange={() =>
                      onChange(toggleFilterValue(selected, option.id))
                    }
                    type="checkbox"
                  />
                  {option.label}
                </label>
              ))}
            </>
          )}
        </div>
      ) : null}
    </div>
  );
}