// import { Fragment } from 'react';
// import { DataTable, DataTableSortStatus } from 'mantine-datatable';
// import { useEffect, useState } from 'react';
// import Tippy from '@tippyjs/react';
// import 'tippy.js/dist/tippy.css';
// import sortBy from 'lodash/sortBy';
// import { useDispatch, useSelector } from 'react-redux';
// import { IRootState } from '../../store';
// import { setPageTitle } from '../../store/themeConfigSlice';
// import Swal from 'sweetalert2';
// import { showMessage } from '../../general';
// import { Dialog, Transition } from '@headlessui/react';
// import { FaEdit, FaTrash, FaKey, FaPlus, FaCopy } from 'react-icons/fa';
// import { HiEye, HiEyeOff } from 'react-icons/hi';
// import { viewAPIKEY, CreateAPIKEY, deleteAPIKEY, editAPIKEY, updateAPIKEY } from '../../API';

// const ApiKeyManagement = () => {
//     const dispatch = useDispatch();
//     const isDark = useSelector((state: IRootState) => state.themeConfig.theme === 'dark' || state.themeConfig.isDarkMode);

//     const PAGE_SIZES = [10, 20, 30, 50, 100];
//     const [page, setPage] = useState(1);
//     const [pageSize, setPageSize] = useState(PAGE_SIZES[0]);
//     const [initialRecords, setInitialRecords] = useState<any[]>([]);
//     const [recordsData, setRecordsData] = useState<any[]>([]);
//     const [totalRecords, setTotalRecords] = useState(0);
//     const [search, setSearch] = useState('');
//     const [sortStatus, setSortStatus] = useState<DataTableSortStatus>({ columnAccessor: 'name', direction: 'asc' });
//     const [loading, setLoading] = useState(false);
//     const [showKey, setShowKey] = useState(false);

//     // Modal states
//     const [addModalOpen, setAddModalOpen] = useState(false);
//     const [editModalOpen, setEditModalOpen] = useState(false);
//     const [selectedApiKey, setSelectedApiKey] = useState<any>(null);

//     // Form states
//     const [formData, setFormData] = useState({
//         name: '',
//         key: '',
//         apiurl: '' // Added apiurl field
//     });

//     useEffect(() => {
//         dispatch(setPageTitle('API Key Management'));
//         fetchApiKeys();
//     }, []);

//     const fetchApiKeys = async () => {
//         setLoading(true);
//         try {
//             const response = await viewAPIKEY();
//             if (response.status === 'success') {
//                 const formatted = response.data.map((key: any) => ({
//                     id: key._id,
//                     name: key.name,
//                     key: key.apikey,
//                     apiurl: key.apiurl || '', // Added apiurl to the data
//                     maskedKey: key.apikey.substring(0, 8) + '***************' + key.apikey.slice(-1),
//                     status: key.delete_status === 'NO' ? 'active' : 'revoked',
//                     createdAt: new Date(key.created_at).toLocaleDateString('en-US', {
//                         year: 'numeric',
//                         month: 'short',
//                         day: 'numeric'
//                     })
//                 }));

//                 setInitialRecords(formatted);
//                 setTotalRecords(formatted.length);
//             } else {
//                 showMessage('Failed to fetch API keys', 'error');
//             }
//         } catch (err) {
//             console.error(err);
//             showMessage('Failed to fetch API keys', 'error');
//         } finally {
//             setLoading(false);
//         }
//     };

//     useEffect(() => setPage(1), [pageSize]);

//     useEffect(() => {
//         let sorted = sortBy(initialRecords, sortStatus.columnAccessor);
//         sorted = sortStatus.direction === 'desc' ? sorted.reverse() : sorted;

//         const filtered = sorted.filter(item =>
//             (item.name || '').toLowerCase().includes(search.toLowerCase()) ||
//             (item.key || '').toLowerCase().includes(search.toLowerCase()) ||
//             (item.apiurl || '').toLowerCase().includes(search.toLowerCase()) || // Added apiurl to search
//             (item.status || '').toLowerCase().includes(search.toLowerCase())
//         );

//         const from = (page - 1) * pageSize;
//         const to = from + pageSize;
//         setRecordsData(filtered.slice(from, to));
//         setTotalRecords(filtered.length);
//     }, [page, pageSize, search, sortStatus, initialRecords]);

//     const handleAddApiKey = async () => {
//         try {
//             const apiKey = formData.key || 'sk_' + Math.random().toString(36).substring(2, 18) + Math.random().toString(36).substring(2, 18);
//             const payload = {
//                 name: formData.name,
//                 apikey: apiKey,
//                 apiurl: formData.apiurl // Added apiurl to payload
//             };

//             const response = await CreateAPIKEY(payload);
//             if (response.status === 'success') {
//                 showMessage('API key created successfully', 'success');
//                 fetchApiKeys();
//                 setAddModalOpen(false);
//                 setFormData({
//                     name: '',
//                     key: '',
//                     apiurl: ''
//                 });
//             } else {
//                 showMessage(response.message || 'Failed to create API key', 'error');
//             }
//         } catch (error) {
//             console.error(error);
//             showMessage('Failed to create API key', 'error');
//         }
//     };

//     const handleUpdateApiKey = async () => {
//         try {
//             const payload = {
//                 id: selectedApiKey.id,
//                 name: formData.name,
//                 apikey: selectedApiKey.key, // Using the existing key
//                 apiurl: formData.apiurl // Added apiurl to payload
//             };

//             const response = await updateAPIKEY(payload);
//             if (response.status === 'success') {
//                 showMessage('API key updated successfully', 'success');
//                 fetchApiKeys();
//                 setEditModalOpen(false);
//             } else {
//                 showMessage(response.message || 'Failed to update API key', 'error');
//             }
//         } catch (error) {
//             console.error(error);
//             showMessage('Failed to update API key', 'error');
//         }
//     };

