import Image from "next/image";
import { formatMoney } from "@/lib/format";

/** One vehicle row from provider/vehicles. */
export interface Scooter {
  id: number | string;
  code: string;
  model: string;
  status: string; // API slug: active | in_ride | maintenance | inactive | out_of_service
  status_label: string; // Arabic label from server — render directly
  battery_percent: number;
  image: string | null;
  location: string;
  rides_today: number;
  revenue_today: number;
  your_share_today: number;
  currency: string;
}

function getStatusColor(status: string): string {
  if (status === "active") {
    return "text-[#FCD704] bg-[#FCD704]/15";
  }
  if (status === "maintenance") {
    return "text-orange-400 bg-orange-400/15";
  }
  if (status === "in_ride") {
    return "text-blue-400 bg-blue-400/15";
  }
  return "text-gray-400 bg-gray-400/15";
}

function getBatteryColor(percent: number): string {
  if (percent > 50) {
    return "bg-[#FCD704]";
  }
  if (percent > 20) {
    return "bg-yellow-400";
  }
  return "bg-red-500";
}

function handleImageError(event: React.SyntheticEvent<HTMLImageElement>): void {
  const target = event.currentTarget;
  target.style.display = "none";
  const sibling = target.nextElementSibling as HTMLElement | null;
  if (sibling) {
    sibling.style.display = "flex";
  }
}

function ScooterCardContent({ scooter }: Readonly<{ scooter: Scooter }>) {
  const statusColor = getStatusColor(scooter.status);
  const batteryColor = getBatteryColor(scooter.battery_percent);

  return (
    <>
      <div className="flex items-center justify-between gap-3 mb-3">
        <div className="flex items-center gap-3">
          <div>
            <span className="text-white font-bold text-base block">
              {scooter.code}
            </span>
            <span className="text-gray-500 text-xs">{scooter.model}</span>
          </div>

          {scooter.image ? (
            <Image
              src={scooter.image}
              alt={scooter.code}
              width={40}
              height={40}
              unoptimized
              className="w-10 h-10 rounded-xl object-cover bg-[#FCD704]/10"
              onError={handleImageError}
            />
          ) : null}
          <div
            className="w-10 h-10 bg-[#FCD704]/15 rounded-xl items-center justify-center"
            style={{ display: scooter.image ? "none" : "flex" }}
          >
            <i className="ri-e-bike-line text-[#FCD704] text-lg" />
          </div>
        </div>
        <span
          className={`text-xs font-semibold px-2.5 py-1 rounded-full shrink-0 ${statusColor}`}
        >
          ● {scooter.status_label}
        </span>
      </div>

      <div className="mb-3">
        <div className="flex items-center justify-between mb-1">
          <span className="text-white text-xs font-medium">
            {scooter.battery_percent}% ⚡
          </span>
          <span className="text-gray-400 text-xs">البطارية</span>
        </div>
        <div className="h-1.5 bg-white/10 rounded-full overflow-hidden">
          <div
            className={`h-full rounded-full ${batteryColor}`}
            style={{ width: `${scooter.battery_percent}%` }}
          />
        </div>
      </div>

      <div className="flex items-center justify-between text-xs mb-3">
        <span className="text-[#FCD704] font-semibold">
          {formatMoney(scooter.your_share_today, scooter.currency)} حصتك
        </span>
        <span className="w-px h-3 bg-white/15" />
        <span className="text-gray-400">{scooter.rides_today} رحلة اليوم</span>
      </div>

      <div className="flex items-center gap-1.5">
        <span className="text-gray-400 text-xs">{scooter.location}</span>
        <i className="ri-map-pin-line text-[#FCD704] text-sm" />
      </div>
    </>
  );
}

export default function ScooterCard({
  scooter,
  onClick,
}: Readonly<{
  scooter: Scooter;
  onClick?: () => void;
}>) {
  const className = `bg-[#1E2128] rounded-2xl p-4 mx-5 transition-colors ${
    onClick ? "cursor-pointer hover:bg-white/5" : ""
  }`;

  if (onClick) {
    return (
      <button
        type="button"
        onClick={onClick}
        className={`w-full text-right ${className}`}
      >
        <ScooterCardContent scooter={scooter} />
      </button>
    );
  }

  return (
    <div className={className}>
      <ScooterCardContent scooter={scooter} />
    </div>
  );
}