import React from 'react';
import { Zone, ZoneType } from './types';

interface ZoneSelectionSummaryProps {
  selectedZone: Zone | Zone[] | null;
  onClear?: () => void;
}

const ZONE_LABELS: Record<ZoneType, string> = {
  vip: '⭐ VIP',
  general: '🎫 General',
};

const ZONE_COLORS: Record<ZoneType, string> = {
  vip: 'bg-purple-600',
  general: 'bg-blue-600',
};

export default function ZoneSelectionSummary({
  selectedZone,
  onClear,
}: ZoneSelectionSummaryProps) {
  // Handle both array and single zone
  const zones = Array.isArray(selectedZone) ? selectedZone : selectedZone ? [selectedZone] : [];
  
  if (zones.length === 0) {
    return (
      <div className="rounded-lg bg-[#231f1a] border border-[#393328] p-6 text-center">
        <p className="text-sm text-slate-400">
          No has seleccionado ninguna zona
        </p>
        <p className="text-xs text-slate-500 mt-1">
          Elige una o más zonas del mapa para reservar tus stands
        </p>
      </div>
    );
  }

  const getZoneLabel = (zone: Zone): string => {
    if (zone.label) return zone.label;
    
    const rowLetter = String.fromCharCode(65 + zone.row);
    const colNumber = zone.col + 1;
    
    return `${rowLetter}${colNumber}`;
  };

  const calculateTotalPrice = (): number => {
    return zones.reduce((total, zone) => total + zone.price, 0);
  };

  return (
    <div className="rounded-lg bg-[#231f1a] border border-[#493b22] p-6">
      <div className="flex items-start justify-between mb-4">
        <h3 className="text-lg font-bold text-white">
          {zones.length === 1 ? 'Zona Seleccionada' : `${zones.length} Zonas Seleccionadas`}
        </h3>
        {onClear && (
          <button
            type="button"
            onClick={onClear}
            className="text-xs text-slate-400 hover:text-white transition-colors"
          >
            Limpiar
          </button>
        )}
      </div>

      <div className="space-y-4">
        {/* Lista de zonas seleccionadas */}
        <div className="max-h-80 overflow-y-auto space-y-3">
          {zones.map((zone, index) => (
            <div key={zone.id} className="bg-[#181511] rounded-lg p-4">
              <div className="flex items-center gap-3 mb-2">
                <div className={`w-10 h-10 ${ZONE_COLORS[zone.type]} rounded flex items-center justify-center text-white font-bold text-sm`}>
                  {zone.type === 'vip' ? '⭐' : '🎫'}
                </div>
                <div className="flex-1">
                  <p className="font-semibold text-white text-sm">
                    {ZONE_LABELS[zone.type]}
                  </p>
                  <p className="text-xs text-slate-400">
                    Fila {String.fromCharCode(65 + zone.row)} - Pos. {zone.col + 1}
                  </p>
                </div>
                <p className="text-lg font-bold text-[#f4a825]">
                  ${zone.price}
                </p>
              </div>
            </div>
          ))}
        </div>

        {/* Precio total si hay múltiples zonas */}
        {zones.length > 1 && (
          <div className="bg-[#181511] rounded-lg p-4 border-2 border-[#f4a825]">
            <p className="text-xs text-slate-400 mb-1">Precio total de reservas</p>
            <p className="text-2xl font-black text-[#f4a825]">
              ${calculateTotalPrice()} USD
            </p>
            <p className="text-xs text-slate-500 mt-1">
              {zones.length} stand{zones.length > 1 ? 's' : ''} seleccionado{zones.length > 1 ? 's' : ''}
            </p>
          </div>
        )}

        {/* Características (mostrar características del tipo más común) */}
        <div className="bg-[#181511] rounded-lg p-4">
          <p className="text-xs text-slate-400 mb-2">Incluye:</p>
          <ul className="space-y-1 text-sm text-slate-300">
            {zones.some(z => z.type === 'vip') ? (
              <>
                <li className="flex items-center gap-2">
                  <span className="text-[#f4a825]">✓</span>
                  Ubicación premium en el evento
                </li>
                <li className="flex items-center gap-2">
                  <span className="text-[#f4a825]">✓</span>
                  Mayor visibilidad para tu stand
                </li>
                <li className="flex items-center gap-2">
                  <span className="text-[#f4a825]">✓</span>
                  Zona de alto tráfico
                </li>
                <li className="flex items-center gap-2">
                  <span className="text-[#f4a825]">✓</span>
                  Servicios exclusivos
                </li>
              </>
            ) : (
              <>
                <li className="flex items-center gap-2">
                  <span className="text-[#f4a825]">✓</span>
                  Espacio para tu stand
                </li>
                <li className="flex items-center gap-2">
                  <span className="text-[#f4a825]">✓</span>
                  Acceso durante todo el evento
                </li>
                <li className="flex items-center gap-2">
                  <span className="text-[#f4a825]">✓</span>
                  Ubicación estratégica
                </li>
              </>
            )}
          </ul>
        </div>
      </div>
    </div>
  );
}