// driver.jsx — driver info form

const Driver = ({ car, search, onBack, onLogo, onSubmit, onSelectCar }) => {
  const [form, setForm] = React.useState({
    firstName: "", lastName: "", email: "", phone: "",
    dob: "", country: "St. Vincent and the Grenadines",
    licenseNo: "", licenseCountry: "", licenseExpiry: "",
    flightNo: "", arrivalTime: "",
    extras: { cdwZero: false, childSeat: false, booster: false, addlDriver: false, gps: false, cooler: false },
    addlDriverName: "",
    specialReq: "",
    payment: "card-on-pickup",
    agree: false,
  });

  const days = Math.max(1, Math.round((search.dates.end - search.dates.start) / 86400000));
  const subtotal = car.pricePerDay * days;
  const extrasMap = { cdwZero: 35*days, childSeat: 15*days, booster: 10*days, addlDriver: 20*days, gps: 25*days, cooler: 50 };
  const extrasTotal = Object.entries(form.extras).reduce((s, [k, v]) => v ? s + extrasMap[k] : s, 0);
  const fees = 60;
  const total = subtotal + extrasTotal + fees;

  const set = (k, v) => setForm(f => ({...f, [k]: v}));
  const setExtra = (k) => setForm(f => ({...f, extras: {...f.extras, [k]: !f.extras[k]}}));

  const isAirport = search.pickup.id === "aia";
  const valid = form.firstName && form.lastName && form.email && form.phone && form.dob && form.licenseNo && form.licenseExpiry && form.agree;

  return (
    <div className="detail-page">
      <Nav onLogo={onLogo} onSelectCar={onSelectCar} />
      <div className="detail-header">
        <div className="detail-header-inner">
          <a className="detail-back" onClick={onBack}>
            <Icon name="arrow-left" size={14} /> Back to vehicle
          </a>
          <div style={{display:"flex", alignItems:"center", gap:12, marginTop:8}}>
            <div className="step-pill done">1 · Vehicle</div>
            <div className="step-line" />
            <div className="step-pill active">2 · Driver info</div>
            <div className="step-line" />
            <div className="step-pill">3 · Confirm</div>
          </div>
        </div>
      </div>

      <div className="detail-body">
        <div className="detail-main">
          <div className="detail-cat">Almost there</div>
          <h1 className="detail-name" style={{fontSize:36}}>Tell us about <span style={{fontStyle:"italic", color:"var(--sea-500)"}}>the driver.</span></h1>
          <p className="detail-tagline">We need a few details to prepare your contract and temporary local permit. No card is charged today.</p>

          <div className="form-section">
            <h3>Primary driver</h3>
            <div className="form-grid">
              <Field label="First name" required value={form.firstName} onChange={v => set("firstName", v)} />
              <Field label="Last name" required value={form.lastName} onChange={v => set("lastName", v)} />
              <Field label="Email" required type="email" value={form.email} onChange={v => set("email", v)} placeholder="you@email.com" />
              <Field label="Phone / WhatsApp" required value={form.phone} onChange={v => set("phone", v)} placeholder="+1 784 ..." />
              <Field label="Date of birth" required type="date" value={form.dob} onChange={v => set("dob", v)} />
              <Field label="Country of residence" value={form.country} onChange={v => set("country", v)} />
            </div>
          </div>

          <div className="form-section">
            <h3>Driver's licence</h3>
            <p className="form-hint">We'll issue your temporary SVG driving permit at pickup against this licence (XCD 60, included in your total).</p>
            <div className="form-grid">
              <Field label="Licence number" required value={form.licenseNo} onChange={v => set("licenseNo", v)} />
              <Field label="Issuing country" value={form.licenseCountry} onChange={v => set("licenseCountry", v)} placeholder="e.g. United Kingdom" />
              <Field label="Expiry date" required type="date" value={form.licenseExpiry} onChange={v => set("licenseExpiry", v)} />
            </div>
          </div>

          {isAirport && (
            <div className="form-section">
              <h3>Flight details</h3>
              <p className="form-hint">Help us meet you at AIA arrivals — we track your flight in case of delays.</p>
              <div className="form-grid">
                <Field label="Flight number" value={form.flightNo} onChange={v => set("flightNo", v)} placeholder="e.g. BW 415" />
                <Field label="Scheduled arrival" type="time" value={form.arrivalTime} onChange={v => set("arrivalTime", v)} />
              </div>
            </div>
          )}

          <div className="form-section">
            <h3>Optional extras</h3>
            <div className="extras-grid">
              <ExtraCard label="Zero-deductible cover" desc="No excess charge for any damage" price={`XCD ${35*days}`} sub={`XCD 35/day × ${days}`} on={form.extras.cdwZero} onClick={() => setExtra("cdwZero")} />
              <ExtraCard label="Child seat (0–4 yrs)" desc="Forward or rear-facing" price={`XCD ${15*days}`} sub={`XCD 15/day × ${days}`} on={form.extras.childSeat} onClick={() => setExtra("childSeat")} />
              <ExtraCard label="Booster seat (4–8 yrs)" desc="High-back booster" price={`XCD ${10*days}`} sub={`XCD 10/day × ${days}`} on={form.extras.booster} onClick={() => setExtra("booster")} />
              <ExtraCard label="Additional driver" desc="Add a second permitted driver" price={`XCD ${20*days}`} sub={`XCD 20/day × ${days}`} on={form.extras.addlDriver} onClick={() => setExtra("addlDriver")} />
              <ExtraCard label="GPS / SIM with data" desc="Local SIM + 5GB data" price={`XCD ${25*days}`} sub={`XCD 25/day × ${days}`} on={form.extras.gps} onClick={() => setExtra("gps")} />
              <ExtraCard label="Cooler box & beach kit" desc="Cooler, towels, beach chairs" price="XCD 50" sub="Flat fee" on={form.extras.cooler} onClick={() => setExtra("cooler")} />
            </div>
            {form.extras.addlDriver && (
              <div style={{marginTop:14}}>
                <Field label="Additional driver full name" value={form.addlDriverName} onChange={v => set("addlDriverName", v)} />
              </div>
            )}
          </div>

          <div className="form-section">
            <h3>Special requests</h3>
            <textarea className="form-textarea" rows="3" placeholder="Anything we should know? Late pickup, baby on board, delivery to a marina..." value={form.specialReq} onChange={e => set("specialReq", e.target.value)} />
          </div>

          <div className="form-section">
            <h3>Payment</h3>
            <div className="payment-options">
              <PayOption value="card-on-pickup" current={form.payment} onChange={v => set("payment", v)} title="Pay at pickup" desc="Card or cash. We hold no funds today." />
              <PayOption value="card-now" current={form.payment} onChange={v => set("payment", v)} title="Pay now to lock the rate" desc="20% deposit charged today, balance at pickup." />
              <PayOption value="bank" current={form.payment} onChange={v => set("payment", v)} title="Bank transfer" desc="We'll email instructions. Best for long-term rentals." />
            </div>
          </div>

          <label className="agree-row">
            <input type="checkbox" checked={form.agree} onChange={e => set("agree", e.target.checked)} />
            <span>I agree to the <a style={{color:"var(--sea-600)", textDecoration:"underline"}}>rental terms</a> and confirm the primary driver is at least 25 years old with two years of driving experience.</span>
          </label>
        </div>

        <aside className="detail-aside">
          <div className="summary-card">
            <div style={{fontSize:12, fontWeight:600, letterSpacing:"0.08em", textTransform:"uppercase", color:"var(--sea-600)", marginBottom:8}}>Booking summary</div>
            <div style={{display:"flex", alignItems:"center", gap:12, paddingBottom:14, borderBottom:"1px solid var(--ink-100)"}}>
              <div style={{width:64, height:48, background: "var(--sand-50)", borderRadius:8, display:"grid", placeItems:"center", overflow:"hidden"}}>
                <CarIllustration id={car.id} />
              </div>
              <div>
                <div style={{fontFamily:"var(--font-display)", fontWeight:600, fontSize:16, lineHeight:1.1}}>{car.name}</div>
                <div style={{fontSize:12, color:"var(--ink-500)"}}>{car.cat}</div>
              </div>
            </div>

            <div className="summary-trip-block">
              <div className="leg">
                <div className="dot" />
                <div className="leg-meta">
                  <div className="label">Pickup</div>
                  <div className="where">{search.pickup.name}</div>
                  <div className="when">{fmtShort(search.dates.start)} · {search.pickupTime}</div>
                </div>
              </div>
              <div className="connector" />
              <div className="leg">
                <div className="dot end" />
                <div className="leg-meta">
                  <div className="label">Drop-off</div>
                  <div className="where">{search.dropoff.name}</div>
                  <div className="when">{fmtShort(search.dates.end)} · {search.dropoffTime}</div>
                </div>
              </div>
            </div>

            <div className="summary-rows">
              <div className="summary-row"><span>XCD {car.pricePerDay} × {days} day{days>1?"s":""}</span><span>XCD {subtotal.toLocaleString()}</span></div>
              {extrasTotal > 0 && (
                <div className="summary-row"><span>Extras</span><span>XCD {extrasTotal.toLocaleString()}</span></div>
              )}
              <div className="summary-row"><span>Driver's permit</span><span>XCD 60</span></div>
              <div className="summary-row"><span>CDW + 3rd party</span><span style={{color:"var(--sea-600)", fontWeight:600}}>Included</span></div>
              <div className="summary-row total"><span>Total</span><span style={{textAlign:"right"}}>XCD {total.toLocaleString()}<div className="usd-tot">≈ USD ${Math.round(total/2.7)}</div></span></div>
            </div>

            <button className="summary-cta" disabled={!valid} onClick={() => onSubmit({form, total, extrasTotal})} style={!valid ? {opacity:0.5, cursor:"not-allowed"} : {}}>
              {form.payment === "card-now" ? "Pay 20% deposit & confirm" : "Confirm booking"}
            </button>

            <div className="summary-trust">
              <div className="summary-trust-item"><Icon name="shield" size={14} />Free cancellation up to 48h before pickup</div>
              <div className="summary-trust-item"><Icon name="check" size={14} />{form.payment === "card-on-pickup" ? "No card charged today" : "Secure payment"}</div>
              <div className="summary-trust-item"><Icon name="whatsapp" size={14} />Confirmation by email & WhatsApp</div>
            </div>
          </div>
        </aside>
      </div>

      <Footer />
    </div>
  );
};

