import { useEffect, useState, Fragment } from 'react';
import { DataTable } from 'mantine-datatable';
import sortBy from 'lodash/sortBy';
import Swal from 'sweetalert2';
import { showMessage } from '../../general';
import { base_url, getHeadingsList, createHeadings, updateHeadings, editHeadings, deleteHeadings } from '../../API';
import Tippy from '@tippyjs/react';
import 'tippy.js/dist/tippy.css';
import { Dialog, Transition } from '@headlessui/react';
import { useSelector } from 'react-redux';
import { IRootState } from '../../store';
import { useLoader } from '../../store/LoaderProvider';

interface HeadingFormData {
    title: string;
    type: string;
    multiselect: boolean;
}

const HeadingManagement = () => {
    const [headings, setHeadings] = useState([]);
    const [loading, setLoading] = useState(false);
    const [error, setError] = useState(null);

    // Table state
    const PAGE_SIZES = [10, 20, 30, 50, 100];
    const [page, setPage] = useState(1);
    const [pageSize, setPageSize] = useState(PAGE_SIZES[0]);
    const [records, setRecords] = useState([]);
    const [totalRecords, setTotalRecords] = useState(0);
    const [search, setSearch] = useState('');
    const [sortStatus, setSortStatus] = useState({
        columnAccessor: 'title',
        direction: 'asc',
    });
    const [editLoading, setEditLoading] = useState(false);
    const [viewLoading, setViewLoading] = useState(false);

    // Modal states
    const [addModalOpen, setAddModalOpen] = useState(false);
    const [editModalOpen, setEditModalOpen] = useState(false);
    const [viewModalOpen, setViewModalOpen] = useState(false);
    const [selectedHeading, setSelectedHeading] = useState(null);

    const isDark = useSelector((state: IRootState) => state.themeConfig.theme === 'dark' || state.themeConfig.isDarkMode);

       const { showLoader, hideLoader } = useLoader();

    // Form state
    const getEmptyForm = (): HeadingFormData => ({
        title: '',
        type: '',
        multiselect: false,
    });

    const [formData, setFormData] = useState<HeadingFormData>(getEmptyForm());

    // Reset form when add modal opens
    useEffect(() => {
        if (addModalOpen) {
            setFormData(getEmptyForm());
        }
    }, [addModalOpen]);

    // Cleanup on unmount
    useEffect(() => {
        return () => {
            setFormData(getEmptyForm());
            setSelectedHeading(null);
        };
    }, []);

    // Fetch headings
    const fetchHeadings = async () => {
        showLoader( );
        try {
            const companyId = localStorage.getItem('company_id');
            const response = await getHeadingsList(companyId);

            if (response.status === true) {
                // Handle both array and empty response formats
                const headingsData = Array.isArray(response.data) ? response.data : [];
                setHeadings(headingsData);
                setTotalRecords(headingsData.length);
            } else {
                // Handle "No records found" case
                if (response.message === "No records found") {
                    setHeadings([]);
                    setTotalRecords(0);
                } else {
                    setError(response.message || 'Failed to load heading data.');
                }
            }
        } catch (err) {
            setError(err.message);
            setHeadings([]);
            setTotalRecords(0);
        } finally {
            hideLoader();
        }
    };

    useEffect(() => {
        fetchHeadings();
    }, []);

    // Records filter/sort/paginate
    useEffect(() => {
        if (!headings || !headings.length) {
            setRecords([]);
            setTotalRecords(0);
            return;
        }

        let sorted = sortBy(headings, sortStatus.columnAccessor);
        sorted = sortStatus.direction === 'desc' ? sorted.reverse() : sorted;

        const filtered = sorted.filter(
            (hdg) =>
                (hdg.title || '').toLowerCase().includes(search.toLowerCase()) ||
                (hdg.type || '').toLowerCase().includes(search.toLowerCase())
        );

        const newTotal = filtered.length;
        const maxPage = Math.max(1, Math.ceil(newTotal / pageSize));

        if (page > maxPage) {
            setPage(maxPage);
            return;
        }

        const from = (page - 1) * pageSize;
        const to = from + pageSize;
        setRecords(filtered.slice(from, to));
        setTotalRecords(newTotal);
    }, [page, pageSize, search, sortStatus, headings]);

    // Input handler
    const handleInputChange = (e) => {
        const { name, value } = e.target;
        setFormData((prev) => ({
            ...prev,
            [name]: value,
        }));
    };

    const handleCheckboxChange = (e) => {
        const { name, checked } = e.target;
        setFormData((prev) => ({
            ...prev,
            [name]: checked,
        }));
    };

    // Add Heading
    const handleAddSubmit = async (e) => {
        e.preventDefault();
        try {
            const payload = {
                title: formData.title,
                type: formData.type,
                multiselect: formData.multiselect,
            }

            const res = await createHeadings(payload);
            if (res.status === true) {
                showMessage('Heading created successfully', 'success');
                setAddModalOpen(false);
                setFormData(getEmptyForm());
                fetchHeadings();
            } else {
                showMessage(res.message || 'Failed to create heading', 'error');
            }
        } catch (err) {
            showMessage('Error while creating heading', 'error');
        }
    };

    // Edit Heading - Fetch heading data
    const handleEditClick = async (headingId) => {
        if (!headingId) {
            showMessage('Heading ID is missing', 'error');
            return;
        }
        setEditLoading(true);

        try {
            const response = await editHeadings(headingId);
            if (response.status === true) {
                const headingData = response.data;

                setFormData({
                    title: headingData.title || '',
                    type: headingData.type || '',
                    multiselect: headingData.multiselect || false,
                });
                setSelectedHeading(headingData);
                setEditModalOpen(true);
            } else {
                showMessage(response.message || 'Failed to fetch heading data', 'error');
            }
        } catch (err) {
            console.error('Error fetching heading:', err);
            showMessage('Error while fetching heading data', 'error');
            setEditLoading(false);
        } finally {
            setEditLoading(false);
        }
    };

    // Update Heading
    const handleUpdateSubmit = async (e) => {
        e.preventDefault();
        try {
            const payload = {
                ...formData,
                id: selectedHeading._id,
            };

            const res = await updateHeadings(payload);
            if (res.status === true) {
                showMessage('Heading updated successfully', 'success');
                setEditModalOpen(false);
                setFormData(getEmptyForm());
                setSelectedHeading(null);
                fetchHeadings();
            } else {
                showMessage(res.message || 'Failed to update heading', 'error');
            }
        } catch (err) {
            showMessage('Error while updating heading', 'error');
        }
    };

    // Delete Heading with SweetAlert2 confirmation
    const handleDeleteClick = async (hdg) => {
        const result = await Swal.fire({
            title: 'Are you sure?',
            text: `Heading "${hdg.title}" will be permanently deleted!`,
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#e7515a',
            cancelButtonColor: '#2196f3',
            confirmButtonText: 'Yes, delete it!',
            customClass: {
                confirmButton: 'bg-[#5c4d2f] text-white px-4 py-2 rounded hover:bg-[#4a3e27]',
                cancelButton: 'px-6 py-2 border border-gray-300 dark:border-gray-600 rounded-md text-secondary dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors',
                actions: 'space-x-3'
            },
            buttonsStyling: false
        });

        if (result.isConfirmed) {
            try {
                const res = await deleteHeadings(hdg._id);
                if (res.status === true) {
                    showMessage('Heading deleted successfully', 'success');

                    // Update local state immediately for better UX
                    const updatedHeadings = headings.filter(item => item._id !== hdg._id);
                    setHeadings(updatedHeadings);

                    // Show success confirmation
                    Swal.fire({
                        title: 'Deleted!',
                        text: 'Your heading has been deleted.',
                        icon: 'success',
                        confirmButtonText: 'OK',
                        customClass: {
                            confirmButton: 'bg-[#5c4d2f] text-white px-4 py-2 rounded hover:bg-[#4a3e27]'
                        },
                        buttonsStyling: false
                    });
                } else {
                    showMessage(res.message || 'Failed to delete heading', 'error');
                }
            } catch (err) {
                showMessage('Error while deleting heading', 'error');
            }
        }
    };

    // Toggle Heading Status
    // const handleStatusToggle = async (headingId, currentStatus) => {
    //     try {
    //         const newStatus = currentStatus === 'active' ? 'inactive' : 'active';

    //         const payload = {
    //             id: headingId,
    //             type: 'heading',
    //             status: newStatus
    //         };

    //         // Assuming you have this API function
    //         const res = await toggleActiveInActiveHeadings(payload);

    //         if (res.status === true) {
    //             showMessage(`Heading ${newStatus === 'active' ? 'activated' : 'deactivated'} successfully`, 'success');

    //             // Update local state immediately for better UX
    //             setHeadings(prevHeadings => 
    //                 prevHeadings.map(hdg => 
    //                     hdg._id === headingId ? { ...hdg, status: newStatus } : hdg
    //                 )
    //             );
    //         } else {
    //             showMessage(res.message || 'Failed to update heading status', 'error');
    //         }
    //     } catch (err) {
    //         showMessage('Error while updating heading status', 'error');
    //     }
    // };

    return (
        <div className="panel">
            <div className="flex md:items-center md:flex-row flex-col mb-5 gap-5">
                <div>
                    <h5 className="font-semibold text-lg dark:text-white-light">Heading Management</h5>
                </div>
                <div className="ltr:ml-auto rtl:mr-auto flex items-center gap-4">
                    <div className="relative flex-1">
                        <input
                            type="text"
                            className="form-input w-full pl-10 pr-4 py-2 rounded-lg"
                            placeholder="Search headings..."
                            value={search}
                            onChange={(e) => setSearch(e.target.value)}
                        />
                        <div className="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
                            <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                            </svg>
                        </div>
                    </div>

                    <button className="btn btn-primary" onClick={() => setAddModalOpen(true)}>
                        + Add Heading
                    </button>
                </div>
            </div>

            {/* Table */}
            {loading && (
                <div className="fixed inset-0 flex justify-center items-center bg-black bg-opacity-50 z-[9999]">
                    <div className="w-16 h-16 border-t-4 border-primary-DEFAULT border-solid rounded-full animate-spin"></div>
                </div>
            )}

            <div className="datatables">
                <DataTable
                    highlightOnHover
                    className="whitespace-nowrap table-hover rounded-lg overflow-hidden"
                    records={records}
                    columns={[
                        { accessor: 'title', title: 'Title', sortable: true },
                        { accessor: 'type', title: 'Type', sortable: true },
                        {
                            accessor: 'multiselect',
                            title: 'Multiselect',
                            sortable: true,
                            render: ({ multiselect }) => multiselect ? 'Yes' : 'No'
                        },
//                         {
//                             accessor: 'status',
//                             title: 'Status',
//                             sortable: true,
//                             render: ({ _id, status }) => (
//                                 <label className="relative inline-flex items-center cursor-pointer">
//                                     <input
//                                         type="checkbox"
//                                         className="sr-only peer"
//                                         checked={status === 'active'}
//                                         onChange={() => handleStatusToggle(_id, status)}
//                                     />
//                                     <div className="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 
// dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 
// peer-checked:after:translate-x-full peer-checked:after:border-white 
// after:content-[''] after:absolute after:top-[2px] after:left-[2px] 
// after:bg-white after:border-gray-300 after:border after:rounded-full 
// after:h-5 after:w-5 after:transition-all dark:border-gray-600 
// peer-checked:bg-primary"></div>
//                                     <span className="ml-2 text-sm font-medium text-gray-900 dark:text-gray-300">
//                                         {status === 'active' ? 'Active' : 'Inactive'}
//                                     </span>
//                                 </label>
//                             )
//                         },
                        {
                            accessor: 'actions',
                            title: 'Actions',
                            render: (row) => (
                                <div className="flex items-center ">
                                    <Tippy content="View">
                                        <button
                                            className="p-2 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors duration-200"
                                            onClick={() => { setSelectedHeading(row); setViewModalOpen(true); }}
                                        >
                                            <svg className="w-5 h-5 text-gray-500 hover:text-primary dark:text-gray-300 dark:hover:text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
                                            </svg>
                                        </button>
                                    </Tippy>
                                    <Tippy content="Edit">
                                        <button
                                            className="p-2 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors duration-200"
                                            onClick={() => handleEditClick(row._id)}
                                        >
                                            <svg className="w-5 h-5 text-gray-500 hover:text-primary dark:text-gray-300 dark:hover:text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
                                            </svg>
                                        </button>
                                    </Tippy>
                                    <Tippy content="Delete">
                                        <button
                                            className="p-2 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors duration-200"
                                            onClick={() => handleDeleteClick(row)}
                                        >
                                            <svg className="w-5 h-5 text-gray-500 hover:text-danger dark:text-gray-300 dark:hover:text-danger" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                                            </svg>
                                        </button>
                                    </Tippy>
                                </div>
                            ),
                        },
                    ]}
                    totalRecords={totalRecords}
                    recordsPerPage={pageSize}
                    page={page}
                    onPageChange={setPage}
                    recordsPerPageOptions={PAGE_SIZES}
                    onRecordsPerPageChange={setPageSize}
                    sortStatus={sortStatus}
                    onSortStatusChange={setSortStatus}
                    rowClassName={(record) =>
                        `transition-colors duration-100 ${isDark ? 'hover:bg-gray-700' : 'hover:bg-gray-50'}`
                    }
                    paginationText={({ from, to, totalRecords }) => (
                        <span className="dark:text-white-light">
                            Showing {from} to {to} of {totalRecords} entries
                        </span>
                    )}
                />
            </div>

            {/* Add Modal */}
            <Transition appear show={addModalOpen} as={Fragment}>
                <Dialog as="div" open={addModalOpen} onClose={() => setAddModalOpen(false)} className="relative z-50">
                    <div className="fixed inset-0 bg-black bg-opacity-30" />
                    <div className="fixed inset-0 flex items-center justify-center p-4">
                        <Dialog.Panel className="bg-white dark:bg-gray-800 w-full max-w-2xl rounded-xl shadow-lg p-6 max-h-[90vh] overflow-y-auto">
                            <Dialog.Title className="text-lg font-semibold mb-4 dark:text-white-light">
                                Add New Heading
                            </Dialog.Title>

                            <form onSubmit={handleAddSubmit} className="space-y-4">
                                {/* Title */}
                                <div>
                                    <label htmlFor="title" className="block text-sm font-medium mb-1 dark:text-white-light">
                                        Title
                                    </label>
                                    <input
                                        id="title"
                                        type="text"
                                        name="title"
                                        value={formData.title}
                                        onChange={handleInputChange}
                                        className="form-input w-full dark:bg-gray-700 dark:text-white"
                                        placeholder="Enter title"
                                        required
                                    />
                                </div>

                                {/* Type */}
                                <div>
                                    <label htmlFor="type" className="block text-sm font-medium mb-1 dark:text-white-light">
                                        Type
                                    </label>
                                    <input
                                        id="type"
                                        type="text"
                                        name="type"
                                        value={formData.type}
                                        onChange={handleInputChange}
                                        className="form-input w-full dark:bg-gray-700 dark:text-white"
                                        placeholder="Enter type"
                                        required
                                    />
                                </div>

                                {/* Multiselect */}
                                <div className="flex items-center">
                                    <input
                                        id="multiselect"
                                        name="multiselect"
                                        type="checkbox"
                                        checked={formData.multiselect}
                                        onChange={handleCheckboxChange}
                                        className="form-checkbox rounded"
                                    />
                                    <label htmlFor="multiselect" className="ml-2 text-sm font-medium dark:text-white-light">
                                        Allow Multiselect
                                    </label>
                                </div>

                                {/* Actions */}
                                <div className="flex justify-end gap-3 mt-4">
                                    <button
                                        type="button"
                                        onClick={() => setAddModalOpen(false)}
                                        className="btn btn-outline-danger dark:text-white-light"
                                    >
                                        Cancel
                                    </button>
                                    <button type="submit" className="btn btn-primary">Save</button>
                                </div>
                            </form>
                        </Dialog.Panel>
                    </div>
                </Dialog>
            </Transition>

            {/* Edit Modal */}
            <Transition appear show={editModalOpen} as={Fragment}>
                <Dialog as="div" open={editModalOpen} onClose={() => setEditModalOpen(false)} className="relative z-50">
                    <div className="fixed inset-0 bg-black bg-opacity-30" />
                    <div className="fixed inset-0 flex items-center justify-center p-4">
                        <Dialog.Panel className="bg-white dark:bg-gray-800 w-full max-w-2xl rounded-xl shadow-lg p-6 max-h-[90vh] overflow-y-auto">
                            <Dialog.Title className="text-lg font-semibold mb-4 dark:text-white-light">
                                Edit Heading
                            </Dialog.Title>

                            <form onSubmit={handleUpdateSubmit} className="space-y-4">
                                {/* Title */}
                                <div>
                                    <label htmlFor="editTitle" className="block text-sm font-medium mb-1 dark:text-white-light">
                                        Title
                                    </label>
                                    <input
                                        id="editTitle"
                                        type="text"
                                        name="title"
                                        value={formData.title}
                                        onChange={handleInputChange}
                                        className="form-input w-full dark:bg-gray-700 dark:text-white"
                                        placeholder="Enter title"
                                        required
                                    />
                                </div>

                                {/* Type */}
                                <div>
                                    <label htmlFor="editType" className="block text-sm font-medium mb-1 dark:text-white-light">
                                        Type
                                    </label>
                                    <input
                                        id="editType"
                                        type="text"
                                        name="type"
                                        value={formData.type}
                                        onChange={handleInputChange}
                                        className="form-input w-full dark:bg-gray-700 dark:text-white"
                                        placeholder="Enter type"
                                        required
                                    />
                                </div>

                                {/* Multiselect */}
                                <div className="flex items-center">
                                    <input
                                        id="multiselect"
                                        name="multiselect"
                                        type="checkbox"
                                        checked={formData.multiselect}
                                        onChange={handleCheckboxChange}
                                        className="form-checkbox rounded"
                                    />
                                    <label htmlFor="multiselect" className="ml-2 text-sm font-medium dark:text-white-light">
                                        Allow Multiselect
                                    </label>
                                </div>

                                {/* Actions */}
                                <div className="flex justify-end gap-3 mt-4">
                                    <button
                                        type="button"
                                        onClick={() => setEditModalOpen(false)}
                                        className="btn btn-outline-danger dark:text-white-light"
                                    >
                                        Cancel
                                    </button>
                                    <button type="submit" className="btn btn-primary">Update</button>
                                </div>
                            </form>
                        </Dialog.Panel>
                    </div>
                </Dialog>
            </Transition>

            {/* View Modal */}
            <Transition appear show={viewModalOpen} as={Fragment}>
                <Dialog
                    as="div"
                    open={viewModalOpen}
                    onClose={() => setViewModalOpen(false)}
                    className="relative z-50"
                >
                    <div className="fixed inset-0 bg-black bg-opacity-30" />
                    <div className="fixed inset-0 flex items-center justify-center p-4">
                        <Dialog.Panel className="bg-white dark:bg-gray-800 w-full max-w-3xl rounded-xl shadow-lg p-6">
                            <Dialog.Title className="text-xl font-semibold mb-6 dark:text-white-light border-b pb-3">
                                Heading Details
                            </Dialog.Title>

                            {selectedHeading && (
                                <div className="space-y-6">
                                    {/* Top Section: Title & Type */}
                                    <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                                        <div>
                                            <label className="block text-sm font-medium text-gray-600 dark:text-gray-400">
                                                Title
                                            </label>
                                            <p className="mt-1 text-lg font-medium dark:text-white-light">
                                                {selectedHeading.title}
                                            </p>
                                        </div>
                                        <div>
                                            <label className="block text-sm font-medium text-gray-600 dark:text-gray-400">
                                                Type
                                            </label>
                                            <p className="mt-1 dark:text-white-light">
                                                {selectedHeading.type}
                                            </p>
                                        </div>
                                    </div>

                                    {/* Multiselect */}
                                    <div>
                                        <label className="block text-sm font-medium text-gray-600 dark:text-gray-400">
                                            Multiselect
                                        </label>
                                        <p className="mt-1 dark:text-white-light">
                                            {selectedHeading.multiselect ? 'Yes' : 'No'}
                                        </p>
                                    </div>

                                    {/* Footer */}
                                    <div className="flex justify-end pt-4 border-t">
                                        <button
                                            type="button"
                                            onClick={() => setViewModalOpen(false)}
                                            className="btn btn-primary"
                                        >
                                            Close
                                        </button>
                                    </div>
                                </div>
                            )}
                        </Dialog.Panel>
                    </div>
                </Dialog>
            </Transition>
        </div>
    );
};

export default HeadingManagement;