// Booking modal — multi-step flow: dates → details → summary → confirmation
// Also handles the "service request" mode with different steps.

function BookingModal({ mode, onClose }) {
  const isService = mode === "service";
  const totalSteps = isService ? 4 : 4;
  const [step, setStep] = React.useState(0);
  const [data, setData] = React.useState({
    from: null,
    to: null,
    name: "",
    email: "",
    phone: "",
    notes: "",
    serviceType: null,
    location: "",
    region: null,
    urgency: null,
  });

  const update = (k, v) => setData(d => ({...d, [k]: v}));
  const nights = (data.from && data.to)
    ? Math.max(0, Math.round((new Date(data.to) - new Date(data.from)) / 86400000))
    : 0;
  const breakdown = computeBreakdown(data.from, data.to, nights);

  const canNext = () => {
    if (isService) {
      if (step === 0) return data.serviceType;
      if (step === 1) return data.region && data.location;
      if (step === 2) return data.name && data.phone && data.urgency;
      return true;
    } else {
      if (step === 0) return data.from && data.to;
      if (step === 1) return data.name && data.email && data.phone;
      return true;
    }
  };

  return (
    <div className="modal-backdrop" onClick={onClose}>
      <div className="modal" onClick={e => e.stopPropagation()}>
        <button className="modal-close" onClick={onClose}>
          <window.Icon name="close" size={16}/>
        </button>

        <div className="steps">
          {Array.from({length: totalSteps}).map((_, i) => (
            <div key={i} className={`step ${i < step ? "done" : ""} ${i === step ? "on" : ""}`}></div>
          ))}
        </div>

        {isService
          ? <ServiceSteps step={step} data={data} update={update}/>
          : <RentalSteps step={step} data={data} update={update} nights={nights} breakdown={breakdown}/>}

        <div className="modal-actions">
          {step > 0
            ? <button className="btn btn-ghost" onClick={() => setStep(s => s - 1)}>← Wstecz</button>
            : <span></span>}
          {step < totalSteps - 1 && (
            <button className="btn btn-primary"
                    disabled={!canNext()}
                    style={{opacity: canNext() ? 1 : 0.4, cursor: canNext() ? "pointer" : "not-allowed"}}
                    onClick={() => setStep(s => s + 1)}>
              Dalej <window.Icon name="arrow" size={14}/>
            </button>
          )}
          {step === totalSteps - 2 && !isService && (
            <button className="btn btn-ember"
                    disabled={!canNext()}
                    style={{opacity: canNext() ? 1 : 0.4}}
                    onClick={() => setStep(s => s + 1)}>
              Wyślij zapytanie <window.Icon name="check" size={14}/>
            </button>
          )}
        </div>
      </div>
    </div>
  );
}

// Compute price breakdown by checking each day against pricing seasons
function computeBreakdown(from, to, nights) {
  if (!from || !to || nights === 0) return null;
  const p = window.PRICING;
  // Buckets: high (Jul, Aug), mid (Jun, Sep), low (rest)
  let high = 0, mid = 0, low = 0;
  const d = new Date(from);
  for (let i = 0; i < nights; i++) {
    const m = d.getMonth(); // 0-indexed
    if (m === 6 || m === 7) high++;
    else if (m === 5 || m === 8) mid++;
    else low++;
    d.setDate(d.getDate() + 1);
  }
  const highPrice = p.seasons[0].price;
  const midPrice = p.seasons[1].price;
  const lowPrice = p.seasons[2].price;
  const base = high * highPrice + mid * midPrice + low * lowPrice;
  const serviceFee = nights < 14 ? p.serviceFee : 0;
  const total = base + serviceFee;
  return { high, mid, low, highPrice, midPrice, lowPrice, base, serviceFee, total, nights };
}

