import Image from 'next/image'
import Link from 'next/link'
import arrow from '../../../public/assets/interface/arrow.svg'
import tools from '../../../public/assets/interface/tools.svg'
import banner from '../../../public/assets/interface/banner.svg'
import data from '../../../public/assets/data/data.json'
import { GETRequest, POSTRequest } from '@/utils/requestHeader'
import { useEffect, useState } from 'react'
import { Loading } from '@/components/loader'
import { Pagination } from '@mui/material'
import { toHoursAndMinutesH } from '@/utils/timeToHours'
import Layout from '@/components/layout/layout'
import Head from 'next/head'

import board from '../../../public/assets/interface/board.svg'
import Prep from '../../../public/assets/interface/Prep.svg'
import Reda from '../../../public/assets/interface/Reda.svg'
import Surm from '../../../public/assets/interface/Surm.svg'
import Mise from '../../../public/assets/interface/Mise.svg'
import computerT from '../../../public/assets/interface/colorPicto/computerTut.svg'
import clockT from '../../../public/assets/interface/colorPicto/clockTut.svg'
import peopleT from '../../../public/assets/interface/colorPicto/peopleTut.svg'
import folderT from '../../../public/assets/interface/colorPicto/folderTut.svg'
import computerR from '../../../public/assets/interface/colorPicto/computerR.svg'
import clockR from '../../../public/assets/interface/colorPicto/clockR.svg'
import peopleR from '../../../public/assets/interface/colorPicto/peopleR.svg'
import folderR from '../../../public/assets/interface/colorPicto/folderR.svg'
import computerP from '../../../public/assets/interface/colorPicto/computerP.svg'
import clockP from '../../../public/assets/interface/colorPicto/clockP.svg'
import peopleP from '../../../public/assets/interface/colorPicto/peopleP.svg'
import folderP from '../../../public/assets/interface/colorPicto/folderP.svg'
import computerM from '../../../public/assets/interface/colorPicto/computerM.svg'
import clockM from '../../../public/assets/interface/colorPicto/clockM.svg'
import peopleM from '../../../public/assets/interface/colorPicto/peopleM.svg'
import folderM from '../../../public/assets/interface/colorPicto/folderM.svg'
import deliverableM from '../../../public/assets/interface/colorPicto/deliverableM.svg'
import deliverableP from '../../../public/assets/interface/colorPicto/deliverableP.svg'
import deliverableR from '../../../public/assets/interface/colorPicto/deliverableR.svg'
import deliverableT from '../../../public/assets/interface/colorPicto/deliverableTut.svg'

const API_URL = process.env.NEXT_PUBLIC_API_URL

export async function getServerSideProps() {
    const result = await fetch(`${API_URL}/api/formations/search/via/custom`, POSTRequest({ 
        attributes: {
            services:"",
            expertises: "Tutorat"
        }
    }))
    const formation_result = await result.json()
    return {
        props: {
            formations_list:formation_result
        }
    }
}

