"use client";

import { useState, useEffect, useRef } from "react";
import type { FleetCar } from "@/lib/data";

const WA = "212651621512";

interface BookingModalProps {
  car: FleetCar | null;
  onClose: () => void;
}

export default function BookingModal({ car, onClose }: BookingModalProps) {
  const [form, setForm] = useState({
    name: "",
    phone: "",
    email: "",
    startDate: "",
    endDate: "",
    pickup: "",
  });
  const [submitted, setSubmitted] = useState(false);
  const overlayRef = useRef<HTMLDivElement>(null);

  /* Close on Escape */
  useEffect(() => {
    const handler = (e: KeyboardEvent) => { if (e.key === "Escape") onClose(); };
    document.addEventListener("keydown", handler);
    document.body.style.overflow = "hidden";
    return () => {
      document.removeEventListener("keydown", handler);
      document.body.style.overflow = "";
    };
  }, [onClose]);

  if (!car) return null;

  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
    setForm({ ...form, [e.target.name]: e.target.value });
  };

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();

    const nights = form.startDate && form.endDate
      ? Math.max(1, Math.ceil((new Date(form.endDate).getTime() - new Date(form.startDate).getTime()) / 86400000))
      : "?";

    const msg = encodeURIComponent(
      `🚗 *Demande de réservation — Setocar*\n\n` +
      `*Véhicule:* ${car.tag}\n` +
      `*Dates:* ${form.startDate || "?"} → ${form.endDate || "?"} (${nights} jour(s))\n` +
      `*Récupération:* ${form.pickup || "À définir"}\n\n` +
      `👤 *Client:*\n` +
      `Nom: ${form.name}\n` +
      `Tél: ${form.phone}\n` +
      `Email: ${form.email}\n\n` +
      `Merci de confirmer la disponibilité et le prix.`
    );

    window.open(`https://wa.me/${WA}?text=${msg}`, "_blank");
    setSubmitted(true);
    setTimeout(() => { onClose(); setSubmitted(false); }, 2000);
  };

  const overlayClick = (e: React.MouseEvent) => {
    if (e.target === overlayRef.current) onClose();
  };

  const inputStyle: React.CSSProperties = {
    width: "100%",
    padding: "0.65rem 0.9rem",
    background: "#141926",
    border: "1px solid #2a3050",
    borderRadius: "6px",
    color: "#fff",
    fontFamily: "var(--font-montserrat)",
    fontSize: "0.88rem",
    outline: "none",
    transition: "border-color 0.2s",
    boxSizing: "border-box",
    textTransform: "none",
    letterSpacing: 0,
  };

  const labelStyle: React.CSSProperties = {
    display: "block",
    fontFamily: "var(--font-montserrat)",
    fontSize: "0.75rem",
    fontWeight: 700,
    color: "rgba(255,255,255,0.55)",
    textTransform: "uppercase",
    letterSpacing: "0.07em",
    marginBottom: "0.35rem",
  };

  return (
    <div
      ref={overlayRef}
      onClick={overlayClick}
      style={{
        position: "fixed",
        inset: 0,
        zIndex: 10000,
        background: "rgba(0,0,0,0.75)",
        backdropFilter: "blur(6px)",
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        padding: "1rem",
        animation: "fadeIn 0.2s ease",
      }}
    >
      <div
        style={{
          background: "#1c2133",
          borderRadius: "14px",
          border: "1px solid #2a3050",
          width: "100%",
          maxWidth: 540,
          maxHeight: "90vh",
          overflowY: "auto",
          boxShadow: "0 30px 80px rgba(0,0,0,0.7)",
          animation: "slideUp 0.25s ease",
        }}
      >
        {/* Header */}
        <div
          style={{
            background: "#e85c1a",
            padding: "1.2rem 1.5rem",
            display: "flex",
            alignItems: "center",
            justifyContent: "space-between",
            borderRadius: "14px 14px 0 0",
          }}
        >
          <div>
            <p style={{ fontFamily: "var(--font-montserrat)", fontSize: "0.7rem", color: "rgba(255,255,255,0.8)", textTransform: "uppercase", letterSpacing: "0.08em", marginBottom: 2 }}>
              Réservation
            </p>
            <h2 style={{ fontFamily: "var(--font-oswald)", fontSize: "1.4rem", color: "#fff", letterSpacing: "0.04em" }}>
              {car.tag}
            </h2>
          </div>
          <button
            onClick={onClose}
            id="modal-close-btn"
            style={{
              background: "rgba(255,255,255,0.2)",
              border: "none",
              color: "#fff",
              width: 34,
              height: 34,
              borderRadius: "50%",
              cursor: "pointer",
              display: "flex",
              alignItems: "center",
              justifyContent: "center",
              fontSize: "1.1rem",
              flexShrink: 0,
              transition: "background 0.2s",
            }}
            aria-label="Fermer"
          >
            ✕
          </button>
        </div>

        {/* Specs strip */}
        <div style={{ display: "flex", gap: "1rem", padding: "0.75rem 1.5rem", background: "#141926", borderBottom: "1px solid #2a3050" }}>
          {[
            { icon: "👥", label: `${car.seats} Places` },
            { icon: "⚙️", label: car.transmission },
            { icon: "⛽", label: car.fuel },
          ].map((s) => (
            <span key={s.label} style={{ fontFamily: "var(--font-montserrat)", fontSize: "0.78rem", color: "rgba(255,255,255,0.65)", textTransform: "none", letterSpacing: 0 }}>
              {s.icon} {s.label}
            </span>
          ))}
        </div>

        {/* Form */}
        <form onSubmit={handleSubmit} style={{ padding: "1.5rem" }}>
          {submitted ? (
            <div style={{ textAlign: "center", padding: "2rem 0" }}>
              <div style={{ fontSize: "3rem", marginBottom: "0.75rem" }}>✅</div>
              <p style={{ fontFamily: "var(--font-oswald)", fontSize: "1.2rem", color: "#fff" }}>Redirection vers WhatsApp…</p>
            </div>
          ) : (
            <>
              {/* Dates */}
              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "1rem", marginBottom: "1rem" }}>
                <div>
                  <label style={labelStyle}>Date de début *</label>
                  <input
                    type="date"
                    name="startDate"
                    required
                    value={form.startDate}
                    onChange={handleChange}
                    style={inputStyle}
                    min={new Date().toISOString().split("T")[0]}
                  />
                </div>
                <div>
                  <label style={labelStyle}>Date de fin *</label>
                  <input
                    type="date"
                    name="endDate"
                    required
                    value={form.endDate}
                    onChange={handleChange}
                    style={inputStyle}
                    min={form.startDate || new Date().toISOString().split("T")[0]}
                  />
                </div>
              </div>

              {/* Pickup */}
              <div style={{ marginBottom: "1rem" }}>
                <label style={labelStyle}>Lieu de récupération *</label>
                <select
                  name="pickup"
                  required
                  value={form.pickup}
                  onChange={handleChange}
                  style={{ ...inputStyle, cursor: "pointer" }}
                >
                  <option value="" disabled>Choisir un point de récupération…</option>
                  <option value="Aéroport Marrakech Menara">✈️ Aéroport Marrakech Menara</option>
                  <option value="Agence Guéliz (Carré Eden)">📍 Agence Guéliz – Derrière Carré Eden</option>
                  <option value="Hôtel (préciser dans WhatsApp)">🏨 Mon hôtel (à préciser)</option>
                  <option value="Gare de Marrakech">🚂 Gare de Marrakech</option>
                </select>
              </div>

              {/* Personal info */}
              <div style={{ height: 1, background: "#2a3050", margin: "1rem 0" }} />
              <p style={{ fontFamily: "var(--font-montserrat)", fontSize: "0.72rem", color: "rgba(255,255,255,0.4)", textTransform: "uppercase", letterSpacing: "0.08em", marginBottom: "0.85rem" }}>
                Vos coordonnées
              </p>

              <div style={{ marginBottom: "1rem" }}>
                <label style={labelStyle}>Nom complet *</label>
                <input
                  type="text"
                  name="name"
                  required
                  placeholder="Prénom et Nom"
                  value={form.name}
                  onChange={handleChange}
                  style={inputStyle}
                />
              </div>

              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "1rem", marginBottom: "1.25rem" }}>
                <div>
                  <label style={labelStyle}>Téléphone *</label>
                  <input
                    type="tel"
                    name="phone"
                    required
                    placeholder="+212 6XX XXX XXX"
                    value={form.phone}
                    onChange={handleChange}
                    style={inputStyle}
                  />
                </div>
                <div>
                  <label style={labelStyle}>Email</label>
                  <input
                    type="email"
                    name="email"
                    placeholder="votre@email.com"
                    value={form.email}
                    onChange={handleChange}
                    style={inputStyle}
                  />
                </div>
              </div>

              {/* Submit */}
              <button
                type="submit"
                id="booking-submit-btn"
                style={{
                  width: "100%",
                  padding: "0.9rem",
                  background: "#25d366",
                  border: "none",
                  borderRadius: "8px",
                  color: "#fff",
                  fontFamily: "var(--font-montserrat)",
                  fontWeight: 700,
                  fontSize: "0.95rem",
                  cursor: "pointer",
                  display: "flex",
                  alignItems: "center",
                  justifyContent: "center",
                  gap: "0.6rem",
                  boxShadow: "0 4px 18px rgba(37,211,102,0.35)",
                  transition: "all 0.2s",
                  textTransform: "none",
                  letterSpacing: 0,
                }}
              >
                <svg width="18" height="18" viewBox="0 0 24 24" fill="white">
                  <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/>
                </svg>
                Confirmer via WhatsApp
              </button>
              <p style={{ textAlign: "center", fontFamily: "var(--font-montserrat)", fontSize: "0.72rem", color: "rgba(255,255,255,0.35)", marginTop: "0.75rem", textTransform: "none", letterSpacing: 0 }}>
                🔒 Vos données ne sont utilisées que pour traiter votre réservation
              </p>
            </>
          )}
        </form>
      </div>

      <style>{`
        @keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }
        @keyframes slideUp { from { opacity: 0; transform: translateY(24px) } to { opacity: 1; transform: translateY(0) } }
        input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(0.7); cursor: pointer; }
      `}</style>
    </div>
  );
}