// ============ 玄境 root ============
function CartDrawer({ open, onClose, items, setItems, lang }) {
  const en = lang === 'en';
  const total = items.reduce((s, it) => s + it.price * it.qty, 0);
  const remove = (i) => setItems(items.filter((_, idx) => idx !== i));
  const [stage, setStage] = useState('cart'); // cart | confirm | done
  const [order, setOrder] = useState('');
  const [placing, setPlacing] = useState(false);
  useEffect(() => { if (!open) { const t = setTimeout(() => setStage('cart'), 400); return () => clearTimeout(t); } }, [open]);
  const placeOrder = async () => {
    setPlacing(true);
    try {
      const res = await window.api('/api/order', { items });
      setOrder(res.ref);
    } catch (e) {
      setOrder('XJ-' + Math.floor(100000 + Math.random() * 899999)); // 后端未就绪兜底
    } finally {
      setPlacing(false);
      setStage('done');
    }
  };
  const sf = en ? 'var(--font-en-serif)' : 'var(--font-serif)';
  return (
    <>
      <div className={`cart-overlay ${open ? 'open' : ''}`} onClick={onClose} />
      <aside className={`cart-drawer ${open ? 'open' : ''}`}>
        <div className="cart-head">
          <h3 style={en ? { fontFamily: 'var(--font-en-serif)', fontWeight: 700, letterSpacing: '.02em' } : null}>{stage === 'done' ? (en ? 'Bond Sealed' : '結緣既成') : (en ? 'Inquire · Satchel' : '問道 · 緣囊')}</h3>
          <button onClick={onClose} style={{ color: '#E9DEC2', fontSize: 26, lineHeight: 1 }}>✕</button>
        </div>

        {stage === 'cart' && (
          <>
            <div className="cart-body">
              {items.length === 0 && <div className="cart-empty" style={{ fontFamily: sf }}>{en ? <>Your satchel is empty<br />Choose an art and form a bond with the Master.</> : <>緣囊空空<br />擇一數術，與道長結緣。</>}</div>}
              {items.map((it, i) => (
                <div key={i} className="cart-item">
                  <div style={{ flex: 1 }}>
                    <div className="ci-t" style={{ fontFamily: sf }}>{it.title}</div>
                    <div className="ci-o" style={{ fontFamily: sf }}>{it.option}　× {it.qty}</div>
                  </div>
                  <div style={{ textAlign: 'right' }}>
                    <div style={{ fontFamily: sf, color: 'var(--gold-text)', fontSize: 17 }}>{window.usd(it.price * it.qty)}</div>
                    <button onClick={() => remove(i)} style={{ fontFamily: sf, fontSize: 13, color: '#8E815F', marginTop: 6, textDecoration: 'underline' }}>{en ? 'Remove' : '移除'}</button>
                  </div>
                </div>
              ))}
            </div>
            {items.length > 0 && (
              <div className="cart-foot">
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 18 }}>
                  <span style={{ fontFamily: sf, color: '#C7B98F', fontSize: 17 }}>{en ? 'Total fee' : '潤金合計'}</span>
                  <span style={{ fontFamily: sf, color: 'var(--gold-text)', fontSize: 26, fontWeight: 700 }}>{window.usd(total)}<span style={{ fontSize: 13, fontWeight: 400, color: '#8E815F', marginLeft: 8 }}>≈{window.cny(total)}</span></span>
                </div>
                <button className="btn-cart" onClick={() => setStage('confirm')} style={{ display: 'block', textAlign: 'center', width: '100%' }}>{en ? 'Proceed · Checkout' : '前往結緣 · Checkout'}</button>
              </div>
            )}
          </>
        )}

        {stage === 'confirm' && (
          <>
            <div className="cart-body">
              <div style={{ fontFamily: sf, fontStyle: 'italic', color: '#9E9170', marginBottom: 18, lineHeight: 1.8 }}>{en ? 'Please review the arts you\u2019ve requested; once confirmed, the Master will reach out within a day.' : '請核對所求數術，確認後道長將於一日內親赴結緣。'}</div>
              {items.map((it, i) => (
                <div key={i} className="cart-item">
                  <div style={{ flex: 1 }}>
                    <div className="ci-t" style={{ fontFamily: sf }}>{it.title}</div>
                    <div className="ci-o" style={{ fontFamily: sf }}>{it.option}　× {it.qty}</div>
                  </div>
                  <div style={{ fontFamily: sf, color: 'var(--gold-text)', fontSize: 17 }}>{window.usd(it.price * it.qty)}</div>
                </div>
              ))}
              <div style={{ marginTop: 22, fontFamily: sf, color: '#C7B98F', fontSize: 14, lineHeight: 2 }}>
                <div>{en ? 'Title' : '緣主稱謂'}　<span style={{ color: '#8E815F' }}>{en ? 'Devotee' : '善信'}</span></div>
                <div>{en ? 'Session' : '結緣方式'}　<span style={{ color: '#8E815F' }}>{en ? 'WeChat / IG / WhatsApp' : '微信 / IG / WhatsApp'}</span></div>
                <div>{en ? 'Payment' : '支付方式'}　<span style={{ color: '#8E815F' }}>{en ? 'WeChat Pay · Alipay · Zelle · Venmo' : '微信 / 支付寶 / Zelle / Venmo'}</span></div>
              </div>
            </div>
            <div className="cart-foot">
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 18 }}>
                <span style={{ fontFamily: sf, color: '#C7B98F', fontSize: 17 }}>{en ? 'Amount due' : '應付潤金'}</span>
                <span style={{ fontFamily: sf, color: 'var(--gold-text)', fontSize: 26, fontWeight: 700 }}>{window.usd(total)}<span style={{ fontSize: 13, fontWeight: 400, color: '#8E815F', marginLeft: 8 }}>≈{window.cny(total)}</span></span>
              </div>
              <button className="btn-cart" onClick={placeOrder} disabled={placing} style={{ width: '100%', ...(placing ? { opacity: .6 } : null) }}>{placing ? (en ? 'Placing…' : '結緣中…') : (en ? 'Confirm · Generate Ritual Order' : '確認結緣 · 生成法事訂單')}</button>
              <button onClick={() => setStage('cart')} style={{ width: '100%', marginTop: 12, fontFamily: sf, fontSize: 14, color: '#8E815F', textDecoration: 'underline' }}>{en ? 'Back to satchel' : '返回緣囊'}</button>
            </div>
          </>
        )}

        {stage === 'done' && (
          <div className="cart-body" style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', textAlign: 'center', padding: '40px 28px' }}>
            <div style={{ fontSize: 46, color: 'var(--gold-text)', marginBottom: 10 }}>✦</div>
            <div style={{ fontFamily: en ? 'var(--font-en-serif)' : 'var(--font-brush)', fontWeight: en ? 700 : 400, fontSize: en ? 26 : 30, color: '#F2E6C9', marginBottom: 14 }}>{en ? 'Ritual Order Placed' : '法事訂單已成'}</div>
            <p style={{ fontFamily: sf, fontStyle: 'italic', color: '#C7B98F', lineHeight: 2, marginBottom: 22 }}>{en ? <>The Master has received your request<br />and will divine it in person within twenty-four hours.</> : <>道長已收悉緣主所求，<br />將於二十四時辰內親為推演。</>}</p>
            <div style={{ border: '1px solid rgba(226,176,68,.4)', padding: '14px 26px', fontFamily: 'var(--font-en-serif)', fontSize: 18, color: 'var(--gold-text)', letterSpacing: '.08em', marginBottom: 10 }}>{en ? 'Order No.' : '訂單編號'}　{order}</div>
            <p style={{ fontFamily: sf, fontSize: 13, color: '#8E815F', marginBottom: 26 }}>{en ? <>Add WeChat <WeChatId /> and quote this number to continue.</> : <>敬加微信 <WeChatId /> 報此編號，以續前緣。</>}</p>
            <button className="btn-cart" onClick={() => { setItems([]); onClose(); }} style={{ width: '100%' }}>{en ? 'Amen · Keep browsing' : '善哉 · 繼續瀏覽'}</button>
          </div>
        )}
      </aside>
    </>
  );
}