//     const handleDeleteApiKey = async (id: string) => {
//         const result = await Swal.fire({
//             title: 'Are you sure?',
//             text: 'This API key will be permanently revoked!',
//             icon: 'warning',
//             showCancelButton: true,
//             confirmButtonColor: '#e7515a',
//             cancelButtonColor: '#2196f3',
//             confirmButtonText: 'Yes, revoke 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 response = await deleteAPIKEY(id);
//                 if (response.status === 'success') {
//                     showMessage('API key revoked successfully', 'success');
//                     fetchApiKeys();
//                 } else {
//                     showMessage(response.message || 'Failed to revoke API key', 'error');
//                 }
//             } catch (error) {
//                 console.error(error);
//                 showMessage('Failed to revoke API key', 'error');
//             }
//         }
//     };

//     const copyToClipboard = (text: string) => {
//         navigator.clipboard.writeText(text);
//         showMessage('Copied to clipboard', 'success');
//     };

//     const openAddModal = () => {
//         setFormData({
//             name: '',
//             key: '',
//             apiurl: ''
//         });
//         setAddModalOpen(true);
//     };

//     const openEditModal = (row: any) => {
//         setSelectedApiKey(row);
//         setFormData({
//             name: row.name,
//             key: row.key,
//             apiurl: row.apiurl || '' // Set apiurl value
//         });
//         setEditModalOpen(true);
//     };

//     const handleFormChange = (e: React.ChangeEvent<HTMLInputElement>) => {
//         const { name, value } = e.target;
//         setFormData(prev => ({ ...prev, [name]: value }));
//     };

//     return (
//         <div className="relative">
//             <div className="panel mt-6">
//                 <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">API Key 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 border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 focus:ring-2 focus:ring-primary-500 focus:border-primary-500 dark:focus:ring-primary-400 dark:focus:border-primary-400 transition-all duration-200"
//                                 placeholder="Search API keys..."
//                                 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 rounded-lg px-4 py-2 text-white bg-primary-DEFAULT hover:bg-primary-light border-primary-DEFAULT hover:border-primary-light transition-all duration-200 shadow-primary hover:shadow-primary-lg flex items-center gap-2"
//                             onClick={openAddModal}
//                         >
//                             <FaPlus className="text-lg" /> Add API Key
//                         </button>
//                     </div>
//                 </div>

//                 {loading ? (
//                     <div className="flex justify-center items-center h-64">
//                         <div className="w-12 h-12 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={recordsData}
//                             columns={[
//                                 {
//                                     accessor: 'name',
//                                     title: 'Name',
//                                     sortable: true,
//                                     render: ({ name }) => (
//                                         <span className="font-medium dark:text-white-light">{name}</span>
//                                     )
//                                 },
//                                 {
//                                     accessor: 'key',
//                                     title: 'API Key',
//                                     sortable: true,
//                                     render: ({ key, maskedKey }) => (
//                                         <div className="flex items-center gap-2">
//                                             <span className="text-gray-600 dark:text-gray-300 font-mono">
//                                                 {showKey ? key : maskedKey}
//                                             </span>
//                                             <button
//                                                 onClick={() => copyToClipboard(key)}
//                                                 className="text-gray-500 hover:text-primary dark:hover:text-primary transition-colors"
//                                             >
//                                                 <FaCopy className="w-4 h-4" />
//                                             </button>
//                                         </div>
//                                     )
//                                 },
//                                 {
//                                     accessor: 'apiurl',
//                                     title: 'API URL',
//                                     sortable: true,
//                                     render: ({ apiurl }) => (
//                                         <div className="flex items-center gap-2">
//                                             <span className="text-gray-600 dark:text-gray-300 break-all">
//                                                 {apiurl || 'Not specified'}
//                                             </span>
//                                             {apiurl && (
//                                                 <button
//                                                     onClick={() => copyToClipboard(apiurl)}
//                                                     className="text-gray-500 hover:text-primary dark:hover:text-primary transition-colors"
//                                                 >
//                                                     <FaCopy className="w-4 h-4" />
//                                                 </button>
//                                             )}
//                                         </div>
//                                     )
//                                 },
//                                 {
//                                     accessor: 'status',
//                                     title: 'Status',
//                                     sortable: true,
//                                     render: ({ status }) => (
//                                         <span className={`px-2 py-1 rounded-md text-xs font-medium ${status === 'active'
//                                                 ? 'bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200'
//                                                 : 'bg-red-100 dark:bg-red-900 text-red-800 dark:text-red-200'
//                                             }`}>
//                                             {capitalize(status)}
//                                         </span>
//                                     )
//                                 },
//                                 {
//                                     accessor: 'createdAt',
//                                     title: 'Created',
//                                     sortable: true,
//                                     render: ({ createdAt }) => (
//                                         <span className="text-gray-600 dark:text-gray-300">{createdAt}</span>
//                                     )
//                                 },
//                                 {
//                                     accessor: 'action',
//                                     title: 'Actions',
//                                     titleClassName: '!text-center',
//                                     render: (row) => (
//                                         <div className="flex items-center w-max mx-auto gap-2">
//                                             <Tippy content="View Key">
//                                                 <button
//                                                     className="p-2 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors duration-200"
//                                                     onClick={() => setShowKey(!showKey)}
//                                                 >
//                                                     {showKey ? (
//                                                         <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="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.542-7a9.956 9.956 0 012.64-4.362m3.13-2.178A9.956 9.956 0 0112 5c4.478 0 8.268 2.943 9.542 7a9.956 9.956 0 01-4.233 5.099M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
//                                                             <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 3l18 18" />
//                                                         </svg>
//                                                     ) : (
//                                                         <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={() => openEditModal(row)}
//                                                 >
//                                                     <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="Revoke">
//                                                 <button
//                                                     className="p-2 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors duration-200"
//                                                     onClick={() => handleDeleteApiKey(row.id)}
//                                                 >
//                                                     <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}
//                             minHeight={200}
//                             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 API Key Modal */}
//                 <Transition appear show={addModalOpen} as={Fragment}>
//                     <Dialog as="div" open={addModalOpen} onClose={() => setAddModalOpen(false)}>
//                         <Transition.Child
//                             as={Fragment}
//                             enter="ease-out duration-300"
//                             enterFrom="opacity-0"
//                             enterTo="opacity-100"
//                             leave="ease-in duration-200"
//                             leaveFrom="opacity-100"
//                             leaveTo="opacity-0"
//                         >
//                             <div className="fixed inset-0 bg-black/60 z-[998]" />
//                         </Transition.Child>

