/**
 * POTAPanel Component
 * Displays Parks on the Air activations with ON/OFF toggle
 */
import React from 'react';

export const POTAPanel = ({ data, loading, showOnMap, onToggleMap }) => {
  return (
    <div className="panel" style={{ padding: '8px', height: '100%', display: 'flex', flexDirection: 'column' }}>
      <div className="panel-header" style={{ 
        display: 'flex', 
        justifyContent: 'space-between', 
        alignItems: 'center', 
        marginBottom: '6px',
        fontSize: '11px'
      }}>
        <span>▲ POTA ACTIVATORS {data?.length > 0 ? `(${data.length})` : ''}</span>
        <button
          onClick={onToggleMap}
          title={showOnMap ? 'Hide POTA activators on map' : 'Show POTA activators on map'}
          style={{
            background: showOnMap ? 'rgba(68, 204, 68, 0.3)' : 'rgba(100, 100, 100, 0.3)',
            border: `1px solid ${showOnMap ? '#44cc44' : '#666'}`,
            color: showOnMap ? '#44cc44' : '#888',
            padding: '1px 6px',
            borderRadius: '3px',
            fontSize: '9px',
            fontFamily: 'JetBrains Mono',
            cursor: 'pointer'
          }}
        >
          ⊞ Map {showOnMap ? 'ON' : 'OFF'}
        </button>
      </div>
      
      <div style={{ flex: 1, overflowY: 'auto' }}>
        {loading ? (
          <div style={{ display: 'flex', justifyContent: 'center', padding: '10px' }}>
            <div className="loading-spinner" />
          </div>
        ) : data && data.length > 0 ? (
          <div style={{ fontSize: '10px', fontFamily: 'JetBrains Mono, monospace' }}>
            {data.map((spot, i) => (
              <div 
                key={`${spot.call}-${spot.ref}-${i}`}
                style={{ 
                  display: 'grid',
                  gridTemplateColumns: '62px 50px 58px 1fr',
                  gap: '4px',
                  padding: '3px 0',
                  borderBottom: i < data.length - 1 ? '1px solid var(--border-color)' : 'none'
                }}
              >
                <span style={{ color: '#44cc44', fontWeight: '600', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
                  {spot.call}
                </span>
                <span style={{ color: 'var(--text-muted)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
                  {spot.locationDesc || spot.ref}
                </span>
                <span style={{ color: 'var(--accent-cyan)', textAlign: 'right' }}>
                  {spot.freq}
                </span>
                <span style={{ color: 'var(--text-muted)', textAlign: 'right', fontSize: '9px' }}>
                  {spot.time}
                </span>
              </div>
            ))}
          </div>
        ) : (
          <div style={{ textAlign: 'center', color: 'var(--text-muted)', padding: '10px', fontSize: '11px' }}>
            No POTA spots
          </div>
        )}
      </div>
    </div>
  );
};

export default POTAPanel;