"use client"

import Select from "react-select"
import { useState } from "react"
import styles from "./Reporte.module.css"

type AdscripcionOption = {
    value: string
    label: string
}

export default function Reporte() {

    const [adscripcionesSeleccionadas, setAdscripcionesSeleccionadas] = useState<AdscripcionOption[]>([])

    const adscripciones: AdscripcionOption[] = [
        { value: "informatica", label: "Informática" },
        { value: "rh", label: "Recursos Humanos" },
        { value: "finanzas", label: "Finanzas" },
        { value: "juridico", label: "Jurídico" }
    ]

    const agregarAdscripcion = (option: AdscripcionOption | null) => {

        if (!option) return

        const existe = adscripcionesSeleccionadas.some(a => a.value === option.value)

        if (!existe) {
            setAdscripcionesSeleccionadas([...adscripcionesSeleccionadas, option])
        }
    }

    const eliminarAdscripcion = (value: string) => {
        setAdscripcionesSeleccionadas(
            adscripcionesSeleccionadas.filter(a => a.value !== value)
        )
    }

    const generarReporte = () => {
        console.log("Adscripciones seleccionadas:", adscripcionesSeleccionadas)
    }

    return (

        <div className={styles.container}>

            <h2 className={styles.title}>Reporte de Antigüedad de Equipos</h2>

            <label className={styles.label}>Buscar adscripción</label>

            <Select
                options={adscripciones}
                placeholder="Escribe para buscar..."
                onChange={(value) => agregarAdscripcion(value)}
            />

            <div className={styles.listaContainer}>

                <h4 className={styles.subtitle}>
                    Adscripciones seleccionadas ({adscripcionesSeleccionadas.length})
                </h4>

                {adscripcionesSeleccionadas.length === 0 && (
                    <p className={styles.empty}>No hay adscripciones seleccionadas</p>
                )}

                <div className={styles.lista}>

                    {adscripcionesSeleccionadas.map((ads) => (
                        <div key={ads.value} className={styles.chip}>

                            <span>{ads.label}</span>

                            <button
                                className={styles.remove}
                                onClick={() => eliminarAdscripcion(ads.value)}
                            >
                                ✕
                            </button>

                        </div>
                    ))}

                </div>

            </div>

            <button
                className={styles.button}
                onClick={generarReporte}
            >
                Generar reporte
            </button>

        </div>

    )
}