// screens-checkout.jsx — delivery checkout + order confirmation

/* ───────────── CHECKOUT ───────────── */
function CheckoutScreen({ total, packTotal, usual, cutoff, onBack, onPlace }) {
  const usualHood = usual && NEIGHBORHOODS.find(n => n.id === usual.zone);
  const [day, setDay] = React.useState(usual?.day || 'tue');
  const [hood, setHood] = React.useState(usual?.zone || null);
  const [win, setWin] = React.useState(WINDOWS[0]);
  const [pay, setPay] = React.useState('square');

  // neighborhoods that are served on the chosen day
  const avail = NEIGHBORHOODS.filter(n => n.days.includes(day));
  // if current hood not served on this day, clear it
  React.useEffect(() => { if (hood && !avail.find(n => n.id === hood)) setHood(null); }, [day]);
  const dayLabel = (id) => DELIVERY_DAYS.find(d => d.id === id).day;

  const ready = !!hood;
  const dayObj = DELIVERY_DAYS.find(d => d.id === day);
  const hoodObj = NEIGHBORHOODS.find(n => n.id === hood);

  const PAYS = [
    { id: 'square', label: 'Card · Square', sub: 'Visa, Mastercard, Amex' },
    { id: 'paypal', label: 'PayPal (Goods & Services)', sub: 'Buyer protection included' },
    { id: 'cash',   label: 'Cash on delivery', sub: 'Exact change appreciated' },
  ];

  return (
    <div className="screen-push anim-in">
      <PushHeader title="Delivery" onBack={onBack} />
      <div className="scroll" style={{ paddingBottom: 130 }}>
        <div style={{ padding: '0 20px' }}>
          {/* your usual — 1-tap prefill for repeat orders */}
          {usualHood && (
            <button onClick={() => { setDay(usual.day); setHood(usual.zone); }}
              style={{ width: '100%', textAlign: 'left', border: 'none', cursor: 'pointer', marginBottom: 14, padding: '12px 14px', borderRadius: 14, background: 'color-mix(in oklab, var(--accent) 12%, var(--surface))', boxShadow: 'inset 0 0 0 1px color-mix(in oklab, var(--accent) 30%, transparent)', display: 'flex', alignItems: 'center', gap: 11 }}>
              <Icon name="spark" size={18} color="var(--accent)" fill />
              <div style={{ flex: 1, lineHeight: 1.25 }}>
                <div style={{ fontWeight: 700, fontSize: 13.5 }}>Use your usual</div>
                <div style={{ fontFamily: 'var(--ff-mono)', fontSize: 11, color: 'var(--ink-2)' }}>{usualHood.name} · {dayLabel(usual.day)}s</div>
              </div>
              <span style={{ fontFamily: 'var(--ff-ui)', fontWeight: 700, fontSize: 12.5, color: 'var(--accent)' }}>1-tap</span>
            </button>
          )}
          {/* cutoff note */}
          <div style={{ padding: '11px 14px', borderRadius: 13, background: cutoff && cutoff.soon ? 'var(--gold)' : 'var(--ink)', color: cutoff && cutoff.soon ? '#fff' : 'var(--paper)', display: 'flex', gap: 9, alignItems: 'center', marginBottom: 22 }}>
            <Icon name="clock" size={18} color={cutoff && cutoff.soon ? '#fff' : 'var(--paper)'} />
            <div style={{ fontSize: 12.5, fontFamily: 'var(--ff-mono)' }}>{cutoff && cutoff.closed ? 'Ordering closed — next run opens Mon' : `Order closes in ${cutoff ? cutoff.label : '—'} · Sun 8 PM`}</div>
          </div>

          {/* day */}
          <div className="kicker" style={{ marginBottom: 10 }}>1 · Pick a delivery day</div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 10 }}>
            {DELIVERY_DAYS.map(d => {
              const on = day === d.id;
              return (
                <button key={d.id} onClick={() => setDay(d.id)} style={{
                  border: 'none', cursor: 'pointer', borderRadius: 16, padding: '16px 6px', textAlign: 'center',
                  background: on ? 'var(--accent)' : 'var(--surface)', color: on ? 'var(--on-accent)' : 'var(--ink)',
                  boxShadow: on ? '0 6px 16px color-mix(in oklab, var(--accent) 38%, transparent)' : 'inset 0 0 0 1px var(--line)', transition: 'all .14s',
                }}>
                  <div style={{ fontFamily: 'var(--ff-display)', fontWeight: 800, fontSize: 22 }}>{d.day}</div>
                  <div style={{ fontFamily: 'var(--ff-mono)', fontSize: 11, opacity: 0.8, marginTop: 2 }}>{d.date}</div>
                </button>
              );
            })}
          </div>

          {/* neighborhood */}
          <div className="kicker" style={{ margin: '24px 0 10px' }}>2 · Your neighborhood</div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
            {avail.map(n => {
              const on = hood === n.id;
              return (
                <button key={n.id} onClick={() => setHood(n.id)} style={{
                  display: 'flex', alignItems: 'center', gap: 12, padding: '14px 16px', borderRadius: 14, cursor: 'pointer', textAlign: 'left',
                  border: 'none', background: 'var(--surface)', boxShadow: on ? `inset 0 0 0 2px var(--accent)` : 'inset 0 0 0 1px var(--line)', transition: 'all .12s',
                }}>
                  <Icon name="pin" size={20} color={on ? 'var(--accent)' : 'var(--ink-3)'} />
                  <div style={{ flex: 1 }}>
                    <div style={{ fontWeight: 700, fontSize: 15 }}>{n.name}</div>
                    <div style={{ fontFamily: 'var(--ff-mono)', fontSize: 10.5, color: 'var(--ink-3)', marginTop: 1 }}>Served {n.days.map(dayLabel).join(' · ')}</div>
                  </div>
                  <span style={{ width: 22, height: 22, borderRadius: 9999, display: 'flex', alignItems: 'center', justifyContent: 'center', background: on ? 'var(--accent)' : 'transparent', boxShadow: on ? 'none' : 'inset 0 0 0 1.5px var(--line-2)' }}>
                    {on && <Icon name="check" size={13} color="var(--on-accent)" sw={3} />}
                  </span>
                </button>
              );
            })}
          </div>

          {/* window */}
          <div className="kicker" style={{ margin: '24px 0 10px' }}>3 · Time window</div>
          <div className="rail" style={{ padding: '0 0 4px' }}>
            {WINDOWS.map(w => (
              <button key={w} className={'chip' + (win === w ? ' on' : '')} onClick={() => setWin(w)}>{w}</button>
            ))}
          </div>

          {/* payment */}
          <div className="kicker" style={{ margin: '24px 0 10px' }}>4 · Payment</div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
            {PAYS.map(p => {
              const on = pay === p.id;
              return (
                <button key={p.id} onClick={() => setPay(p.id)} style={{
                  display: 'flex', alignItems: 'center', gap: 12, padding: '13px 16px', borderRadius: 14, cursor: 'pointer', textAlign: 'left',
                  border: 'none', background: 'var(--surface)', boxShadow: on ? 'inset 0 0 0 2px var(--accent)' : 'inset 0 0 0 1px var(--line)', transition: 'all .12s',
                }}>
                  <span style={{ width: 20, height: 20, borderRadius: 9999, flexShrink: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', boxShadow: on ? 'none' : 'inset 0 0 0 1.5px var(--line-2)', background: on ? 'var(--accent)' : 'transparent' }}>
                    {on && <span style={{ width: 8, height: 8, borderRadius: 9999, background: 'var(--on-accent)' }} />}
                  </span>
                  <div style={{ flex: 1 }}>
                    <div style={{ fontWeight: 700, fontSize: 14.5 }}>{p.label}</div>
                    <div className="muted" style={{ fontSize: 12 }}>{p.sub}</div>
                  </div>
                </button>
              );
            })}
          </div>
        </div>
      </div>

      {/* sticky place order */}
      <div style={{ position: 'absolute', left: 0, right: 0, bottom: 0, padding: '14px 20px 30px', background: 'color-mix(in oklab, var(--paper) 88%, transparent)', backdropFilter: 'blur(14px)', WebkitBackdropFilter: 'blur(14px)', boxShadow: '0 -0.5px 0 var(--line)' }}>
        {!ready && <div style={{ textAlign: 'center', fontFamily: 'var(--ff-mono)', fontSize: 11.5, color: 'var(--ink-3)', marginBottom: 10 }}>Select a neighborhood to continue</div>}
        <button className="btn btn-accent btn-block" disabled={!ready} style={{ opacity: ready ? 1 : 0.5 }}
          onClick={() => ready && onPlace({ day: dayObj, hood: hoodObj, win, pay: PAYS.find(p => p.id === pay), total, packTotal })}>
          Place pre-order · {money(total)}
        </button>
      </div>
    </div>
  );
}

