'use client'
import React, { useState, useEffect } from 'react';
import { School, Calendar, DollarSign } from 'lucide-react'; // Import de l'icône DollarSign
import StructureManagement from '@/components/Structure/Configuration/StructureManagement';
import ScheduleManagement from '@/components/Structure/Planning/ScheduleManagement';
import FeesManagement from '@/components/Structure/Configuration/FeesManagement';
import DjangoCSRFToken from '@/components/DjangoCSRFToken';
import useCsrfToken from '@/hooks/useCsrfToken';
import { ClassesProvider } from '@/context/ClassesContext';
import { fetchSpecialities, fetchTeachers, fetchClasses, fetchSchedules, fetchDiscounts, fetchFees, fetchTuitionFees } from '@/app/lib/schoolAction';
import SidebarTabs from '@/components/SidebarTabs';

export default function Page() {
  const [specialities, setSpecialities] = useState([]);
  const [classes, setClasses] = useState([]);
  const [teachers, setTeachers] = useState([]);
  const [fees, setFees] = useState([]);
  const [discounts, setDiscounts] = useState([]);
  const [tuitionFees, setTuitionFees] = useState([]);

  const csrfToken = useCsrfToken();

  useEffect(() => {
    // Fetch data for specialities
    handleSpecialities();

    // Fetch data for teachers
    handleTeachers();

    // Fetch data for classes
    handleClasses();

    // Fetch data for schedules
    handleSchedules();
    
    // Fetch data for fees
    handleFees();
    
    // Fetch data for discounts
    handleDiscounts();
  
    // Fetch data for TuitionFee
    handleTuitionFees();
  }, []);

  const handleSpecialities = () => {
    fetchSpecialities()
      .then(data => {
        setSpecialities(data);
      })
      .catch(error => console.error('Error fetching specialities:', error));
  };

  const handleTeachers = () => {
    fetchTeachers()
      .then(data => {
        setTeachers(data);
      })
      .catch(error => console.error('Error fetching teachers:', error));
  };

  const handleClasses = () => {
    fetchClasses()
      .then(data => {
        setClasses(data);
      })
      .catch(error => console.error('Error fetching classes:', error));
  };

  const handleSchedules = () => {
    fetchSchedules()
      .then(data => {
        setSchedules(data);
      })
      .catch(error => console.error('Error fetching schedules:', error));
  };

  const handleFees = () => {
    fetchFees()
      .then(data => {
        setFees(data);
      })
      .catch(error => console.error('Error fetching fees:', error));
  };

  const handleDiscounts = () => {
    fetchDiscounts()
      .then(data => {
        setDiscounts(data);
      })
      .catch(error => console.error('Error fetching discounts:', error));
  };

  const handleTuitionFees = () => {
    fetchTuitionFees()
      .then(data => {
        setTuitionFees(data);
      })
      .catch(error => console.error('Error fetching tuition fees', error));
  };

  const handleCreate = (url, newData, setDatas) => {
    return fetch(url, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'X-CSRFToken': csrfToken
      },
      body: JSON.stringify(newData),
      credentials: 'include'
    })
    .then(response => {
      if (!response.ok) {
        return response.json().then(errorData => {
          throw errorData;
        });
      }
      return response.json();
    })
    .then(data => {
      setDatas(prevState => [...prevState, data]);
      return data;
    })
    .catch(error => {
      console.error('Error creating data:', error);
      throw error;
    });
  };

  const handleEdit = (url, id, updatedData, setDatas) => {
    return fetch(`${url}/${id}`, {
      method: 'PUT',
      headers: {
        'Content-Type': 'application/json',
        'X-CSRFToken': csrfToken
      },
      body: JSON.stringify(updatedData),
      credentials: 'include'
    })
    .then(response => {
      if (!response.ok) {
        return response.json().then(errorData => {
          throw errorData;
        });
      }
      return response.json();
    })
    .then(data => {
      setDatas(prevState => prevState.map(item => item.id === id ? data : item));
      return data;
    })
    .catch(error => {
      console.error('Error editing data:', error);
      throw error;
    });
  };

  const handleDelete = (url, id, setDatas) => {
    return fetch(`${url}/${id}`, {
      method: 'DELETE',
      headers: {
        'Content-Type': 'application/json',
        'X-CSRFToken': csrfToken
      },
      credentials: 'include'
    })
    .then(response => {
      if (!response.ok) {
        return response.json().then(errorData => {
          throw errorData;
        });
      }
      return response.json();
    })
    .then(data => {
      setDatas(prevState => prevState.filter(item => item.id !== id));
      return data;
    })
    .catch(error => {
      console.error('Error deleting data:', error);
      throw error;
    });
  };

  const handleUpdatePlanning = (url, planningId, updatedData) => {
    fetch(`${url}/${planningId}`, {
      method: 'PUT',
      headers: {
        'Content-Type': 'application/json',
        'X-CSRFToken': csrfToken
      },
      body: JSON.stringify(updatedData),
      credentials: 'include'
    })
    .then(response => response.json())
    .then(data => {
      console.log('Planning mis à jour avec succès :', data);
      //setDatas(data);
    })
    .catch(error => {
      console.error('Erreur :', error);
    });
  };

  const tabs = [
    {
      id: 'Configuration',
      label: "Configuration de l'école",
      content: (
        <StructureManagement
          specialities={specialities}
          setSpecialities={setSpecialities}
          teachers={teachers}
          setTeachers={setTeachers}
          classes={classes}
          setClasses={setClasses}
          handleCreate={handleCreate}
          handleEdit={handleEdit}
          handleDelete={handleDelete}
        />
      )
    },
    {
      id: 'Schedule',
      label: "Gestion de l'emploi du temps",
      content: (
        <ClassesProvider>
          <ScheduleManagement
            handleUpdatePlanning={handleUpdatePlanning}
            classes={classes}
          />
        </ClassesProvider>
      )
    },
    {
      id: 'Fees',
      label: 'Tarifications',
      content: (
        <FeesManagement
          fees={fees}
          setFees={setFees}
          discounts={discounts}
          setDiscounts={setDiscounts}
          tuitionFees={tuitionFees}
          setTuitionFees={setTuitionFees}
          handleCreate={handleCreate}
          handleEdit={handleEdit}
          handleDelete={handleDelete}
        />
      )
    }
  ];

  return (
    <div className='p-8'>
      <DjangoCSRFToken csrfToken={csrfToken} />

      <div className="w-full p-4">
        <SidebarTabs tabs={tabs} />
      </div>

    </div>
  );
}