"use client";

import React, { useEffect, useRef, useState } from "react";
import { ChevronDown } from "lucide-react";
import { cn } from "@/lib/utils";

export interface Option<T = string> {
  value: T;
  label: React.ReactNode;
  description?: string;
}

export function Dropdown<T extends string>({
  options,
  value,
  onChange,
  placeholder = "Select...",
  className,
  label,
  size = "md",
  tone = "secondary",
  icon,
  empty = "No options",
}: {
  options: Option<T>[];
  value?: T;
  onChange: (v: T) => void;
  placeholder?: string;
  className?: string;
  label?: string;
  size?: "sm" | "md";
  tone?: "secondary" | "ghost";
  icon?: React.ReactNode;
  empty?: string;
}) {
  const [open, setOpen] = useState(false);
  const ref = useRef<HTMLDivElement>(null);

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

  const current = options.find((o) => o.value === value);
  const btnClass = cn(
    "inline-flex items-center gap-2 border rounded-lg transition-colors",
    size === "sm" ? "text-xs px-2.5 py-1.5" : "text-sm px-3 py-2",
    tone === "secondary"
      ? "bg-white border-slate-200 text-slate-700 hover:bg-slate-50"
      : "bg-transparent border-transparent text-slate-700 hover:bg-slate-100",
  );

  return (
    <div className={cn("relative inline-block text-left", className)} ref={ref}>
      {label && <div className="text-[11px] uppercase tracking-wide text-slate-500 mb-1">{label}</div>}
      <button
        type="button"
        className={btnClass}
        onClick={() => setOpen((v) => !v)}
      >
        {icon && <span className="text-slate-500">{icon}</span>}
        <span className={cn("truncate", !current && "text-slate-400")}>
          {current?.label ?? placeholder}
        </span>
        <ChevronDown className={cn("w-4 h-4 text-slate-400 transition-transform", open && "rotate-180")} />
      </button>

      {open && (
        <div className="absolute z-30 mt-1 right-0 min-w-[240px] rounded-xl bg-white border border-slate-200 shadow-soft overflow-hidden animate-fade-in">
          {options.length === 0 ? (
            <div className="px-4 py-6 text-sm text-slate-500 text-center">{empty}</div>
          ) : (
            <ul className="max-h-80 overflow-auto py-1">
              {options.map((o) => (
                <li key={String(o.value)}>
                  <button
                    type="button"
                    className={cn(
                      "w-full text-left px-3 py-2 text-sm transition-colors",
                      value === o.value
                        ? "bg-brand-50 text-brand-700 font-medium"
                        : "text-slate-700 hover:bg-slate-50",
                    )}
                    onClick={() => {
                      onChange(o.value);
                      setOpen(false);
                    }}
                  >
                    <div className="truncate">{o.label}</div>
                    {o.description && (
                      <div className="text-xs text-slate-500 mt-0.5 truncate">{o.description}</div>
                    )}
                  </button>
                </li>
              ))}
            </ul>
          )}
        </div>
      )}
    </div>
  );
}