'use client';

import { useEffect, useState } from 'react';
import usePresenceStore from '@/stores/usePresenceStore';
import { Avatar, Col, Flex, Image, Row } from 'antd';
import { LogIn, LogOut } from 'lucide-react';
import LoadingComponent from '@/components/LoadingComponent';
import DetailPresenceCardComponent from '@/components/DetailPresenceCardComponent';

export default function AbsensiDetail() {
  const presenceData = usePresenceStore((state) => state.presenceData);
  const clearPresenceData = usePresenceStore((state) => state.clearPresenceData);
  const [loading, setLoading] = useState(true);

  // Cek apakah presenceData sudah tersedia
  useEffect(() => {
    if (presenceData) {
      setLoading(false);
    }
  }, [presenceData]);

  function getDayName(dateString) {
    const date = new Date(dateString);
    return date.toLocaleDateString('id-ID', { weekday: 'long' });
  }

  function formatTanggalIndo(dateString) {
    const tanggal = new Date(dateString);
    return tanggal.toLocaleDateString('id-ID', {
      year: 'numeric',
      month: 'long',
      day: 'numeric',
    });
  }

  if (loading) {
    return <LoadingComponent />;
  }

  if (!presenceData) {
    return <div className='p-4 text-red-500'>Data kehadiran tidak tersedia. Silakan kembali ke halaman utama.</div>;
  }

  return (
    <div className='pb-20'>
        <div className='font-bold card-head bg-white flex justify-center'>
            <div className='my-4 '> Detail Kehadiran</div>
        </div>
        <div className='p-4'>

            <div className='card-shadow mt-2 p-4 rounded bg-white'>
                <div>
                    {getDayName(presenceData.date) + ', ' + formatTanggalIndo(presenceData.date)}
                </div>

                <Row className="gutter-row mt-4" span={12}>
                    <Col span={12}>
                        <Flex align='center' gap={'small'}>
                        <Avatar size="middle" src={<LogIn size={16} style={{ color:"#443627" }} />} style={{ background: '#EFDCAB'}} />
                        <div className='text-md'>
                            {presenceData.presences?.[0]?.time || '00:00:00'} WIB
                        </div>
                        </Flex>
                    </Col>
                    <Col span={12}>
                        <Flex align='center' gap={'small'}>
                        <Avatar size="middle" src={<LogOut size={16} style={{ color:"#443627", marginLeft: 4 }} />} style={{ background: '#EFDCAB'}} />
                        <div className='text-md'>
                            {presenceData.presences?.[0]?.presence?.time || '00:00:00'} WIB
                        </div>
                        </Flex>
                    </Col>
                </Row>
            </div>

            <div className='card-shadow mt-8'>
                <div className="mb-4">
                    Datang
                </div>
                <div className="flex mb-2">
                    <div className="w-24 flex-none">Waktu</div>
                    <div className="w-4 flex-initial">:</div>
                    <div className="w-full flex-auto">{presenceData.presences?.[0]?.time || '00:00:00'} WIB</div>
                </div>
                <div className="flex mb-2">
                    <div className="w-24 flex-none">Lokasi</div>
                    <div className="w-4 flex-initial">:</div>
                    <div className="w-full flex-auto">{presenceData.presences?.[0]?.location_name || '-'}</div>
                </div>
                <div className="flex mb-2">
                    <div className="w-24 flex-none">Catatan</div>
                    <div className="w-4 flex-initial">:</div>
                    <div className="w-full flex-auto">{presenceData.presences?.[0]?.add_information_condition || '-'}</div>
                </div>
                <div className="flex mb-2">
                    <div className="w-24 flex-none">Foto</div>
                    <div className="w-4 flex-initial">:</div>
                    <div className="w-full flex-auto">
                        <Image
                            src={presenceData.presences[0]?.picture || 
                                '/no-image.png'}
                        />  
                    </div>
                </div>
            </div>

            <div className='card-shadow mt-8'>
                <div className="mb-4">
                    Pulang
                </div>
                <div className="flex mb-2">
                    <div className="w-24 flex-none">Waktu</div>
                    <div className="w-4 flex-initial">:</div>
                    <div className="w-full flex-auto">{presenceData.presences?.[0]?.presence?.time || '00:00:00'} WIB</div>
                </div>
                <div className="flex mb-2">
                    <div className="w-24 flex-none">Lokasi</div>
                    <div className="w-4 flex-initial">:</div>
                    <div className="w-full flex-auto">{presenceData.presences?.[0]?.presence?.location_name || '-'}</div>
                </div>
                <div className="flex mb-2">
                    <div className="w-24 flex-none">Catatan</div>
                    <div className="w-4 flex-initial">:</div>
                    <div className="w-full flex-auto">{presenceData.presences?.[0]?.presence?.add_information_condition || '-'}</div>
                </div>
                <div className="flex mb-2">
                    <div className="w-24 flex-none">Foto</div>
                    <div className="w-4 flex-initial">:</div>
                    <div className="w-full flex-auto">
                        <Image
                            src={presenceData.presences?.[0]?.presence?.picture || '/no-image.png'}
                        />  
                    </div>
                </div>
            </div>

            {/* <div className='card-shadow mt-8'>
                <div className='font-bold'>Pulang</div>
                <div className='mt-4'>
                    <div className="grid grid-cols-2">
                        <div className=' cols'>Waktu</div>
                        <div>{presenceData.presences[0]?.presence?.time || '-'} WIB</div>
                    </div>
                    <div className="grid grid-cols-2 mt-4">
                        <div className=' cols'>Lokasi</div>
                        <div>{presenceData.presences?.[0]?.presence?.location_name || '-'}</div>
                    </div>
                    <div className="grid grid-cols-2 mt-4">
                        <div className=' cols'>Catatan</div>
                        <div>{presenceData.presences?.[0]?.presence?.add_information_type || '-'}</div>
                    </div>
                    <div className='mt-4'>
                        <Image
                            width={200}
                            src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
                        />
                    </div>
                </div>
            </div> */}
        </div>
    </div>
  );
}