"use client";

import React, { useEffect, useRef, useState } from "react";
import { ChevronDown } from "lucide-react";

export default function EventsDropdown({ options, value, onChange }: {
  options: { value: string; label: string }[];
  value: string[];
  onChange: (v: string[]) => void;
}) {
  const [open, setOpen] = useState(false);
  const ref = useRef<HTMLDivElement>(null);

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

  const toggle = (v: string) => {
    onChange(value.includes(v) ? value.filter(x => x !== v) : [...value, v]);
  };

  const summary = value.length === 0
    ? "No events selected"
    : options.length > 0 && value.length === options.length
    ? "All events"
    : value.length === 1
    ? (options.find(o => o.value === value[0])?.label || "1 event selected")
    : `${value.length} events selected`;

  return (
    <div className="relative" ref={ref}>
      <button
        type="button"
        onClick={() => setOpen(o => !o)}
        className="w-full flex items-center justify-between gap-2 border rounded-lg px-3 py-2 text-sm bg-white hover:bg-gray-50"
      >
        <span className="truncate text-left">{summary}</span>
        <ChevronDown className={"w-4 h-4 text-gray-400 shrink-0 transition-transform " + (open ? "rotate-180" : "")} />
      </button>
      {open && (
        <div className="absolute z-20 mt-1 left-0 right-0 bg-white border rounded-lg shadow-lg max-h-64 overflow-auto p-1">
          <div className="flex items-center justify-between px-2 py-1.5 text-xs text-gray-500 border-b mb-1">
            <button type="button" className="hover:underline" onClick={() => onChange(options.map(o => o.value))}>Select all</button>
            <button type="button" className="hover:underline" onClick={() => onChange([])}>Clear</button>
          </div>
          {options.map(opt => (
            <label key={opt.value} className="flex items-center gap-2 px-2 py-1.5 text-sm rounded hover:bg-gray-50 cursor-pointer">
              <input type="checkbox" checked={value.includes(opt.value)} onChange={() => toggle(opt.value)} />
              <span className="truncate">{opt.label}</span>
            </label>
          ))}
          {options.length === 0 && <div className="px-2 py-1.5 text-xs text-gray-400">No events available.</div>}
        </div>
      )}
    </div>
  );
}