/* global React, Icon */
const { useState: useStateR, useRef: useRefR, useEffect: useEffectR } = React;

const MONTH_RATE = 950;
const FLEET_R = () => window.FLEET || [];
const getVeh = (id) => FLEET_R().find((v) => v.id === id) || FLEET_R()[0] || null;

const MONTHS = ['januari', 'februari', 'maart', 'april', 'mei', 'juni', 'juli', 'augustus', 'september', 'oktober', 'november', 'december'];
const LOOPTIJDEN = [
  ['1', '1 maand'],
  ['3', '3 maanden'],
  ['6', '6 maanden'],
  ['12', '12 maanden'],
  ['flex', 'Doorlopend / nog onbekend'],
];

function looptijdLabel(v) {
  const f = LOOPTIJDEN.find((l) => l[0] === v);
  return f ? f[1] : '—';
}
function fmtDate(v) {
  if (!v) return '—';
  const d = new Date(v + 'T00:00:00');
  if (isNaN(d)) return '—';
  return `${d.getDate()} ${MONTHS[d.getMonth()]} ${d.getFullYear()}`;
}

/* ---------- STEP BAR ---------- */
const STEPS = ['Configuratie', 'Bedrijfsgegevens'];
function StepBar({ step }) {
  return (
    <div className="stepbar">
      {STEPS.map((s, i) => (
        <div key={s} className={'stepbar__item' + (i === step ? ' active' : i < step ? ' done' : '')}>
          <span className="n">{i < step ? <Icon name="check" /> : i + 1}</span>{s}
        </div>
      ))}
    </div>
  );
}

/* ---------- SUMMARY ---------- */
function Summary({ cfg }) {
  const v = getVeh(cfg.vehicle);
  const aantal = Math.max(1, parseInt(cfg.aantal, 10) || 1);
  const est = v && v.rate ? v.rate * aantal : null;
  return (
    <aside className="summary">
      <div className="summary__img"><img src={v ? v.img : 'assets/evito-laden.jpg'} alt={v ? v.tag + ' ' + v.name : 'Voertuig'} /></div>
      <div className="summary__body">
        <span className="tag">{v ? v.tag : ''}</span>
        <h3>{v ? v.name : ''}</h3>
        <div style={{ height: 14 }} />
        <div className="summary__row"><span>Aantal voertuigen</span><span>{aantal}</span></div>
        <div className="summary__row"><span>Looptijd</span><span>{looptijdLabel(cfg.looptijd)}</span></div>
        <div className="summary__row"><span>Startdatum</span><span>{fmtDate(cfg.start)}</span></div>
        <div className="summary__row muted"><span>Levering</span><span>{cfg.delivery ? 'Bezorgen' : 'Ophalen'}</span></div>
        <div className="summary__row muted"><span>Onderhoud &amp; verzekering</span><span>Inbegrepen</span></div>
        <div className="summary__total"><span>Indicatief / maand</span><b>{est ? '€' + est.toLocaleString('nl-NL') : 'Op aanvraag'}</b></div>
        <div className="summary__note"><Icon name="lock" /> <span>{est ? `Indicatie vanaf €${v.rate} p/m per wagen. Je definitieve all-in maandtarief ontvang je in de offerte.` : 'Voor dit voertuig stellen we een maatwerktarief op. Je ontvangt het all-in maandtarief binnen één werkdag in de offerte.'}</span></div>
      </div>
    </aside>
  );
}

