'use client';

import React, { useRef, useState } from 'react';
import axiosInstance from '@/utils/api-config';
import { Button, Form, Alert } from 'react-bootstrap';
import { FaUpload, FaDownload } from 'react-icons/fa';

type TipoCarga = 'alumnos' | 'trabajadores';

interface ResultadoCarga {
  insertados: number;
  omitidos: number;
}

interface SeccionState {
  archivo: File | null;
  loading: boolean;
  error: string | null;
  success: string | null;
  resultado: ResultadoCarga | null;
}

const initialState: SeccionState = {
  archivo: null,
  loading: false,
  error: null,
  success: null,
  resultado: null,
};

export default function Page() {
  const [alumnos, setAlumnos] = useState<SeccionState>(initialState);
  const [trabajadores, setTrabajadores] = useState<SeccionState>(initialState);

  const alumnosRef = useRef<HTMLInputElement>(null);
  const trabajadoresRef = useRef<HTMLInputElement>(null);

  const getState = (tipo: TipoCarga) =>
    tipo === 'alumnos' ? alumnos : trabajadores;
  const setState = (tipo: TipoCarga) =>
    tipo === 'alumnos' ? setAlumnos : setTrabajadores;

  const validarExt = (file: File | null): boolean => {
    if (!file) return false;
    return /\.xlsx$/i.test(file.name);
  };

  const handleArchivoChange = (tipo: TipoCarga, file: File | null) => {
    if (file && !validarExt(file)) {
      setState(tipo)((prev) => ({
        ...prev,
        archivo: null,
        error: 'Selecciona un archivo .xlsx válido',
        success: null,
      }));
      return;
    }
    setState(tipo)((prev) => ({
      ...prev,
      archivo: file,
      error: null,
      success: null,
    }));
  };

  const handleCargaMasiva = async (tipo: TipoCarga) => {
    const estado = getState(tipo);
    if (!estado.archivo) {
      setState(tipo)((prev) => ({
        ...prev,
        error: 'Selecciona un archivo xlsx',
      }));
      return;
    }
    const formData = new FormData();
    formData.append('file', estado.archivo);
    setState(tipo)((prev) => ({
      ...prev,
      loading: true,
      error: null,
      success: null,
    }));
    try {
      const res = await axiosInstance.post(`/${tipo}/cargar`, formData, {
        headers: { 'Content-Type': 'multipart/form-data' },
      });
      setState(tipo)((prev) => ({
        ...prev,
        archivo: null,
        success: `${tipo === 'alumnos' ? 'Alumnos' : 'Trabajadores'} cargados exitosamente`,
        resultado: res.data ?? null,
      }));
      const ref = tipo === 'alumnos' ? alumnosRef : trabajadoresRef;
      if (ref.current) ref.current.value = '';
    } catch (error) {
      const err = error as { response?: { data?: { message?: string } } };
      setState(tipo)((prev) => ({
        ...prev,
        error: err?.response?.data?.message || 'Error al cargar el archivo',
      }));
    } finally {
      setState(tipo)((prev) => ({ ...prev, loading: false }));
    }
  };

  const handleDescargarPlantilla = (tipo: TipoCarga) => {
    const nombre = tipo === 'alumnos' ? 'carga-alumnos' : 'carga-trabajadores';
    const link = document.createElement('a');
    link.href = `/plantillas/${nombre}.xlsx`;
    link.setAttribute('download', `${nombre}.xlsx`);
    document.body.appendChild(link);
    link.click();
    link.remove();
  };

  const SeccionCarga = ({
    tipo,
    label,
  }: {
    tipo: TipoCarga;
    label: string;
  }) => {
    const estado = getState(tipo);
    const inputRef = tipo === 'alumnos' ? alumnosRef : trabajadoresRef;

    return (
      <div className="p-4 border rounded bg-light mb-4">
        <h2 className="mb-3">{label}</h2>

        {estado.error && (
          <Alert
            variant="danger"
            onClose={() => setState(tipo)((p) => ({ ...p, error: null }))}
            dismissible
          >
            {estado.error}
          </Alert>
        )}
        {estado.success && (
          <Alert
            variant="success"
            onClose={() =>
              setState(tipo)((p) => ({ ...p, success: null, resultado: null }))
            }
            dismissible
          >
            <p className="mb-1">{estado.success}</p>
            {estado.resultado && (
              <ul className="mb-0">
                <li>
                  Insertados: <strong>{estado.resultado.insertados}</strong>
                </li>
                <li>
                  Omitidos: <strong>{estado.resultado.omitidos}</strong>
                </li>
              </ul>
            )}
          </Alert>
        )}

        <Form.Group className="mb-3">
          <Form.Label>Archivo Excel (.xlsx)</Form.Label>
          <div
            className="border p-4 text-center rounded"
            style={{ cursor: 'pointer' }}
            onClick={() => inputRef.current?.click()}
          >
            <FaUpload size={36} className="mb-2 text-secondary" />
            <p className="mb-0">
              {estado.archivo?.name ||
                'Arrastra aquí tu archivo o haz click para buscar'}
            </p>
          </div>
          <input
            ref={inputRef}
            type="file"
            accept=".xlsx"
            style={{ display: 'none' }}
            onChange={(e) =>
              handleArchivoChange(tipo, e.target.files?.[0] ?? null)
            }
          />
        </Form.Group>

        <div className="d-flex gap-2 flex-wrap">
          <Button
            variant="primary"
            disabled={estado.loading || !estado.archivo}
            onClick={() => handleCargaMasiva(tipo)}
          >
            {estado.loading ? 'Cargando...' : 'Cargar archivo'}
          </Button>

          <Button
            variant="outline-success"
            onClick={() => handleDescargarPlantilla(tipo)}
          >
            <FaDownload className="me-2" />
            Descargar plantilla
          </Button>
        </div>
      </div>
    );
  };

  return (
    <div className="container-fluid my-4">
      <div className="row mb-4">
        <div className="col-12">
          <div className="p-4 border rounded bg-light">
            <h1 className="mb-1">Carga masiva de usuarios</h1>
            <p className="mb-0 text-muted">
              Sube un archivo Excel para registrar alumnos o trabajadores en el
              sistema.
            </p>
          </div>
        </div>
      </div>

      <SeccionCarga tipo="alumnos" label="Carga de alumnos" />
      <SeccionCarga tipo="trabajadores" label="Carga de trabajadores" />
    </div>
  );
}
