'use client';

import React from 'react';
import { ChargePoint } from '@/types/chargepoint/chargepoint';
import { MapPin, Zap, X, Navigation } from 'lucide-react';

interface MobileChargePointModalProps {
  readonly chargePoint: ChargePoint | null;
  readonly onClose: () => void;
}

export function MobileChargePointModal({ chargePoint, onClose }: MobileChargePointModalProps) {
  if (!chargePoint) return null;

  const connectors = chargePoint.connectors || [];
  const available = connectors.filter(c => c.status === 'Available').length;
  const charging = connectors.filter(c => c.status === 'Charging').length;
  const total = connectors.length;

  const getStatusColor = () => {
    if (available > 0) return 'text-green-600 bg-green-100 dark:text-green-400 dark:bg-green-900/30';
    if (charging > 0) return 'text-yellow-600 bg-yellow-100 dark:text-yellow-400 dark:bg-yellow-900/30';
    return 'text-red-600 bg-red-100 dark:text-red-400 dark:bg-red-900/30';
  };

  const getConnectorStatusClass = (status: string) => {
    switch (status) {
      case 'Available':
        return 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300';
      case 'Charging':
        return 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-300';
      case 'Faulted':
        return 'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-300';
      default:
        return 'bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-300';
    }
  };

  const formatLocation = () => {
    if (chargePoint.coordinates) {
      return `Lat: ${chargePoint.coordinates[0].toFixed(8)}, Lng: ${chargePoint.coordinates[1].toFixed(8)}`;
    }
    return 'Location not available';
  };

  return (
    <>
      {/* Backdrop */}
      <button 
        className="fixed inset-0 bg-black/60 backdrop-blur-sm z-[9999] lg:hidden"
        onClick={onClose}
        onKeyDown={(e) => e.key === 'Escape' && onClose()}
        aria-label="Close charge point details"
      />

      {/* Modal */}
      <div className="fixed bottom-0 left-0 right-0 z-[10000] lg:hidden animate-slide-up">
        <div className="bg-white dark:bg-gray-900 rounded-t-3xl shadow-xl max-h-[75vh] overflow-hidden mb-24 border-t border-gray-200 dark:border-gray-800">
          
          {/* Header */}
          <div className="sticky top-0 bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-800 z-10">
            <div className="flex items-center justify-between p-4">
              <div className="flex-1 min-w-0">
                <h2 className="text-xl font-bold text-gray-900 dark:text-gray-100 truncate">
                  {chargePoint.name}
                </h2>
                <div className="flex items-center gap-2 mt-1 flex-wrap">
                  <span className={`px-3 py-1 rounded-full text-sm font-medium ${getStatusColor()}`}>
                    {available} of {total} available
                  </span>
                  {chargePoint.online ? (
                    <span className="px-2 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300">
                      Online
                    </span>
                  ) : (
                    <span className="px-2 py-1 rounded-full text-xs font-medium bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-300">
                      Offline
                    </span>
                  )}
                </div>
              </div>
              <button
                onClick={onClose}
                className="p-2 rounded-xl hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors flex-shrink-0 ml-2"
                aria-label="Close"
              >
                <X className="w-6 h-6 text-gray-600 dark:text-gray-300" />
              </button>
            </div>
          </div>

          {/* Content */}
          <div className="p-4 space-y-6 max-h-[calc(75vh-180px)] overflow-y-auto custom-scrollbar">
            
            {/* Location */}
            <div className="flex items-start gap-3">
              <MapPin className="w-5 h-5 mt-1 text-gray-400 dark:text-gray-500 flex-shrink-0" />
              <div className="flex-1 min-w-0">
                <p className="text-gray-900 dark:text-gray-100 font-medium">Location</p>
                <p className="text-gray-600 dark:text-gray-400 text-sm">
                  {chargePoint.description || 'No description available'}
                </p>
                <p className="text-gray-500 dark:text-gray-500 text-xs mt-1">
                  {formatLocation()}
                </p>
              </div>
            </div>

            {/* Availability */}
            <div className="bg-gray-50 dark:bg-gray-800/50 rounded-xl p-4">
              <div className="flex items-center justify-between mb-3">
                <h3 className="font-semibold text-gray-900 dark:text-gray-100 flex items-center gap-2">
                  <Zap className="w-5 h-5 text-brand-500 dark:text-brand-400" />
                  Connector Status
                </h3>
                {charging > 0 && (
                  <div className="flex items-center gap-2 text-sm text-yellow-600 dark:text-yellow-400">
                    <div className="w-2 h-2 bg-yellow-400 rounded-full animate-pulse" />
                    {charging} in use
                  </div>
                )}
              </div>
              
              {/* Connectors */}
              <div className="grid grid-cols-1 gap-2">
                {connectors.slice(0, 4).map((connector) => (
                  <div
                    key={connector.id}
                    className="flex items-center justify-between p-3 bg-white dark:bg-gray-900 rounded-lg border border-gray-200 dark:border-gray-700"
                  >
                    <div className="flex items-center gap-3">
                      <div className="w-8 h-8 bg-brand-100 dark:bg-brand-900/30 rounded-lg flex items-center justify-center">
                        <Zap className="w-4 h-4 text-brand-500 dark:text-brand-400" />
                      </div>
                      <div>
                        <span className="font-medium text-gray-900 dark:text-gray-100">{connector.type}</span>
                        <p className="text-sm text-gray-500 dark:text-gray-400">
                          {connector.power}kW • {connector.format}
                        </p>
                      </div>
                    </div>
                    <span className={`px-2 py-1 rounded-full text-xs font-medium ${getConnectorStatusClass(connector.status)}`}>
                      {connector.status}
                    </span>
                  </div>
                ))}

                {connectors.length > 4 && (
                  <div className="text-center text-sm text-gray-500 dark:text-gray-400 mt-2">
                    +{connectors.length - 4} more connectors
                  </div>
                )}
              </div>
            </div>
          </div>

          {/* Action Buttons */}
          <div className="sticky bottom-0 bg-white dark:bg-gray-900 border-t border-gray-200 dark:border-gray-800 p-4">
            <div className="grid grid-cols-1 gap-3">
              <button 
                onClick={() => {
                  if (chargePoint.coordinates) {
                    const url = `https://www.google.com/maps/dir/?api=1&destination=${chargePoint.coordinates[0]},${chargePoint.coordinates[1]}`;
                    window.open(url, '_blank');
                  }
                }}
                className="flex items-center justify-center gap-2 px-4 py-3 bg-brand-500 text-white rounded-xl font-medium hover:bg-brand-600 transition-colors"
                disabled={!chargePoint.coordinates}
              >
                <Navigation className="w-5 h-5" />
                Navigate to Station
              </button>
              <button
                onClick={() => {
                  window.location.href = `/stations/${chargePoint.id}`;
                }}
                className="w-full flex items-center justify-center gap-2 bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-gray-100 text-sm font-medium py-3 px-4 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-200"
              >
                Details
              </button>
            </div>
          </div>
        </div>
      </div>
    </>
  );
}