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 {   getAddOnList, createAddOn, editAddOn, updateAddOn, deleteAddon, toggleActiveInActivePackages } 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';

interface CategoryItem {
  id: string;
  title: string;
  lists: string[];
}

interface PackageFormData {
  title: string;
  description: string;
  time: string;
  price: string;
  remark: string;
  coverageType: string;
  promoPrice: string;
  categories: CategoryItem[];
}

const AddOnPackages = () => {
    const [packages, setPackages] = useState([]);
    const [loading, setLoading] = useState(true);
    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 [selectedPackage, setSelectedPackage] = useState(null);

    const isDark = useSelector((state: IRootState) => state.themeConfig.theme === 'dark' || state.themeConfig.isDarkMode);
    
    // Form state
    const emptyForm: PackageFormData = {
        title: '',
        description: '',
        time: '',
        price: '',
        remark: '',
        coverageType: '',
        promoPrice: '',
        categories: [
            {
                id: Date.now().toString(),
                title: '',
                lists: ['']
            }
        ]
    };

    const [formData, setFormData] = useState<PackageFormData>(emptyForm);

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

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

    // Fetch packages
    const fetchPackages = async () => {
    setLoading(true);
    try {
        const companyId = localStorage.getItem('company_id');
        const response = await getAddOnList(companyId);

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

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

    // Records filter/sort/paginate
 useEffect(() => {
    if (!packages || !packages.length) {
        setRecords([]);
        setTotalRecords(0);
        return;
    }
    
    let sorted = sortBy(packages, sortStatus.columnAccessor);
    sorted = sortStatus.direction === 'desc' ? sorted.reverse() : sorted;

    const filtered = sorted.filter(
        (pkg) =>
            (pkg.title || '').toLowerCase().includes(search.toLowerCase()) ||
            (pkg.description || '').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, packages]);

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

    // Add new category
    const addCategory = () => {
        setFormData(prev => ({
            ...prev,
            categories: [
                ...prev.categories,
                {
                    id: Date.now().toString(),
                    title: '',
                    lists: ['']
                }
            ]
        }));
    };

    // Update category title
    const updateCategoryTitle = (id: string, title: string) => {
        setFormData(prev => ({
            ...prev,
            categories: prev.categories.map(cat => 
                cat.id === id ? { ...cat, title } : cat
            )
        }));
    };

    // Add new list item to category
    const addListItem = (categoryId: string) => {
        setFormData(prev => ({
            ...prev,
            categories: prev.categories.map(cat => 
                cat.id === categoryId 
                    ? { ...cat, lists: [...cat.lists, ''] } 
                    : cat
            )
        }));
    };

    // Update list item
    const updateListItem = (categoryId: string, index: number, value: string) => {
        setFormData(prev => ({
            ...prev,
            categories: prev.categories.map(cat => {
                if (cat.id === categoryId) {
                    const newLists = [...cat.lists];
                    newLists[index] = value;
                    return { ...cat, lists: newLists };
                }
                return cat;
            })
        }));
    };

    // Remove category
    const removeCategory = (id: string) => {
        if (formData.categories.length <= 1) return;
        
        setFormData(prev => ({
            ...prev,
            categories: prev.categories.filter(cat => cat.id !== id)
        }));
    };

    // Remove list item
    const removeListItem = (categoryId: string, index: number) => {
        setFormData(prev => ({
            ...prev,
            categories: prev.categories.map(cat => {
                if (cat.id === categoryId && cat.lists.length > 1) {
                    return { 
                        ...cat, 
                        lists: cat.lists.filter((_, i) => i !== index) 
                    };
                }
                return cat;
            })
        }));
    };

    // Add Package
    const handleAddSubmit = async (e) => {
        e.preventDefault();
        try {
         const payload = {
  ...formData,
  categories: formData.categories
    .filter(cat => cat.title.trim() !== '')
    .map(cat => ({
      title: cat.title, // Only include title
      lists: cat.lists.filter(list => list.trim() !== '')
    }))
    .filter(cat => cat.lists.length > 0)
};
delete payload.categories.id; // Remove the id field
            
            const res = await createAddOn(payload);
            if (res.status === true) {
                showMessage('Package created successfully', 'success');
                setAddModalOpen(false);
                setFormData(emptyForm);
                fetchPackages();
            } else {
                showMessage(res.message || 'Failed to create package', 'error');
            }
        } catch (err) {
            showMessage('Error while creating package', 'error');
        }
    };

    // Edit Package - Fetch package data
    const handleEditClick = async (packageId) => {
        if (!packageId) {
            showMessage('Package ID is missing', 'error');
            return;
        }
        setEditLoading(true);  
        
        try {
            const response = await editAddOn(packageId);
            if (response.status === true) {
                const packageData = response.data;
                setFormData({
                    title: packageData.title || '',
                    description: packageData.description || '',
                    time: packageData.time || '',
                    price: packageData.price || '',
                    remark: packageData.remark || '',
                    coverageType: packageData.coverageType || '',
                    promoPrice: packageData.promoPrice || '',
                    categories: packageData.categories && packageData.categories.length > 0 
                        ? packageData.categories.map(cat => ({ ...cat, id: Date.now().toString() + Math.random() })) // Assign new IDs if needed
                        : [{ id: Date.now().toString(), title: '', lists: [''] }]
                });
                setSelectedPackage(packageData);
                setEditModalOpen(true);
            } else {
                showMessage(response.message || 'Failed to fetch package data', 'error');
            }
        } catch (err) {
            console.error('Error fetching package:', err);
            showMessage('Error while fetching package data', 'error');
            setEditLoading(false);  
        } finally {
            setEditLoading(false);
        }
    };

    // Update Package
    const handleUpdateSubmit = async (e) => {
        e.preventDefault();
        try {
            const payload = {
                ...formData,
                id: selectedPackage._id,
                // Filter out empty lists and categories
                categories: formData.categories
                    .filter(cat => cat.title.trim() !== '')
                    .map(cat => ({
                        ...cat,
                        lists: cat.lists.filter(list => list.trim() !== '')
                    }))
                    .filter(cat => cat.lists.length > 0)
            };
            
            const res = await updateAddOn(payload);
            if (res.status === true) {
                showMessage('Package updated successfully', 'success');
                setEditModalOpen(false);
                setFormData(emptyForm);
                setSelectedPackage(null);
                fetchPackages();
            } else {
                showMessage(res.message || 'Failed to update package', 'error');
            }
        } catch (err) {
            showMessage('Error while updating package', 'error');
        }
    };

    // Delete Package with SweetAlert2 confirmation
    const handleDeleteClick = async (pkg) => {
        const result = await Swal.fire({
            title: 'Are you sure?',
            text: `AddOn "${pkg.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 deleteAddon(pkg._id);
                if (res.status === true) {
                    showMessage('Package deleted successfully', 'success');
                    
                    // Update local state immediately for better UX
                    const updatedPackages = packages.filter(item => item._id !== pkg._id);
                    setPackages(updatedPackages);
                    
                    // Show success confirmation
                    await Swal.fire({
                        title: 'Deleted!',
                        text: 'Your package 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 package', 'error');
                }
            } catch (err) {
                showMessage('Error while deleting package', 'error');
            }
        }
    };
    const handleStatusToggle = async (packageId, currentStatus) => {
        try {
            const newStatus = currentStatus === 'active' ? 'inactive' : 'active';
            
            const payload = {
                id: packageId,
                type: 'addon',
                status: newStatus
            };
            
            // Assuming you have this API function
            const res = await toggleActiveInActivePackages(payload);
            
            if (res.status === true) {
                showMessage(`AddOn ${newStatus === 'active' ? 'activated' : 'deactivated'} successfully`, 'success');
                
                // Update local state immediately for better UX
                setPackages(prevPackages => 
                    prevPackages.map(pkg => 
                        pkg._id === packageId ? { ...pkg, status: newStatus } : pkg
                    )
                );
            } else {
                showMessage(res.message || 'Failed to update package status', 'error');
            }
        } catch (err) {
            showMessage('Error while updating package 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">AddOn 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 AddOn..."
                            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 AddOn
                    </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: 'description', 
                                title: 'Description',
                                render: ({ description }) => (
                                  <Tippy content={description}>
                                    <div className="max-w-xs truncate">{description}</div>
                                    </Tippy>
                                )
                            },
                            { accessor: 'time', title: 'Time' },
                            { 
                                accessor: 'price', 
                                title: 'Price', 
                                render: ({ price }) => `$${parseFloat(price).toFixed(2)}` 
                            },
                                 {
                            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={() => { setSelectedPackage(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 Package
                            </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 package title"
                                        required
                                    />
                                </div>

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

                           

                                {/* Time and Price */}
   <div className="grid grid-cols-4 gap-4">
  {/* Time Field (1/4 width) */}
  <div className="col-span-1">
    <label
      htmlFor="time"
      className="block text-sm font-medium mb-1 dark:text-white-light"
    >
      Time
    </label>
    <input
      id="time"
      type="text"
      name="time"
      value={formData.time}
      onChange={handleInputChange}
      className="form-input w-full dark:bg-gray-700 dark:text-white"
      placeholder="e.g., 30 minutes"
    />
  </div>

  {/* Price, Coverage Type, Promo Price (3/4 width) */}
  <div className="col-span-3 grid grid-cols-3 gap-4">
    <div>
      <label
        htmlFor="price"
        className="block text-sm font-medium mb-1 dark:text-white-light"
      >
        Price
      </label>
      <input
        id="price"
        type="number"
        name="price"
        value={formData.price}
        onChange={handleInputChange}
        className="form-input w-full dark:bg-gray-700 dark:text-white"
        placeholder="0.00"
        step="0.01"
        required
      />
    </div>

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

    <div>
      <label
        htmlFor="promoPrice"
        className="block text-sm font-medium mb-1 dark:text-white-light"
      >
        Promo Price
      </label>
      <input
        id="promoPrice"
        type="text"
        name="promoPrice"
        value={formData.promoPrice}
        onChange={handleInputChange}
        className="form-input w-full dark:bg-gray-700 dark:text-white"
        placeholder="0.00"
        step="0.01"
      />
    </div>
  </div>
</div>



                                {/* Categories and Lists */}
                                <div>
                                    <div className="flex justify-between items-center mb-2">
                                        <span className="block text-sm font-medium dark:text-white-light">Categories & Lists</span>
                                        <button 
                                            type="button" 
                                            onClick={addCategory}
                                            className="btn btn-sm btn-primary"
                                        >
                                            + Add Category
                                        </button>
                                    </div>
                                    
                                    {formData.categories.map((category, catIndex) => (
                                        <div key={category.id} className="mb-4 p-4 border rounded-lg dark:border-gray-600">
                                            <div className="flex items-center gap-2 mb-3">
                                                <input
                                                    type="text"
                                                    value={category.title}
                                                    onChange={(e) => updateCategoryTitle(category.id, e.target.value)}
                                                    className="form-input flex-1 dark:bg-gray-700 dark:text-white"
                                                    placeholder="Category title"
                                                />
                                                <button 
                                                    type="button" 
                                                    onClick={() => removeCategory(category.id)}
                                                    className="btn btn-sm btn-danger"
                                                    disabled={formData.categories.length <= 1}
                                                >
                                                    ×
                                                </button>
                                                <button 
                                                    type="button" 
                                                    onClick={() => addListItem(category.id)}
                                                    className="btn btn-sm btn-primary"
                                                >
                                                    + Add List
                                                </button>
                                            </div>
                                            
                                            <div className="space-y-2">
                                                {category.lists.map((list, listIndex) => (
                                                    <div key={listIndex} className="flex items-center gap-2">
                                                        <input
                                                            type="text"
                                                            value={list}
                                                            onChange={(e) => updateListItem(category.id, listIndex, e.target.value)}
                                                            className="form-input flex-1 dark:bg-gray-700 dark:text-white"
                                                            placeholder="List item"
                                                        />
                                                        <button 
                                                            type="button" 
                                                            onClick={() => removeListItem(category.id, listIndex)}
                                                            className="btn btn-sm btn-danger"
                                                            disabled={category.lists.length <= 1}
                                                        >
                                                            ×
                                                        </button>
                                                    </div>
                                                ))}
                                            </div>
                                        </div>
                                    ))}
                                </div>

     {/* Remark */}
                                <div>
                                    <label htmlFor="remark" className="block text-sm font-medium mb-1 dark:text-white-light">
                                        Remark
                                    </label>
                                    <textarea
                                        id="remark"
                                        name="remark"
                                        value={formData.remark}
                                        onChange={handleInputChange}
                                        className="form-textarea w-full dark:bg-gray-700 dark:text-white"
                                        rows={3}
                                        placeholder="Enter remark"
                                    />
                                </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 - Similar structure to Add Modal but with pre-filled data */}
            <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 AddOn
                            </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 package title"
                                        required
                                    />
                                </div>

                                {/* Description */}
                                <div>
                                    <label htmlFor="editDescription" className="block text-sm font-medium mb-1 dark:text-white-light">
                                        Description
                                    </label>
                                    <textarea
                                        id="editDescription"
                                        name="description"
                                        value={formData.description}
                                        onChange={handleInputChange}
                                        className="form-textarea w-full dark:bg-gray-700 dark:text-white"
                                        rows={3}
                                        placeholder="Enter description"
                                    />
                                </div>

                            

                                {/* Time and Price */}
                                <div className="grid grid-cols-4 gap-4">
  {/* Time Field (1/4 width) */}
  <div className="col-span-1">
    <label
      htmlFor="editTime"
      className="block text-sm font-medium mb-1 dark:text-white-light"
    >
      Time
    </label>
    <input
      id="editTime"
      type="text"
      name="time"
      value={formData.time}
      onChange={handleInputChange}
      className="form-input w-full dark:bg-gray-700 dark:text-white"
      placeholder="e.g., 30 minutes"
    />
  </div>

  {/* Price, Coverage Type, Promo Price (3/4 width) */}
  <div className="col-span-3 grid grid-cols-3 gap-4">
    <div>
      <label
        htmlFor="editPrice"
        className="block text-sm font-medium mb-1 dark:text-white-light"
      >
        Price
      </label>
      <input
        id="editPrice"
        type="number"
        name="price"
        value={formData.price}
        onChange={handleInputChange}
        className="form-input w-full dark:bg-gray-700 dark:text-white"
        placeholder="0.00"
        step="0.01"
        required
      />
    </div>

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

    <div>
      <label
        htmlFor="editPromoPrice"
        className="block text-sm font-medium mb-1 dark:text-white-light"
      >
        Promo Price
      </label>
      <input
        id="editPromoPrice"
        type="text"
        name="promoPrice"
        value={formData.promoPrice}
        onChange={handleInputChange}
        className="form-input w-full dark:bg-gray-700 dark:text-white"
        placeholder="0.00"
        step="0.01"
      />
    </div>
  </div>
</div>

                                {/* Categories and Lists */}
                                <div>
                                    <div className="flex justify-between items-center mb-2">
                                        <span className="block text-sm font-medium dark:text-white-light">Categories & Lists</span>
                                        <button 
                                            type="button" 
                                            onClick={addCategory}
                                            className="btn btn-sm btn-primary"
                                        >
                                            + Add Category
                                        </button>
                                    </div>
                                    
                                    {formData.categories.map((category, catIndex) => (
                                        <div key={category.id} className="mb-4 p-4 border rounded-lg dark:border-gray-600">
                                            <div className="flex items-center gap-2 mb-3">
                                                <input
                                                    type="text"
                                                    value={category.title}
                                                    onChange={(e) => updateCategoryTitle(category.id, e.target.value)}
                                                    className="form-input flex-1 dark:bg-gray-700 dark:text-white"
                                                    placeholder="Category title"
                                                />
                                                <button 
                                                    type="button" 
                                                    onClick={() => removeCategory(category.id)}
                                                    className="btn btn-sm btn-danger"
                                                    disabled={formData.categories.length <= 1}
                                                >
                                                    ×
                                                </button>
                                                <button 
                                                    type="button" 
                                                    onClick={() => addListItem(category.id)}
                                                    className="btn btn-sm btn-primary"
                                                >
                                                    + Add List
                                                </button>
                                            </div>
                                            
                                            <div className="space-y-2">
                                                {category.lists.map((list, listIndex) => (
                                                    <div key={listIndex} className="flex items-center gap-2">
                                                        <input
                                                            type="text"
                                                            value={list}
                                                            onChange={(e) => updateListItem(category.id, listIndex, e.target.value)}
                                                            className="form-input flex-1 dark:bg-gray-700 dark:text-white"
                                                            placeholder="List item"
                                                        />
                                                        <button 
                                                            type="button" 
                                                            onClick={() => removeListItem(category.id, listIndex)}
                                                            className="btn btn-sm btn-danger"
                                                            disabled={category.lists.length <= 1}
                                                        >
                                                            ×
                                                        </button>
                                                    </div>
                                                ))}
                                            </div>
                                        </div>
                                    ))}
                                </div>


    {/* Remark */}
                                <div>
                                    <label htmlFor="editRemark" className="block text-sm font-medium mb-1 dark:text-white-light">
                                        Remark
                                    </label>
                                    <textarea
                                        id="editRemark"
                                        name="remark"
                                        value={formData.remark}
                                        onChange={handleInputChange}
                                        className="form-textarea w-full dark:bg-gray-700 dark:text-white"
                                        rows={3}
                                        placeholder="Enter remark"
                                    />
                                </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">
          AddOn Details
        </Dialog.Title>

        {selectedPackage && (
          <div className="space-y-6">
            {/* Top Section: Title & Description */}
            <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">
                  {selectedPackage.title}
                </p>
              </div>
              <div>
                <label className="block text-sm font-medium text-gray-600 dark:text-gray-400">
                  Description
                </label>
                <p className="mt-1 dark:text-white-light">
                  {selectedPackage.description}
                </p>
              </div>
            </div>

      

            {/* Middle Section: Time & Price */}
            <div className="grid grid-cols-1 md:grid-cols-4 gap-6 bg-gray-50 dark:bg-gray-700 p-4 rounded-lg">
              <div>
                <label className="block text-sm font-medium text-gray-600 dark:text-gray-300">
                  Time
                </label>
                <p className="mt-1 font-semibold dark:text-white-light">
                  {selectedPackage.time}
                </p>
              </div>
              <div>
                <label className="block text-sm font-medium text-gray-600 dark:text-gray-300">
                  Price
                </label>
                <p className="mt-1 font-semibold dark:text-white-light">
                  ${parseFloat(selectedPackage.price).toFixed(2)}
                </p>
              </div>
              <div>
                <label className="block text-sm font-medium text-gray-600 dark:text-gray-300">
                  Coverage Type
                </label>
                <p className="mt-1 font-semibold dark:text-white-light">
                  {selectedPackage.coverageType}
                </p>
              </div>
              <div>
                <label className="block text-sm font-medium text-gray-600 dark:text-gray-300">
                  Promo Price
                </label>
                <p className="mt-1 font-semibold dark:text-white-light">
                  ${parseFloat(selectedPackage.promoPrice || 0).toFixed(2)}
                </p>
              </div>
            </div>

            {/* Categories Section */}
            {selectedPackage.categories?.length > 0 && (
              <div>
                <label className="block text-sm font-medium text-gray-600 dark:text-gray-300 mb-2">
                  Categories & Lists
                </label>
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  {selectedPackage.categories.map((category, catIndex) => (
                    <div
                      key={catIndex}
                      className="p-4 border rounded-lg dark:border-gray-600"
                    >
                      <h4 className="font-medium dark:text-white-light mb-2">
                        {category.title}
                      </h4>
                      <ul className="list-disc list-inside space-y-1 text-sm">
                        {category.lists.map((list, listIndex) => (
                          <li
                            key={listIndex}
                            className="dark:text-white-light"
                          >
                            {list}
                          </li>
                        ))}
                      </ul>
                    </div>
                  ))}
                </div>
              </div>
            )}
                  {/* Remark */}
            <div>
              <label className="block text-sm font-medium text-gray-600 dark:text-gray-400">
                Remark
              </label>
              <p className="mt-1 dark:text-white-light">
                {selectedPackage.remark}
              </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 AddOnPackages;