import { Connector } from '@/types/connector/connector';
import ConnectorTypeIcon from '../../detail/components/ConnectorTypeIcon';
import { statusClasses, statusDotClasses } from '../../connectorModule/helper';
import ConnectorDetails from '../sections/ConnectorDetails';
import { ChevronRightIcon } from '../helper/icons';
import ConnectButton from '../components/ConnectButton';

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

const ConnectorCard = ({
  connector,
  selectedConnector,
  expandedConnector,
  isMobile,
  online,
  onCardClick,
  onToggleDetails,
  onSelectConnector,
  isConnectorSelectable,
  connectors,
  isStarting,
  onStartSession,
}: ConnectorCardProps) => {
  return (
    <div
      role="button"
      tabIndex={0}
      className={`
        relative rounded-xl border-2 p-4 md:p-5 transition-all duration-200 cursor-pointer
        ${statusClasses[connector.status as keyof typeof statusClasses] || statusClasses.Unavailable}
        ${selectedConnector === connector.id ? 'ring-2 ring-brand-500 border-brand-300 dark:border-brand-600' : ''}
        hover:shadow-md
      `}
      onClick={() => onCardClick(connector)}
      onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); onCardClick(connector); } }}
    >
      <div className="flex flex-col gap-3 md:gap-4">
        {/* Header Section - Mobile Optimized */}
        <div className="flex items-center justify-between">
          <div className="flex items-center gap-2 md:gap-3 min-w-0 flex-1">
            <div className={`h-3 w-3 rounded-full flex-shrink-0 ${statusDotClasses[connector.status as keyof typeof statusDotClasses] || statusDotClasses.Unavailable}`} />
            <div className="flex items-center gap-2 min-w-0">
              <ConnectorTypeIcon type={connector.type} size={24} className="flex-shrink-0" />
              <div className="min-w-0">
                <h3 className="font-semibold text-gray-900 dark:text-gray-100 text-sm md:text-base truncate">
                  {connector.name}
                </h3>
              </div>
            </div>
          </div>

          <div className="flex items-center gap-2 flex-shrink-0">
            <span className={`
              inline-flex items-center rounded-full px-2 py-1 text-xs font-medium
              ${connector.status === 'Available' ? 'bg-green-100 text-green-800 dark:bg-green-800 dark:text-green-100' : ''}
              ${connector.status === 'Charging' ? 'bg-yellow-100 text-yellow-800 dark:bg-yellow-800 dark:text-yellow-100' : ''}
              ${connector.status === 'SuspendedEV' ? 'bg-red-100 text-red-800 dark:bg-red-800 dark:text-red-100' : ''}
              ${connector.status === 'SuspendedEVSE' ? 'bg-red-100 text-red-800 dark:bg-red-800 dark:text-red-100' : ''}
              ${connector.status === 'Preparing' ? 'bg-blue-100 text-blue-800 dark:bg-blue-800 dark:text-blue-100' : ''}
              ${connector.status === 'Finishing' ? 'bg-purple-100 text-purple-800 dark:bg-purple-800 dark:text-purple-100' : ''}
              ${connector.status === 'Reserved' ? 'bg-orange-100 text-orange-800 dark:bg-orange-800 dark:text-orange-100' : ''}
              ${connector.status === 'Unavailable' ? 'bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-100' : ''}
              ${connector.status === 'Faulted' ? 'bg-red-100 text-red-800 dark:bg-red-800 dark:text-red-100' : ''}
            `}>
              {connector.status}
            </span>

            {!isMobile && (
              <button
                onClick={(e) => {
                  e.stopPropagation();
                  onToggleDetails(connector.id!);
                }}
                className="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors"
              >
                <svg
                  className={`w-4 h-4 md:w-5 md:h-5 transform transition-transform ${expandedConnector === connector.id ? 'rotate-180' : ''}`}
                  fill="none"
                  stroke="currentColor"
                  viewBox="0 0 24 24"
                >
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
                </svg>
              </button>
            )}

            {isMobile && <ChevronRightIcon />}
          </div>
        </div>

        {/* Connector Basic Info - Mobile Optimized */}
        <div className="flex flex-wrap items-center gap-1 md:gap-2 text-xs md:text-sm text-slate-600 dark:text-slate-300">
          <span className="rounded-full bg-brand-100 px-2 py-1 font-medium text-brand-700 dark:bg-brand-800 dark:text-brand-300">
            {connector.power} kW
          </span>
          <span className="rounded-full bg-slate-100 px-2 py-1 font-medium text-slate-700 dark:bg-slate-700 dark:text-slate-300">
            {connector.type}
          </span>
          <span className="rounded-full bg-slate-100 px-2 py-1 font-medium text-slate-700 dark:bg-slate-700 dark:text-slate-300">
            {connector.power_type}
          </span>
        </div>

        {/* Desktop Expanded Details Section */}
        {!isMobile && expandedConnector === connector.id && (
          <ConnectorDetails
            connector={connector}
            selectedConnector={selectedConnector}
            setSelectedConnector={onSelectConnector}
            isConnectorSelectable={isConnectorSelectable}
            online={online}
            childrenAfterActions={
              selectedConnector === connector.id ? (
                <ConnectButton
                  selectedConnector={selectedConnector}
                  connectors={connectors}
                  isStarting={isStarting}
                  onStartSession={onStartSession}
                />
              ) : null
            }
          />
        )}
      </div>
    </div>
  );
};

export default ConnectorCard;