import { useState } from 'react';
// import styles from './HomeStyles/Connections.module.css';
import sharedStyles from '../../components/PageManager/pages.module.css';
import { IoIosLink } from 'react-icons/io';
import { 
  ConnectionsTable, 
  ConnectionEditModal, 
  ConnectionsErrorDisplay,
  useConnectionsLogic,
  Connection
} from '../../components/Connections';
import { useLanguage } from '../../contexts/LanguageContext';

function Connections() {
  const { t } = useLanguage();
  
  // Use the custom hook for all business logic
  const {
    connections,
    isLoading,
    isConnecting,
    isDisconnecting,
    error,
    connectError,
    disconnectError,
    editPopupOpen,
    editingConnection,
    connectionColumns,
    connectionEditFields,
    tableActions,
    handleCreateConnection,
    handleSaveConnection,
    handleCancelEdit,
    handleDelete,
    handleDeleteMultiple
  } = useConnectionsLogic();

  // Local state for selected connections (if needed)
  const [, setSelectedConnections] = useState<Connection[]>([]);

  return (
    <div className={sharedStyles.pageContainer}>
      <div className={sharedStyles.pageCard}>
        {/* Page Header */}
        <div className={sharedStyles.pageHeader}>
          <h1 className={sharedStyles.pageTitle}>{t('connections.title')}</h1>
          <div style={{ display: 'flex', gap: '10px' }}>
            <button 
              className={sharedStyles.primaryButton}
              onClick={() => handleCreateConnection('google')}
              disabled={isLoading || isConnecting || isDisconnecting}
            >
              <span className={sharedStyles.buttonIcon}><IoIosLink /></span>
              {t('connections.connect_google')}
            </button>
            <button 
              className={sharedStyles.primaryButton}
              onClick={() => handleCreateConnection('msft')}
              disabled={isLoading || isConnecting || isDisconnecting}
            >
              <span className={sharedStyles.buttonIcon}><IoIosLink /></span>
              {t('connections.connect_microsoft')}
            </button>
          </div>
        </div>

        <div className={sharedStyles.horizontalDivider}></div>

        <div className={sharedStyles.contentArea}>
          {/* Error Display */}
          <ConnectionsErrorDisplay
            error={error}
            connectError={connectError}
            disconnectError={disconnectError}
          />

          {/* Connections Table */}
          <ConnectionsTable
            connections={connections}
            columns={connectionColumns}
            actions={tableActions}
            isLoading={isLoading}
            onRowSelect={setSelectedConnections}
            onDelete={handleDelete}
            onDeleteMultiple={handleDeleteMultiple}
          />
        </div>
      </div>

      {/* Edit Connection Modal */}
      <ConnectionEditModal
        isOpen={editPopupOpen}
        connection={editingConnection}
        fields={connectionEditFields}
        onSave={handleSaveConnection}
        onCancel={handleCancelEdit}
      />
    </div>
  );
}

export default Connections;