function App() {
  const [lang, setLang] = useState('cn');
  const [cartOpen, setCartOpen] = useState(false);
  const [items, setItems] = useState([]);
  const [toastMsg, setToastMsg] = useState('');
  const toastTimer = useRef(null);

  const toast = (msg) => {
    setToastMsg(msg);
    clearTimeout(toastTimer.current);
    toastTimer.current = setTimeout(() => setToastMsg(''), 2600);
  };

  const addToCart = (item) => {
    setItems(prev => {
      const ex = prev.findIndex(p => p.id === item.id);
      if (ex >= 0) { const n = [...prev]; n[ex] = { ...n[ex], qty: n[ex].qty + item.qty }; return n; }
      return [...prev, item];
    });
    toast(lang === 'en' ? `Added to satchel · ${item.title} ✦` : `已納入緣囊 · ${item.title} ✦`);
  };

  const count = items.reduce((s, it) => s + it.qty, 0);

  return (
    <window.LangContext.Provider value={lang}>
      <Nav cartCount={count} onCart={() => setCartOpen(true)} lang={lang} setLang={setLang} />
      <Hero />
      <Master />
      <Today />
      <Natal />
      <Arts />
      <Booking addToCart={addToCart} />
      <Talisman />
      <FormSection toast={toast} />
      <Appointment toast={toast} />
      <Karma />
      <CartDrawer open={cartOpen} onClose={() => setCartOpen(false)} items={items} setItems={setItems} lang={lang} />
      <div className={`toast ${toastMsg ? 'show' : ''}`}>{toastMsg}</div>
    </window.LangContext.Provider>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);