// import React, { useEffect, useState, useRef } from 'react';
// import { Button } from 'primereact/button';
// import { Toast } from 'primereact/toast';
// import { api } from '../services/axios';
// import { Dialog } from 'primereact/dialog';
// import { useNavigate } from 'react-router-dom';
// import { useSettingsStore } from '../state/stores/useSettingsStore';

// type UserInfo = {
//   role: string;
//   tenantId: string | number;
// };

// const ActivateConnectionModal = () => {
//   const [loading, setLoading] = useState(false);
//   const [showDialog, setShowDialog] = useState(false);
//   const toast = useRef<Toast>(null);
//   const [fetched, setFetched] = useState(false);
//   const [systemName, setSystemName] = useState('');
//   const tenantId = localStorage.getItem('tenantId');
//   const systemId = localStorage.getItem('systemId');

//   const navigate = useNavigate();

//   const [userInfo, setUserInfo] = useState<UserInfo>({
//     role: '',
//     tenantId: -1,
//   });

//   const [messageShown, setMessageShown] = useState<boolean>(false);

//   const { setConnectionId } = useSettingsStore();

//   useEffect(() => {
//     // TODO: similar logic used in other components, refactor into user context/state/hook
//     const storedUser = localStorage.getItem('user');
//     const storedSystemName = localStorage.getItem('systemName');

//     if (storedUser) {
//       const parsedUser = JSON.parse(storedUser);

//       let role = parsedUser.roles?.includes('admin')
//         ? 'admin'
//         : parsedUser.roles?.includes('user')
//         ? 'user'
//         : '';

//       let tenantId =
//         role === 'admin' ? localStorage.getItem('tenantId') || -1 : -1;

//       let userInfo: UserInfo = {
//         role: role,
//         tenantId: tenantId,
//       };

//       setUserInfo(userInfo);
//     }

//     if (storedSystemName) {
//       setSystemName(storedSystemName);
//     }
//   }, []);

//   useEffect(() => {
//     if (userInfo.role && userInfo.tenantId !== undefined && !fetched) {
//       fetchConnection();
//     }
//   }, [userInfo]);

//   const fetchConnection = async () => {
//     setLoading(true);
//     try {
//       let response: any;

//       if (userInfo.role === 'user') {
//         response = await api('get', `/connections?systemName=${systemName}`);
//       } else if (userInfo.role === 'admin' && userInfo.tenantId) {
//         response = await api(
//           'get',
//           `/connections?systemName=${systemName}&tenantId=${userInfo.tenantId}`,
//         );
//       } else {
//         throw new Error('Invalid user role or missing tenantId');
//       }

//       const connections = response.data.data;

//       // Localstorage saves undefined as string
//       if (tenantId === 'undefined' || systemId === 'undefined') {
//         navigate('/systems');
//       }

//       if (!connections || connections.length === 0) {
//         setShowDialog(true);
//       } else if (userInfo.role === 'user') {
//         setUserInfo((prevUserInfo) => ({
//           ...prevUserInfo,
//           tenantId: connections[0].tenant_fleks_id,
//         }));
//       }
//       const connectionId = connections[0].id;
//       localStorage.setItem('connectionId', connectionId);
//       setConnectionId(connectionId);
//       navigate(`/dashboard/${systemName}`);
//       setLoading(false);
//       setFetched(true);
//     } catch (error) {
//       console.error('Error:', error);
//       setLoading(false);
//       if (!messageShown) {
//         setMessageShown(true);
//       }
//     }
//   };

//   const handleActivateClick = async () => {
//     setLoading(true);
//     const systemId = localStorage.getItem('systemId') || null;

//     try {
//       let postResponse: any;
//       let requestBody: any = {
//         system_id: Number(systemId),
//       };

//       if (!systemId) {
//         throw new Error('Missing systemId');
//       }

//       if (userInfo.role === 'admin' && userInfo.tenantId) {
//         requestBody.tenant_id = userInfo.tenantId;
//       }

//       postResponse = await api('post', '/connections', requestBody);

//       if (postResponse.status === 201) {
//         const connectionId = postResponse.data.id;
//         localStorage.setItem('connectionId', connectionId);
//         setConnectionId(connectionId);

//         navigate(`/dashboard/${systemName}`);

//         setLoading(false);
//         setShowDialog(false);
//         toast.current.show({
//           severity: 'success',
//           summary: 'Success',
//           detail: 'Connection established successfully.',
//           life: 3000,
//         });
//       } else {
//         setLoading(false);
//         toast.current.show({
//           severity: 'error',
//           summary: 'Error',
//           detail: 'Failed to establish connection.',
//           life: 3000,
//         });
//       }
//     } catch (error) {
//       if (error.message === 'Missing systemId') {
//         toast.current.show({
//           severity: 'error',
//           summary: 'Error',
//           detail: 'Missing system information. Please verify.',
//           life: 3000,
//         });
//       } else {
//         console.error('Error:', error);
//       }
//     }
//   };

//   const handleCancelClick = () => {
//     setShowDialog(false);
//     navigate('/systems');
//   };

//   return (
//     <div className="flex items-center justify-center h-screen overflow-y-hidden bg-gradient-to-br from-purple-500 to-indigo-500">
//       <div className="fixed inset-0 flex items-center justify-center overflow-y-hidden">
//         <div className="transition-transform" style={{ transform: 'none' }}>
//           <Dialog
//             visible={showDialog}
//             onHide={() => setShowDialog(false)}
//             header="Activate Connection"
//             footer={
//               <div>
//                 <Button
//                   label="Activate"
//                   className="p-button-primary"
//                   onClick={handleActivateClick}
//                   disabled={loading}
//                 />
//                 <Button
//                   label="Cancel"
//                   className="p-button-secondary"
//                   onClick={handleCancelClick}
//                   disabled={loading}
//                 />
//               </div>
//             }
//           >
//             {loading ? (
//               <p>Performing the post request, please wait...</p>
//             ) : (
//               <p>Are you sure you want to activate the connection?</p>
//             )}
//           </Dialog>
//         </div>
//       </div>
//     </div>
//   );
// };
// export default ActivateConnectionModal;
