Corrige el siguiente script

import { jsPDF } from "jspdf";
import "jspdf-autotable";
import Papa from 'papaparse';
import React, { useCallback, useEffect, useState } from 'react';
import { CartesianGrid, Legend, Line, LineChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';
import './App.css';

const App = () => {
  const [data, setData] = useState([]);
  const [filteredData, setFilteredData] = useState([]);
  const [startDate, setStartDate] = useState('');
  const [endDate, setEndDate] = useState('');
  const [selectedMonth, setSelectedMonth] = useState('');
  const [selectedYear, setSelectedYear] = useState('');  // Mantengo selectedYear
  const [selectedStat, setSelectedStat] = useState('average');
  const [statResult, setStatResult] = useState(null);
  const [displayFormat, setDisplayFormat] = useState("none");  // Por defecto no mostrar ni tabla ni gráfica
  const [isDateFilterActive, setIsDateFilterActive] = useState(true);  // Controla si usar fechas
  const [isMonthFilterActive, setIsMonthFilterActive] = useState(false);  // Controla si usar meses

  // Función para cargar y procesar el archivo CSV
  const handleFileUpload = (e) => {
    const file = e.target.files[0];
    Papa.parse(file, {
      header: true,
      skipEmptyLines: true,
      complete: function (results) {
        const parsedData = results.data.map(row => ({
          ...row,
          YEAR: parseInt(row.YEAR),
          MO: parseInt(row.MO),
          DY: parseInt(row.DY),
          PRECTOTCORR: parseFloat(row.PRECTOTCORR),
          date: new Date(row.YEAR, row.MO - 1, row.DY)
        }));
        setData(parsedData);
        setFilteredData(parsedData);
      }
    });
  };

  // Calcula la estadística seleccionada (usamos useCallback para evitar cambios innecesarios)
  const calculateStat = useCallback((dataToAnalyze) => {
    if (dataToAnalyze.length === 0) {
      setStatResult(null);
      return;
    }
    const precipitations = dataToAnalyze.map(row => row.PRECTOTCORR);
    let result;

    switch (selectedStat) {
      case 'average':
        result = precipitations.reduce((a, b) => a + b, 0) / precipitations.length;
        break;
      case 'median':
        const sorted = precipitations.slice().sort((a, b) => a - b);
        result = sorted[Math.floor(sorted.length / 2)];
        break;
      case 'max':
        result = Math.max(...precipitations);
        break;
      case 'min':
        result = Math.min(...precipitations);
        break;
      case 'total':
        result = precipitations.reduce((a, b) => a + b, 0);
        break;
      default:
        result = null;
    }

    setStatResult(result ? result.toFixed(2) : null);
  }, [selectedStat]);

  // Filtra los datos y calcula la estadística en función de los filtros y formato de tiempo
  useEffect(() => {
    if (data.length > 0) {
      const filtered = data.filter(row => {
        const rowDate = new Date(row.YEAR, row.MO - 1, row.DY);
        const start = startDate ? new Date(startDate) : new Date(0);
        const end = endDate ? new Date(endDate) : new Date();
        
        return (
          rowDate >= start &&
          rowDate <= end &&
          (selectedMonth ? row.MO === parseInt(selectedMonth) : true) &&
          (selectedYear ? row.YEAR === parseInt(selectedYear) : true)
        );
      });
      setFilteredData(filtered);
      calculateStat(filtered);
    }
  }, [data, startDate, endDate, selectedMonth, selectedYear, selectedStat, calculateStat]);  // Ahora calculateStat está bien incluido

  // Exporta los datos y resultados a PDF
  const exportToPDF = () => {
    const doc = new jsPDF();
    doc.text("Precipitation Analysis Report", 20, 10);
    
    // Añadimos las estadísticas
    doc.text(`${selectedStat.charAt(0).toUpperCase() + selectedStat.slice(1)}: ${statResult}`, 20, 20);

    // Añadimos información sobre los filtros
    doc.text("Filtros aplicados:", 20, 30);
    if (startDate) doc.text(`Fecha de inicio: ${startDate}`, 30, 40);
    if (endDate) doc.text(`Fecha de fin: ${endDate}`, 30, 50);
    if (selectedMonth) doc.text(`Mes: ${selectedMonth}`, 30, 60);
    if (selectedYear) doc.text(`Año: ${selectedYear}`, 30, 70);

    // Añadimos la tabla con los datos
    doc.autoTable({
      head: [['Año', 'Mes', 'Día', 'Precipitación']],
      body: filteredData.map(row => [row.YEAR, row.MO, row.DY, row.PRECTOTCORR]),
      startY: 80
    });

    doc.save("precipitation_report.pdf");
  };

  // Funciones para manejar la exclusión entre fechas y meses
  const handleDateFilterChange = () => {
    setIsDateFilterActive(true);
    setIsMonthFilterActive(false);
  };

  const handleMonthFilterChange = () => {
    setIsDateFilterActive(false);
    setIsMonthFilterActive(true);
  };

  return (
    <div className="App">
      <h1>Precipitation Analysis Dashboard</h1>
      
      <input type="file" accept=".csv,.ods" onChange={handleFileUpload} />
      
      {/* Filtros y selección de tiempo */}
      <div className="controls">
        <div className="date-selection">
          <label>
            <input 
              type="radio" 
              checked={isDateFilterActive} 
              onChange={handleDateFilterChange} 
            /> Selección por fechas
          </label>
          {isDateFilterActive && (
            <div>
              <label>
                Fecha de inicio:
                <input type="date" value={startDate} onChange={e => setStartDate(e.target.value)} />
              </label>
              <label>
                Fecha de fin:
                <input type="date" value={endDate} onChange={e => setEndDate(e.target.value)} />
              </label>
            </div>
          )}

          <label>
            <input 
              type="radio" 
              checked={isMonthFilterActive} 
              onChange={handleMonthFilterChange} 
            /> Selección por meses
          </label>
          {isMonthFilterActive && (
            <div>
              <label>
                Mes:
                <select value={selectedMonth} onChange={e => setSelectedMonth(e.target.value)}>
                  <option value="">Todos</option>
                  {[...Array(12)].map((_, i) => (
                    <option key={i} value={i + 1}>{i + 1}</option>
                  ))}
                </select>
              </label>
              <label>
                Año:
                <input 
                  type="number" 
                  value={selectedYear} 
                  onChange={e => setSelectedYear(e.target.value)} 
                  placeholder="Ingrese un año" 
                />
              </label>
            </div>
          )}
        </div>

        {/* Selección de estadística */}
        <div className="statistics-selection">
          <label>
            Selecciona una estadística:
            <select value={selectedStat} onChange={e => setSelectedStat(e.target.value)}>
              <option value="average">Promedio</option>
              <option value="median">Mediana</option>
              <option value="max">Máximo</option>
              <option value="min">Mínimo</option>
              <option value="total">Total</option>
            </select>
          </label>
        </div>

        {/* Selección de formato de visualización */}
        <div className="filters">
          <label>
            Mostrar en formato:
            <select onChange={(e) => setDisplayFormat(e.target.value)}>
              <option value="none">Ninguno</option>
              <option value="table">Tabla</option>
              <option value="graph">Gráfica</option>
            </select>
          </label>
        </div>
      </div>

      {/* Pizarra virtual para mostrar tabla o gráfica */}
      <div className="display-board">
        {displayFormat === "table" && (
          <div className="table-display">
            <table>
              <thead>
                <tr>
                  <th>Año</th>
                  <th>Mes</th>
                  <th>Día</th>
                  <th>Precipitación</th>
                </tr>
              </thead>
              <tbody>
                {filteredData.map((row, index) => (
                  <tr key={index}>
                    <td>{row.YEAR}</td>
                    <td>{row.MO}</td>
                    <td>{row.DY}</td>
                    <td>{row.PRECTOTCORR}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        )}

        {displayFormat === "graph" && (
          <div className="graph-display">
            <ResponsiveContainer width="100%" height={400}>
              <LineChart data={filteredData}>
                <CartesianGrid strokeDasharray="3 3" />
                <XAxis dataKey="date" tickFormatter={(tick) => new Date(tick).toLocaleDateString()} />
                <YAxis />
                <Tooltip labelFormatter={(label) => new Date(label).toLocaleDateString()} />
                <Legend />
                <Line type="monotone" dataKey="PRECTOTCORR" stroke="#8884d8" />
              </LineChart>
            </ResponsiveContainer>
          </div>
        )}
      </div>

      {/* Exportar a PDF */}
      <button onClick={exportToPDF}>Export to PDF</button>
    </div>
  );
};

export default App;