
import React, { memo, useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import { useBreadcrumb } from '../../../layout/LayoutBreadcrumb';
import { Form, Typography } from 'antd';
import ListPlantSection from './component/ListPlantSection';
import DetailPlantSection from './component/DetailPlantSection';

import { NotifConfirmDialog, NotifAlert } from '../../../components/Global/ToastNotif';

const { Text } = Typography;

// Mock Data
const initialData = [
    {
        key: '1',
        kode_plant: 'PL-001',
        nama_plant: 'Seksi Produksi A',
        lokasi_plant: 'Gedung 1, Lantai 2',
        deskripsi: 'Seksi yang bertanggung jawab untuk lini produksi A.',
    },
    {
        key: '2',
        kode_plant: 'PL-002',
        nama_plant: 'Seksi Pengepakan',
        lokasi_plant: 'Gedung 1, Lantai 1',
        deskripsi: 'Area pengepakan dan persiapan pengiriman.',
    },
    {
        key: '3',
        kode_plant: 'PL-003',
        nama_plant: 'Gudang Bahan Baku',
        lokasi_plant: 'Gudang A',
        deskripsi: 'Penyimpanan bahan baku utama.',
    },
    {
        key: '4',
        kode_plant: 'PL-004',
        nama_plant: 'Seksi Kualitas',
        lokasi_plant: 'Laboratorium QC',
        deskripsi: 'Pemeriksaan dan kontrol kualitas produk.',
    },
    {
        key: '5',
        kode_plant: 'PL-005',
        nama_plant: 'Seksi Perawatan',
        lokasi_plant: 'Workshop',
        deskripsi: 'Perawatan dan perbaikan mesin produksi.',
    },
    {
        key: '6',
        kode_plant: 'PL-006',
        nama_plant: 'Gudang Jadi',
        lokasi_plant: 'Gudang B',
        deskripsi: 'Penyimpanan produk yang siap dikirim.',
    },
];

const IndexPlantSection = memo(function IndexPlantSection() {
    const navigate = useNavigate();
    const { setBreadcrumbItems } = useBreadcrumb();
    const [form] = Form.useForm();

    const [data, setData] = useState(initialData);
    const [actionMode, setActionMode] = useState('list');
    const [editingKey, setEditingKey] = useState('');
    const [isModalVisible, setIsModalVisible] = useState(false);
    const [readOnly, setReadOnly] = useState(false);

    // Mock API function
    const getAllPlantSection = async (params) => {
        const { page = 1, limit = 10, search = '' } = Object.fromEntries(params.entries());
        
        let filteredData = data;
        if (search) {
            filteredData = data.filter(item => 
                item.nama_plant.toLowerCase().includes(search.toLowerCase()) ||
                item.kode_plant.toLowerCase().includes(search.toLowerCase()) ||
                item.lokasi_plant.toLowerCase().includes(search.toLowerCase())
            );
        }

        const start = (page - 1) * limit;
        const end = start + limit;
        const paginatedData = filteredData.slice(start, end);

        return new Promise(resolve => {
            setTimeout(() => {
                resolve({
                    status: 200,
                    data: {
                        data: paginatedData,
                        total: filteredData.length,
                        paging: {
                            page: parseInt(page),
                            limit: parseInt(limit),
                            total: filteredData.length,
                        },
                    },
                });
            }, 500);
        });
    };

    useEffect(() => {
        const token = localStorage.getItem('token');
        if (token) {
            setBreadcrumbItems([
                { title: <Text strong style={{ fontSize: '14px' }}>• Master</Text> },
                { title: <Text strong style={{ fontSize: '14px' }}>Plant Section</Text> }
            ]);
        } else {
            navigate('/signin');
        }
    }, [navigate, setBreadcrumbItems]);

    useEffect(() => {
        if (actionMode === 'add' || actionMode === 'edit' || actionMode === 'preview') {
            setIsModalVisible(true);
            setReadOnly(actionMode === 'preview');
        } else {
            setIsModalVisible(false);
        }
    }, [actionMode]);

    const handleCancel = () => {
        setActionMode('list');
        setEditingKey('');
        form.resetFields();
    };

    const handleOk = () => {
        if (readOnly) {
            handleCancel();
            return;
        }
        form.validateFields()
            .then((values) => {
                let newData = [...data];
                if (editingKey) {
                    // Editing existing data
                    const index = newData.findIndex((item) => editingKey === item.key);
                    if (index > -1) {
                        const item = newData[index];
                        newData.splice(index, 1, { ...item, ...values });
                    }
                } else {
                    // Adding new data
                    const newKey = (Math.max(...data.map(item => parseInt(item.key))) + 1).toString();
                    newData = [{ key: newKey, ...values }, ...newData];
                }
                setData(newData);
                NotifAlert({
                    icon: 'success',
                    title: 'Berhasil',
                    message: 'Data Plant Section berhasil disimpan.',
                });
                handleCancel();
            })
            .catch((info) => {
                console.log('Validate Failed:', info);
            });
    };

    const handleEdit = (record) => {
        form.setFieldsValue(record);
        setEditingKey(record.key);
        setActionMode('edit');
    };

    const handlePreview = (record) => {
        form.setFieldsValue(record);
        setEditingKey(record.key);
        setActionMode('preview');
    };

    const handleDelete = (record) => {
        NotifConfirmDialog({
            icon: 'question',
            title: 'Konfirmasi',
            message: `Apakah anda yakin ingin menghapus plant section "${record.nama_plant}"?`,
            onConfirm: () => {
                const newData = data.filter((item) => item.key !== record.key);
                setData(newData);
                NotifAlert({
                    icon: 'success',
                    title: 'Berhasil',
                    message: `Plant section "${record.nama_plant}" berhasil dihapus.`,
                });
            },
        });
    };

    return (
        <React.Fragment>
            <ListPlantSection
                setActionMode={setActionMode}
                handleEdit={handleEdit}
                handleDelete={handleDelete}
                handlePreview={handlePreview}
                getAllPlantSection={getAllPlantSection}
            />
            <DetailPlantSection
                visible={isModalVisible}
                onCancel={handleCancel}
                onOk={handleOk}
                form={form}
                editingKey={editingKey}
                readOnly={readOnly}
            />
        </React.Fragment>
    );
});

export default IndexPlantSection;