export default function UserInterface({formations_list}) {
    const { v4: uuidv4 } = require('uuid');
    const [formationPagi, setFormationPagi] = useState()
    const [formations, setFormations] = useState()
    const [pagination, setPagination] = useState([])
    const [loading, setLoading] = useState(false)
    const [currentPage, setCurrentPage] = useState(1)
  
    const [expertise, setExpertise] = useState('Tutorat')
    const [service, setService] = useState('')

    useEffect(() => {
        searchByExpertises(expertise, service)
    }, [expertise, service])

    useEffect(() => {
        if(formations_list) { 
            setFormations(formations_list?.data); setFormationPagi(formations_list); return 
        }
    }, [formations_list])

    useEffect(() => {
      setPagination([])
      for(let i = 1; i <= formationPagi?.last_page; i++){
        setPagination((previous) => [...previous, i])
        }
    }, [formationPagi?.last_page])
  
    async function updatePagination (number) {
        setLoading(true)
        const result = await fetch(`${API_URL}/api/formations/search/via/custom?page=${number}`, POSTRequest({ 
            attributes: {
                services:service,
                expertises: expertise
            }
        })).then(r => r.json())
        setFormations(result?.data);
        setFormationPagi(result)
        window?.scrollTo({top:300,behavior: "smooth"})
        setLoading(false)
    }

    async function searchByExpertises (expertise, service) {
        try {
            const response = await fetch(`${API_URL}/api/formations/search/via/custom`, POSTRequest({ 
                attributes: {
                    services:service,
                    expertises: expertise
                }
            }))
            const result = await response.json()
            setFormations(result?.data);
            setFormationPagi(result)
        } catch (err) {
            console.error('Request failed:' + err)
        }
    } 

    return (
        <>
        <Head>
            <title>Scriptor - Nos formations</title>
            <meta name="description" content="Bénéficiez d'une formation personnalisée pour la rédaction de votre mémoire. Nos tuteurs vous accompagnent pas-à-pas pour répondre à vos besoins." />
        </Head>
        <Layout>
            <main className='w-[100vw] max-w-[100vw] flex flex-col tracking-[0.2px]' >
                <section className='h-[300px] relative w-[100vw] max-w-[100vw] bg-[rgb(61,158,194)] flex flex-col gap-10 text-white items-center justify-center lg:items-start lg:pl-[10vw] md:h-auto md:py-14 md:gap-5 sm:py-10'>
                    <h2 className='text-xl md:text-base '>Nos formations</h2>
                    <div className='h-2 bg-white w-[150px] md:h-1'></div>
                    <h1 className='text-6xl font-bold md:text-5xl sm:text-3xl'>{expertise}</h1>
                    <Image src={banner} alt="Board icon" className="absolute right-0 md:w-48 h-auto sm:hidden" priority />
                </section>
                <div id='top' className='flex mt-14 gap-20 justify-center px-20 w-[100vw] max-w-[100vw]xl:gap-14'>
                    <menu className='pt-28 flex xl:hidden'>
                        <ul className='flex flex-col gap-4'>
                                {data?.services?.slice(0,data?.services.length-1).map((current_service) => <ServicesMenu key={uuidv4()} service={service} current_service={current_service} setService={setService} setCurrentPage={setCurrentPage} />)}
                            <li className='text-2xl 2xl:text-xl cursor-pointer xl:text-base xl:font-semibold' onClick={() => {setService('');setCurrentPage(1)}}>Sans filtre</li>
                        </ul>
                    </menu>
                    <div className='flex flex-col lg:w-[100vw] lg:px-10 sm:px-5'>
                        <menu className='flex gap-3 text-white lg:overflow-x-auto lg:scrollbar-thin lg:scrollbar-thumb-gray-200 lg:scrollbar-track-gray-100 lg:pb-5'>
                            <ExpertisesMenu expertise={expertise} text="Tutorat" color="#3D9EC2" setExpertise={setExpertise} setCurrentPage={setCurrentPage} />
                            <ExpertisesMenu expertise={expertise} text="Rédaction" color="#FDB636" setExpertise={setExpertise} setCurrentPage={setCurrentPage} />
                            <ExpertisesMenu expertise={expertise} text="Préparation à l’oral" color="#FF6551" setExpertise={setExpertise} setCurrentPage={setCurrentPage} />
                            <ExpertisesMenu expertise={expertise} text="Mise en page" color="#9ca3af" setExpertise={setExpertise} setCurrentPage={setCurrentPage} />
                            <ExpertisesMenu expertise={expertise} text="Sur-mesure" color="#2A3955" setExpertise={setExpertise} setCurrentPage={setCurrentPage} />
                        </menu>
                        <menu className='hidden pt-5 xl:flex lg:overflow-x-auto lg:scrollbar-thin lg:scrollbar-thumb-gray-200 lg:scrollbar-track-gray-100 lg:pb-5'>
                            <ul className='flex gap-4'>
                                <li className='text-2xl 2xl:text-xl py-2 px-4 border-[#2A3955] border-2 whitespace-nowrap rounded-xl cursor-pointer xl:text-base xl:font-semibold' onClick={() => {setService('');setCurrentPage(1)}}>Sans filtre</li>
                                {data?.services?.slice(0,data?.services.length-1).map((current_service) => <ResponsiveServicesMenu key={uuidv4()} service={service} current_service={current_service} setService={setService} setCurrentPage={setCurrentPage} />)}
                            </ul>
                        </menu>
                        {loading ? <div className='flex w-full items-center justify-center py-16 '><Loading /></div>
                        :
                            <div className='flex flex-col gap-14 pt-16 pb-10 items-start md:items-center sm:pb-0'>
                                {
                                    formations?.sort((a, b) => a.reference.localeCompare(b.reference)).map((f) =>
                                        <FormationCard key={f.id} expertise={f.expertises} reference={f.reference} title={f.title} isCollective={f.is_collective ? 'Collective' : 'Individuelle'} client_price={f.client_price} id={f.id} slug={f.slug} session_number={f.sessions_number} session_duration={f.session_duration} deliverable={f.livrable} />
                                    )
                                }
                                {
                                    formations?.length === 0 
                                    ?   <div className='mt-8 mb-4 w-full max-w-[1000px] flex gap-3 justify-center sm:mt-0'>
                                            <p>Aucune formation disponible pour ce service ou cette expertise.</p>
                                        </div>
                                    : <div className='mt-8 mb-4 w-full max-w-[1000px] flex gap-3 justify-center sm:mt-0'>
                                        <Pagination count={pagination.length} page={currentPage} onChange={(event, value) => {updatePagination(value);setCurrentPage(value)}} />
                                    </div>
                                }
                            </div>
                        }
                    </div>
                </div>
            </main>
        </Layout>
    </>
  )
}