/* ───────────── CONFIRMATION ───────────── */
function ConfirmScreen({ order, onDone }) {
  return (
    <div className="screen-push anim-in" style={{ background: 'var(--ink)', color: 'var(--paper)' }}>
      <div className="scroll" style={{ padding: '0 24px' }}>
        <div style={{ paddingTop: 90, textAlign: 'center' }}>
          <div className="pop-in" style={{ width: 84, height: 84, borderRadius: 9999, background: 'var(--good)', display: 'flex', alignItems: 'center', justifyContent: 'center', margin: '0 auto 22px' }}>
            <Icon name="check" size={44} color="#fff" sw={3} />
          </div>
          <div className="kicker" style={{ color: 'color-mix(in oklab, var(--paper) 60%, transparent)' }}>Pre-order confirmed</div>
          <div style={{ fontFamily: 'var(--ff-display)', fontWeight: 800, fontSize: 32, letterSpacing: '-0.025em', marginTop: 8, lineHeight: 1.02 }}>You're on the<br/>delivery run</div>
          <div style={{ fontFamily: 'var(--ff-mono)', fontSize: 14, marginTop: 14, padding: '8px 16px', borderRadius: 9999, background: 'color-mix(in oklab, var(--paper) 12%, transparent)', display: 'inline-block', letterSpacing: '0.05em' }}>{order.id}</div>
        </div>

        {/* delivery card */}
        <div style={{ marginTop: 30, borderRadius: 22, background: 'var(--paper)', color: 'var(--ink)', padding: 20, position: 'relative', overflow: 'hidden' }}>
          <div style={{ position: 'absolute', right: -16, top: -16, opacity: 0.06 }}><RookMark size={130} color="var(--ink)" /></div>
          <div className="kicker" style={{ marginBottom: 14 }}>Delivery details</div>
          {[
            ['cal', 'Day', order.day.full],
            ['clock', 'Window', order.win],
            ['pin', 'Drop zone', order.hood.name],
            ['tag', 'Payment', order.pay.label],
          ].map(([icon, k, v], i) => (
            <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '9px 0', borderBottom: i < 3 ? '1px solid var(--line)' : 'none' }}>
              <Icon name={icon} size={19} color="var(--accent)" />
              <span className="muted" style={{ fontSize: 13, width: 78 }}>{k}</span>
              <span style={{ fontWeight: 700, fontSize: 14.5, flex: 1, textAlign: 'right' }}>{v}</span>
            </div>
          ))}
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginTop: 14, paddingTop: 14, borderTop: '2px solid var(--ink)' }}>
            <span style={{ fontWeight: 700, whiteSpace: 'nowrap' }}>{order.packTotal} packs · total</span>
            <span style={{ fontFamily: 'var(--ff-display)', fontWeight: 800, fontSize: 24 }}>{money(order.total)}</span>
          </div>
        </div>

        {/* loyalty bump */}
        <div style={{ marginTop: 16, borderRadius: 18, padding: 16, background: 'color-mix(in oklab, var(--paper) 12%, transparent)', display: 'flex', alignItems: 'center', gap: 12 }}>
          <Icon name="spark" size={22} color="var(--gold)" fill />
          <div style={{ fontSize: 13, lineHeight: 1.35 }}>
            <b>+{order.packTotal} toward your free pack.</b><br/>
            <span style={{ opacity: 0.7 }}>We texted your confirmation + a reminder the morning of.</span>
          </div>
        </div>

        <div style={{ display: 'flex', gap: 10, marginTop: 20 }}>
          <button className="btn btn-block" style={{ flex: 1, background: 'color-mix(in oklab, var(--paper) 14%, transparent)', color: 'var(--paper)', padding: '14px' }}>
            <Icon name="cal" size={18} color="var(--paper)" /> Add to calendar
          </button>
          <button className="btn btn-block" style={{ flex: 1, background: 'color-mix(in oklab, var(--paper) 14%, transparent)', color: 'var(--paper)', padding: '14px' }}>
            <Icon name="share" size={18} color="var(--paper)" /> Share
          </button>
        </div>
      </div>

      <div style={{ padding: '14px 24px 34px' }}>
        <button className="btn btn-accent btn-block" onClick={onDone}>Back to shop</button>
      </div>
    </div>
  );
}

Object.assign(window, { CheckoutScreen, ConfirmScreen });