'use client';

import { useEffect, useState } from 'react';
import { Button, message } from 'antd';
import { useRouter } from 'next/navigation';
import axiosInstance from '@/lib/axios';
import { useSession } from 'next-auth/react';
import CameraFaceComponent from '@/components/CameraFaceComponent';

export default function FotoPage() {
  const [dataAbsen, setDataAbsen] = useState(null);
  const [imageSrc, setImageSrc] = useState(null);
  const [messageApi, contextHolder] = message.useMessage();
  const [absenTime, setAbsenTime] = useState(null);
  const [loading, setLoading] = useState(false);
  const { data: session } = useSession();
  const router = useRouter();


  useEffect(() => {
  const isFirstLoad = sessionStorage.getItem('fotoPageLoaded');

  if (!isFirstLoad) {
    const absen = localStorage.getItem('pendingAbsensi');
    if (absen) {
      sessionStorage.setItem('fotoPageLoaded', 'true');
      setDataAbsen(JSON.parse(absen));
      setAbsenTime(new Date());
    } else {
      router.back(); 
    }
  } else {
    localStorage.removeItem('pendingAbsensi');
    sessionStorage.removeItem('fotoPageLoaded');
    router.back();
  }
}, []);
    

    const dataURLtoBlob = (dataURL) => {
        const arr = dataURL.split(",");
        const mime = arr[0].match(/:(.*?);/)[1];
        const bstr = atob(arr[1]);
        let n = bstr.length;
        const u8arr = new Uint8Array(n);

        while (n--) {
            u8arr[n] = bstr.charCodeAt(n);
        }

        return new Blob([u8arr], { type: mime });
    };

  const handleSubmit = async () => {
    setLoading(true);
    try {
        const blob = dataURLtoBlob(imageSrc);
        const formData = new FormData();

        formData.append('picture', blob);
        formData.append('latitude_longitude', dataAbsen.latitude_longitude);
        formData.append('presence_type', dataAbsen.presence_type);
        formData.append('presence_condition', dataAbsen.presence_condition);
        formData.append('add_information_type', dataAbsen.add_information_type);
        formData.append('add_information_condition', dataAbsen.add_information_condition === "" ? '-' : dataAbsen.add_information_condition);
        formData.append('location_validation_status', dataAbsen.location_validation_status);
        formData.append('office_id', dataAbsen.office_id);
        formData.append('office_name', dataAbsen.office_name);
        formData.append('location_name', dataAbsen.location_name);
        dataAbsen?.parent_id === undefined ? '' :formData.append('parent_id', dataAbsen?.parent_id)

        await axiosInstance.post('/user/presence', formData, {
        headers: {
            'Authorization': `Bearer ${session?.accessToken}`,
            'Content-Type': 'multipart/form-data',
        },
        });

        localStorage.removeItem('pendingAbsensi');
        sessionStorage.removeItem('fotoPageLoaded'); // tambahkan ini
        messageApi.success('Presensi berhasil dikirim');
        router.push('/beranda');
    } catch (err) {
        console.error(err);
        messageApi.error('Gagal mengirim data');
    }
    };

  return (
    <div className="p-4">
      {contextHolder}
      <h1 className="text-lg font-bold mb-4">Ambil Foto Presensi</h1>

      {absenTime && (
        <p className="text-center mt-2 text-black-600">
            Waktu Absen: {absenTime.toLocaleString('id-ID', {
            hour: '2-digit',
            minute: '2-digit',
            second: '2-digit',
            day: '2-digit',
            month: 'short',
            year: 'numeric'
            })}
        </p>
        )}
    
    <div className='mt-4'>
      <CameraFaceComponent onCapture={(img) => setImageSrc(img)}/>
      {/* <CameraEyeDetection onCapture={(img) => setImageSrc(img)}/> */}
    </div>

      {imageSrc && (
        <Button type="primary" block className="mt-4" loading={loading} onClick={handleSubmit}>
          Kirim Presensi
        </Button>
      )}
    </div>
  );
}