'use client';

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

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

export function DesktopChargePointDrawer({ chargePoint, onClose }: DesktopChargePointDrawerProps) {
  // Close on ESC
  React.useEffect(() => {
    const handleEscape = (e: KeyboardEvent) => e.key === 'Escape' && onClose();
    document.addEventListener('keydown', handleEscape);
    return () => document.removeEventListener('keydown', handleEscape);
  }, [onClose]);

  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 statusColor = () =>
    available > 0
      ? 'text-green-500'
      : charging > 0
      ? 'text-yellow-500'
      : 'text-red-500';

  const statusBg = () =>
    available > 0
      ? 'bg-green-100 dark:bg-green-900/30 border-green-300 dark:border-green-700'
      : charging > 0
      ? 'bg-yellow-100 dark:bg-yellow-900/30 border-yellow-300 dark:border-yellow-700'
      : 'bg-red-100 dark:bg-red-900/30 border-red-300 dark:border-red-700';

  const connectorStatus = (status: string) => {
    const base = 'px-3 py-1 rounded-full text-xs font-medium border';
    switch (status) {
      case 'Available':
        return `${base} bg-green-100 dark:bg-green-900/30 text-green-800 dark:text-green-300 border-green-300 dark:border-green-700`;
      case 'Charging':
        return `${base} bg-yellow-100 dark:bg-yellow-900/30 text-yellow-800 dark:text-yellow-300 border-yellow-300 dark:border-yellow-700`;
      case 'Faulted':
        return `${base} bg-red-100 dark:bg-red-900/30 text-red-800 dark:text-red-300 border-red-300 dark:border-red-700`;
      default:
        return `${base} bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-gray-300 border-gray-300 dark:border-gray-700`;
    }
  };

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

  return (
    <div className="fixed inset-0 z-[9996] flex">
      {/* Drawer */}
      <div className="w-96 h-full bg-white dark:bg-gray-900 shadow-2xl animate-slide-in-right overflow-y-auto border-r border-gray-200 dark:border-gray-800">
        {/* Header */}
        <div className="flex items-center justify-between p-5 bg-gray-50 dark:bg-gray-800/50 border-b border-gray-200 dark:border-gray-700">
          <h2 className="text-lg font-bold text-gray-900 dark:text-gray-100">Charge Point Details</h2>
          <button
            onClick={onClose}
            className="p-2 hover:bg-gray-200 dark:hover:bg-gray-700 rounded-full transition-colors"
          >
            <X className="w-5 h-5 text-gray-500 dark:text-gray-400" />
          </button>
        </div>

        <div className="p-6 space-y-6">
          {/* Title + Status */}
          <div>
            <h3 className="text-2xl font-bold text-brand-600 dark:text-brand-400">{chargePoint.name}</h3>
            <div className="flex gap-2 mt-3">
              <span
                className={clsx(
                  'px-3 py-1.5 rounded-full text-sm font-semibold border',
                  chargePoint.online
                    ? 'bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-300 border-green-300 dark:border-green-700'
                    : 'bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-300 border-red-300 dark:border-red-700'
                )}
              >
                {chargePoint.online ? 'Online' : 'Offline'}
              </span>
              {chargePoint.public && (
                <span className="px-3 py-1.5 rounded-full text-sm font-semibold bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 border border-blue-300 dark:border-blue-700">
                  Public
                </span>
              )}
            </div>
            <div className="flex gap-3 mt-4 text-gray-600 dark:text-gray-400">
              <MapPin className="w-5 h-5 flex-shrink-0" />
              <div>
                <p className="font-medium">{chargePoint.description || 'No description available'}</p>
                <p className="text-xs">{formatLocation()}</p>
              </div>
            </div>
          </div>

          {/* Availability */}
          <div className={clsx('p-4 rounded-lg border-2', statusBg())}>
            <div className="flex items-center justify-between mb-2">
              <h4 className="text-lg font-semibold flex items-center gap-2 text-gray-900 dark:text-gray-100">
                <Zap className="w-5 h-5" /> Availability
              </h4>
              <span className={clsx('text-lg font-bold', statusColor())}>
                {available}/{total}
              </span>
            </div>
            <div className="space-y-1 text-sm">
              <div className="flex justify-between">
                <span>Available:</span>
                <span className="font-medium text-green-500">{available} connectors</span>
              </div>
              {charging > 0 && (
                <div className="flex justify-between">
                  <span>In Use:</span>
                  <span className="font-medium text-yellow-500">{charging} connectors</span>
                </div>
              )}
            </div>
          </div>

          {/* Connectors */}
          <div>
            <h4 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-4 flex items-center gap-2">
              <Zap className="w-5 h-5" /> Connectors
            </h4>
            <div className="space-y-3">
              {connectors.map((connector, i) => (
                <div
                  key={connector.id}
                  className="p-4 rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 shadow-sm hover:shadow-md transition-shadow"
                >
                  <div className="flex items-center justify-between mb-3">
                    <div>
                      <h5 className="font-semibold text-gray-900 dark:text-gray-100">
                        {connector.name || `Connector ${connector.connector_number || i + 1}`}
                      </h5>
                      <p className="text-sm text-gray-500 dark:text-gray-400">
                        {connector.type} • {connector.format}
                      </p>
                    </div>
                    <span className={connectorStatus(connector.status)}>
                      {connector.status}
                    </span>
                  </div>
                  <div className="grid grid-cols-2 text-sm gap-4">
                    <div>
                      <span className="text-gray-500 dark:text-gray-400">Power:</span>
                      <p className="font-medium text-gray-900 dark:text-gray-100">
                        {connector.power}kW {connector.power_type}
                      </p>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </div>

          {/* Actions */}
          <div className="space-y-3 pt-4 border-t border-gray-200 dark:border-gray-700">
            <button
              onClick={() =>
                chargePoint.coordinates &&
                window.open(
                  `https://www.google.com/maps/dir/?api=1&destination=${chargePoint.coordinates[0]},${chargePoint.coordinates[1]}`,
                  '_blank'
                )
              }
              disabled={!chargePoint.coordinates}
              className="w-full flex items-center justify-center gap-2 bg-blue-600 hover:bg-blue-700 disabled:opacity-50 text-white text-sm font-medium py-3 px-4 rounded-lg shadow-sm hover:shadow-md transition-colors"
            >
              <Navigation className="w-4 h-4" /> Get Directions
            </button>
            <button
              onClick={() => (window.location.href = `/stations/${chargePoint.id}`)}
              className="w-full flex items-center justify-center gap-2 bg-brand-500 hover:bg-brand-600 text-white text-sm font-medium py-3 px-4 rounded-lg shadow-sm hover:shadow-md transition-colors"
            >
              Details
            </button>
          </div>

          {/* Last updated */}
          <div className="flex items-center justify-center gap-2 pt-4 text-xs text-gray-400">
            <Clock className="w-3 h-3" />
            <span>Last updated: {new Date(chargePoint.updated_at).toLocaleString()}</span>
          </div>
        </div>
      </div>
      {/* Backdrop */}
      <div
        className="flex-1 bg-black/40 backdrop-blur-sm"
        onClick={onClose}
      />
    </div>
  );
}