//                         <div className="fixed inset-0 z-[999] overflow-y-auto">
//                             <div className="flex min-h-screen items-center justify-center p-4">
//                                 <Transition.Child
//                                     as={Fragment}
//                                     enter="ease-out duration-300"
//                                     enterFrom="opacity-0 scale-95"
//                                     enterTo="opacity-100 scale-100"
//                                     leave="ease-in duration-200"
//                                     leaveFrom="opacity-100 scale-100"
//                                     leaveTo="opacity-0 scale-95"
//                                 >
//                                     <Dialog.Panel className={`panel w-full max-w-lg overflow-hidden rounded-lg border-0 p-0 ${isDark ? 'bg-gray-800' : 'bg-white'} shadow-lg`}>
//                                         <div className={`flex items-center justify-between px-5 py-3 ${isDark ? 'bg-gray-700' : 'bg-gray-50'}`}>
//                                             <div className="text-lg font-bold text-primary-DEFAULT dark:text-primary-light">
//                                                 Create API Key
//                                             </div>
//                                             <button
//                                                 type="button"
//                                                 className="text-gray-500 hover:text-gray-700 dark:hover:text-primary"
//                                                 onClick={() => setAddModalOpen(false)}
//                                             >
//                                                 <svg
//                                                     xmlns="http://www.w3.org/2000/svg"
//                                                     width="20"
//                                                     height="20"
//                                                     viewBox="0 0 24 24"
//                                                     fill="none"
//                                                     stroke="currentColor"
//                                                     strokeWidth="1.5"
//                                                     strokeLinecap="round"
//                                                     strokeLinejoin="round"
//                                                 >
//                                                     <line x1="18" y1="6" x2="6" y2="18"></line>
//                                                     <line x1="6" y1="6" x2="18" y2="18"></line>
//                                                 </svg>
//                                             </button>
//                                         </div>

//                                         <div className="p-5">
//                                             <form onSubmit={(e) => { e.preventDefault(); handleAddApiKey(); }}>
//                                                 <div className="space-y-4">
//                                                     <div>
//                                                         <label className="block text-sm font-medium mb-1 text-gray-700 dark:text-gray-300">Name</label>
//                                                         <input
//                                                             type="text"
//                                                             name="name"
//                                                             value={formData.name}
//                                                             onChange={handleFormChange}
//                                                             className="form-input w-full rounded-lg border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 focus:ring-2 focus:ring-primary-500 focus:border-primary-500 dark:focus:ring-primary-400 dark:focus:border-primary-400 transition-all duration-200"
//                                                             required
//                                                             placeholder="e.g. Production API"
//                                                         />
//                                                     </div>

//                                                     <div>
//                                                         <label className="block text-sm font-medium mb-1 text-gray-700 dark:text-gray-300">API URL</label>
//                                                         <input
//                                                             type="text"
//                                                             name="apiurl"
//                                                             value={formData.apiurl}
//                                                             onChange={handleFormChange}
//                                                             className="form-input w-full rounded-lg border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 focus:ring-2 focus:ring-primary-500 focus:border-primary-500 dark:focus:ring-primary-400 dark:focus:border-primary-400 transition-all duration-200"
//                                                             placeholder="https://api.example.com/endpoint"
//                                                         />
//                                                     </div>

//                                                     <div>
//                                                         <label className="block text-sm font-medium mb-1 text-gray-700 dark:text-gray-300">API Key</label>
//                                                         <div className="flex items-center gap-2">
//                                                             <input
//                                                                 type={showKey ? 'text' : 'password'}
//                                                                 name="key"
//                                                                 value={formData.key}
//                                                                 onChange={handleFormChange}
//                                                                 className="form-input w-full rounded-lg border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 focus:ring-2 focus:ring-primary-500 focus:border-primary-500 dark:focus:ring-primary-400 dark:focus:border-primary-400 transition-all duration-200"
//                                                                 placeholder="Leave blank to auto-generate"
//                                                             />
//                                                             <button
//                                                                 type="button"
//                                                                 onClick={() => setShowKey(!showKey)}
//                                                                 className="p-2 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700"
//                                                             >
//                                                                 {showKey ? (
//                                                                     <HiEyeOff className="w-5 h-5 text-gray-500" />
//                                                                 ) : (
//                                                                     <HiEye className="w-5 h-5 text-gray-500" />
//                                                                 )}
//                                                             </button>
//                                                             {formData.key && (
//                                                                 <button
//                                                                     type="button"
//                                                                     onClick={() => copyToClipboard(formData.key)}
//                                                                     className="p-2 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700"
//                                                                 >
//                                                                     <FaCopy className="w-5 h-5 text-gray-500" />
//                                                                 </button>
//                                                             )}
//                                                         </div>
//                                                         <p className="mt-1 text-xs text-gray-500 dark:text-gray-400">
//                                                             If left blank, a secure key will be automatically generated
//                                                         </p>
//                                                     </div>

