/* SAFRI — interactive hero booking widget (tabs → prefilled WhatsApp, no pricing) */
const { useState, useRef, useEffect } = React;

function Stepper({ value, set, min=1, max=40 }){
  return (
    <div className="stepper">
      <button type="button" onClick={()=>set(Math.max(min,value-1))} aria-label="decrease">–</button>
      <span className="val">{value}</span>
      <button type="button" onClick={()=>set(Math.min(max,value+1))} aria-label="increase">+</button>
    </div>
  );
}

function BookingWidget(){
  const [tab, setTab] = useState("rent");
  const tabs = [
    { id:"rent",  label:"Rent a Car", icon:"car" },
    { id:"tour",  label:"Tours",      icon:"mountain" },
    { id:"umrah", label:"Umrah",      icon:"kaaba" },
  ];
  const indRef = useRef(null);
  useEffect(()=>{
    const i = tabs.findIndex(t=>t.id===tab);
    if(indRef.current){
      indRef.current.style.transform = `translateX(calc(${i*100}% + ${i*6}px))`;
      indRef.current.style.background = tab==="umrah"
        ? "linear-gradient(120deg,#186060,#0E3F3F)"
        : tab==="tour" ? "linear-gradient(120deg,#00A8F0,#0078b0)"
        : "linear-gradient(120deg,#F04800,#D84800)";
    }
  },[tab]);

  const today = new Date().toISOString().split("T")[0];

  // rent
  const [veh, setVeh] = useState(0);
  const [driver, setDriver] = useState(true);
  const [rcity, setRcity] = useState("Lahore");
  const [rdays, setRdays] = useState(3);
  const [rdate, setRdate] = useState("");
  // tour
  const [tour, setTour] = useState(0);
  const [tppl, setTppl] = useState(2);
  const [tdate, setTdate] = useState("");
  const [priv, setPriv] = useState(false);
  // umrah
  const [um, setUm] = useState(1);
  const [ucity, setUcity] = useState("Lahore");
  const [uppl, setUppl] = useState(2);
  const [umonth, setUmonth] = useState("");

  function send(){
    let m;
    if(tab==="rent"){
      m = `As-salam alaikum Safri Travels 👋\n\nI'd like a quote to *RENT A CAR*:\n• Vehicle: ${VEHICLES[veh].name} (${VEHICLES[veh].seats}-seat)\n• Driver: ${driver?"With driver":"Self-drive"}\n• City: ${rcity}\n• Duration: ${rdays} day${rdays>1?"s":""}\n• Start date: ${rdate||"flexible"}\n\nPlease share availability & your best package. Thank you!`;
    } else if(tab==="tour"){
      m = `As-salam alaikum Safri Travels 👋\n\nI'm interested in a *TOUR*:\n• Destination: ${TOURS[tour].name}\n• Type: ${priv?"Private trip":"Group departure"}\n• Travellers: ${tppl}\n• Duration: ${TOURS[tour].days}\n• Preferred date: ${tdate||"flexible"}\n\nPlease share the itinerary & package. Thank you!`;
    } else {
      m = `As-salam alaikum Safri Travels 👋\n\nI'd like details on an *UMRAH PACKAGE* for 1447 H:\n• Package: ${UMRAH[um].name} (${UMRAH[um].tier})\n• Departure city: ${ucity}\n• Pilgrims: ${uppl}\n• Duration: ${UMRAH[um].nights}\n• Preferred month: ${umonth||"flexible"}\n\nPlease share the next departure & package. Thank you!`;
    }
    openWA(m);
  }

  return (
    <div className="widget reveal">
      <div className="widget-head">
        <span className="wh-dot"></span>
        <span>Plan in 30 seconds — get a reply in 24 hours</span>
      </div>
      <div className="widget-tabs">
        <div className="tab-ind" ref={indRef}></div>
        {tabs.map(t=>{
          const Ic = Icons[t.icon];
          return (
            <button key={t.id} className={tab===t.id?"active":""} onClick={()=>setTab(t.id)}>
              <Ic size={20} sw={1.7}/>{t.label}
            </button>
          );
        })}
      </div>

      <div className="widget-body">
        {tab==="rent" && (<>
          <div className="field">
            <label>Vehicle</label>
            <select className="control" value={veh} onChange={e=>setVeh(+e.target.value)}>
              {VEHICLES.map((v,i)=><option key={i} value={i}>{v.name} · {v.seats} seats · {v.ex}</option>)}
            </select>
          </div>
          <div className="field">
            <label>Driver</label>
            <div className="chip-row">
              <span className={"chip"+(driver?" active":"")} onClick={()=>setDriver(true)}>With driver</span>
              <span className={"chip"+(!driver?" active":"")} onClick={()=>setDriver(false)}>Self-drive</span>
            </div>
          </div>
          <div className="field-row">
            <div className="field">
              <label>City</label>
              <select className="control" value={rcity} onChange={e=>setRcity(e.target.value)}>
                {CITIES.map(c=><option key={c}>{c}</option>)}
              </select>
            </div>
            <div className="field">
              <label>Days</label>
              <Stepper value={rdays} set={setRdays} min={1} max={60}/>
            </div>
          </div>
          <div className="field">
            <label>Start date</label>
            <input type="date" className="control" min={today} value={rdate} onChange={e=>setRdate(e.target.value)}/>
          </div>
        </>)}

        {tab==="tour" && (<>
          <div className="field">
            <label>Destination</label>
            <select className="control" value={tour} onChange={e=>setTour(+e.target.value)}>
              {TOURS.map((t,i)=><option key={i} value={i}>{t.name} · {t.days}</option>)}
            </select>
          </div>
          <div className="field">
            <label>Trip type</label>
            <div className="chip-row">
              <span className={"chip"+(!priv?" active":"")} onClick={()=>setPriv(false)}>Group departure</span>
              <span className={"chip"+(priv?" active":"")} onClick={()=>setPriv(true)}>Private trip</span>
            </div>
          </div>
          <div className="field-row">
            <div className="field">
              <label>Travellers</label>
              <Stepper value={tppl} set={setTppl} min={1} max={40}/>
            </div>
            <div className="field">
              <label>Preferred date</label>
              <input type="date" className="control" min={today} value={tdate} onChange={e=>setTdate(e.target.value)}/>
            </div>
          </div>
        </>)}

        {tab==="umrah" && (<>
          <div className="field">
            <label>Package</label>
            <select className="control" value={um} onChange={e=>setUm(+e.target.value)}>
              {UMRAH.map((u,i)=><option key={i} value={i}>{u.name} · {u.tier} · {u.nights}</option>)}
            </select>
          </div>
          <div className="field-row">
            <div className="field">
              <label>Departure city</label>
              <select className="control" value={ucity} onChange={e=>setUcity(e.target.value)}>
                {["Lahore","Islamabad","Karachi","Peshawar"].map(c=><option key={c}>{c}</option>)}
              </select>
            </div>
            <div className="field">
              <label>Pilgrims</label>
              <Stepper value={uppl} set={setUppl} min={1} max={30}/>
            </div>
          </div>
          <div className="field">
            <label>Preferred month (1447 H)</label>
            <select className="control" value={umonth} onChange={e=>setUmonth(e.target.value)}>
              <option value="">Flexible</option>
              {["Rajab","Sha'ban","Ramadan","Shawwal","Dhul-Qadah","Muharram","Safar"].map(m=><option key={m}>{m}</option>)}
            </select>
          </div>
        </>)}
      </div>

      <div className="widget-foot">
        <button className="btn btn-wa" onClick={send}>
          <Icons.wa size={20}/> Get my free quote
        </button>
        <div className="widget-note"><Icons.shield size={14}/> Free &amp; no-obligation · a real human replies within 24h</div>
      </div>
    </div>
  );
}

window.BookingWidget = BookingWidget;