'use client';

import DetailPresenceCardComponent from '@/components/DetailPresenceCardComponent';
import LoadingComponent from '@/components/LoadingComponent';
import PresenceCard from '@/components/PresenceCardComponent';
import ProfileCard from '@/components/ProfileCardComponent';
import axiosInstance from '@/lib/axios';
import { useSession } from 'next-auth/react';
import React, { useEffect, useState } from 'react';
import dayjs from 'dayjs';
import 'dayjs/locale/id'; 
import { useRouter } from 'next/navigation';

dayjs.locale('id');

export default function Beranda() {
  const {data : session}  = useSession();  
  const [dataAbsenToday, setDataAbsenToday] = useState([]);
  const [dataAbsenHistory, setDataAbsenHistory] = useState([]);
  const [loadingAbsenHistory, setLoadingAbsenHistory] = useState(true);
  const [loadingAbsenToday, setLoadingAbsenToday] = useState(true);
  const [typePresenceIn, setTypePresenceIn] = useState('Datang');
  const [typePresenceOut, setTypePresenceOut] = useState('Pulang');
  const router = useRouter();
  
  useEffect(() => {
    if (session?.accessToken) {
      getDataAbsenToday(session.accessToken);
      getDataAbsenHistory(session.accessToken);
    }
  }, [session]);

  const getDataAbsenToday = async (token) => {
    setLoadingAbsenToday(true);
    try {
      const response = await axiosInstance.get('/user/get-absen-today-parent', {
        headers: {
          Authorization: `Bearer ${token}`,
        },
      });

      const fetchedData = response?.data ?? [];
      const absenData = fetchedData.data[0];
      setDataAbsenToday(fetchedData.data[0]);
      console.log(absenData);
      if (absenData?.presence_type === 'masuk') {
        document.cookie = 'hasCheckedIn=true; path=/;';
      } else {
        document.cookie = 'hasCheckedIn=; Max-Age=0; path=/;'; // hapus cookie jika belum absen
      }

      if (absenData?.presence?.presence_type === 'pulang') {
        document.cookie = 'hasCheckedOut=true; path=/;';
      } else {
        document.cookie = 'hasCheckedOut=; Max-Age=0; path=/;'; // hapus cookie jika belum absen
      }

    } catch (error) {
      console.error('Gagal mengambil data absen today :', error);
    }
    setLoadingAbsenToday(false);
  }

  const getDataAbsenHistory = async (token) => {
    setLoadingAbsenHistory(true);
    try {
      const response = await axiosInstance.get('/user/get-absen-history-parent?limit=4&page=1', {
        headers: {
          Authorization: `Bearer ${token}`,
        },
      });

      const fetchedData = response?.data?.data ?? []; 
      setDataAbsenHistory(fetchedData.data);

    } catch (error) {
      console.error('Gagal mengambil data riwayat absen:', error);
    }
    setLoadingAbsenHistory(false);
  };

  const handlePage = () => {
    setLoadingAbsenHistory(true);
    router.push('/attendance');
    setLoadingAbsenHistory(false);
  }



  return (
    <div className="min-h-screen pb-20">
      {/* <button onClick={() => {
        document.cookie = 'hasCheckedIn=; Max-Age=0; path=/;';
      }}>
        Reset Status Check-In
      </button> */}
      <div className='p-4 bg-header-custom'>
        <ProfileCard
          name="Andi Saputra"
          image="/bg/profile.jpg"
        />
      </div>
      <div className='p-4' style={{ marginTop: -120 }}>
        <div className='card mt-8' style={{ backgroundColor: '#D98324' }}>
          <div className='text-white'>
            Kehadiran Hari Ini
            <div className='text-sm'>
              {dayjs().format('dddd, D MMMM YYYY')}
            </div>
          </div>
          <div className="grid grid-cols-2 gap-4 ">
            <PresenceCard presenceType={typePresenceIn} presenceData={dataAbsenToday}/>
            <PresenceCard presenceType={typePresenceOut} presenceData={dataAbsenToday}/>
          </div>
        </div>
        <div className="grid gap-4 mt-4">
          <div className="col-start font-bold">Riwayat Kehadiran</div>
          <div className="col-end-3 text-end text-blue-600">
            <div onClick={handlePage}>
              Lihat Semua
            </div>
          </div>
        </div>
        <div>
          {loadingAbsenHistory ? <><LoadingComponent /></> : dataAbsenHistory.map((item) => (
            <DetailPresenceCardComponent
              key={item.id}
              date={item.date}
              presences={item.presences}
            />
          ))}
        </div>
      </div>
    </div>);
}