//                                                     <div className="flex justify-end space-x-3 pt-4">
//                                                         <button
//                                                             type="button"
//                                                             onClick={() => setAddModalOpen(false)}
//                                                             className="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"
//                                                         >
//                                                             Cancel
//                                                         </button>
//                                                         <button
//                                                             type="submit"
//                                                             className="btn btn-primary rounded-lg px-4 py-2 text-white bg-primary-DEFAULT hover:bg-primary-light border-primary-DEFAULT hover:border-primary-light transition-all duration-200 shadow-primary hover:shadow-primary-lg"
//                                                             disabled={!formData.name}
//                                                         >
//                                                             Create API Key
//                                                         </button>
//                                                     </div>
//                                                 </div>
//                                             </form>
//                                         </div>
//                                     </Dialog.Panel>
//                                 </Transition.Child>
//                             </div>
//                         </div>
//                     </Dialog>
//                 </Transition>

//                 {/* Edit API Key Modal */}
//                 <Transition appear show={editModalOpen} as={Fragment}>
//                     <Dialog as="div" open={editModalOpen} onClose={() => setEditModalOpen(false)}>
//                         <Transition.Child
//                             as={Fragment}
//                             enter="ease-out duration-300"
//                             enterFrom="opacity-0"
//                             enterTo="opacity-100"
//                             leave="ease-in duration-200"
//                             leaveFrom="opacity-100"
//                             leaveTo="opacity-0"
//                         >
//                             <div className="fixed inset-0 bg-black/60 z-[998]" />
//                         </Transition.Child>

//                         <div className="fixed inset-0 z-[999] overflow-y-auto">
//                             <div className="flex min-h-screen items-center justify-center p-4">
//                                 <Transition.Child
//                                     as={Fragment}
//                                     enter="ease-out duration-300"
//                                     enterFrom="opacity-0 scale-95"
//                                     enterTo="opacity-100 scale-100"
//                                     leave="ease-in duration-200"
//                                     leaveFrom="opacity-100 scale-100"
//                                     leaveTo="opacity-0 scale-95"
//                                 >
//                                     <Dialog.Panel className={`panel w-full max-w-lg overflow-hidden rounded-lg border-0 p-0 ${isDark ? 'bg-gray-800' : 'bg-white'} shadow-lg`}>
//                                         <div className={`flex items-center justify-between px-5 py-3 ${isDark ? 'bg-gray-700' : 'bg-gray-50'}`}>
//                                             <div className="text-lg font-bold text-primary-DEFAULT dark:text-primary-light">
//                                                 Update API Key: {selectedApiKey?.name || ''}
//                                             </div>
//                                             <button
//                                                 type="button"
//                                                 className="text-gray-500 hover:text-gray-700 dark:hover:text-primary"
//                                                 onClick={() => setEditModalOpen(false)}
//                                             >
//                                                 <svg
//                                                     xmlns="http://www.w3.org/2000/svg"
//                                                     width="20"
//                                                     height="20"
//                                                     viewBox="0 0 24 24"
//                                                     fill="none"
//                                                     stroke="currentColor"
//                                                     strokeWidth="1.5"
//                                                     strokeLinecap="round"
//                                                     strokeLinejoin="round"
//                                                 >
//                                                     <line x1="18" y1="6" x2="6" y2="18"></line>
//                                                     <line x1="6" y1="6" x2="18" y2="18"></line>
//                                                 </svg>
//                                             </button>
//                                         </div>

//                                         <div className="p-5">
//                                             <form onSubmit={(e) => { e.preventDefault(); handleUpdateApiKey(); }}>
//                                                 <div className="space-y-4">
//                                                     <div>
//                                                         <label className="block text-sm font-medium mb-1 text-gray-700 dark:text-gray-300">Name</label>
//                                                         <input
//                                                             type="text"
//                                                             name="name"
//                                                             value={formData.name}
//                                                             onChange={handleFormChange}
//                                                             className="form-input w-full rounded-lg border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 focus:ring-2 focus:ring-primary-500 focus:border-primary-500 dark:focus:ring-primary-400 dark:focus:border-primary-400 transition-all duration-200"
//                                                             required
//                                                         />
//                                                     </div>

//                                                     <div>
//                                                         <label className="block text-sm font-medium mb-1 text-gray-700 dark:text-gray-300">API URL</label>
//                                                         <input
//                                                             type="text"
//                                                             name="apiurl"
//                                                             value={formData.apiurl}
//                                                             onChange={handleFormChange}
//                                                             className="form-input w-full rounded-lg border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 focus:ring-2 focus:ring-primary-500 focus:border-primary-500 dark:focus:ring-primary-400 dark:focus:border-primary-400 transition-all duration-200"
//                                                             placeholder="https://api.example.com/endpoint"
//                                                         />
//                                                     </div>

//                                                     <div>
//                                                         <label className="block text-sm font-medium mb-1 text-gray-700 dark:text-gray-300">API Key</label>
//                                                         <div className="flex items-center gap-2">
//                                                             <input
//                                                                 type={showKey ? 'text' : 'password'}
//                                                                 value={selectedApiKey?.key || ''}
//                                                                 readOnly
//                                                                 className="form-input w-full rounded-lg border-gray-300 dark:border-gray-600 bg-gray-100 dark:bg-gray-700 cursor-not-allowed"
//                                                             />
//                                                             <button
//                                                                 type="button"
//                                                                 onClick={() => setShowKey(!showKey)}
//                                                                 className="p-2 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700"
//                                                             >
//                                                                 {showKey ? (
//                                                                     <HiEyeOff className="w-5 h-5 text-gray-500" />
//                                                                 ) : (
//                                                                     <HiEye className="w-5 h-5 text-gray-500" />
//                                                                 )}
//                                                             </button>
//                                                             <button
//                                                                 type="button"
//                                                                 onClick={() => copyToClipboard(selectedApiKey?.key || '')}
//                                                                 className="p-2 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700"
//                                                             >
//                                                                 <FaCopy className="w-5 h-5 text-gray-500" />
//                                                             </button>
//                                                         </div>
//                                                     </div>