function ServicesMenu ({service, current_service, setService, setCurrentPage}) {
    const { v4: uuidv4 } = require('uuid');
    return(
        <li key={uuidv4()} style={current_service === service ? {color:'#2A3955', fontWeight:'bold', textDecoration:'underline'} : {}} className='text-2xl cursor-pointer 2xl:text-xl 2xl:whitespace-nowrap xl:text-base xl:font-semibold' onClick={() => {setService(current_service);setCurrentPage(1)}}>{current_service}</li>
    )
}
    
function ResponsiveServicesMenu ({service, current_service, setService, setCurrentPage}) {
    const { v4: uuidv4 } = require('uuid');
    return(
        <li key={uuidv4()} style={current_service === service ? {backgroundColor:'#2A3955', color:'white'} : {}} className='text-2xl py-2 px-4 border-[#2A3955] border-2 whitespace-nowrap rounded-xl cursor-pointer xl:text-base xl:font-semibold' onClick={() => {setService(current_service);setCurrentPage(1)}}>{current_service}</li>
    )
}

export function ExpertisesMenu ({text, color,expertise, setExpertise, setCurrentPage}) {
    return(
        <div onClick={() => {setExpertise(text);setCurrentPage(1)}} className={`group xl:text-base whitespace-nowrap rounded-xl flex items-center justify-center cursor-pointer  text-xl font-bold lg:text-base lg:font-semibold `} style={text === expertise ? {backgroundColor:`${color}`, color:'white', border:`3px solid ${color}`} : {border:`3px solid ${color}` , color:`${color}`}}>
            <p className={` py-4 px-6 sm:px-4 sm-py-2`}>{text}</p>
        </div>
    )
}

