"use client";

import { useState } from "react";
import { useRouter } from "next/navigation";
import { Calendar, Clock, Car, MapPin, ChevronDown } from "lucide-react";

const carTypes = ["Tous les types", "Économique", "SUV", "Luxe", "Minivan"];
const pickupLocations = [
  "Aéroport Marrakech-Menara",
  "Gare de Marrakech",
  "Centre-ville Marrakech",
  "Hôtel / Riad (à préciser)",
];
const timeSlots = Array.from({ length: 30 }, (_, i) => {
  const hour = Math.floor(i / 2) + 7;
  const min = i % 2 === 0 ? "00" : "30";
  return `${String(hour).padStart(2, "0")}:${min}`;
});

const WHATSAPP_NUMBER = "212651621512";

export default function BookingForm() {
  const router = useRouter();
  const [form, setForm] = useState({
    pickup: pickupLocations[0],
    dropoff: pickupLocations[0],
    startDate: "",
    endDate: "",
    startTime: "10:00",
    endTime: "10:00",
    carType: carTypes[0],
  });

  const handleChange = (field: string, value: string) => {
    setForm((prev) => ({ ...prev, [field]: value }));
  };

  const handleWhatsApp = () => {
    const msg = encodeURIComponent(
      `Bonjour Setocar! 🚗\n\nJe souhaite louer une voiture:\n📍 Prise en charge: ${form.pickup}\n📍 Retour: ${form.dropoff}\n📅 Du: ${form.startDate} à ${form.startTime}\n📅 Au: ${form.endDate} à ${form.endTime}\n🚗 Type: ${form.carType}\n\nMerci de confirmer la disponibilité.`
    );
    window.open(`https://wa.me/${WHATSAPP_NUMBER}?text=${msg}`, "_blank");
  };

  const handleSearch = () => {
    router.push(`/cars?type=${encodeURIComponent(form.carType)}`);
  };

  return (
    <div
      style={{
        background: "#1c2133",
        borderRadius: "1.25rem",
        padding: "2rem",
        boxShadow: "0 25px 80px rgba(0, 0, 0, 0.4)",
        border: "1px solid #2a3050",
        maxWidth: "900px",
        width: "100%",
      }}
    >
      <h2
        style={{
          fontFamily: "var(--font-playfair), var(--font-oswald)",
          color: "white",
          fontSize: "1.3rem",
          marginBottom: "1.5rem",
          display: "flex",
          alignItems: "center",
          gap: "0.5rem",
        }}
      >
        <Car size={22} color="#e85c1a" />
        Trouver votre voiture idéale
      </h2>

      <div
        style={{
          display: "grid",
          gridTemplateColumns: "repeat(auto-fit, minmax(200px, 1fr))",
          gap: "1rem",
          marginBottom: "1.25rem",
        }}
      >
        {/* Pickup Location */}
        <div>
          <label style={labelStyle}>
            <MapPin size={14} color="#e85c1a" /> Prise en charge
          </label>
          <select
            id="pickup-location"
            value={form.pickup}
            onChange={(e) => handleChange("pickup", e.target.value)}
            style={inputStyle}
          >
            {pickupLocations.map((loc) => (
              <option key={loc}>{loc}</option>
            ))}
          </select>
        </div>

        {/* Return Location */}
        <div>
          <label style={labelStyle}>
            <MapPin size={14} color="#e85c1a" /> Lieu de retour
          </label>
          <select
            id="dropoff-location"
            value={form.dropoff}
            onChange={(e) => handleChange("dropoff", e.target.value)}
            style={inputStyle}
          >
            {pickupLocations.map((loc) => (
              <option key={loc}>{loc}</option>
            ))}
          </select>
        </div>

        {/* Car Type */}
        <div>
          <label style={labelStyle}>
            <Car size={14} color="#e85c1a" /> Type de véhicule
          </label>
          <select
            id="car-type"
            value={form.carType}
            onChange={(e) => handleChange("carType", e.target.value)}
            style={inputStyle}
          >
            {carTypes.map((t) => (
              <option key={t}>{t}</option>
            ))}
          </select>
        </div>
      </div>

      <div
        style={{
          display: "grid",
          gridTemplateColumns: "repeat(auto-fit, minmax(180px, 1fr))",
          gap: "1rem",
          marginBottom: "1.5rem",
        }}
      >
        {/* Start Date */}
        <div>
          <label style={labelStyle}>
            <Calendar size={14} color="#e85c1a" /> Date de début
          </label>
          <input
            id="start-date"
            type="date"
            value={form.startDate}
            min={new Date().toISOString().split("T")[0]}
            onChange={(e) => handleChange("startDate", e.target.value)}
            style={inputStyle}
          />
        </div>

        {/* Start Time */}
        <div>
          <label style={labelStyle}>
            <Clock size={14} color="#e85c1a" /> Heure de début
          </label>
          <select
            id="start-time"
            value={form.startTime}
            onChange={(e) => handleChange("startTime", e.target.value)}
            style={inputStyle}
          >
            {timeSlots.map((t) => (
              <option key={t}>{t}</option>
            ))}
          </select>
        </div>

        {/* End Date */}
        <div>
          <label style={labelStyle}>
            <Calendar size={14} color="#e85c1a" /> Date de fin
          </label>
          <input
            id="end-date"
            type="date"
            value={form.endDate}
            min={form.startDate || new Date().toISOString().split("T")[0]}
            onChange={(e) => handleChange("endDate", e.target.value)}
            style={inputStyle}
          />
        </div>

        {/* End Time */}
        <div>
          <label style={labelStyle}>
            <Clock size={14} color="#e85c1a" /> Heure de fin
          </label>
          <select
            id="end-time"
            value={form.endTime}
            onChange={(e) => handleChange("endTime", e.target.value)}
            style={inputStyle}
          >
            {timeSlots.map((t) => (
              <option key={t}>{t}</option>
            ))}
          </select>
        </div>
      </div>

      {/* Buttons */}
      <div style={{ display: "flex", gap: "1rem", flexWrap: "wrap" }}>
        <button
          id="search-cars-btn"
          onClick={handleSearch}
          style={{ 
            flex: 1, 
            minWidth: "160px", 
            padding: "0.875rem",
            background: "#e85c1a",
            color: "white",
            border: "none",
            borderRadius: "0.5rem",
            fontWeight: 700,
            fontSize: "0.95rem",
            cursor: "pointer",
            display: "flex",
            alignItems: "center",
            justifyContent: "center",
            gap: "0.5rem",
            boxShadow: "0 4px 15px rgba(232, 92, 26, 0.3)",
            transition: "all 0.3s ease",
          }}
          onMouseEnter={(e) => {
            (e.currentTarget as HTMLElement).style.transform = "translateY(-2px)";
            (e.currentTarget as HTMLElement).style.boxShadow = "0 8px 25px rgba(232, 92, 26, 0.4)";
          }}
          onMouseLeave={(e) => {
            (e.currentTarget as HTMLElement).style.transform = "none";
            (e.currentTarget as HTMLElement).style.boxShadow = "0 4px 15px rgba(232, 92, 26, 0.3)";
          }}
        >
          🔍 Voir les voitures
        </button>
        <button
          id="whatsapp-booking-btn"
          onClick={handleWhatsApp}
          style={{
            flex: 1,
            minWidth: "160px",
            padding: "0.875rem",
            borderRadius: "0.5rem",
            border: "none",
            cursor: "pointer",
            background: "#25d366",
            color: "white",
            fontWeight: 700,
            fontSize: "0.95rem",
            display: "flex",
            alignItems: "center",
            justifyContent: "center",
            gap: "0.5rem",
            transition: "all 0.3s ease",
            boxShadow: "0 4px 15px rgba(37, 211, 102, 0.3)",
          }}
          onMouseEnter={(e) => {
            (e.currentTarget as HTMLElement).style.transform = "translateY(-2px)";
            (e.currentTarget as HTMLElement).style.boxShadow = "0 8px 25px rgba(37, 211, 102, 0.4)";
          }}
          onMouseLeave={(e) => {
            (e.currentTarget as HTMLElement).style.transform = "none";
            (e.currentTarget as HTMLElement).style.boxShadow = "0 4px 15px rgba(37, 211, 102, 0.3)";
          }}
        >
          <svg width="20" height="20" 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>
          Réserver via WhatsApp
        </button>
      </div>
      
      <style>{`
        input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(0.8); cursor: pointer; }
      `}</style>
    </div>
  );
}

const labelStyle: React.CSSProperties = {
  display: "flex",
  alignItems: "center",
  gap: "0.3rem",
  fontSize: "0.8rem",
  fontWeight: 600,
  color: "rgba(255,255,255,0.8)",
  marginBottom: "0.375rem",
  textTransform: "uppercase",
  letterSpacing: "0.05em",
};

const inputStyle: React.CSSProperties = {
  width: "100%",
  padding: "0.625rem 1rem",
  border: "1px solid #2a3050",
  borderRadius: "0.5rem",
  fontSize: "0.9rem",
  outline: "none",
  background: "#141926",
  color: "white",
  cursor: "pointer",
  transition: "border-color 0.2s",
  appearance: "none" as const,
};