//                                                     <div className="flex justify-end space-x-3 pt-4">
//                                                         <button
//                                                             type="button"
//                                                             onClick={() => setEditModalOpen(false)}
//                                                             className="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"
//                                                         >
//                                                             Cancel
//                                                         </button>
//                                                         <button
//                                                             type="submit"
//                                                             className="btn btn-primary rounded-lg px-4 py-2 text-white bg-primary-DEFAULT hover:bg-primary-light border-primary-DEFAULT hover:border-primary-light transition-all duration-200 shadow-primary hover:shadow-primary-lg"
//                                                             disabled={!formData.name}
//                                                         >
//                                                             Save Changes
//                                                         </button>
//                                                     </div>
//                                                 </div>
//                                             </form>
//                                         </div>
//                                     </Dialog.Panel>
//                                 </Transition.Child>
//                             </div>
//                         </div>
//                     </Dialog>
//                 </Transition>
//             </div>
//         </div>
//     );
// };

// function capitalize(text: string): string {
//     return text ? text.charAt(0).toUpperCase() + text.slice(1).toLowerCase() : '';
// }

// export default ApiKeyManagement;



import { Fragment } from 'react';
import { DataTable, DataTableSortStatus } from 'mantine-datatable';
import { useEffect, useState } from 'react';
import Tippy from '@tippyjs/react';
import 'tippy.js/dist/tippy.css';
import sortBy from 'lodash/sortBy';
import { useDispatch, useSelector } from 'react-redux';
import { IRootState } from '../../store';
import { setPageTitle } from '../../store/themeConfigSlice';
import Swal from 'sweetalert2';
import { showMessage } from '../../general';
import { Dialog, Transition } from '@headlessui/react';
import { FaEdit, FaTrash, FaKey, FaPlus, FaCopy } from 'react-icons/fa';
import { HiEye, HiEyeOff } from 'react-icons/hi';
import { viewAPIKEY, CreateAPIKEY, deleteAPIKEY, editAPIKEY, updateAPIKEY } from '../../API';
import { useLoader } from '../../store/LoaderProvider';

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

    const PAGE_SIZES = [10, 20, 30, 50, 100];
    const [page, setPage] = useState(1);
    const [pageSize, setPageSize] = useState(PAGE_SIZES[0]);
    const [initialRecords, setInitialRecords] = useState<any[]>([]);
    const [recordsData, setRecordsData] = useState<any[]>([]);
    const [totalRecords, setTotalRecords] = useState(0);
    const [search, setSearch] = useState('');
    const [sortStatus, setSortStatus] = useState<DataTableSortStatus>({ columnAccessor: 'name', direction: 'asc' });
    const [loading, setLoading] = useState(false);
    const [showKey, setShowKey] = useState(false);
    const [showKeyStates, setShowKeyStates] = useState<Record<string, boolean>>({});
    
   const { showLoader, hideLoader } = useLoader();
    // Modal states
    const [addModalOpen, setAddModalOpen] = useState(false);
    const [editModalOpen, setEditModalOpen] = useState(false);
    const [selectedApiKey, setSelectedApiKey] = useState<any>(null);

    // Form states
    const [formData, setFormData] = useState({
        name: '',
        key: '',
        apiurl: '' // Added apiurl field
    });

    useEffect(() => {
        dispatch(setPageTitle('API Key Management'));
        fetchApiKeys();
    }, []);

    const fetchApiKeys = async () => {
        showLoader( );
        try {
            const response = await viewAPIKEY();
            if (response.status === 'success') {
                const formatted = response.data.map((key: any) => ({
                    id: key._id,
                    name: key.name,
                    key: key.apikey,
                    apiurl: key.apiurl || '', // Added apiurl to the data
                    maskedKey: key.apikey.substring(0, 8) + '***************' + key.apikey.slice(-1),
                    status: key.delete_status === 'NO' ? 'active' : 'revoked',
                    createdAt: new Date(key.created_at).toLocaleDateString('en-US', {
                        year: 'numeric',
                        month: 'short',
                        day: 'numeric'
                    })
                }));

                setInitialRecords(formatted);
                setTotalRecords(formatted.length);
                
                // Initialize showKeyStates for each API key
                const initialShowStates: Record<string, boolean> = {};
                formatted.forEach((key: any) => {
                    initialShowStates[key.id] = false;
                });
                setShowKeyStates(initialShowStates);
            } else {
                showMessage('Failed to fetch API keys', 'error');
            }
        } catch (err) {
            console.error(err);
            showMessage('Failed to fetch API keys', 'error');
        } finally {
            hideLoader()
        }
    };

    useEffect(() => setPage(1), [pageSize]);

    useEffect(() => {
        let sorted = sortBy(initialRecords, sortStatus.columnAccessor);
        sorted = sortStatus.direction === 'desc' ? sorted.reverse() : sorted;

        const filtered = sorted.filter(item =>
            (item.name || '').toLowerCase().includes(search.toLowerCase()) ||
            (item.key || '').toLowerCase().includes(search.toLowerCase()) ||
            (item.apiurl || '').toLowerCase().includes(search.toLowerCase()) || // Added apiurl to search
            (item.status || '').toLowerCase().includes(search.toLowerCase())
        );

        const from = (page - 1) * pageSize;
        const to = from + pageSize;
        setRecordsData(filtered.slice(from, to));
        setTotalRecords(filtered.length);
    }, [page, pageSize, search, sortStatus, initialRecords]);

    const handleAddApiKey = async () => {
        try {
            const apiKey = formData.key || 'sk_' + Math.random().toString(36).substring(2, 18) + Math.random().toString(36).substring(2, 18);
            const payload = {
                name: formData.name,
                apikey: apiKey,
                apiurl: formData.apiurl // Added apiurl to payload
            };

            const response = await CreateAPIKEY(payload);
            if (response.status === 'success') {
                showMessage('API key created successfully', 'success');
                fetchApiKeys();
                setAddModalOpen(false);
                setFormData({
                    name: '',
                    key: '',
                    apiurl: ''
                });
            } else {
                showMessage(response.message || 'Failed to create API key', 'error');
            }
        } catch (error) {
            console.error(error);
            showMessage('Failed to create API key', 'error');
        }
    };

    const handleUpdateApiKey = async () => {
        try {
            const payload = {
                id: selectedApiKey.id,
                name: formData.name,
                apikey: selectedApiKey.key, // Using the existing key
                apiurl: formData.apiurl // Added apiurl to payload
            };

            const response = await updateAPIKEY(payload);
            if (response.status === 'success') {
                showMessage('API key updated successfully', 'success');
                fetchApiKeys();
                setEditModalOpen(false);
            } else {
                showMessage(response.message || 'Failed to update API key', 'error');
            }
        } catch (error) {
            console.error(error);
            showMessage('Failed to update API key', 'error');
        }
    };

    const handleDeleteApiKey = async (id: string) => {
        const result = await Swal.fire({
            title: 'Are you sure?',
            text: 'This API key will be permanently revoked!',
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#e7515a',
            cancelButtonColor: '#2196f3',
            confirmButtonText: 'Yes, revoke 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 response = await deleteAPIKEY(id);
                if (response.status === 'success') {
                    showMessage('API key revoked successfully', 'success');
                    fetchApiKeys();
                } else {
                    showMessage(response.message || 'Failed to revoke API key', 'error');
                }
            } catch (error) {
                console.error(error);
                showMessage('Failed to revoke API key', 'error');
            }
        }
    };

    const copyToClipboard = (text: string) => {
        navigator.clipboard.writeText(text);
        showMessage('Copied to clipboard', 'success');
    };

    const openAddModal = () => {
        setFormData({
            name: '',
            key: '',
            apiurl: ''
        });
        setAddModalOpen(true);
    };

    const openEditModal = (row: any) => {
        setSelectedApiKey(row);
        setFormData({
            name: row.name,
            key: row.key,
            apiurl: row.apiurl || '' // Set apiurl value
        });
        setEditModalOpen(true);
    };

    const handleFormChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        const { name, value } = e.target;
        setFormData(prev => ({ ...prev, [name]: value }));
    };

    const toggleKeyVisibility = (id: string) => {
        setShowKeyStates(prev => ({
            ...prev,
            [id]: !prev[id]
        }));
    };

    return (
        <div className="relative">
            <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">API Key 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 border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 focus:ring-2 focus:ring-primary-500 focus:border-primary-500 dark:focus:ring-primary-400 dark:focus:border-primary-400 transition-all duration-200"
                                placeholder="Search API keys..."
                                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 rounded-lg px-4 py-2 text-white bg-primary-DEFAULT hover:bg-primary-light border-primary-DEFAULT hover:border-primary-light transition-all duration-200 shadow-primary hover:shadow-primary-lg flex items-center gap-2"
                            onClick={openAddModal}
                        >
                            <FaPlus className="text-lg" /> Add API Key
                        </button>
                    </div>
                </div>

                {loading ? (
                    <div className="flex justify-center items-center h-64">
                        <div className="w-12 h-12 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={recordsData}
                            columns={[
                                {
                                    accessor: 'name',
                                    title: 'Name',
                                    sortable: true,
                                    render: ({ name }) => (
                                        <span className="font-medium dark:text-white-light">{name}</span>
                                    )
                                },
                                {
                                    accessor: 'key',
                                    title: 'API Key',
                                    sortable: true,
                                    render: ({ id, key, maskedKey }) => (
                                        <div className="flex items-center gap-2">
                                            <span className="text-gray-600 dark:text-gray-300 font-mono">
                                                {showKeyStates[id] ? key : maskedKey}
                                            </span>
                                            <button
                                                onClick={() => toggleKeyVisibility(id)}
                                                className="text-gray-500 hover:text-primary dark:hover:text-primary transition-colors"
                                            >
                                                {showKeyStates[id] ? (
                                                    <HiEyeOff className="w-4 h-4" />
                                                ) : (
                                                    <HiEye className="w-4 h-4" />
                                                )}
                                            </button>
                                        </div>
                                    )
                                },
                                {
                                    accessor: 'apiurl',
                                    title: 'API URL',
                                    sortable: true,
                                    render: ({ apiurl }) => (
                                        <div className="flex items-center gap-2">
                                            <span className="text-gray-600 dark:text-gray-300 break-all">
                                                {apiurl || 'Not specified'}
                                            </span>
                                        </div>
                                    )
                                },
                                {
                                    accessor: 'status',
                                    title: 'Status',
                                    sortable: true,
                                    render: ({ status }) => (
                                        <span className={`px-2 py-1 rounded-md text-xs font-medium ${status === 'active'
                                                ? 'bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200'
                                                : 'bg-red-100 dark:bg-red-900 text-red-800 dark:text-red-200'
                                            }`}>
                                            {capitalize(status)}
                                        </span>
                                    )
                                },
                                {
                                    accessor: 'createdAt',
                                    title: 'Created',
                                    sortable: true,
                                    render: ({ createdAt }) => (
                                        <span className="text-gray-600 dark:text-gray-300">{createdAt}</span>
                                    )
                                },
                                {
                                    accessor: 'action',
                                    title: 'Actions',
                                    titleClassName: '!text-center',
                                    render: (row) => (
                                        <div className="flex items-center w-max mx-auto gap-2">
                                            <Tippy content="Edit">
                                                <button
                                                    className="p-2 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors duration-200"
                                                    onClick={() => openEditModal(row)}
                                                >
                                                    <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="Revoke">
                                                <button
                                                    className="p-2 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors duration-200"
                                                    onClick={() => handleDeleteApiKey(row.id)}
                                                >
                                                    <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}
                            minHeight={200}
                            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 API Key Modal */}
                <Transition appear show={addModalOpen} as={Fragment}>
                    <Dialog as="div" open={addModalOpen} onClose={() => setAddModalOpen(false)}>
                        <Transition.Child
                            as={Fragment}
                            enter="ease-out duration-300"
                            enterFrom="opacity-0"
                            enterTo="opacity-100"
                            leave="ease-in duration-200"
                            leaveFrom="opacity-100"
                            leaveTo="opacity-0"
                        >
                            <div className="fixed inset-0 bg-black/60 z-[998]" />
                        </Transition.Child>

                        <div className="fixed inset-0 z-[999] overflow-y-auto">
                            <div className="flex min-h-screen items-center justify-center p-4">
                                <Transition.Child
                                    as={Fragment}
                                    enter="ease-out duration-300"
                                    enterFrom="opacity-0 scale-95"
                                    enterTo="opacity-100 scale-100"
                                    leave="ease-in duration-200"
                                    leaveFrom="opacity-100 scale-100"
                                    leaveTo="opacity-0 scale-95"
                                >
                                    <Dialog.Panel className={`panel w-full max-w-lg overflow-hidden rounded-lg border-0 p-0 ${isDark ? 'bg-gray-800' : 'bg-white'} shadow-lg`}>
                                        <div className={`flex items-center justify-between px-5 py-3 ${isDark ? 'bg-gray-700' : 'bg-gray-50'}`}>
                                            <div className="text-lg font-bold text-primary-DEFAULT dark:text-primary-light">
                                                Create API Key
                                            </div>
                                            <button
                                                type="button"
                                                className="text-gray-500 hover:text-gray-700 dark:hover:text-primary"
                                                onClick={() => setAddModalOpen(false)}
                                            >
                                                <svg
                                                    xmlns="http://www.w3.org/2000/svg"
                                                    width="20"
                                                    height="20"
                                                    viewBox="0 0 24 24"
                                                    fill="none"
                                                    stroke="currentColor"
                                                    strokeWidth="1.5"
                                                    strokeLinecap="round"
                                                    strokeLinejoin="round"
                                                >
                                                    <line x1="18" y1="6" x2="6" y2="18"></line>
                                                    <line x1="6" y1="6" x2="18" y2="18"></line>
                                                </svg>
                                            </button>
                                        </div>

                                        <div className="p-5">
                                            <form onSubmit={(e) => { e.preventDefault(); handleAddApiKey(); }}>
                                                <div className="space-y-4">
                                                    <div>
                                                        <label className="block text-sm font-medium mb-1 text-gray-700 dark:text-gray-300">Name</label>
                                                        <input
                                                            type="text"
                                                            name="name"
                                                            value={formData.name}
                                                            onChange={handleFormChange}
                                                            className="form-input w-full rounded-lg border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 focus:ring-2 focus:ring-primary-500 focus:border-primary-500 dark:focus:ring-primary-400 dark:focus:border-primary-400 transition-all duration-200"
                                                            required
                                                            placeholder="e.g. Production API"
                                                        />
                                                    </div>

                                                    <div>
                                                        <label className="block text-sm font-medium mb-1 text-gray-700 dark:text-gray-300">API URL</label>
                                                        <input
                                                            type="text"
                                                            name="apiurl"
                                                            value={formData.apiurl}
                                                            onChange={handleFormChange}
                                                            className="form-input w-full rounded-lg border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 focus:ring-2 focus:ring-primary-500 focus:border-primary-500 dark:focus:ring-primary-400 dark:focus:border-primary-400 transition-all duration-200"
                                                            placeholder="https://api.example.com/endpoint"
                                                        />
                                                    </div>

                                                    <div>
                                                        <label className="block text-sm font-medium mb-1 text-gray-700 dark:text-gray-300">API Token</label>
                                                        <div className="relative">
                                                            <input
                                                                type={showKey ? 'text' : 'password'}
                                                                name="key"
                                                                value={formData.key}
                                                                onChange={handleFormChange}
                                                                className="form-input w-full pr-10 rounded-lg border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 focus:ring-2 focus:ring-primary-500 focus:border-primary-500 dark:focus:ring-primary-400 dark:focus:border-primary-400 transition-all duration-200"
                                                                placeholder="Leave blank to auto-generate"
                                                            />
                                                            <button
                                                                type="button"
                                                                onClick={() => setShowKey(!showKey)}
                                                                className="absolute inset-y-0 right-0 flex items-center pr-3 text-gray-500 hover:text-gray-700 dark:hover:text-primary"
                                                            >
                                                                {showKey ? (
                                                                    <HiEyeOff className="w-5 h-5" />
                                                                ) : (
                                                                    <HiEye className="w-5 h-5" />
                                                                )}
                                                            </button>
                                                        </div>
                                                        <p className="mt-1 text-xs text-gray-500 dark:text-gray-400">
                                                            If left blank, a secure key will be automatically generated
                                                        </p>
                                                    </div>

                                                    <div className="flex justify-end space-x-3 pt-4">
                                                        <button
                                                            type="button"
                                                            onClick={() => setAddModalOpen(false)}
                                                            className="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"
                                                        >
                                                            Cancel
                                                        </button>
                                                        <button
                                                            type="submit"
                                                            className="btn btn-primary rounded-lg px-4 py-2 text-white bg-primary-DEFAULT hover:bg-primary-light border-primary-DEFAULT hover:border-primary-light transition-all duration-200 shadow-primary hover:shadow-primary-lg"
                                                            disabled={!formData.name}
                                                        >
                                                            Create API Key
                                                        </button>
                                                    </div>
                                                </div>
                                            </form>
                                        </div>
                                    </Dialog.Panel>
                                </Transition.Child>
                            </div>
                        </div>
                    </Dialog>
                </Transition>

                {/* Edit API Key Modal */}
                <Transition appear show={editModalOpen} as={Fragment}>
                    <Dialog as="div" open={editModalOpen} onClose={() => setEditModalOpen(false)}>
                        <Transition.Child
                            as={Fragment}
                            enter="ease-out duration-300"
                            enterFrom="opacity-0"
                            enterTo="opacity-100"
                            leave="ease-in duration-200"
                            leaveFrom="opacity-100"
                            leaveTo="opacity-0"
                        >
                            <div className="fixed inset-0 bg-black/60 z-[998]" />
                        </Transition.Child>

                        <div className="fixed inset-0 z-[999] overflow-y-auto">
                            <div className="flex min-h-screen items-center justify-center p-4">
                                <Transition.Child
                                    as={Fragment}
                                    enter="ease-out duration-300"
                                    enterFrom="opacity-0 scale-95"
                                    enterTo="opacity-100 scale-100"
                                    leave="ease-in duration-200"
                                    leaveFrom="opacity-100 scale-100"
                                    leaveTo="opacity-0 scale-95"
                                >
                                    <Dialog.Panel className={`panel w-full max-w-lg overflow-hidden rounded-lg border-0 p-0 ${isDark ? 'bg-gray-800' : 'bg-white'} shadow-lg`}>
                                        <div className={`flex items-center justify-between px-5 py-3 ${isDark ? 'bg-gray-700' : 'bg-gray-50'}`}>
                                            <div className="text-lg font-bold text-primary-DEFAULT dark:text-primary-light">
                                                Update API Key: {selectedApiKey?.name || ''}
                                            </div>
                                            <button
                                                type="button"
                                                className="text-gray-500 hover:text-gray-700 dark:hover:text-primary"
                                                onClick={() => setEditModalOpen(false)}
                                            >
                                                <svg
                                                    xmlns="http://www.w3.org/2000/svg"
                                                    width="20"
                                                    height="20"
                                                    viewBox="0 0 24 24"
                                                    fill="none"
                                                    stroke="currentColor"
                                                    strokeWidth="1.5"
                                                    strokeLinecap="round"
                                                    strokeLinejoin="round"
                                                >
                                                    <line x1="18" y1="6" x2="6" y2="18"></line>
                                                    <line x1="6" y1="6" x2="18" y2="18"></line>
                                                </svg>
                                            </button>
                                        </div>

                                        <div className="p-5">
                                            <form onSubmit={(e) => { e.preventDefault(); handleUpdateApiKey(); }}>
                                                <div className="space-y-4">
                                                    <div>
                                                        <label className="block text-sm font-medium mb-1 text-gray-700 dark:text-gray-300">Name</label>
                                                        <input
                                                            type="text"
                                                            name="name"
                                                            value={formData.name}
                                                            onChange={handleFormChange}
                                                            className="form-input w-full rounded-lg border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 focus:ring-2 focus:ring-primary-500 focus:border-primary-500 dark:focus:ring-primary-400 dark:focus:border-primary-400 transition-all duration-200"
                                                            required
                                                        />
                                                    </div>

                                                    <div>
                                                        <label className="block text-sm font-medium mb-1 text-gray-700 dark:text-gray-300">API URL</label>
                                                        <input
                                                            type="text"
                                                            name="apiurl"
                                                            value={formData.apiurl}
                                                            onChange={handleFormChange}
                                                            className="form-input w-full rounded-lg border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 focus:ring-2 focus:ring-primary-500 focus:border-primary-500 dark:focus:ring-primary-400 dark:focus:border-primary-400 transition-all duration-200"
                                                            placeholder="https://api.example.com/endpoint"
                                                        />
                                                    </div>

                                                    <div>
                                                        <label className="block text-sm font-medium mb-1 text-gray-700 dark:text-gray-300">API Token</label>
                                                        <div className="relative">
                                                            <input
                                                                type={showKey ? 'text' : 'password'}
                                                                value={selectedApiKey?.key || ''}
                                                                readOnly
                                                                className="form-input w-full pr-10 rounded-lg border-gray-300 dark:border-gray-600 bg-gray-100 dark:bg-gray-700 cursor-not-allowed"
                                                            />
                                                            <button
                                                                type="button"
                                                                onClick={() => setShowKey(!showKey)}
                                                                className="absolute inset-y-0 right-0 flex items-center pr-3 text-gray-500 hover:text-gray-700 dark:hover:text-primary"
                                                            >
                                                                {showKey ? (
                                                                    <HiEyeOff className="w-5 h-5" />
                                                                ) : (
                                                                    <HiEye className="w-5 h-5" />
                                                                )}
                                                            </button>
                                                        </div>
                                                    </div>

                                                    <div className="flex justify-end space-x-3 pt-4">
                                                        <button
                                                            type="button"
                                                            onClick={() => setEditModalOpen(false)}
                                                            className="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"
                                                        >
                                                            Cancel
                                                        </button>
                                                        <button
                                                            type="submit"
                                                            className="btn btn-primary rounded-lg px-4 py-2 text-white bg-primary-DEFAULT hover:bg-primary-light border-primary-DEFAULT hover:border-primary-light transition-all duration-200 shadow-primary hover:shadow-primary-lg"
                                                            disabled={!formData.name}
                                                        >
                                                            Save Changes
                                                        </button>
                                                    </div>
                                                </div>
                                            </form>
                                        </div>
                                    </Dialog.Panel>
                                </Transition.Child>
                            </div>
                        </div>
                    </Dialog>
                </Transition>
            </div>
        </div>
    );
};

function capitalize(text: string): string {
  if (!text) return '';

  return text
    .split(' ') // Split by spaces
    .map(word => 
      word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()
    )
    .join(' '); // Join back into a single string
}


export default ApiKeyManagement;