/* ---------- RESERVE / OFFERTE PAGE ---------- */
function ReservePage({ go, vehicleId }) {
  const [step, setStep] = useStateR(0);
  const [cfg, setCfg] = useStateR({ vehicle: vehicleId || 'evito', aantal: '1', looptijd: '3', start: '2026-06-15', stad: '', delivery: false });
  const [form, setForm] = useStateR({ bedrijf: '', kvk: '', naam: '', email: '', tel: '', bericht: '', akkoord: false });
  const [errors, setErrors] = useStateR({});

  useEffectR(() => {
    if (vehicleId) setCfg((c) => (c.vehicle === vehicleId ? c : { ...c, vehicle: vehicleId }));
  }, [vehicleId]);

  const next = () => { setStep((s) => Math.min(s + 1, 2)); window.scrollTo({ top: 0 }); };
  const back = () => { if (step === 0) { go('home', 'top'); return; } setStep((s) => s - 1); window.scrollTo({ top: 0 }); };

  const setC = (k) => (ev) => setCfg((c) => ({ ...c, [k]: ev.target.value }));
  const setF = (k) => (ev) => setForm((f) => ({ ...f, [k]: ev.target.value }));

  const validate = () => {
    const e = {};
    if (!form.bedrijf.trim()) e.bedrijf = 'Vul je bedrijfsnaam in';
    if (!form.naam.trim()) e.naam = 'Vul de naam van de contactpersoon in';
    if (!/^\S+@\S+\.\S+$/.test(form.email)) e.email = 'Vul een geldig e-mailadres in';
    if (!/^[0-9 +-]{8,}$/.test(form.tel)) e.tel = 'Vul een geldig telefoonnummer in';
    if (!form.akkoord) e.akkoord = 'Ga akkoord om verder te gaan';
    setErrors(e);
    return Object.keys(e).length === 0;
  };

  /* CONFIRMATION */
  if (step === 2) {
    return (
      <main>
        <div className="container section">
          <div className="confirm">
            <div className="confirm__check"><Icon name="check" /></div>
            <h2>Bedankt — je offerteaanvraag staat klaar!</h2>
            <p>We hebben je aanvraag ontvangen en sturen een bevestiging naar <b>{form.email || 'je e-mailadres'}</b>. Een van onze mobiliteitsadviseurs neemt binnen één werkdag contact op met een passende all-in offerte.</p>
            <div className="confirm__code">ZG-2026-{String(Math.floor(Math.random() * 9000) + 1000)}</div>
            <div style={{ marginTop: 32, display: 'flex', gap: 12, justifyContent: 'center', flexWrap: 'wrap' }}>
              <button className="btn btn--teal" onClick={() => go('home', 'top')}>Terug naar home</button>
              <button className="btn btn--ghost" onClick={() => { setStep(0); }}>Nieuwe aanvraag</button>
            </div>
          </div>
        </div>
      </main>
    );
  }

  return (
    <main>
      <div className="reserve-hero">
        <div className="container">
          <span className="eyebrow"><Icon name="calendar" style={{ width: 15, height: 15 }} /> Beschikbaarheid &amp; offerte</span>
          <h1 style={{ marginTop: 14 }}>Vraag je all-in maandprijs aan</h1>
          <p>Stel je inzet samen en ontvang binnen één werkdag een passende offerte — onderhoud en verzekering inbegrepen.</p>
          <StepBar step={step} />
        </div>
      </div>

      <div className="container section--tight" style={{ paddingBlock: 'clamp(28px,4vw,48px)' }}>
        <div className="reserve-layout">
          <div className="reserve-main">

            {step === 0 && (() => {
              const v = getVeh(cfg.vehicle);
              return (
              <div>
                <h2>Stel je inzet samen</h2>
                <p className="lead">Kies het voertuig, de looptijd en wanneer je wilt starten. Alles is maandelijks opzegbaar.</p>

                <div className="field">
                  <label>Voertuig</label>
                  <select value={cfg.vehicle} onChange={setC('vehicle')}>
                    {FLEET_R().map((f) => <option key={f.id} value={f.id}>{f.tag} {f.name}{f.rate ? ` — vanaf €${f.rate} p/m` : ' — prijs op aanvraag'}</option>)}
                  </select>
                </div>

                <div className="vehpick">
                  <div className="vehpick__img"><img src={v.img} alt={v.tag + ' ' + v.name} /></div>
                  <div className="vehpick__body">
                    <span className="tag">{v.tag}</span>
                    <b>{v.name}</b>
                    <small>{v.specs.map((s) => s[1]).join(' · ')}{v.rate ? ` · vanaf €${v.rate} p/m` : ''}</small>
                  </div>
                  <span className="vehpick__check"><Icon name="check" /></span>
                </div>

                <div className="field-row" style={{ marginTop: 22 }}>
                  <div className="field">
                    <label>Aantal voertuigen</label>
                    <select value={cfg.aantal} onChange={setC('aantal')}>
                      {[1, 2, 3, 4, 5].map((n) => <option key={n} value={n}>{n}{n === 5 ? '+' : ''} {n === 1 ? 'voertuig' : 'voertuigen'}</option>)}
                    </select>
                  </div>
                  <div className="field">
                    <label>Gewenste looptijd</label>
                    <select value={cfg.looptijd} onChange={setC('looptijd')}>
                      {LOOPTIJDEN.map(([v, l]) => <option key={v} value={v}>{l}</option>)}
                    </select>
                  </div>
                </div>

                <div className="field-row">
                  <div className="field">
                    <label>Gewenste startdatum</label>
                    <input type="date" value={cfg.start} onChange={setC('start')} />
                  </div>
                  <div className="field">
                    <label>Inzetgebied / stad (optioneel)</label>
                    <input value={cfg.stad} onChange={setC('stad')} placeholder="Bijv. Utrecht, Amsterdam" />
                  </div>
                </div>

                <label className="payopt" style={{ cursor: 'pointer' }} onClick={() => setCfg((c) => ({ ...c, delivery: false }))}>
                  <span className="payopt__radio" style={cfg.delivery ? {} : { borderColor: 'var(--teal-600)' }} />
                  <span style={{ flex: 1 }}><b>Ophalen op locatie</b><small style={{ display: 'block' }}>Utrecht · gratis</small></span>
                </label>
                <div style={{ height: 10 }} />
                <label className={'payopt' + (cfg.delivery ? ' sel' : '')} style={{ cursor: 'pointer' }} onClick={() => setCfg((c) => ({ ...c, delivery: true }))}>
                  <span className="payopt__radio" />
                  <span style={{ flex: 1 }}><b>Laten bezorgen &amp; ophalen</b><small style={{ display: 'block' }}>Wij brengen de wagen naar je toe</small></span>
                  <span className="payopt__logo">in offerte</span>
                </label>
              </div>
              );
            })()}

            {step === 1 && (
              <div>
                <h2>Je bedrijfsgegevens</h2>
                <p className="lead">Zodat we de offerte kunnen opstellen en contact met je kunnen opnemen.</p>
                <div className="field-row">
                  <div className="field">
                    <label>Bedrijfsnaam *</label>
                    <input className={errors.bedrijf ? 'err' : ''} value={form.bedrijf} onChange={setF('bedrijf')} placeholder="Bedrijfsnaam" />
                    {errors.bedrijf && <div className="errmsg">{errors.bedrijf}</div>}
                  </div>
                  <div className="field">
                    <label>KvK-nummer (optioneel)</label>
                    <input value={form.kvk} onChange={setF('kvk')} placeholder="12345678" />
                  </div>
                </div>
                <div className="field">
                  <label>Contactpersoon *</label>
                  <input className={errors.naam ? 'err' : ''} value={form.naam} onChange={setF('naam')} placeholder="Voor- en achternaam" />
                  {errors.naam && <div className="errmsg">{errors.naam}</div>}
                </div>
                <div className="field-row">
                  <div className="field">
                    <label>E-mailadres *</label>
                    <input className={errors.email ? 'err' : ''} value={form.email} onChange={setF('email')} placeholder="naam@bedrijf.nl" type="email" />
                    {errors.email && <div className="errmsg">{errors.email}</div>}
                  </div>
                  <div className="field">
                    <label>Telefoon *</label>
                    <input className={errors.tel ? 'err' : ''} value={form.tel} onChange={setF('tel')} placeholder="06 - 12 34 56 78" />
                    {errors.tel && <div className="errmsg">{errors.tel}</div>}
                  </div>
                </div>
                <div className="field">
                  <label>Bericht (optioneel)</label>
                  <textarea rows="3" value={form.bericht} onChange={setF('bericht')} placeholder="Vertel kort waar je de wagen voor inzet, dan stemmen we de offerte daarop af." />
                </div>
                <div className="field" style={{ marginBottom: 0 }}>
                  <label style={{ display: 'flex', gap: 11, alignItems: 'flex-start', fontWeight: 500, color: 'var(--ink-soft)', margin: 0 }}>
                    <input type="checkbox" style={{ width: 'auto', marginTop: 3 }} checked={form.akkoord} onChange={(e) => setForm((f) => ({ ...f, akkoord: e.target.checked }))} />
                    Ik ga akkoord met de verwerking van mijn gegevens om vrijblijvend een offerte te ontvangen.
                  </label>
                  {errors.akkoord && <div className="errmsg">{errors.akkoord}</div>}
                </div>
              </div>
            )}

            <div className="reserve-foot">
              <button className="btn btn--ghost" onClick={back}><Icon name="left" /> {step === 0 ? 'Terug naar home' : 'Vorige'}</button>
              {step === 0 && <button className="btn btn--primary" onClick={next}>Verder naar gegevens <Icon name="arrow" /></button>}
              {step === 1 && <button className="btn btn--primary" onClick={() => { if (validate()) next(); }}><Icon name="mail" /> Offerte aanvragen</button>}
            </div>
          </div>

          <Summary cfg={cfg} />
        </div>
      </div>
    </main>
  );
}

window.ReservePage = ReservePage;