// server-compatible component

import { ChargePoint } from '@/types/chargepoint/chargepoint';
import StationImage from '../components/StationImage';
import Link from 'next/link';
// force revalidate every 5 seconds
export const revalidate = 5;

interface StationHeaderProps {
  chargePoint: ChargePoint;
}

const StationHeader = ({ chargePoint }: StationHeaderProps) => {
  const getStatusColor = () => {
    const availableConnectors = (chargePoint.connectors || []).filter(c => c.status === 'Available').length;
    const totalConnectors = (chargePoint.connectors || []).length;

    if (availableConnectors === 0) return 'bg-red-500';
    if (availableConnectors === totalConnectors) return 'bg-green-500';
    return 'bg-yellow-500';
  };

  const getStatusText = () => {
    const availableConnectors = (chargePoint.connectors || []).filter(c => c.status === 'Available').length;
    const totalConnectors = (chargePoint.connectors || []).length;

    if (availableConnectors === 0) return 'All Busy';
    if (availableConnectors === totalConnectors) return 'All Available';
    return `${availableConnectors}/${totalConnectors} Available`;
  };

  const getPowerRange = () => {
    const powers = (chargePoint.connectors || []).map(c => c.power);
    const minPower = Math.min(...powers);
    const maxPower = Math.max(...powers);

    if (minPower === maxPower) return `${minPower} kW`;
    return `${minPower}-${maxPower} kW`;
  };

  return (
    <>
      <div className="relative h-48 w-full md:h-64 lg:h-80">
        <StationImage
          imageUrl={chargePoint.meta_data?.image_url}
          name={chargePoint.name}
          className="rounded-t-lg object-cover"
        />
        <div className="absolute inset-0 bg-gradient-to-t from-black/60 via-black/10 to-black/10 rounded-t-lg" />

        {/* Status Badge */}
        <div className="absolute top-4 right-4 flex gap-2">
          {chargePoint.online && <div className={`flex items-center gap-2 rounded-full px-3 py-1.5 text-white backdrop-blur-sm ${getStatusColor()}/90`}>
            <div className={`w-2 h-2 rounded-full ${getStatusColor()} animate-pulse`} />
            <span className="text-sm font-medium">{getStatusText()}</span>
          </div>}
          <div className={`flex items-center gap-2 rounded-full px-2 py-1.5 text-white backdrop-blur-sm ${getStatusColor()}/90`}>
            <div className={`text-sm font-medium rounded-full px-1 py-0.5 ${chargePoint.online ? "bg-green-500" : "bg-red-500"}`}>{chargePoint.online ? "Online" : "Offline"}</div>
          </div>
          {/* Report button */}
{/*           <div className="flex items-center gap-2">
            <button className="flex items-center gap-1 bg-red-700 rounded-full px-3 py-1.5 text-white hover:bg-red-800 transition-colors">
              <span className="text-sm font-medium">Report</span>
            </button>
          </div> */}
        </div>

        {/* Quick Info Overlay */}
        <div className="absolute bottom-4 left-4 right-4">
          <div className="bg-white/10 backdrop-blur-md rounded-lg p-4 text-white">
            <h1 className="text-xl md:text-2xl lg:text-3xl font-bold mb-2">
              {chargePoint.name}
            </h1>
            <div className="flex flex-wrap items-center gap-2 text-sm">
              {/* <Link
                href={`https://www.google.com/maps/dir/?api=1&destination=${chargePoint.coordinates?.[0]},${chargePoint.coordinates?.[1]}`}
                target="_blank"
                className="flex items-center gap-1 bg-white/20 rounded-full px-2 py-1 hover:bg-white/30 transition-colors">
                <LocationIcon />
                <span>{chargePoint.coordinates ? `Lat: ${chargePoint.coordinates[0].toFixed(6)}, Lng: ${chargePoint.coordinates[1].toFixed(6)}` : 'Coordinates not available'}</span>
              </Link> */}
              <div className="flex items-center gap-1 bg-white/20 rounded-full px-2 py-1">
                <PowerIcon />
                <span>{getPowerRange()}</span>
              </div>
              {/* Button to navigate to Google Maps */}
              <Link
                href={`https://www.google.com/maps/dir/?api=1&destination=${chargePoint.coordinates?.[0]},${chargePoint.coordinates?.[1]}`}
                target="_blank"
                className="flex items-center gap-1 bg-white/20 rounded-full px-2 py-1 hover:bg-white/30 transition-colors">
                <LocationIcon />
                <span> Navigate to Station </span>
              </Link>
            </div>
          </div>
        </div>
      </div>

      <div className="p-4 md:p-6 dark:bg-gray-800">
        {/* Detailed Information */}
        <div className="space-y-4">
          {/* Address */}
          <div>
            <h3 className="text-sm font-medium text-gray-500 dark:text-gray-400 mb-1">Description</h3>
            <p className="text-gray-900 dark:text-gray-100">{chargePoint.description || 'No description available'}</p>
          </div>

          {/* Connector Types */}
{/*           <div>
            <h3 className="text-sm font-medium text-gray-500 dark:text-gray-400 mb-2">Available Connector Types</h3>
            <div className="flex w-fit gap-2">
              {[...new Set((chargePoint.connectors || []).map(c => c.type))].map((type) => (
                <div
                  key={type}
                  className="flex flex-col items-center gap-1 bg-gray-100 dark:bg-gray-700 rounded-lg px-3 py-2"
                >
                  <ConnectorTypeIcon type={type} size={40} className="inline-block" />
                  <div>
                    <div className="text-sm text-center font-medium text-gray-900 dark:text-gray-100">{type}</div>
                    <div className="text-xs text-center text-gray-500 dark:text-gray-400">
                      {(chargePoint.connectors || []).filter(c => c.type === type).length} available
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </div> */}
        </div>
      </div>
    </>
  );
};

// Icon components
const LocationIcon = () => (
  <svg className="w-4 h-4" 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>
);

const PowerIcon = () => (
  <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
  </svg>
);

const ConnectorIcon = () => (
  <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
  </svg>
);

const ReportIcon = () => (
  <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M18.364 5.636l-1.414 1.414A7.963 7.963 0 0116 12a7.963 7.963 0 01-1.05 4.95l1.414 1.414A9.969 9.969 0 0020 12a9.969 9.969 0 00-1.636-6.364zM5.636 18.364l1.414-1.414A7.963 7.963 0 018 12a7.963 7.963 0 01-1.05-4.95l-1.414-1.414A9.969 9.969 0 004 12a9.969 9.969 0 001.636 6.364zM12 8v4l3 3" />
  </svg>
); 

export default StationHeader;