function RentalSteps({ step, data, update, nights, breakdown }) {
  switch (step) {
    case 0: return (
      <>
        <h3>Kiedy ruszacie?</h3>
        <p className="sub">Wybierz daty odbioru i zwrotu kampera. Cena wyliczy się automatycznie.</p>
        <RangeCalendar from={data.from} to={data.to}
                       onChange={(from, to) => { update("from", from); update("to", to); }}/>
        {nights > 0 && breakdown && (
          <div className="summary-box" style={{marginTop: 18}}>
            <div className="summary-row">
              <span className="l">Liczba dób</span>
              <span className="v">{breakdown.nights}</span>
            </div>
            {breakdown.high > 0 && (
              <div className="summary-row">
                <span className="l">Sezon wysoki ({breakdown.high} × {breakdown.highPrice} zł)</span>
                <span className="v">{(breakdown.high * breakdown.highPrice).toLocaleString("pl-PL")} zł</span>
              </div>
            )}
            {breakdown.mid > 0 && (
              <div className="summary-row">
                <span className="l">Sezon średni ({breakdown.mid} × {breakdown.midPrice} zł)</span>
                <span className="v">{(breakdown.mid * breakdown.midPrice).toLocaleString("pl-PL")} zł</span>
              </div>
            )}
            {breakdown.low > 0 && (
              <div className="summary-row">
                <span className="l">Sezon niski ({breakdown.low} × {breakdown.lowPrice} zł)</span>
                <span className="v">{(breakdown.low * breakdown.lowPrice).toLocaleString("pl-PL")} zł</span>
              </div>
            )}
            {breakdown.serviceFee > 0 && (
              <div className="summary-row">
                <span className="l">Opłata serwisowa (wynajem &lt; 14 dni)</span>
                <span className="v">{breakdown.serviceFee} zł</span>
              </div>
            )}
            <div className="summary-total">
              <span className="l">Razem</span>
              <span className="v">{breakdown.total.toLocaleString("pl-PL")} zł</span>
            </div>
          </div>
        )}
      </>
    );
    case 1: return (
      <>
        <h3>Twoje dane</h3>
        <p className="sub">Skontaktujemy się żeby potwierdzić rezerwację i ustalić odbiór z Brodły.</p>
        <div className="field">
          <label>Imię i nazwisko</label>
          <input value={data.name} onChange={e => update("name", e.target.value)} placeholder="Jan Kowalski"/>
        </div>
        <div className="field-row">
          <div className="field">
            <label>E-mail</label>
            <input type="email" value={data.email} onChange={e => update("email", e.target.value)} placeholder="jan@kowalski.pl"/>
          </div>
          <div className="field">
            <label>Telefon</label>
            <input type="tel" value={data.phone} onChange={e => update("phone", e.target.value)} placeholder="+48 600 000 000"/>
          </div>
        </div>
        <div className="field">
          <label>Uwagi (opcjonalnie)</label>
          <textarea rows={3} value={data.notes} onChange={e => update("notes", e.target.value)}
                    placeholder="Np. pierwszy raz kamperem, jedziemy z dwójką dzieci, potrzebujemy bagażnika na rowery..."/>
        </div>
      </>
    );
    case 2: return (
      <>
        <h3>Sprawdź zapytanie</h3>
        <p className="sub">Wszystko się zgadza? Wyślij — odezwiemy się żeby potwierdzić dostępność.</p>
        <div className="summary-box">
          <div className="summary-row"><span className="l">Kamper</span><span className="v">Fiat Ducato McLouis</span></div>
          <div className="summary-row"><span className="l">Odbiór</span><span className="v">{fmtDate(data.from)}</span></div>
          <div className="summary-row"><span className="l">Zwrot</span><span className="v">{fmtDate(data.to)}</span></div>
          <div className="summary-row"><span className="l">Liczba dób</span><span className="v">{nights}</span></div>
          {breakdown && (
            <div className="summary-total">
              <span className="l">Wycena</span>
              <span className="v">{breakdown.total.toLocaleString("pl-PL")} zł</span>
            </div>
          )}
        </div>
        <p className="small">
          Kaucja zwrotna: 4 000 zł — pobierana przy odbiorze, zwracana po zwrocie pojazdu.
          Ubezpieczenie OC/AC/NNW + Assistance Europa w cenie. W sezonie wysokim — brak limitu km;
          poza nim — 300 km/dobę.
        </p>
      </>
    );
    case 3: return (
      <div className="success">
        <div className="check"><window.Icon name="check" size={36}/></div>
        <h3>Zapytanie wysłane</h3>
        <p className="sub">
          Dziękujemy, {data.name?.split(" ")[0] || "i do zobaczenia"}!<br/>
          Wysłaliśmy potwierdzenie na <strong>{data.email}</strong>.<br/>
          Odezwiemy się telefonicznie najszybciej jak się da.
        </p>
        <div className="tag-pill" style={{marginTop: 12}}>
          Nr zapytania: <strong style={{marginLeft: 6, fontFamily: "var(--mono)"}}>KL-{Math.floor(Math.random()*900000+100000)}</strong>
        </div>
      </div>
    );
  }
}

