'use client';
import SimpleInput from '@/components/input';
import axiosInstance from '@/utils/api-config';
import React, { useState } from 'react';

export default function Page() {
  const [selectedFile, setSelectedFile] = useState<File | null>(null);
  const [response, setResponse] = useState<{
    insertados: number;
    omitidos: number;
  } | null>(null);

  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    if (e.target.files && e.target.files.length > 0) {
      setSelectedFile(e.target.files[0]);
    }
  };

  const handleSubmit = async () => {
    if (!selectedFile) return;
    const formData = new FormData();
    formData.append('file', selectedFile);

    try {
      const res = await axiosInstance.post('/trabajadores/cargar', formData, {
        headers: {
          'Content-Type': 'multipart/form-data',
        },
      });

      setResponse(res.data);
    } catch (error) {
      console.error('Error al subir el archivo:', error);
    }
  };

  return (
    <div>
      <h2>Subir Excel de Profesores</h2>
      <SimpleInput type="file" onChange={handleFileChange} />
      <button onClick={handleSubmit} disabled={!selectedFile}>
        Enviar
      </button>

      {response && (
        <div>
          <h3>Resultado de la carga:</h3>
          <p>Insertados: {response.insertados}</p>
          <p>Omitidos: {response.omitidos}</p>
        </div>
      )}
    </div>
  );
}
