import React 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';

const { Meta } = Card;

export default function DetailPresenceCardComponent({ date, presences }) {
    const router = useRouter();
    const setPresenceData = usePresenceStore((state) => state.setPresenceData);
    

    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  = () => {
        setPresenceData({ date, presences });
        router.push('/attendance/detail');
    }


    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'
  
    return (
    <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>
                        </Col>
                    </Row>
                </div>
            </div>
        </Badge.Ribbon>
    </div>
  );
}