import Image from 'next/image'
import background from '../../../../public/assets/homepage/background.svg'
import details from '../../../../public/assets/tuteur/details.svg'
import validate from '../../../../public/assets/dashboardTutors/validate.svg'
import { POSTRequest } from '@/utils/requestHeader'
import { Menu } from '@/components/menu'
import Link from 'next/link'
import { GETRequest } from "@/utils/requestHeader"
import { useEffect, useState } from 'react'
import { Pagination } from '@mui/material'
import { H1Title } from '@/components/littleComponents'
import { Loading } from '@/components/loader'
import { NoIndexHead } from '@/utils/customHead'

const API_URL = process.env.NEXT_PUBLIC_API_URL

export async function getServerSideProps({req, res}) {
  const Cookies = require('cookies')
  const cookies = new Cookies(req, res)
  const authToken = cookies.get('auth-token') || ''

  const response = await fetch(`${API_URL}/api/auth/me/admin`, {
    method:'GET',
    mode: "cors",
    headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json',
        'Authorization': `Bearer ${authToken}`
    }
  })
  
  if(response.status !== 200) {
    return { 
      redirect: {
        destination: '/admin',
        permanent: false,
      },
  }}

  const result = await fetch(`${API_URL}/api/orders?with_pagination=1`, GETRequest).then(r => r.json())
  return {
      props: {
          orders_list:result
      }
  }
}

export default function AdminFormation({orders_list}) {
  const [orders, setOrders] = useState(orders_list)
  const [pagination, setPagination] = useState([])
  const [loading, setLoading] = useState(false)
  const [currentPage, setCurrentPage] = useState()
  const [error, setError] = useState(false)

  useEffect(() => {
    setPagination([])
    for(let i = 1; i <= orders.last_page; i++){
      setPagination((previous) => [...previous, i])
    }
  }, [orders])

  async function updatePagination (number) {
    setLoading(true)
    const result = await fetch(`${API_URL}/api/orders?with_pagination=true&page=${number}`, GETRequest).then(r => r.json())
    setOrders(result)
    setLoading(false)
  }

  async function payed (check, current_order) {
    setLoading(true);setError(false);
    try {
      const seance = await fetch(`${API_URL}/api/orders/${current_order}`, POSTRequest({ 
        is_tutor_payed: check
      }))
      if(seance.status === 200) {
        setLoading(false)
        location.reload();
        return
      }
      setLoading(false);setError(true)
    } catch (err) {
      setLoading(false);setError(true);
      console.error('Request failed:' + err)
    }
  }

  return (
    <>
    <NoIndexHead />
    <main className='w-[100vw] bg-cover bg-center flex'
          style={{backgroundImage:`url(${background.src})`}} >
      <Menu />
      <section className='w-full min-h-[100vh] p-14 ml-[250px]'>
        <H1Title title='COMMANDES' />
        <div className='flex flex-col bg-white w-full rounded-xl py-10 px-14'>
            {error ? <div className='place-self-center -mt-5 mb-4 text-red-500'>{`Une erreur est survenue`}</div>: ''}
            {loading ? <Loading />
            : <>
                <div className='grid grid-cols-[repeat(8,2fr)_1fr] py-5 bg-gray-100 font-medium text-sm text-gray-400 border-b rounded-t-xl border-gray-300 items-center place-items-center justify-items-center text-center'>
                    <p>Titre</p>
                    <p>Discipline</p>
                    <p>Client</p>
                    <p>Tuteur</p>
                    <p>Paiement</p>
                    <p>Date de création</p>
                    <p>Statut des séances</p>
                    <p>Etat</p>
                </div>
                {
                  orders?.data?.sort((a, b) => new Date(b.created_at) - new Date(a.created_at)).map((order) =>
                    <div key={order.id} className='grid grid-cols-[repeat(8,2fr)_1fr] py-5 border-b border-gray-300 text-sm text-typo/90 font-medium bg-secondary/60 justify-items-center place-items-center items-center'
                        style={orders?.data?.at(-1).id === order.id ? {border:'none', borderBottomLeftRadius:12, borderBottomRightRadius:12} : {}}>
                      <p className='pl-5 text-start place-self-start'>{order.formation_title}</p>
                      <p className='text-center max-w-[120px] overflow-hidden text-ellipsis whitespace-nowrap hover:max-w-none'>{order.discipline}</p>
                      <p className='text-center'>{`${order?.client.firstname?.charAt(0)+order?.client?.firstname?.slice(1).toLowerCase()} ${order.client.lastname?.charAt(0)+order?.client?.lastname?.slice(1).toLowerCase()}`}</p>
                      <p className='text-center'>{`${order.tutor.firstname?.charAt(0)+order.tutor?.firstname?.slice(1).toLowerCase()} ${order.tutor.lastname?.charAt(0)+order.tutor?.lastname?.slice(1).toLowerCase()}`}</p>
                      <p style={order.stripe_status === 'PAYED' ? {color:'green'} : {color:'red'}}>{order.stripe_status}</p>
                      <div className='flex flex-col items-center font-bold'>
                        <p>{new Date(order.created_at).toLocaleDateString('fr')}</p>
                      </div>
                      <div className='w-2 h-2 rounded-full' style={order?.are_all_seances_done ? {backgroundColor:'rgb(34 197 94)'} : {backgroundColor:'rgb(251 146 60)'}}></div>
                      <div className='flex flex-col items-center'>
                        {order?.is_tutor_payed 
                          ? 
                          <button onClick={() => payed(!order.is_tutor_payed, order.id)} className='group flex border text-sm items-center rounded-full bg-green-600 text-white w-7 h-7 justify-center'>
                            <Image src={validate} alt="meet icon" className="group-hover:scale-[1.18] transition-all duration-300 w-5 h-auto" priority />
                          </button>
                          : 
                          <>
                            <button onClick={() => payed(!order.is_tutor_payed, order.id)} className='group flex gap-2 border items-center bg-tertiary/70 hover:bg-tertiary transition-all duration-300 rounded text-white py-1 px-2' style={order?.are_all_seances_done ? {display:'flex'} : {display:'none'}}>
                              <p>A payer</p>
                            </button>
                            <button disabled className='group flex gap-2 border items-center bg-gray-400/80  rounded text-white py-1 px-2' style={order?.are_all_seances_done ? {display:'none'} : {display:'flex'}}>
                              <p>A payer</p>
                            </button>
                          </>
                        }
                      </div>
                      <Link href="/admin/commandes/[commande]" as={`/admin/commandes/${order.id}`}>
                        <button className='group flex gap-1 border w-[40px] items-center bg-tertiary/70 hover:bg-tertiary transition-all duration-300 rounded text-white py-1 justify-center'>
                          <Image src={details} alt="details icon" className="group-hover:scale-[1.18] transition-all duration-300 w-6 h-auto mb-[1px]" priority />
                        </button>
                      </Link>
                    </div>
                  )
                }
                <div className='mt-14 mb-4 w-full flex gap-3 justify-center'>
                  <Pagination count={pagination.length} page={currentPage} onChange={(event, value) => {updatePagination(value);setCurrentPage(value)}} />
                </div>
              </>
            }
          </div>
      </section>
    </main>
    </>
  )
}