"use client";

import { useEffect, useState } from "react";
import axios from "axios";
import Cookies from "js-cookie";
import { envConfig } from "@/app/lib/config";
interface Periodo {
    id_periodo: number;
    semestre: string;
    fecha_inicio_servicio: string;
    fecha_fin_servicio: string;
}

export default function PeriodoPicker({
    onChange,
}: {
    onChange: (p1: Periodo | null, p2: Periodo | null) => void;
}) {
    const [periodos, setPeriodos] = useState<Periodo[]>([]);
    const [p1, setP1] = useState<number | null>(null);
    const [p2, setP2] = useState<number | null>(null);


    const token = Cookies.get("token");
    const headers = { Authorization: `Bearer ${token}` };

    useEffect(() => {
        const fetchPeriodos = async () => {
            const res = await axios.get(`${envConfig.apiUrl}/periodo`, { headers });
            setPeriodos(res.data);
        };
        fetchPeriodos();
    }, []);

    useEffect(() => {
        const periodo1 = periodos.find(p => p.id_periodo === p1) || null;
        const periodo2 = periodos.find(p => p.id_periodo === p2) || null;

        onChange(periodo1, periodo2);
    }, [p1, p2]);

    return (
        <div className="flex gap-4">
            {/* Periodo 1 */}
            <select onChange={(e) => setP1(Number(e.target.value))}>
                <option value="">Periodo 1</option>
                {periodos.map(p => (
                    <option key={p.id_periodo} value={p.id_periodo}>
                        {p.semestre}
                    </option>
                ))}
            </select>

            {/* Periodo 2 */}
            <select onChange={(e) => setP2(Number(e.target.value))}>
                <option value="">Periodo 2</option>
                {periodos.map(p => (
                    <option key={p.id_periodo} value={p.id_periodo}>
                        {p.semestre}
                    </option>
                ))}
            </select>
        </div>
    );
}