export function FormationCard ({expertise, reference, title, isCollective, client_price, id, slug,session_number, session_duration, deliverable}) {
    const [color, setColor] = useState()
    const [picto1, setPicto1] = useState()
    const [picto2, setPicto2] = useState()
    const [picto3, setPicto3] = useState()
    const [picto4, setPicto4] = useState()
    const [picto5, setPicto5] = useState()
    const [mainPix, setMainPix] = useState()

    useEffect(() => {
        switch(expertise){
            case "Tutorat": setColor('#3D9EC2');setPicto1(peopleT);setPicto2(clockT);setPicto3(folderT);setPicto4(computerT);setPicto5(deliverableT); setMainPix(board);break;
            case "Rédaction": setColor('#FDB636');setPicto1(peopleR);setPicto2(clockR);setPicto3(folderR);setPicto4(computerR);setPicto5(deliverableR); setMainPix(Reda);break;
            case "Préparation à l’oral": setColor('#FF6551');setPicto1(peopleP);setPicto2(clockP);setPicto3(folderP);setPicto4(computerP);setPicto5(deliverableP); setMainPix(Prep);break;
            case "Mise en Page": setColor('#BBBCC0');setPicto1(peopleM);setPicto2(clockM);setPicto3(folderM);setPicto4(computerM);setPicto5(deliverableM); setMainPix(Mise);break;
            case "Sur-mesure": setColor('#2A3955');setMainPix(Surm);break;
            default: setColor('#3D9EC2');setPicto1(peopleT);setPicto2(clockT);setPicto3(folderT);setPicto4(computerT);setPicto5(deliverableT); setMainPix(board);break;
        }
    }, [expertise])
    
    return(
        <div className='rounded-xl overflow-hidden justify-between w-full max-w-[1000px] flex text-xl shadow-xl md:flex-col md:max-w-[450px] md:w-[97%]'>
            <div className='min-w-[180px] h-full flex items-center justify-center lg:min-w-[140px]'
                 style={{backgroundColor:color}}>
                {mainPix && (<Image src={mainPix} alt="Board icon" className='md:w-32 h-auto sm:w-28' priority width={170} height={170} />)}
            </div>
            <div className='flex flex-col bg-white py-5 px-10 gap-5 justify-between w-full items-start h-full lg:px-5'>
                <div className='flex gap-3 text-lg'>
                    <p className='font-bold' style={{color:color}}>{expertise}</p>
                    <p>{`Réf: ${reference.toUpperCase()}`}</p>
                </div>
                <div className='text-[27px] font-bold text-[#252B42] lg:text-2xl md:text-xl'>{title}</div>
                <div className='flex gap-5 w-full sm:grid sm:grid-cols-2'>
                {expertise === 'Sur-mesure' ? <PictoCard pictoText={"Création sur-mesure"} image={tools} /> : 
                    <>
                        <PictoCard pictoText={expertise === 'Sur-mesure' ? '-' : isCollective} image={picto1} />
                        <PictoCard pictoText={expertise === 'Sur-mesure' ? '-' : `${toHoursAndMinutesH(session_number*session_duration)}`} image={picto2} />
                        <PictoCard pictoText={expertise === 'Sur-mesure' ? '-' : `${Math.floor(session_number)} cours`} image={picto3} />
                        {deliverable > 0 && deliverable !== null
                            ? <PictoCard pictoText={expertise === 'Sur-mesure' ? '-' : `${deliverable} livrable(s)`} image={picto5} />
                            : <PictoCard pictoText={"Distanciel"} image={picto4}/>
                        }
                    </>
                }
                </div>
            </div>
            <div className='flex flex-col min-w-[180px] h-full lg:min-w-[140px] md:flex-row md:border-t-2' style={{borderColor:color}} >
                <div className='w-full h-1/2 flex items-center justify-center font-bold text-3xl text-center lg:text-2xl md:h-full md:w-1/2 md:py-5' style={{color:color}}>{client_price === 0 ? <span className='text-xl lg:text-lg'>Sur-mesure</span> : `${client_price}€`}</div>
                <Link href={{ pathname:"/user-interface/[userFormation]"}} as={`/user-interface/${slug}`}  className='w-full h-1/2 flex items-center justify-center font-bold cursor-pointer text-white gap-1 md:h-full md:w-1/2 md:py-5' style={{backgroundColor:color}}>
                    <Image src={arrow} alt="Arrow icon" className="w-7 h-auto lg:w-5" priority />
                    <p className='font-bold lg:text-base'>{expertise === 'Sur-mesure' ? 'Devis' : `M'inscrire`}</p>
                </Link>
            </div>
        </div>
    )
}

export function PictoCard ({pictoText, image, imgStyle}) {
    return(
        <div className='flex gap-1 items-center text-sm'>
            {image && (<Image src={image} alt="Contact icon" className="w-6 h-auto" priority style={imgStyle} />)}
            <p className='flex whitespace-nowrap'>{pictoText}</p>
        </div>
    )
}