'use client';

import React from 'react';
import { Station } from '@/types/stationTypes';
import { MapPin, Zap, Clock, X, ChevronRight } from 'lucide-react';

interface MobileClusterModalProps {
  readonly stations: Station[] | null;
  readonly onClose: () => void;
  readonly onStationSelect: (station: Station) => void;
}

export function MobileClusterModal({
  stations,
  onClose,
  onStationSelect,
}: MobileClusterModalProps) {
  if (!stations || stations.length === 0) return null;

  // Get station availability summary
  const getStationSummary = (station: Station) => {
    const available = station.connectors.filter(
      (c) => c.status === 'Available'
    ).length;
    const total = station.connectors.length;
    const charging = station.connectors.filter(
      (c) => c.status === 'Charging'
    ).length;

    return { available, total, charging };
  };

  // Get status color for availability
  const getStatusColor = (available: number, charging: number) => {
    if (available > 0) return 'text-green-600';
    if (charging > 0) return 'text-yellow-600';
    return 'text-red-600';
  };

  // Get status background color
  const getStatusBgColor = (available: number, charging: number) => {
    if (available > 0) return 'bg-green-50 border-green-200';
    if (charging > 0) return 'bg-yellow-50 border-yellow-200';
    return 'bg-red-50 border-red-200';
  };

  return (
    <div
      className="fixed inset-0 z-[9999] lg:hidden"
      role="dialog"
      aria-modal="true"
      aria-labelledby="mobile-cluster-title"
    >
      {/* Backdrop */}
      <button
        className="absolute inset-0 bg-black bg-opacity-50 border-0 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500"
        onClick={onClose}
        aria-label="Close charging station list"
      />

      {/* Modal */}
      <div 
        className="absolute bottom-0 left-0 right-0 bg-white rounded-t-2xl shadow-2xl animate-slide-up max-h-[85vh] flex flex-col"
        onClick={(e) => e.stopPropagation()}
      >
        {/* Header */}
        <div className="flex items-center justify-between p-4 border-b border-gray-200 bg-gray-50 rounded-t-2xl">
          <div className="flex items-center gap-3">
            <h2
              id="mobile-cluster-title"
              className="text-lg font-bold text-gray-900"
            >
              Charging Stations
            </h2>
            <span
              className="px-2 py-1 bg-blue-100 text-blue-800 text-sm font-medium rounded-full"
              aria-live="polite"
            >
              {stations.length}
            </span>
          </div>
          <button
            onClick={onClose}
            className="p-2 hover:bg-gray-200 rounded-full transition-colors duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500"
            aria-label="Close"
          >
            <X className="w-5 h-5 text-gray-500" aria-hidden="true" />
          </button>
        </div>

        {/* Content */}
        <div
          className="flex-1 overflow-y-auto p-4 pb-28 space-y-3"
          aria-label="List of charging stations"
        >
          {stations.map((station) => {
            const { available, total, charging } = getStationSummary(station);

            return (
              <button
                key={station.id}
                onClick={() => onStationSelect(station)}
                className="w-full p-4 bg-white border border-gray-200 rounded-lg shadow-sm hover:shadow-md transition-all duration-200 active:scale-[0.98] text-left focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500"
                aria-label={`View details for ${station.name}`}
              >
                {/* Title */}
                <div className="flex items-start justify-between mb-3">
                  <div className="flex-1 min-w-0">
                    <h3 className="text-base font-semibold text-gray-900 truncate">
                      {station.name}
                    </h3>
                  </div>
                  <ChevronRight
                    className="w-5 h-5 text-gray-400 flex-shrink-0"
                    aria-hidden="true"
                  />
                </div>

                {/* Address */}
                <div className="flex items-start gap-2 text-sm text-gray-600 mb-3">
                  <MapPin
                    className="w-4 h-4 mt-0.5 flex-shrink-0 text-gray-400"
                    aria-hidden="true"
                  />
                  <span className="truncate">
                    {station.address}, {station.city}
                  </span>
                </div>

                {/* Availability Status */}
                <div
                  className={`p-3 rounded-lg border ${getStatusBgColor(
                    available,
                    charging
                  )}`}
                  aria-live="polite"
                >
                  <div className="flex items-center justify-between">
                    <div className="flex items-center gap-2">
                      <Zap className="w-4 h-4" aria-hidden="true" />
                      <span className="text-sm font-medium text-gray-700">
                        Available
                      </span>
                    </div>
                    <span
                      className={`text-sm font-bold ${getStatusColor(
                        available,
                        charging
                      )}`}
                    >
                      {available}/{total}
                    </span>
                  </div>

                  {charging > 0 && (
                    <div className="flex items-center gap-2 mt-2 pt-2 border-t border-current border-opacity-20">
                      <div
                        className="w-2 h-2 bg-yellow-400 rounded-full animate-pulse"
                        aria-hidden="true"
                      ></div>
                      <span className="text-xs text-gray-600">
                        {charging} in use
                      </span>
                    </div>
                  )}
                </div>

                {/* Quick connector info */}
                <div className="mt-3 flex items-center gap-2 text-xs text-gray-500">
                  <span>
                    {total} connector{total > 1 ? 's' : ''}
                  </span>
                  <span aria-hidden="true">•</span>
                  <span>
                    {Math.max(...station.connectors.map((c) => c.power))}kW max
                  </span>
                </div>
              </button>
            );
          })}
        </div>

        {/* Footer */}
        <div className="p-4 border-t border-gray-200 bg-gray-50">
          <div className="flex items-center justify-center gap-2 text-xs text-gray-400">
            <Clock className="w-3 h-3" aria-hidden="true" />
            <span>Tap any station for details</span>
          </div>
        </div>
      </div>
    </div>
  );
}