function ServiceSteps({ step, data, update }) {
  const services = [
    { id: "mech", t: "Naprawa mechaniczna", d: "Stuka, nie pali, nie zapala — diagnozujemy i naprawiamy." },
    { id: "check", t: "Przegląd techniczny", d: "Pełen check-up — opony, hamulce, instalacje, szczelność." },
    { id: "elec", t: "Instalacje elektryczne i wodne", d: "Coś nie działa, cieknie, miga albo nie grzeje? Ogarniemy." },
    { id: "other", t: "Doradztwo / inne", d: "Modyfikacje, konsultacja, plany zakupowe." },
  ];
  const urgencies = [
    { id: "now", t: "Pilne — dziś / jutro", d: "Stoję na trasie, nie jadę dalej." },
    { id: "soon", t: "W tym tygodniu", d: "Mam czas, ale chcę szybko." },
    { id: "plan", t: "Planowo", d: "Umawiamy się na konkretny dzień." },
  ];

  switch (step) {
    case 0: return (
      <>
        <h3>Czego potrzebujesz?</h3>
        <p className="sub">Wybierz rodzaj usługi — szczegóły dopowiesz w kolejnym kroku.</p>
        <div className="opt-grid" style={{gridTemplateColumns: "1fr"}}>
          {services.map(s => (
            <div key={s.id} className={`opt ${data.serviceType === s.id ? "on" : ""}`}
                 onClick={() => update("serviceType", s.id)}>
              <div className="ttl">{s.t}</div>
              <div className="desc">{s.d}</div>
            </div>
          ))}
        </div>
      </>
    );
    case 1: return (
      <>
        <h3>Gdzie jesteś?</h3>
        <p className="sub">Obsługujemy 4 województwa na południu Polski.</p>
        <div className="opt-grid">
          {window.REGIONS.map(r => (
            <div key={r.code} className={`opt ${data.region === r.code ? "on" : ""}`}
                 onClick={() => update("region", r.code)}>
              <div className="ttl">{r.name}</div>
              <div className="desc">w zasięgu serwisu</div>
            </div>
          ))}
          <div className={`opt ${data.region === "other" ? "on" : ""}`} onClick={() => update("region", "other")}>
            <div className="ttl">Inne województwo</div>
            <div className="desc">Skontaktujemy się aby ustalić warunki</div>
          </div>
        </div>
        <div className="field" style={{marginTop: 16}}>
          <label>Dokładna lokalizacja</label>
          <input value={data.location} onChange={e => update("location", e.target.value)}
                 placeholder="Np. Kemping Solina, Polańczyk lub adres"/>
        </div>
      </>
    );
    case 2: return (
      <>
        <h3>Kiedy i dla kogo?</h3>
        <p className="sub">Termin i kontakt — oddzwonimy żeby ustalić szczegóły.</p>
        <div style={{display: "grid", gap: 8, marginBottom: 18}}>
          {urgencies.map(u => (
            <div key={u.id} className={`opt ${data.urgency === u.id ? "on" : ""}`}
                 onClick={() => update("urgency", u.id)}>
              <div className="ttl">{u.t}</div>
              <div className="desc">{u.d}</div>
            </div>
          ))}
        </div>
        <div className="field-row">
          <div className="field">
            <label>Imię</label>
            <input value={data.name} onChange={e => update("name", e.target.value)} placeholder="Jan"/>
          </div>
          <div className="field">
            <label>Telefon</label>
            <input type="tel" value={data.phone} onChange={e => update("phone", e.target.value)} placeholder="+48 600 000 000"/>
          </div>
        </div>
        <div className="field">
          <label>Opis problemu (opcjonalnie)</label>
          <textarea rows={3} value={data.notes} onChange={e => update("notes", e.target.value)}
                    placeholder="Np. ogrzewanie się nie pali, czuję dziwny zapach, niedawno robione 2 lata temu..."/>
        </div>
      </>
    );
    case 3: return (
      <div className="success">
        <div className="check"><window.Icon name="check" size={36}/></div>
        <h3>Zgłoszenie wysłane</h3>
        <p className="sub">
          Dzięki, {data.name || "do usłyszenia"}.<br/>
          Oddzwonimy najszybciej jak się da.
        </p>
        <div className="tag-pill" style={{marginTop: 12}}>
          Nr zgłoszenia: <strong style={{marginLeft: 6, fontFamily: "var(--mono)"}}>SR-{Math.floor(Math.random()*900000+100000)}</strong>
        </div>
      </div>
    );
  }
}

