/**
 * MultiSelectionPanel - Renders the property panel content when multiple
 * nodes and/or edges are selected. Shows a summary list with individual
 * lock/unlock controls and bulk lock actions.
 */
import React from 'react';
import { FiGitBranch, FiLock, FiTrash2, FiUnlock } from 'react-icons/fi';
import { Node, Edge } from '../store/store';
import { t } from '../utils/translation';
import { getComponentIcon, getComponentTypeName } from '../utils/componentUtils';

interface MultiSelectionPanelProps {
  selectedNodes: Node[];
  selectedEdges: Edge[];
  onConfigurationChange?: (nodeId: string, configuration: Record<string, any>) => void;
  onEdgeConfigurationChange?: (edgeId: string, configuration: Record<string, any> | null) => void;
  onDeleteSelected?: () => void;
  isLocked: boolean;
}

const MultiSelectionPanel: React.FC<MultiSelectionPanelProps> = ({
  selectedNodes,
  selectedEdges,
  onConfigurationChange,
  onEdgeConfigurationChange,
  onDeleteSelected,
  isLocked,
}) => {
  // Calculate what items can be locked/unlocked
  const unlocked = [...selectedNodes.filter(n => !n.data?.locked), ...selectedEdges.filter(e => !e.data?.locked)];
  const locked = [...selectedNodes.filter(n => n.data?.locked), ...selectedEdges.filter(e => e.data?.locked)];

  return (
    <div className="panel-content multi-selection">
      <div className="selection-summary">
        {selectedNodes.length > 0 && (
          <div className="summary-section">
            <h4>{t('Components (@count)', { '@count': selectedNodes.length })}</h4>
            <ul className="selection-list">
              {selectedNodes.map((selectedNode: Node) => (
                <li key={selectedNode.id} className="selection-item">
                  <div className="selection-item-icon">{getComponentIcon(selectedNode.type || 'element')}</div>
                  <div className="selection-item-info">
                    <div className="selection-item-label">{selectedNode.data?.label || t('Unnamed')}</div>
                    <div className="selection-item-type">{getComponentTypeName(selectedNode.type || 'element')}</div>
                  </div>
                  <button
                    className={`selection-lock-btn ${selectedNode.data?.locked ? 'locked' : ''}`}
                    onClick={() => {
                      if (onConfigurationChange && !isLocked) {
                        onConfigurationChange(selectedNode.id, {
                          _componentLocked: !selectedNode.data?.locked
                        });
                      }
                    }}
                    disabled={isLocked}
                    title={selectedNode.data?.locked ? t('Unlock') : t('Lock')}
                  >
                    {selectedNode.data?.locked ? <FiLock /> : <FiUnlock />}
                  </button>
                </li>
              ))}
            </ul>
          </div>
        )}

        {selectedEdges.length > 0 && (
          <div className="summary-section">
            <h4>{t('Connections (@count)', { '@count': selectedEdges.length })}</h4>
            <ul className="selection-list">
              {selectedEdges.map((selectedEdge: Edge) => (
                <li key={selectedEdge.id} className="selection-item">
                  <div className="selection-item-icon"><FiGitBranch /></div>
                  <div className="selection-item-info">
                    <div className="selection-item-label">
                      {selectedEdge.label || selectedEdge.data?.conditionLabel || t('No condition')}
                    </div>
                    <div className="selection-item-type">{t('Connection')}</div>
                  </div>
                  <button
                    className={`selection-lock-btn ${selectedEdge.data?.locked ? 'locked' : ''}`}
                    onClick={() => {
                      if (onEdgeConfigurationChange && !isLocked) {
                        const currentLocked = selectedEdge?.data?.locked || false;
                        const newLocked = !currentLocked;
                        onEdgeConfigurationChange(selectedEdge.id, {
                          ...(selectedEdge.data?.conditionConfiguration || {}),
                          edgeLocked: newLocked
                        });
                      }
                    }}
                    disabled={isLocked}
                    title={selectedEdge.data?.locked ? t('Unlock') : t('Lock')}
                  >
                    {selectedEdge.data?.locked ? <FiLock /> : <FiUnlock />}
                  </button>
                </li>
              ))}
            </ul>
          </div>
        )}

        <div className="summary-actions">
          <div className="bulk-lock-actions">
            <button
              className="bulk-action-btn"
              onClick={() => {
                if (!isLocked) {
                  selectedNodes.forEach((selectedNode: Node) => {
                    if (!selectedNode.data?.locked && onConfigurationChange) {
                      onConfigurationChange(selectedNode.id, {
                        _componentLocked: true
                      });
                    }
                  });
                  selectedEdges.forEach((selectedEdge: Edge) => {
                    if (!selectedEdge.data?.locked && onEdgeConfigurationChange) {
                      onEdgeConfigurationChange(selectedEdge.id, {
                        ...(selectedEdge.data?.conditionConfiguration || {}),
                        edgeLocked: true
                      });
                    }
                  });
                }
              }}
              disabled={isLocked || unlocked.length === 0}
              title={t('Lock all selected items')}
            >
              <FiLock /> {t('Lock All')}
            </button>
            <button
              className="bulk-action-btn"
              onClick={() => {
                if (!isLocked) {
                  selectedNodes.forEach((selectedNode: Node) => {
                    if (selectedNode.data?.locked && onConfigurationChange) {
                      onConfigurationChange(selectedNode.id, {
                        _componentLocked: false
                      });
                    }
                  });
                  selectedEdges.forEach((selectedEdge: Edge) => {
                    if (selectedEdge.data?.locked && onEdgeConfigurationChange) {
                      onEdgeConfigurationChange(selectedEdge.id, {
                        ...(selectedEdge.data?.conditionConfiguration || {}),
                        edgeLocked: false
                      });
                    }
                  });
                }
              }}
              disabled={isLocked || locked.length === 0}
              title={t('Unlock all selected items')}
            >
              <FiUnlock /> {t('Unlock All')}
            </button>
          </div>
          <button
            className="bulk-action-btn bulk-delete-btn"
            onClick={() => {
              if (!isLocked && onDeleteSelected) {
                onDeleteSelected();
              }
            }}
            disabled={isLocked}
            title={t('Delete all selected items')}
          >
            <FiTrash2 /> {t('Delete All')}
          </button>
          <p className="summary-note">
            {t('Select a single component or connection to view its configuration.')}
          </p>
        </div>
      </div>
    </div>
  );
};

export default MultiSelectionPanel;
