'use client';

import React from 'react';
import { X, MapPin, Check, Truck } from 'lucide-react';
import { City } from '@/types';
import { formatCOP } from '@/lib/pricing-engine';

interface CitySelectorModalProps {
  isOpen: boolean;
  onClose: () => void;
  cities: City[];
  selectedCity: City;
  onSelectCity: (city: City) => void;
}

export const CitySelectorModal: React.FC<CitySelectorModalProps> = ({
  isOpen,
  onClose,
  cities,
  selectedCity,
  onSelectCity,
}) => {
  if (!isOpen) return null;

  return (
    <div className="fixed inset-0 z-50 bg-black/80 backdrop-blur-md flex items-center justify-center p-4 animate-in fade-in duration-200">
      <div className="bg-neutral-900 border border-purple-500/30 text-white rounded-3xl max-w-md w-full p-5 sm:p-6 shadow-[0_20px_50px_rgba(168,85,247,0.2)] relative space-y-4">
        {/* Header */}
        <div className="flex items-center justify-between border-b border-neutral-800 pb-3">
          <div className="flex items-center space-x-2">
            <div className="w-8 h-8 rounded-full bg-purple-500/20 border border-purple-400/30 flex items-center justify-center text-purple-400">
              <MapPin className="w-4 h-4" />
            </div>
            <div>
              <h3 className="font-black text-white text-base">Selecciona tu Ciudad</h3>
              <p className="text-xs text-neutral-400">Calculamos tiempos y tarifas oficiales</p>
            </div>
          </div>
          <button
            onClick={onClose}
            className="w-8 h-8 rounded-full bg-neutral-800 hover:bg-neutral-700 text-neutral-300 flex items-center justify-center transition-all cursor-pointer border border-neutral-700"
          >
            <X className="w-4 h-4" />
          </button>
        </div>

        {/* City list */}
        <div className="max-h-80 overflow-y-auto space-y-2 pr-1">
          {cities
            .filter((c) => c.isActive !== false)
            .map((city) => {
              const isSelected = selectedCity.id === city.id;
              const hasCod = city.allowsContraentrega || city.allowCod;

              return (
                <div
                  key={city.id}
                  onClick={() => {
                    onSelectCity(city);
                    onClose();
                  }}
                  className={`p-3 rounded-2xl border transition-all cursor-pointer flex items-center justify-between ${
                    isSelected
                      ? 'border-purple-400 bg-purple-950/50 shadow-[0_0_15px_rgba(168,85,247,0.2)]'
                      : 'border-neutral-800 hover:border-neutral-700 bg-neutral-950'
                  }`}
                >
                  <div className="space-y-0.5">
                    <div className="flex items-center space-x-2">
                      <span className="font-bold text-white text-sm">{city.name}</span>
                      {hasCod && (
                        <span className="text-[10px] bg-purple-500/20 text-purple-300 border border-purple-500/30 font-bold px-1.5 py-0.5 rounded">
                          Contraentrega
                        </span>
                      )}
                    </div>
                    <p className="text-xs text-neutral-400 flex items-center gap-1">
                      <Truck className="w-3 h-3 text-purple-400" />
                      {city.deliveryTime}
                    </p>
                  </div>

                  <div className="flex items-center space-x-2">
                    <span className="text-xs font-black text-white">
                      {city.shippingCost === 0 ? (
                        <span className="text-purple-400 font-bold uppercase">Gratis</span>
                      ) : (
                        formatCOP(city.shippingCost)
                      )}
                    </span>
                    {isSelected && (
                      <div className="w-5 h-5 rounded-full bg-purple-500 text-white flex items-center justify-center">
                        <Check className="w-3.5 h-3.5" />
                      </div>
                    )}
                  </div>
                </div>
              );
            })}
        </div>

        {/* Info footer */}
        <div className="bg-neutral-950 border border-neutral-800 rounded-xl p-3 text-[11px] text-neutral-400">
          💡 <strong>En Cali y zona metropolitana:</strong> entregas el mismo día con mensajería directa y pago contraentrega.
        </div>
      </div>
    </div>
  );
};