"use client";

import { useEffect, useState } from "react";

interface Props {
    onChange: (desde: string, hasta: string) => void;
    initialYear?: number;
}

export default function MonthYearPicker({
    onChange,
    initialYear,
}: Props) {
    const currentYear = new Date().getFullYear();

    const [mes, setMes] = useState<number | null>(null);
    const [anio, setAnio] = useState<number>(
        initialYear || currentYear
    );

    // Generar rango automáticamente
    useEffect(() => {
        if (mes !== null && anio !== null) {
            const inicio = new Date(anio, mes, 1);
            const fin = new Date(anio, mes + 1, 0);

            const formato = (fecha: Date) =>
                fecha.toISOString().split("T")[0];

            onChange(formato(inicio), formato(fin));
        }
    }, [mes, anio, onChange]);

    return (
        <div className="flex gap-3 mb-5">
            {/* MES */}
            <select
                className="border rounded-lg px-3 py-2"
                onChange={(e) => setMes(Number(e.target.value))}
                defaultValue=""
            >
                <option value="" disabled>
                    Selecciona mes
                </option>
                <option value={0}>Enero</option>
                <option value={1}>Febrero</option>
                <option value={2}>Marzo</option>
                <option value={3}>Abril</option>
                <option value={4}>Mayo</option>
                <option value={5}>Junio</option>
                <option value={6}>Julio</option>
                <option value={7}>Agosto</option>
                <option value={8}>Septiembre</option>
                <option value={9}>Octubre</option>
                <option value={10}>Noviembre</option>
                <option value={11}>Diciembre</option>
            </select>

            <select
                className="border rounded-lg px-3 py-2"
                value={anio}
                onChange={(e) => setAnio(Number(e.target.value))}
            >
                {Array.from(
                    { length: currentYear - 2000 + 1 },
                    (_, i) => 2000 + i
                ).map((year) => (
                    <option key={year} value={year}>
                        {year}
                    </option>
                ))}
            </select>
        </div>
    );
}