// Range calendar
function RangeCalendar({ from, to, onChange }) {
  const today = new Date(); today.setHours(0,0,0,0);
  const [view, setView] = React.useState(() => new Date(today.getFullYear(), today.getMonth(), 1));
  const [hover, setHover] = React.useState(null);

  const monthName = (d) => d.toLocaleDateString("pl-PL", { month: "long", year: "numeric" });

  const handleClick = (d) => {
    if (d < today) return;
    if (!from || (from && to)) {
      onChange(d.getTime(), null);
    } else if (d.getTime() <= from) {
      onChange(d.getTime(), null);
    } else {
      onChange(from, d.getTime());
    }
  };

  const inRange = (t) => {
    if (!from) return false;
    const end = to || hover;
    if (!end) return false;
    return t > from && t < end;
  };

  return (
    <div className="cal">
      <div className="cal-hdr">
        <button onClick={() => setView(v => new Date(v.getFullYear(), v.getMonth() - 1, 1))}>
          <window.Icon name="chevL" size={14}/>
        </button>
        <div className="ttl" style={{textTransform: "capitalize"}}>{monthName(view)}</div>
        <button onClick={() => setView(v => new Date(v.getFullYear(), v.getMonth() + 1, 1))}>
          <window.Icon name="chevR" size={14}/>
        </button>
      </div>
      <MonthGrid view={view} from={from} to={to} hover={hover} setHover={setHover}
                 onClick={handleClick} today={today} inRange={inRange}/>
    </div>
  );
}

function MonthGrid({ view, from, to, hover, setHover, onClick, today, inRange }) {
  const dows = ["Pn", "Wt", "Śr", "Cz", "Pt", "Sb", "Nd"];
  const year = view.getFullYear(), month = view.getMonth();
  const firstDay = new Date(year, month, 1);
  const firstDow = (firstDay.getDay() + 6) % 7;
  const daysInMonth = new Date(year, month + 1, 0).getDate();

  const cells = [];
  for (let i = 0; i < firstDow; i++) cells.push(null);
  for (let d = 1; d <= daysInMonth; d++) cells.push(new Date(year, month, d));

  return (
    <div className="cal-grid">
      {dows.map(d => <div key={d} className="dow">{d}</div>)}
      {cells.map((d, i) => {
        if (!d) return <div key={i}></div>;
        const t = d.getTime();
        const isMuted = t < today.getTime();
        const isFrom = from === t;
        const isTo = to === t;
        const isInRange = inRange(t);
        const isToday = t === today.getTime();
        let cls = "cal-day";
        if (isMuted) cls += " muted";
        if (isFrom) cls += " start";
        if (isTo) cls += " end";
        if (isInRange) cls += " in-range";
        if (isToday) cls += " today";
        return (
          <div key={i} className={cls}
               onClick={() => onClick(d)}
               onMouseEnter={() => setHover(t)}>
            {d.getDate()}
          </div>
        );
      })}
    </div>
  );
}

function fmtDate(t) {
  if (!t) return "—";
  return new Date(t).toLocaleDateString("pl-PL", { day: "numeric", month: "long", year: "numeric" });
}

window.BookingModal = BookingModal;