import { ChargePoint } from '@/types/chargepoint/chargepoint';
import Badge from '@/components/ui/badge/Badge';
import Link from 'next/link';
import StationImage from '@/modules/chargepointModule/detail/components/StationImage';

interface ChargePointCardProps {
  chargePoint: ChargePoint;
}

const ChargePointCard: React.FC<ChargePointCardProps> = ({ chargePoint }) => {
  const getStatusBadgeProps = (status: string) => {
    switch (status.toLowerCase()) {
      case 'available':
        return { color: 'success' as const, variant: 'solid' as const };
      case 'charging':
      case 'occupied':
        return { color: 'warning' as const, variant: 'solid' as const };
      case 'faulted':
        return { color: 'error' as const, variant: 'solid' as const };
      case 'offline':
        return { color: 'light' as const, variant: 'solid' as const };
      default:
        return { color: 'info' as const, variant: 'solid' as const };
    }
  };

  const availableConnectors = chargePoint.connectors?.filter(
    connector => connector.status.toLowerCase() === 'available'
  ).length || 0;

  const totalConnectors = chargePoint.connectors?.length || 0;

  const maxPower = chargePoint.connectors?.reduce((max, connector) =>
    Math.max(max, connector.power || 0), 0
  ) || 0;
  
  const formatCoordinates = (coordinates: number[]) => {
    if (!coordinates || coordinates.length < 2) return null;
    return `${coordinates[0].toFixed(8)}, ${coordinates[1].toFixed(8)}`; // lat, lng
  };

  const isOperational = chargePoint.online && chargePoint.active;


  return (
    <Link href={`/stations/${chargePoint.id}`} className="block group">
      <div className="relative overflow-hidden rounded-2xl bg-white shadow-sm transition-all duration-300 hover:shadow-xl hover:-translate-y-1 border border-gray-100 dark:border-gray-700 dark:bg-gray-800">
        <div className="absolute top-3 right-3 z-10">
          <Badge {...getStatusBadgeProps(chargePoint.status || 'unknown')}>
            {chargePoint.status || 'Unknown'}
          </Badge>
        </div>

        <div className="relative h-32 w-full overflow-hidden">
          <StationImage
            imageUrl={chargePoint.meta_data?.image_url || ""}
            name={chargePoint.name}
            className="transition-transform duration-500 group-hover:scale-110"
          />
          <div className="absolute inset-0 bg-gradient-to-t from-black/40 via-black/10 to-transparent" />

          {chargePoint.is_simulator && (
            <div className="absolute bottom-2 left-2">
              <div className="flex items-center gap-1.5 rounded-full bg-blue-600/90 px-2.5 py-1 text-xs font-medium text-white backdrop-blur-sm">
                <div className="h-1.5 w-1.5 rounded-full bg-white animate-pulse"></div>
                Simulator
              </div>
            </div>
          )}
        </div>

        <div className="p-4">
          <div className="mb-3">
            <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-1 line-clamp-1 group-hover:text-brand-600 transition-colors">
              {chargePoint.name}
            </h3>
          </div>

          <div className="grid grid-cols-2 gap-3 mb-4">
            <div className="bg-gradient-to-br from-blue-50 to-blue-100 dark:from-blue-900/20 dark:to-blue-800/20 rounded-xl p-3 text-center">
              <div className="text-xl font-semibold text-blue-600 dark:text-blue-400">
                {availableConnectors}/{totalConnectors}
              </div>
              <div className="text-xs text-blue-700 dark:text-blue-300 font-medium uppercase tracking-wide">
                Available
              </div>
            </div>

            <div className="bg-gradient-to-br from-green-50 to-green-100 dark:from-green-900/20 dark:to-green-800/20 rounded-xl p-3 text-center">
              <div className="text-xl font-semibold text-green-600 dark:text-green-400">
                {maxPower}kW
              </div>
              <div className="text-xs text-green-700 dark:text-green-300 font-medium uppercase tracking-wide">
                Max Power
              </div>
            </div>
          </div>

          {chargePoint.coordinates && (
            <div className="flex items-center gap-2 text-xs text-gray-600 dark:text-gray-300 mb-3 p-2 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
              <svg className="h-4 w-4 text-gray-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
              </svg>
              <span className="font-mono">
                {formatCoordinates(chargePoint.coordinates)}
              </span>
            </div>
          )}

          <div className="flex justify-between items-center pt-3 border-t border-gray-100 dark:border-gray-700">
            <div className="flex items-center gap-2">
              <div className={`h-3 w-3 rounded-full ${
                isOperational 
                  ? 'bg-green-500 shadow-sm shadow-green-500/50' 
                  : 'bg-red-500 shadow-sm shadow-red-500/50'
              }`} />
              <span className="text-sm font-medium text-gray-700 dark:text-gray-300">
                {isOperational ? 'Online' : 'Offline'}
              </span>
            </div>

            {chargePoint.public && (
              <span className="inline-flex items-center rounded-full bg-blue-100 dark:bg-blue-900/30 px-2.5 py-1 text-xs font-medium text-blue-700 dark:text-blue-300">
                <svg className="h-3 w-3 mr-1" fill="currentColor" viewBox="0 0 20 20">
                  <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM4.332 8.027a6.012 6.012 0 011.912-2.706C6.512 5.73 6.974 6 7.5 6A1.5 1.5 0 019 7.5V8a2 2 0 004 0 2 2 0 011.523-1.943A5.977 5.977 0 0116 10c0 .34-.028.675-.083 1H15a2 2 0 00-2 2v2.197A5.973 5.973 0 0110 16v-2a2 2 0 00-2-2 2 2 0 01-2-2 2 2 0 00-1.668-1.973z" clipRule="evenodd" />
                </svg>
                Public
              </span>
            )}
          </div>
        </div>

        <div className="absolute inset-0 rounded-2xl ring-2 ring-brand-500/0 group-hover:ring-brand-500/20 transition-all duration-300 pointer-events-none"></div>
      </div>
    </Link>
  );
};

export default ChargePointCard;