import React, { useState } from 'react';
import { Card, Avatar, Row, Col, Flex, Badge, Button } from 'antd';
import { CloseCircleOutlined, LoginOutlined, LogoutOutlined } from '@ant-design/icons';
import { LogIn, LogOut } from 'lucide-react';
import {useRouter} from 'next/navigation';
import usePresenceStore from '@/stores/usePresenceStore';
import LoadingComponent from './LoadingComponent';
import moment from "moment";

const { Meta } = Card;

export default function DetailPresenceCardComponent({ date, presences }) {
    const router = useRouter();
    const setPresenceData = usePresenceStore((state) => state.setPresenceData);
    const [loading, setLoading] = useState(false);
    const [loadingCheckOutTelat, setLoadingCheckOutTelat] = useState(false);
    

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

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

    const handleClick  = () => {
        setLoading(true);
        setPresenceData({ date, presences });
        router.push('/attendance/detail');
        setLoading(false);
    }

    const checkDayWork = (date, presences) => {
        if (getDayName(date) === 'Sabtu' || getDayName(date) === 'Minggu'){
            if (!presences[0]) {
                    return 'Hari Libur'
                } else {
                    return 'Hari Kerja'
                }
            } else {
                return 'Hari Kerja'
            }
    }
    // getDayName(date) === 'Sabtu' || getDayName(date) === 'Minggu' ? !presences[0] ? 'Hari Libur' : 'Hari Kerja' : 'Hari Kerja'

    const handelCheckOutDelay = (presences) => {
        setLoadingCheckOutTelat(true);
        router.push(`/check-out-telat/${presences[0]?.id}`);
        
        setLoadingCheckOutTelat(false);

    }
    
    const startTime = moment(moment(presences[0]?.date).format(`YYYY MM DD ${presences[0]?.time}`), "YYYY-MM-DD HH:mm:ss");
    // Tanggal dan waktu akhir
    const endTime = moment(moment(), "YYYY-MM-DD HH:mm:ss");
    // Menghitung selisih waktu
    const duration = moment.duration(endTime.diff(startTime));
    const hours = duration.asHours();
    
    return (
    <div>
        {loading ? 
        <>
            <LoadingComponent />  
        </> : 
        <div className='mt-4' >
            <Badge.Ribbon text={getDayName(date)} 
                style={checkDayWork(date, presences) === 'Hari Kerja' ? 
                        { width: 80,  textAlign: 'center', backgroundColor:'#D98324' } :
                        { width: 80,  textAlign: 'center', backgroundColor:'#D98324' }
                }
            >
                <div className='card-shadow cursor-pointer hover:shadow-lg transition' 
                    onClick={handleClick}>
                    <div className='font-bold'>
                        {formatTanggalIndo(date)}
                    </div>
                    <div className='mt-4 mb-4'>
                        <Row className="gutter-row" 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'>{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'>{presences[0]?.presence ? presences[0]?.presence?.time : '00:00:00'} WIB</div>
                                </Flex>
                                {moment().subtract(1, "days").format("DD MMMM YYYY") == moment(presences[0]?.date).format("DD MMMM YYYY") ?
                                        presences[0]?.presence === null ?
                                        hours <= 23 ?
                                        // hours <= 16 ?
                                            <div className='mt-2'>
                                            <Button
                                                className="text-12"
                                                type='primary'
                                                block
                                                size='small'
                                                onClick={(e) => {
                                                            e.stopPropagation() 
                                                            handelCheckOutDelay(presences)
                                                        }}
                                                loading={loadingCheckOutTelat}
                                            >
                                                <div className='text-sm mt-1'>
                                                    Pulang
                                                </div>
                                            </Button>
                                            </div>
                                            : ""
                                        : ""
                                        : ""
                                    }
                            </Col>
                        </Row>
                    </div>
                </div>
            </Badge.Ribbon>
        </div>
        }
    </div>
    
  );
}