'use client'
import React, { useState, useEffect } from 'react';
import { School, Calendar } from 'lucide-react';
import TabsStructure from '@/components/Structure/Configuration/TabsStructure';
import ScheduleManagement from '@/components/Structure/Planning/ScheduleManagement'
import StructureManagement from '@/components/Structure/Configuration/StructureManagement'
import { BK_GESTIONENSEIGNANTS_SPECIALITES_URL, 
  BK_GESTIONENSEIGNANTS_CLASSES_URL,
  BK_GESTIONENSEIGNANTS_TEACHERS_URL,
  BK_GESTIONENSEIGNANTS_PLANNINGS_URL } from '@/utils/Url';
import DjangoCSRFToken from '@/components/DjangoCSRFToken'
import useCsrfToken from '@/hooks/useCsrfToken';

export default function Page() {
  const [specialities, setSpecialities] = useState([]);
  const [classes, setClasses] = useState([]);
  const [teachers, setTeachers] = useState([]);
  const [schedules, setSchedules] = useState([]);
  const [activeTab, setActiveTab] = useState('Configuration');
  const tabs = [
    { id: 'Configuration', title: "Configuration de l'école", icon: School },
    { id: 'Schedule', title: "Gestion de l'emploi du temps", icon: Calendar },
  ];

  const csrfToken = useCsrfToken();

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

    // Fetch data for teachers
    fetchTeachers();

    // Fetch data for classes
    fetchClasses();
  
    // Fetch data for schedules
    fetchSchedules();
  }, []);

  const fetchSpecialities = () => {
    fetch(`${BK_GESTIONENSEIGNANTS_SPECIALITES_URL}`)
      .then(response => response.json())
      .then(data => {
        setSpecialities(data);
      })
      .catch(error => {
        console.error('Error fetching specialities:', error);
      });
  };

  const fetchTeachers = () => {
    fetch(`${BK_GESTIONENSEIGNANTS_TEACHERS_URL}`)
      .then(response => response.json())
      .then(data => {
        setTeachers(data);
      })
      .catch(error => {
        console.error('Error fetching teachers:', error);
      });
  };

  const fetchClasses = () => {
    fetch(`${BK_GESTIONENSEIGNANTS_CLASSES_URL}`)
      .then(response => response.json())
      .then(data => {
        setClasses(data);
      })
      .catch(error => {
        console.error('Error fetching classes:', error);
      });
  };

  const fetchSchedules = () => {
    fetch(`${BK_GESTIONENSEIGNANTS_PLANNINGS_URL}`)
      .then(response => response.json())
      .then(data => {
        setSchedules(data);
      })
      .catch(error => {
        console.error('Error fetching classes:', error);
      });
  };

  const handleCreate = (url, newData, setDatas) => {
    fetch(url, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'X-CSRFToken': csrfToken
      },
      body: JSON.stringify(newData),
      credentials: 'include'
    })
    .then(response => response.json())
    .then(data => {
      console.log('Succes :', data);
      setDatas(prevState => [...prevState, data]);
    })
    .catch(error => {
      console.error('Erreur :', error);
    });
  };

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

  const handleUpdatePlanning = (url, id, updatedData) => {
    fetch(`${url}/${id}`, {
      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 handleDelete = (url, id, setDatas) => {
    fetch(`${url}/${id}`, {
        method:'DELETE',
        headers: {
            'Content-Type':'application/json', 
            'X-CSRFToken': csrfToken
        },
        credentials: 'include'
    })
    .then(response => response.json())
    .then(data => {
        console.log('Success:', data);
        setDatas(prevState => prevState.filter(item => item.id !== id));
    })
    .catch(error => {
        console.error('Error fetching data:', error);
        error = error.errorMessage;
        console.log(error);
    });
  };

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

      <TabsStructure activeTab={activeTab} setActiveTab={setActiveTab} tabs={tabs} />

      {activeTab === 'Configuration' && (
        <>
        <StructureManagement 
          specialities={specialities}
          setSpecialities={setSpecialities}
          teachers={teachers}
          setTeachers={setTeachers}
          classes={classes} 
          setClasses={setClasses}
          handleCreate={handleCreate}
          handleEdit={handleEdit}
          handleDelete={handleDelete} />
        </>
      )}

      {activeTab === 'Schedule' && (
        <ScheduleManagement
          schedules={schedules}
          setSchedules={setSchedules}
          handleUpdatePlanning={handleUpdatePlanning}
          specialities={specialities}
          teachers={teachers}
          classes={classes}
        />
      )}
    </div>
  );
};