"use client";

import { FC, useState, useRef, useEffect } from "react";
import { Column } from "@tanstack/react-table";
import { LuColumns3, LuCheck } from "react-icons/lu";
import { Documento } from "@/types/document";

interface ColumnSelectorProps {
    columns: Column<Documento, unknown>[];
}

export default function ColumnSelector({ columns }: ColumnSelectorProps) {
    const [isOpen, setIsOpen] = useState(false);
    const dropdownRef = useRef<HTMLDivElement>(null);

    // Cerrar dropdown al hacer clic fuera
    useEffect(() => {
        const handleClickOutside = (event: MouseEvent) => {
            if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
                setIsOpen(false);
            }
        };

        if (isOpen) {
            document.addEventListener("mousedown", handleClickOutside);
        }

        return () => {
            document.removeEventListener("mousedown", handleClickOutside);
        };
    }, [isOpen]);

    // Filtrar columnas toggleables (excluir actions y fileName)
    const toggleableColumns = columns.filter(
        (col) => col.getCanHide() && col.id !== "actions" && col.id !== "fileName"
    );

    return (
        <div className="relative" ref={dropdownRef}>
            <button
                onClick={() => setIsOpen(!isOpen)}
                className="flex items-center gap-2 px-3 py-2.5 text-sm font-medium bg-background border border-border-subtle rounded-lg hover:bg-background-alt hover:border-primary/50 transition-all focus-ring"
                aria-label="Seleccionar columnas"
                aria-expanded={isOpen}
            >
                <LuColumns3 className="h-4 w-4 text-text-muted" />
                <span className="text-text">Columnas</span>
            </button>

            {isOpen && (
                <div 
                    className="absolute right-0 mt-2 w-64 bg-background border border-border-subtle rounded-xl shadow-lg z-50 max-h-96 overflow-y-auto animate-scale-in"
                    role="menu"
                >
                    <div className="p-3 border-b border-border-subtle bg-background-alt/50">
                        <h3 className="text-xs font-semibold text-text-muted uppercase tracking-wide">
                            Mostrar Columnas
                        </h3>
                    </div>
                    <div className="p-2 space-y-1">
                        {toggleableColumns.map((column) => {
                            const isVisible = column.getIsVisible();
                            const header = typeof column.columnDef.header === "string"
                                ? column.columnDef.header
                                : column.id;

                            return (
                                <label
                                    key={column.id}
                                    className="flex items-center gap-3 px-3 py-2.5 hover:bg-primary-faint rounded-lg cursor-pointer group transition-colors"
                                >
                                    <div className="relative flex items-center justify-center flex-shrink-0">
                                        <input
                                            type="checkbox"
                                            checked={isVisible}
                                            onChange={() => column.toggleVisibility(!isVisible)}
                                            className="sr-only"
                                            aria-label={`Mostrar columna ${header}`}
                                        />
                                        <div
                                            className={`w-5 h-5 border-2 rounded flex items-center justify-center transition-all ${isVisible
                                                    ? "bg-primary border-primary"
                                                    : "bg-background border-border group-hover:border-primary/50"
                                                }`}
                                            aria-hidden="true"
                                        >
                                            {isVisible && <LuCheck className="h-3 w-3 text-primary-foreground" />}
                                        </div>
                                    </div>
                                    <span className="text-sm text-text capitalize flex-1">
                                        {header.replace(/_/g, " ").toLowerCase()}
                                    </span>
                                </label>
                            );
                        })}
                    </div>
                </div>
            )}
        </div>
    );
}