import { useEffect, useState } from 'react';
import { Modal, Input, Typography, Switch, Button, ConfigProvider, Divider } from 'antd';
import { NotifAlert, NotifOk } from '../../../../components/Global/ToastNotif';
import { createShift, updateShift } from '../../../../api/master-shift';
import dayjs from 'dayjs';
import utc from 'dayjs/plugin/utc';

dayjs.extend(utc);

const { Text } = Typography;

const DetailShift = (props) => {
    const [confirmLoading, setConfirmLoading] = useState(false);

    const defaultData = {
        shift_id: '',
        shift_name: '',
        start_time: '',
        end_time: '',
        is_active: true,
    };

    const [FormData, setFormData] = useState(defaultData);

    const handleCancel = () => {
        props.setSelectedData(null);
        props.setActionMode('list');
    };

    const handleSave = async () => {
        setConfirmLoading(true);

        // Validasi required fields
        if (!FormData.shift_name || FormData.shift_name.trim() === '') {
            NotifOk({
                icon: 'warning',
                title: 'Peringatan',
                message: 'Kolom Nama Shift Tidak Boleh Kosong',
            });
            setConfirmLoading(false);
            return;
        }

        if (!FormData.start_time || FormData.start_time.trim() === '') {
            NotifOk({
                icon: 'warning',
                title: 'Peringatan',
                message: 'Kolom Jam Mulai Tidak Boleh Kosong',
            });
            setConfirmLoading(false);
            return;
        }

        if (!FormData.end_time || FormData.end_time.trim() === '') {
            NotifOk({
                icon: 'warning',
                title: 'Peringatan',
                message: 'Kolom Jam Selesai Tidak Boleh Kosong',
            });
            setConfirmLoading(false);
            return;
        }

        // Validate time format
        const timePattern = /^([01]\d|2[0-3]):([0-5]\d)(:[0-5]\d)?$/;
        if (!timePattern.test(FormData.start_time)) {
            NotifOk({
                icon: 'warning',
                title: 'Peringatan',
                message:
                    'Format Jam Mulai tidak valid. Gunakan format HH:mm atau HH:mm:ss (contoh: 08:00)',
            });
            setConfirmLoading(false);
            return;
        }

        if (!timePattern.test(FormData.end_time)) {
            NotifOk({
                icon: 'warning',
                title: 'Peringatan',
                message:
                    'Format Jam Selesai tidak valid. Gunakan format HH:mm atau HH:mm:ss (contoh: 17:00)',
            });
            setConfirmLoading(false);
            return;
        }

        try {
            if (FormData.shift_id) {
                // Update existing shift
                const payload = {
                    shift_name: FormData.shift_name,
                    start_time: FormData.start_time,
                    end_time: FormData.end_time,
                    is_active: FormData.is_active,
                };

                const response = await updateShift(FormData.shift_id, payload);
                console.log('updateShift response:', response);

                if (response.statusCode === 200) {
                    NotifOk({
                        icon: 'success',
                        title: 'Berhasil',
                        message: `Data Shift "${FormData.shift_name}" berhasil diubah.`,
                    });
                    props.setActionMode('list');
                } else {
                    NotifAlert({
                        icon: 'error',
                        title: 'Gagal',
                        message: response.message || 'Gagal mengubah data Shift.',
                    });
                }
            } else {
                // Create new shift
                const payload = {
                    shift_name: FormData.shift_name,
                    start_time: FormData.start_time,
                    end_time: FormData.end_time,
                    is_active: FormData.is_active,
                };

                const response = await createShift(payload);
                console.log('createShift response:', response);

                if (response.statusCode === 200 || response.statusCode === 201) {
                    NotifOk({
                        icon: 'success',
                        title: 'Berhasil',
                        message: `Data Shift "${FormData.shift_name}" berhasil ditambahkan.`,
                    });
                    props.setActionMode('list');
                } else {
                    NotifAlert({
                        icon: 'error',
                        title: 'Gagal',
                        message: response.message || 'Gagal menambahkan data Shift.',
                    });
                }
            }
        } catch (error) {
            console.error('Save Shift Error:', error);
            NotifAlert({
                icon: 'error',
                title: 'Error',
                message: error.message || 'Terjadi kesalahan saat menyimpan data.',
            });
        }

        setConfirmLoading(false);
    };

    // Helper function to format time input
    const formatTimeInput = (value) => {
        if (!value) return value;

        // Remove any whitespace
        value = value.trim();

        // If user inputs single digit hour like "8:00", convert to "08:00"
        const timeRegex = /^(\d{1,2}):(\d{2})(:\d{2})?$/;
        const match = value.match(timeRegex);

        if (match) {
            const hours = match[1].padStart(2, '0');
            const minutes = match[2];
            const seconds = match[3] || '';
            return `${hours}:${minutes}${seconds}`;
        }

        return value;
    };

    const handleInputChange = (e) => {
        const { name, value } = e.target;

        // Just set the value without formatting during typing
        setFormData({
            ...FormData,
            [name]: value,
        });
    };

    // Format time when user leaves the input field (onBlur)
    const handleTimeBlur = (e) => {
        const { name, value } = e.target;

        if (name === 'start_time' || name === 'end_time') {
            const formattedValue = formatTimeInput(value);
            setFormData({
                ...FormData,
                [name]: formattedValue,
            });
        }
    };

    const handleStatusToggle = (isChecked) => {
        setFormData({
            ...FormData,
            is_active: isChecked,
        });
    };

    // Helper function to extract time from ISO timestamp using dayjs
    const extractTime = (timeString) => {
        if (!timeString) return '';

        // If it's ISO timestamp like "1970-01-01T08:00:00.000Z"
        if (timeString.includes('T')) {
            return dayjs.utc(timeString).format('HH:mm');
        }

        // If it's already in HH:mm:ss format, remove seconds
        if (timeString.includes(':')) {
            const parts = timeString.split(':');
            return `${parts[0]}:${parts[1]}`;
        }

        return timeString;
    };

    useEffect(() => {
        const token = localStorage.getItem('token');
        if (token) {
            if (props.selectedData != null) {
                // Only set fields that are in defaultData
                const filteredData = {
                    shift_id: props.selectedData.shift_id || '',
                    shift_name: props.selectedData.shift_name || '',
                    start_time: extractTime(props.selectedData.start_time) || '',
                    end_time: extractTime(props.selectedData.end_time) || '',
                    is_active: props.selectedData.is_active ?? true,
                };
                setFormData(filteredData);
            } else {
                setFormData(defaultData);
            }
        }
    }, [props.showModal]);

    return (
        <Modal
            title={`${
                props.actionMode === 'add'
                    ? 'Tambah'
                    : props.actionMode === 'preview'
                    ? 'Preview'
                    : 'Edit'
            } Shift`}
            open={props.showModal}
            onCancel={handleCancel}
            footer={[
                <>
                    <ConfigProvider
                        theme={{
                            token: { colorBgContainer: '#E9F6EF' },
                            components: {
                                Button: {
                                    defaultBg: 'white',
                                    defaultColor: '#23A55A',
                                    defaultBorderColor: '#23A55A',
                                    defaultHoverColor: '#23A55A',
                                },
                            },
                        }}
                    >
                        <Button onClick={handleCancel}>Batal</Button>
                    </ConfigProvider>
                    <ConfigProvider
                        theme={{
                            token: {
                                colorBgContainer: '#209652',
                            },
                            components: {
                                Button: {
                                    defaultBg: '#23a55a',
                                    defaultColor: '#FFFFFF',
                                    defaultBorderColor: '#23a55a',
                                    defaultHoverColor: '#FFFFFF',
                                    defaultHoverBorderColor: '#23a55a',
                                },
                            },
                        }}
                    >
                        {!props.readOnly && (
                            <Button loading={confirmLoading} onClick={handleSave}>
                                Simpan
                            </Button>
                        )}
                    </ConfigProvider>
                </>,
            ]}
        >
            {FormData && (
                <div>
                    {/* Status Toggle */}
                    <div style={{ marginBottom: 12 }}>
                        <div>
                            <Text strong>Status</Text>
                        </div>
                        <div
                            style={{
                                display: 'flex',
                                alignItems: 'center',
                                marginTop: '8px',
                            }}
                        >
                            <div style={{ marginRight: '8px' }}>
                                <Switch
                                    disabled={props.readOnly}
                                    style={{
                                        backgroundColor:
                                            FormData.is_active === true ? '#23A55A' : '#bfbfbf',
                                    }}
                                    checked={FormData.is_active === true}
                                    onChange={handleStatusToggle}
                                />
                            </div>
                            <div>
                                <Text>{FormData.is_active === true ? 'Active' : 'Inactive'}</Text>
                            </div>
                        </div>
                    </div>
                    <div style={{ marginBottom: 12 }}>
                        <Text strong>Nama Shift</Text>
                        <Text style={{ color: 'red' }}> *</Text>
                        <Input
                            name="shift_name"
                            value={FormData.shift_name}
                            onChange={handleInputChange}
                            placeholder="Masukkan Nama Shift"
                            readOnly={props.readOnly}
                        />
                    </div>
                    <div style={{ marginBottom: 12 }}>
                        <Text strong>Jam Mulai</Text>
                        <Text style={{ color: 'red' }}> *</Text>
                        <Input
                            name="start_time"
                            value={FormData.start_time}
                            onChange={handleInputChange}
                            placeholder="Masukkan Jam Mulai"
                            readOnly={props.readOnly}
                            maxLength={8}
                        />
                        <Text
                            type="secondary"
                            style={{ fontSize: '12px', display: 'block', marginTop: '4px' }}
                        >
                            Contoh: 08:00 atau 08:00:00
                        </Text>
                    </div>
                    <div style={{ marginBottom: 12 }}>
                        <Text strong>Jam Selesai</Text>
                        <Text style={{ color: 'red' }}> *</Text>
                        <Input
                            name="end_time"
                            value={FormData.end_time}
                            onChange={handleInputChange}
                            placeholder="Masukkan Jam Selesai"
                            readOnly={props.readOnly}
                            maxLength={8}
                        />
                        <Text
                            type="secondary"
                            style={{ fontSize: '12px', display: 'block', marginTop: '4px' }}
                        >
                            Contoh: 17:00 atau 17:00:00
                        </Text>
                    </div>
                </div>
            )}
        </Modal>
    );
};

export default DetailShift;