import React, { useEffect, useState } from 'react'
import { useParams, Link } from 'react-router-dom'
import classe from '../assets/AllStyleComponents.module.css'
import classeHome from '../assets/Home.module.css'
import Paper from '@mui/material/Paper'
import { Button, Modal, Box, Tabs, Tab, Select, MenuItem, FormControl, InputLabel } from '@mui/material'
import { IoMdReturnRight } from 'react-icons/io'
import jsPDF from 'jspdf'
import autoTable from 'jspdf-autotable'
import { FaDownload } from 'react-icons/fa'
import logoRelerev1 from '../assets/logorelever.png'
import logoRelerev2 from '../assets/logorelever2.png'

const Resultat = () => {
  const { niveau, scolaire } = useParams()
  const formData = {
    niveau,
    scolaire
  }
  const [etudiants, setEtudiants] = useState([])
  const [mention, setMention] = useState([])
  const [session, setSession] = useState([])
  const [tabValue, setTabValue] = useState(0)
  
  // États pour les sélections
  const [selectedMatiere, setSelectedMatiere] = useState('')
  const [selectedUE, setSelectedUE] = useState('')
  const [availableMatieres, setAvailableMatieres] = useState([])
  const [availableUEs, setAvailableUEs] = useState([])

  useEffect(() => {
    window.notes.getMoyenne(formData).then((response) => {
      setEtudiants(response)
      extractMatieresAndUEs(response)
    })
    window.noteRepech.getMoyenneRepech(formData).then((response) => {
      setSession(response)
    })
    window.mention.getMention().then((response) => {
      setMention(response)
    })
  }, [])

  // Fonction pour extraire les matières et UEs disponibles
  const extractMatieresAndUEs = (data) => {
    const matieres = new Set()
    const ues = new Set()
    
    for (let index = 0; index < data.length; index++) {
      for (let j = 0; j < data[index].length; j++) {
        const matiere = data[index][j].matiere || `Matière ${j + 1}`
        const ue = data[index][j].ue || `UE${Math.floor(j / 2) + 1}`
        matieres.add(matiere)
        ues.add(ue)
      }
    }
    
    setAvailableMatieres(Array.from(matieres))
    setAvailableUEs(Array.from(ues))
    
    // Sélectionner la première matière et UE par défaut
    if (matieres.size > 0) setSelectedMatiere(Array.from(matieres)[0])
    if (ues.size > 0) setSelectedUE(Array.from(ues)[0])
  }

  let dataToMap = []

  function returnmention(id) {
    let mentions
    for (let index = 0; index < mention.length; index++) {
      if (mention[index].id == id) {
        mentions = mention[index].nom
      }
    }
    return mentions
  }

  // Fonction pour déterminer la mention selon la moyenne
  function getMentionFromMoyenne(moyenne) {
    const moy = parseFloat(moyenne)
    if (moy >= 18) return 'Excellent'
    if (moy >= 16) return 'Très Bien'
    if (moy >= 14) return 'Bien'
    if (moy >= 12) return 'Assez Bien'
    if (moy >= 10) return 'Passable'
    if (moy >= 7) return 'Autorisé à redoubler'
    return 'Remise à la famille'
  }

  function checkNull(params) {
    if (params == null || params == undefined) {
      return null
    }
    return params
  }

  function compareSessionNotes(session1, session2) {
    let notes
    if (session2) {
      if (session1 < session2.note) {
        notes = session2.note
      } else {
        notes = session1
      }
    } else {
      notes = session1
    }
    return notes
  }

  // Traitement des données pour résultat définitif - INCLUANT TOUS LES ÉTUDIANTS
  for (let index = 0; index < etudiants.length; index++) {
    let total = 0
    let note = 0
    let totalCredit = 0
    let hasValidNotes = false

    let modelJson = {
      id: '',
      nom: '',
      prenom: '',
      photos: '',
      moyenne: '',
      mention: '',
      anneescolaire: ''
    }

    for (let j = 0; j < etudiants[index].length; j++) {
      modelJson.id = etudiants[index][j].etudiant_id
      modelJson.nom = etudiants[index][j].nom
      modelJson.prenom = etudiants[index][j].prenom
      modelJson.photos = etudiants[index][j].photos
      modelJson.mention = etudiants[index][j].mention_id
      modelJson.anneescolaire = etudiants[index][j].annee_scolaire

      let currentNote = etudiants[index][j].note
      if (session[index]) {
        currentNote = compareSessionNotes(etudiants[index][j].note, checkNull(session[index][j]))
      }

      // Vérifier si l'étudiant a des notes valides
      if (currentNote != null && currentNote != undefined && !isNaN(currentNote)) {
        note += currentNote * etudiants[index][j].credit
        totalCredit += etudiants[index][j].credit
        hasValidNotes = true
      }
    }

    // Calculer la moyenne même si certaines notes manquent
    if (hasValidNotes && totalCredit > 0) {
      total = note / totalCredit
      modelJson.moyenne = total.toFixed(2)
    } else {
      modelJson.moyenne = 'N/A'
    }
    
    dataToMap.push(modelJson)
  }

  // Fonction pour obtenir les résultats par matière sélectionnée
  const getResultsByMatiere = () => {
    const results = []
    
    for (let index = 0; index < etudiants.length; index++) {
      for (let j = 0; j < etudiants[index].length; j++) {
        const matiere = etudiants[index][j].matiere || `Matière ${j + 1}`
        
        if (matiere === selectedMatiere) {
          let finalNote = etudiants[index][j].note
          if (session[index] && session[index][j]) {
            finalNote = compareSessionNotes(etudiants[index][j].note, session[index][j])
          }

          results.push({
            id: etudiants[index][j].etudiant_id,
            nom: etudiants[index][j].nom,
            prenom: etudiants[index][j].prenom,
            note: finalNote != null ? finalNote.toFixed(2) : 'N/A',
            credit: etudiants[index][j].credit,
            mention: returnmention(etudiants[index][j].mention_id)
          })
        }
      }
    }
    
    return results.sort((a, b) => {
      const noteA = a.note === 'N/A' ? -1 : parseFloat(a.note)
      const noteB = b.note === 'N/A' ? -1 : parseFloat(b.note)
      return noteB - noteA
    })
  }

  // Fonction pour obtenir les résultats par UE sélectionnée
  const getResultsByUE = () => {
    const groupedStudents = {}
    const matieresInUE = new Set()
    
    // Grouper les étudiants et collecter les matières de l'UE
    for (let index = 0; index < etudiants.length; index++) {
      for (let j = 0; j < etudiants[index].length; j++) {
        const ue = etudiants[index][j].ue || `UE${Math.floor(j / 2) + 1}`
        const matiere = etudiants[index][j].matiere || `Matière ${j + 1}`
        
        if (ue === selectedUE) {
          matieresInUE.add(matiere)
          const etudiantId = etudiants[index][j].etudiant_id
          
          if (!groupedStudents[etudiantId]) {
            groupedStudents[etudiantId] = {
              id: etudiantId,
              nom: etudiants[index][j].nom,
              prenom: etudiants[index][j].prenom,
              matieres: {},
              totalNote: 0,
              totalCredit: 0,
              hasValidNotes: false
            }
          }
          
          let finalNote = etudiants[index][j].note
          if (session[index] && session[index][j]) {
            finalNote = compareSessionNotes(etudiants[index][j].note, session[index][j])
          }
          
          if (finalNote != null && finalNote != undefined && !isNaN(finalNote)) {
            groupedStudents[etudiantId].matieres[matiere] = finalNote.toFixed(2)
            groupedStudents[etudiantId].totalNote += finalNote * etudiants[index][j].credit
            groupedStudents[etudiantId].totalCredit += etudiants[index][j].credit
            groupedStudents[etudiantId].hasValidNotes = true
          } else {
            groupedStudents[etudiantId].matieres[matiere] = 'N/A'
          }
        }
      }
    }
    
    const results = Object.values(groupedStudents).map(student => ({
      ...student,
      moyenneUE: student.hasValidNotes && student.totalCredit > 0 
        ? (student.totalNote / student.totalCredit).toFixed(2) 
        : 'N/A'
    }))
    
    return {
      students: results.sort((a, b) => {
        const moyA = a.moyenneUE === 'N/A' ? -1 : parseFloat(a.moyenneUE)
        const moyB = b.moyenneUE === 'N/A' ? -1 : parseFloat(b.moyenneUE)
        return moyB - moyA
      }),
      matieres: Array.from(matieresInUE)
    }
  }

  const sortedStudents = dataToMap.sort((a, b) => {
    const moyA = a.moyenne === 'N/A' ? -1 : parseFloat(a.moyenne)
    const moyB = b.moyenne === 'N/A' ? -1 : parseFloat(b.moyenne)
    return moyB - moyA
  })

  const handleTabChange = (event, newValue) => {
    setTabValue(newValue)
  }

  const print = () => {
    const generatePDF = () => {
      try {
        const pdf = new jsPDF({
          orientation: 'portrait',
          unit: 'mm',
          format: 'a4'
        })

        pdf.addImage(logoRelerev1, 'PNG', 175, 5, 32, 30) 
        pdf.addImage(logoRelerev2, 'PNG', 10, 5, 40, 30) 

        pdf.setFontSize(10)
        pdf.text('REPOBLIKAN\'I MADAGASIKARA', 105, 10, { align: 'center' })
        pdf.text('Fitiavana-Tanindrazana-Fandrosoana', 105, 14, { align: 'center' })
        pdf.text('********************', 105, 18, { align: 'center' })
        pdf.text('MINISTÈRE DE L\'ENSEIGNEMENT SUPÉRIEUR', 105, 22, { align: 'center' })
        pdf.text('ET DE LA RECHERCHE SCIENTIFIQUE', 105, 26, { align: 'center' })
        pdf.text('********************', 105, 30, { align: 'center' })
        pdf.text('UNIVERSITÉ DE TOAMASINA', 105, 34, { align: 'center' })
        pdf.text('ÉCOLE SUPÉRIEURE POLYTECHNIQUE', 105, 38, { align: 'center' })

        const tableId = tabValue === 0 ? '#resultTable' : tabValue === 1 ? '#subjectTable' : '#ueTable'
        
        autoTable(pdf, {
          html: tableId,
          startY: 50,
          theme: 'grid',
          headStyles: {
            fillColor: [255, 255, 255], // Fond blanc
            halign: 'center',
            fontStyle: 'bold',
            textColor: [0, 0, 0], // Texte noir
            lineColor: [0, 0, 0], // Bordure noire
            lineWidth: 0.5
          },
          styles: { 
            fontSize: 8, 
            cellPadding: 2, 
            halign: 'center',
            lineColor: [0, 0, 0], // Bordure noire pour toutes les cellules
            lineWidth: 0.5
          },
          bodyStyles: {
            lineColor: [0, 0, 0], // Bordure noire pour le corps du tableau
            lineWidth: 0.5
          }
        })

        const suffix = tabValue === 0 ? 'definitif' : 
                     tabValue === 1 ? `par-matiere-${selectedMatiere}` : 
                     `par-ue-${selectedUE}`
        pdf.save(`Resultat-${suffix}-${niveau}-${scolaire}.pdf`)
      } catch (error) {
        console.error('Error generating PDF:', error)
      }
    }
    generatePDF()
  }

  const renderHeader = () => (
    <div
      style={{
        display: 'flex',
        alignItems: 'flex-start',
        justifyContent: 'space-between',
        marginBottom: '20px',
        position: 'relative'
      }}
    >
      <img src={logoRelerev2} alt="Logo gauche" width={90} height={90} />
      
      <div
        style={{
          position: 'absolute',
          left: '50%',
          transform: 'translateX(-50%)',
          textAlign: 'center',
          fontSize: '10px',
          lineHeight: '1.2'
        }}
      >
        <div style={{ fontWeight: 'bold' }}>REPOBLIKAN'I MADAGASIKARA</div>
        <div style={{ fontStyle: 'italic' }}>Fitiavana-Tanindrazana-Fandrosoana</div>
        <div>********************</div>
        <div style={{ fontWeight: 'bold' }}>MINISTÈRE DE L'ENSEIGNEMENT SUPÉRIEUR</div>
        <div style={{ fontWeight: 'bold' }}>ET DE LA RECHERCHE SCIENTIFIQUE</div>
        <div>********************</div>
        <div style={{ fontWeight: 'bold' }}>UNIVERSITÉ DE TOAMASINA</div>
        <div style={{ fontWeight: 'bold' }}>ÉCOLE SUPÉRIEURE POLYTECHNIQUE</div>
      </div>
      
      <img src={logoRelerev1} alt="Logo droite" width={110} height={90} />
    </div>
  )

  const renderResultDefinitif = () => (
    <table
      className="table table-bordered table-striped text-center shadow-sm"
      id="resultTable"
      style={{ fontSize: '12px' }}
    >
      <thead className="table-secondary">
        <tr>
          <td colSpan={5} className="py-3" style={{ backgroundColor: '#f8f9fa' }}>
            <h6 style={{ margin: 0, fontWeight: 'bold' }}>
              Résultat Définitif : {niveau} admis en {niveau === 'L1' ? 'L2' : niveau === 'L2' ? 'L3' : 'Master'} par ordre de mérite
            </h6>
          </td>
        </tr>
        <tr style={{ backgroundColor: '#e9ecef' }}>
          <th style={{ width: '10%', fontWeight: 'bold' }}>RANG</th>
          <th style={{ width: '25%', fontWeight: 'bold' }}>NOMS</th>
          <th style={{ width: '30%', fontWeight: 'bold' }}>PRÉNOMS</th>
          <th style={{ width: '15%', fontWeight: 'bold' }}>Moyenne</th>
          <th style={{ width: '20%', fontWeight: 'bold' }}>Mention</th>
        </tr>
      </thead>
      <tbody>
        {sortedStudents.map((sorted, index) => (
          <tr key={sorted.id}>
            <td style={{ fontWeight: 'bold' }}>{index + 1}.</td>
            <td style={{ textAlign: 'left', paddingLeft: '10px', fontWeight: 'bold' }}>{sorted.nom}</td>
            <td style={{ textAlign: 'left', paddingLeft: '10px' }}>{sorted.prenom}</td>
            <td style={{ fontWeight: 'bold' }}>{sorted.moyenne}</td>
            <td style={{ fontWeight: 'bold' }}>
              {sorted.moyenne !== 'N/A' ? getMentionFromMoyenne(sorted.moyenne) : 'N/A'}
            </td>
          </tr>
        ))}
      </tbody>
    </table>
  )

  const renderResultParMatiere = () => {
    const results = getResultsByMatiere()
    
    return (
      <>
        <div style={{ marginBottom: '20px' }}>
          <FormControl fullWidth>
            <InputLabel>Sélectionner une matière</InputLabel>
            <Select
              value={selectedMatiere}
              onChange={(e) => setSelectedMatiere(e.target.value)}
              label="Sélectionner une matière"
            >
              {availableMatieres.map((matiere) => (
                <MenuItem key={matiere} value={matiere}>
                  {matiere}
                </MenuItem>
              ))}
            </Select>
          </FormControl>
        </div>
        
        <table
          className="table table-bordered table-striped text-center shadow-sm"
          id="subjectTable"
          style={{ fontSize: '12px' }}
        >
          <thead className="table-secondary">
            <tr>
              <td colSpan={4} className="py-3" style={{ backgroundColor: '#f8f9fa' }}>
                <h6 style={{ margin: 0, fontWeight: 'bold' }}>
                  Résultat pour la matière : {selectedMatiere}
                </h6>
              </td>
            </tr>
            <tr style={{ backgroundColor: '#e9ecef' }}>
              <th style={{ width: '10%', fontWeight: 'bold' }}>RANG</th>
              <th style={{ width: '30%', fontWeight: 'bold' }}>NOMS</th>
              <th style={{ width: '40%', fontWeight: 'bold' }}>PRÉNOMS</th>
              <th style={{ width: '20%', fontWeight: 'bold' }}>NOTE</th>
            </tr>
          </thead>
          <tbody>
            {results.map((item, index) => (
              <tr key={item.id}>
                <td style={{ fontWeight: 'bold' }}>{index + 1}.</td>
                <td style={{ textAlign: 'left', paddingLeft: '10px', fontWeight: 'bold' }}>{item.nom}</td>
                <td style={{ textAlign: 'left', paddingLeft: '10px' }}>{item.prenom}</td>
                <td style={{ fontWeight: 'bold' }}>{item.note}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </>
    )
  }

  const renderResultParUE = () => {
    const { students, matieres } = getResultsByUE()
    
    return (
      <>
        <div style={{ marginBottom: '20px' }}>
          <FormControl fullWidth>
            <InputLabel>Sélectionner une UE</InputLabel>
            <Select
              value={selectedUE}
              onChange={(e) => setSelectedUE(e.target.value)}
              label="Sélectionner une UE"
            >
              {availableUEs.map((ue) => (
                <MenuItem key={ue} value={ue}>
                  {ue}
                </MenuItem>
              ))}
            </Select>
          </FormControl>
        </div>
        
        <table
          className="table table-bordered table-striped text-center shadow-sm"
          id="ueTable"
          style={{ fontSize: '12px' }}
        >
          <thead className="table-secondary">
            <tr>
              <td colSpan={3 + matieres.length} className="py-3" style={{ backgroundColor: '#f8f9fa' }}>
                <h6 style={{ margin: 0, fontWeight: 'bold' }}>
                  Résultat pour l'UE : {selectedUE}
                </h6>
              </td>
            </tr>
            <tr style={{ backgroundColor: '#e9ecef' }}>
              <th style={{ fontWeight: 'bold' }}>RANG</th>
              <th style={{ fontWeight: 'bold' }}>NOMS</th>
              <th style={{ fontWeight: 'bold' }}>PRÉNOMS</th>
              {matieres.map((matiere) => (
                <th key={matiere} style={{ fontWeight: 'bold' }}>{matiere}</th>
              ))}
              <th style={{ fontWeight: 'bold' }}>MOYENNE UE</th>
            </tr>
          </thead>
          <tbody>
            {students.map((student, index) => (
              <tr key={student.id}>
                <td style={{ fontWeight: 'bold' }}>{index + 1}.</td>
                <td style={{ textAlign: 'left', paddingLeft: '10px', fontWeight: 'bold' }}>{student.nom}</td>
                <td style={{ textAlign: 'left', paddingLeft: '10px' }}>{student.prenom}</td>
                {matieres.map((matiere) => (
                  <td key={matiere} style={{ fontWeight: 'bold' }}>
                    {student.matieres[matiere] || 'N/A'}
                  </td>
                ))}
                <td style={{ fontWeight: 'bold', backgroundColor: '#fff3cd' }}>{student.moyenneUE}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </>
    )
  }

  return (
    <div className={classe.mainHome}>
      <div className={classeHome.header}>
        <div className={classe.h1style}>
          <div className={classeHome.blockTitle}>
            <h1>
              Resultat des {niveau} en {scolaire}
            </h1>
            <div style={{ display: 'flex', gap: '10px' }}>
              <Link to={'#'} onClick={print}>
                <Button color="warning" variant="contained">
                  <FaDownload style={{ fontSize: '20px' }} />
                  Télécharger
                </Button>
              </Link>
              <Link to={'#'} onClick={() => window.history.back()}>
                <Button color="warning" variant="contained">
                  <IoMdReturnRight style={{ fontSize: '20px' }} />
                </Button>
              </Link>
            </div>
          </div>
        </div>
      </div>

      <div className={classeHome.boxEtudiantsCard}>
        <Paper
          sx={{
            height: 'auto',
            width: '100%',
            display: 'flex',
            flexDirection: 'column',
            padding: '2%'
          }}
        >
          {renderHeader()}

          <div style={{ marginBottom: '15px', fontSize: '12px' }}>
            <div><strong>Parcours :</strong> GC</div>
            <div><strong>Niveau :</strong> {niveau}</div>
            <div><strong>Année Universitaire :</strong> {scolaire}</div>
          </div>

          <Tabs 
            value={tabValue} 
            onChange={handleTabChange} 
            centered
            sx={{ marginBottom: '20px' }}
          >
            <Tab label="Résultat Définitif" />
            <Tab label="Par Matière" />
            <Tab label="Par UE" />
          </Tabs>

          {tabValue === 0 && renderResultDefinitif()}
          {tabValue === 1 && renderResultParMatiere()}
          {tabValue === 2 && renderResultParUE()}
        </Paper>
      </div>
    </div>
  )
}

export default Resultat