import { Connector } from '@/types/connector/connector';
import ConnectorTypeIcon from '../../detail/components/ConnectorTypeIcon';
import ConnectorDetails, { ConnectorRatesInline } from '../sections/ConnectorDetails';
import { CloseIcon } from '../helper/icons';
import ConnectButton from '../components/ConnectButton';

interface ConnectorModalProps {
  connector: Connector;
  selectedConnector: string | null;
  isStarting: boolean;
  online: boolean;
  connectors: Connector[];
  onClose: () => void;
  onSelectConnector: (id: string | null) => void;
  onStartSession: (connectorId: string) => Promise<void>;
  isConnectorSelectable: (connector: Connector) => boolean;
}

const ConnectorModal = ({
  connector,
  selectedConnector,
  isStarting,
  online,
  connectors,
  onClose,
  onSelectConnector,
  onStartSession,
  isConnectorSelectable,
}: ConnectorModalProps) => {
  // Use a wrapper so the modal closes before starting the session
  const handleStartSessionFromModal = async (connectorId: string) => {
    onClose();
    await onStartSession(connectorId);
  };

  return (
    <div className="fixed inset-0 z-50 overflow-y-auto">
      {/* Backdrop */}
      <button
        type="button"
        className="fixed inset-0 bg-black/20 backdrop-blur-sm transition-opacity"
        aria-label="Close connector details"
        onClick={onClose}
        onKeyDown={(e) => { if (['Escape','Enter',' '].includes(e.key)) onClose(); }}
      />

      {/* Modal Content */}
      <div className="flex min-h-full items-end justify-center p-4 sm:items-center">
        <div className="relative w-full max-w-md transform overflow-hidden rounded-t-2xl sm:rounded-2xl bg-white dark:bg-gray-800 shadow-xl transition-all">
          {/* Modal Header */}
          <div className="flex items-center justify-between p-6 border-b border-gray-200 dark:border-gray-700">
            <div className="flex items-center gap-3">
              <ConnectorTypeIcon type={connector.type} size={28} />
              <div>
                <h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100">
                  {connector.name}
                </h3>
                <p className="text-sm text-gray-500 dark:text-gray-400">
                  Connector #{connector.connector_number}
                </p>
              </div>
            </div>

            <button
              onClick={onClose}
              className="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors"
            >
              <CloseIcon />
            </button>
          </div>

          {/* Modal Body: details only (rates moved below connect button) */}
          <div className="p-6 max-h-96 overflow-y-auto">
            <ConnectorDetails
              connector={connector}
              selectedConnector={selectedConnector}
              setSelectedConnector={onSelectConnector}
              isConnectorSelectable={isConnectorSelectable}
              isMobile={true}
              online={online}
              showRates={false}
            />
          </div>

          {/* Modal Footer */}
          <div className="flex gap-3 p-6 pb-0 border-t border-gray-200 dark:border-gray-700">
            {isConnectorSelectable(connector) ? (
              <button
                disabled={!isConnectorSelectable(connector)}
                onClick={() => {
                  if (!isConnectorSelectable(connector)) return;
                  onSelectConnector(selectedConnector === connector.id ? null : connector.id!);
                }}
                className={`
                  flex-1 rounded-lg px-4 py-3 font-medium transition-colors
                  ${selectedConnector === connector.id
                    ? 'bg-red-700 text-white hover:bg-red-700'
                    : 'bg-brand-600 text-white hover:bg-brand-700 active:bg-brand-800'
                  }
                `}
              >
                {selectedConnector === connector.id ? 'Unselect' : 'Select Connector'}
              </button>
            ) : (
              (() => {
                let statusLabel: string;
                if (!online) {
                  statusLabel = 'Station offline';
                } else if (connector.status === 'Charging') {
                  statusLabel = 'Currently in use';
                } else {
                  statusLabel = `Unavailable (${connector.status})`;
                }
                return (
                  <div className="flex-1 rounded-lg px-4 py-3 font-medium bg-gray-100 text-gray-500 dark:bg-gray-700 dark:text-gray-400 text-center">
                    {statusLabel}
                  </div>
                );
              })()
            )}
          </div>

          {/* Mobile Connect Button - reuse shared component */}
          {selectedConnector && (
            <div className="p-6 pt-0">
              <ConnectButton
                selectedConnector={selectedConnector}
                connectors={connectors}
                isStarting={isStarting}
                onStartSession={handleStartSessionFromModal}
              />
            </div>
          )}

          {/* Rates collapsed section at the very bottom (always visible, default collapsed) */}
          <div className="p-6 pt-0">
            <ConnectorRatesInline connector={connector} initiallyOpen={false} />
          </div>
        </div>
      </div>
    </div>
  );
};

export default ConnectorModal;