'use client'
import axiosInstance from "@/utils/api-config";
import React, { useState } from "react";
import { Button, Form, ProgressBar } from "react-bootstrap";
import { FaUpload } from "react-icons/fa";

export default function CargaMasiva() {
    const [xlsx, setXlsx] = useState<File | null>(null);
    const [progress, setProgress] = useState<number>(0);
    const [loading, setLoading] = useState<boolean>(false);

    const validarExt = (file: File | null) => {
        if (!file) return;
        const extPermitidas = /(.xlsx)$/i;
        if (!extPermitidas.exec(file.name)) {
            console.error("Asegúrate de ingresar un archivo .xlsx");
            setXlsx(null);
        } else {
            setXlsx(file);
        }
    };

    const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        const file = e.target.files?.[0] || null;
        validarExt(file);
    };

    const enviarCargaMasiva = async () => {
        if (!xlsx) return;

        const formData = new FormData();
        formData.append("file", xlsx);

        try {
            setLoading(true);
            setProgress(0);

            const res = await axiosInstance.post(
                "/cuestionario/carga-masiva",
                formData,
                {
                    headers: { "Content-Type": "multipart/form-data" },
                    onUploadProgress: (event) => {
                        if (event.total) {
                            const porcentaje = Math.round(
                                (event.loaded * 100) / event.total
                            );
                            setProgress(porcentaje);
                        }
                    },
                }
            );

            //Falta hacer validacion

            console.log("Carga masiva exitosa", res.data);
            setTimeout(() => {
                setProgress(100);
                setLoading(false);
            }, 500);
        } catch (error) {
            console.error("Carga masiva fallida", error);
            setLoading(false);
            setProgress(0);
        }
    };

    return (
        <div className="container-fluid my-4">
            <div className="row mb-4">
                <div className="col-12">
                    <div className="p-4 border rounded bg-light">
                        <h2 className="mb-2">Carga Masiva de Eventos</h2>
                        <p className="mb-0 text-muted">
                            Sube tu archivo excel para poder crear los eventos.
                        </p>
                    </div>
                </div>
            </div>

            <Form.Group className="mb-3">
                <Form.Label>Archivo Excel</Form.Label>
                <div
                    className="border p-4 text-center rounded"
                    style={{ cursor: "pointer" }}
                    onClick={() => document.getElementById("xlsxInput")?.click()}
                >
                    <FaUpload size={40} className="mb-2" />
                    <p className="mb-1">
                        {xlsx?.name ||
                            "Arrastra aquí tu archivo o da click aquí para buscar"}
                    </p>
                    <p className="is-size-6">Tamaño máximo 20MB</p>
                    <p className="is-size-7">
                        Si al momento de elegir un archivo este no se selecciona,
                        haga click en cancelar en la ventana emergente e intente de
                        nuevo.
                    </p>
                </div>
                <input
                    id="xlsxInput"
                    type="file"
                    accept=".xlsx"
                    style={{ display: "none" }}
                    onChange={handleFileChange}
                />
            </Form.Group>

            <div className="d-flex gap-2 mt-3">
                <Button
                    variant="outline-primary"
                    disabled={!xlsx || loading}
                    onClick={enviarCargaMasiva}
                >
                    {loading ? "Subiendo..." : "Enviar archivo"}
                </Button>
            </div>

            {/* Barra de progreso */}
            {loading && (
                <div className="mt-3">
                    <ProgressBar
                        now={progress}
                        label={`${progress}%`}
                        animated
                        striped
                        variant="info"
                    />
                </div>
            )}
        </div>
    );
}