const Field = ({ label, value, onChange, type = "text", required, placeholder }) => (
  <label className="form-field">
    <span className="form-label">{label}{required && <span style={{color:"var(--coral-500)"}}> *</span>}</span>
    <input className="form-input" type={type} value={value} placeholder={placeholder} onChange={e => onChange(e.target.value)} />
  </label>
);

const ExtraCard = ({ label, desc, price, sub, on, onClick }) => (
  <div className={`extra-card ${on ? "is-on" : ""}`} onClick={onClick}>
    <div className="extra-check">{on && <Icon name="check" size={12} strokeWidth={3} color="white" />}</div>
    <div style={{flex:1}}>
      <div style={{fontWeight:600, fontSize:14}}>{label}</div>
      <div style={{fontSize:12, color:"var(--ink-500)", marginTop:2}}>{desc}</div>
    </div>
    <div style={{textAlign:"right"}}>
      <div style={{fontWeight:600, fontSize:14}}>{price}</div>
      <div style={{fontSize:11, color:"var(--ink-400)"}}>{sub}</div>
    </div>
  </div>
);

const PayOption = ({ value, current, onChange, title, desc }) => (
  <label className={`pay-option ${current === value ? "is-on" : ""}`}>
    <input type="radio" name="payment" value={value} checked={current === value} onChange={() => onChange(value)} />
    <div>
      <div style={{fontWeight:600, fontSize:14}}>{title}</div>
      <div style={{fontSize:12, color:"var(--ink-500)", marginTop:2}}>{desc}</div>
    </div>
  </label>
);

window.Driver = Driver;