"use client";

import { useState } from "react";
import Image from "next/image";
import { type Car } from "@/lib/data";
import BookingModal from "./BookingModal";

/* ─── SVG icon helpers ──────────────────────────────── */
const IconSeats = () => (
  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
    <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/>
    <circle cx="9" cy="7" r="4"/>
    <path d="M23 21v-2a4 4 0 0 0-3-3.87"/>
    <path d="M16 3.13a4 4 0 0 1 0 7.75"/>
  </svg>
);

const IconGear = () => (
  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
    <circle cx="12" cy="12" r="3"/>
    <path d="M19.07 4.93l-1.41 1.41M4.93 4.93l1.41 1.41M19.07 19.07l-1.41-1.41M4.93 19.07l1.41-1.41M12 2v2M12 20v2M2 12h2M20 12h2"/>
  </svg>
);

const IconFuel = () => (
  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
    <path d="M3 22V8l5-6h8l5 6v14H3z"/>
    <path d="M9 22V12h6v10"/>
    <path d="M18 8h2a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2h-2"/>
  </svg>
);

/* ─── Individual car card ───────────────────────────── */
function FleetCard({
  car,
  onClick,
}: {
  car: Car;
  onClick: (car: Car) => void;
}) {
  const [hovered, setHovered] = useState(false);
  const isExternal = car.image.startsWith("http");

  return (
    <div
      id={`fleet-card-${car.id}`}
      role="button"
      tabIndex={0}
      onClick={() => onClick(car)}
      onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") onClick(car); }}
      onMouseEnter={() => setHovered(true)}
      onMouseLeave={() => setHovered(false)}
      style={{
        background: "#1c2133",
        borderRadius: "10px",
        overflow: "hidden",
        border: `1px solid ${hovered ? "#e85c1a" : "#2a3050"}`,
        display: "flex",
        flexDirection: "column",
        cursor: "pointer",
        transition: "all 0.25s ease",
        transform: hovered ? "translateY(-5px)" : "translateY(0)",
        boxShadow: hovered
          ? "0 16px 40px rgba(232,92,26,0.25)"
          : "0 4px 16px rgba(0,0,0,0.3)",
      }}
      aria-label={`Réserver ${car.name}`}
    >
      {/* Image area */}
      <div style={{ position: "relative", height: 175, background: "#141926", flexShrink: 0 }}>
        {/* Orange model tag */}
        <div
          style={{
            position: "absolute",
            top: 10,
            left: 10,
            zIndex: 10,
            background: "#e85c1a",
            color: "#fff",
            fontFamily: "var(--font-montserrat), Montserrat, sans-serif",
            fontWeight: 700,
            fontSize: "0.68rem",
            letterSpacing: "0.07em",
            textTransform: "uppercase",
            padding: "0.22rem 0.6rem",
            borderRadius: "2px",
            lineHeight: 1.4,
          }}
        >
          {car.name}
        </div>

        {/* "Réserver" badge on hover */}
        <div
          style={{
            position: "absolute",
            top: 10,
            right: 10,
            zIndex: 10,
            background: "rgba(17,21,32,0.85)",
            color: hovered ? "#e85c1a" : "rgba(255,255,255,0.5)",
            fontFamily: "var(--font-montserrat)",
            fontSize: "0.65rem",
            fontWeight: 700,
            letterSpacing: "0.06em",
            textTransform: "uppercase",
            padding: "0.22rem 0.55rem",
            borderRadius: "2px",
            border: `1px solid ${hovered ? "#e85c1a" : "#2a3050"}`,
            transition: "all 0.25s",
          }}
        >
          {hovered ? "Réserver →" : "Cliquer"}
        </div>

        <Image
          src={car.image}
          alt={car.name}
          fill
          unoptimized={isExternal}
          style={{ objectFit: "cover", objectPosition: "center" }}
          sizes="(max-width: 768px) 100vw, 33vw"
        />
      </div>

      {/* Specs strip */}
      <div
        style={{
          display: "flex",
          justifyContent: "space-around",
          alignItems: "center",
          padding: "0.65rem 0.5rem",
          borderTop: `1px solid ${hovered ? "rgba(232,92,26,0.25)" : "#2a3050"}`,
          gap: "0.25rem",
          transition: "border-color 0.25s",
        }}
      >
        {[
          { icon: <IconSeats />, label: `${car.seats} Places` },
          { icon: <IconGear />, label: car.transmission },
          { icon: <IconFuel />, label: car.fuel },
        ].map((s) => (
          <div
            key={s.label}
            style={{
              display: "flex",
              alignItems: "center",
              gap: "0.28rem",
              color: hovered ? "rgba(255,255,255,0.9)" : "rgba(255,255,255,0.65)",
              fontSize: "0.73rem",
              fontFamily: "var(--font-montserrat)",
              fontWeight: 500,
              textTransform: "none",
              transition: "color 0.25s",
            }}
          >
            {s.icon}
            {s.label}
          </div>
        ))}
      </div>
    </div>
  );
}

/* ─── Fleet Section (manages modal state) ─────────────── */
export default function FleetSection({ fleetCars }: { fleetCars: Car[] }) {
  const [selectedCar, setSelectedCar] = useState<Car | null>(null);

  return (
    <>
      <section
        id="flotte"
        style={{ background: "#111520", padding: "2.5rem 1.5rem 2rem" }}
      >
        <div style={{ maxWidth: 1100, margin: "0 auto" }}>
          <div
            className="fleet-grid"
            style={{
              display: "grid",
              gridTemplateColumns: "repeat(3, 1fr)",
              gap: "1rem",
            }}
          >
            {fleetCars.map((car) => (
              <FleetCard
                key={car.id}
                car={car}
                onClick={setSelectedCar}
              />
            ))}
          </div>
        </div>

        <style>{`
          @media (max-width: 700px) {
            .fleet-grid { grid-template-columns: 1fr 1fr !important; }
          }
          @media (max-width: 440px) {
            .fleet-grid { grid-template-columns: 1fr !important; }
          }
        `}</style>
      </section>

      {/* Booking modal portal */}
      {selectedCar && (
        <BookingModal car={selectedCar as any} onClose={() => setSelectedCar(null)} />
      )}
    </>
  );
}