const { useState, useEffect, useMemo, useRef } = React;

function Confirm({ cart, info, onBack, onSubmit, submitting }) {
  const [agreed, setAgreed] = useState(false);

  return (
    <div className="checkout-page">
      <CheckoutSteps step={3} />
      <div className="co-grid">
        <main className="co-main">
          <header className="co-header">
            <div className="co-eyebrow">STEP 3 of 3</div>
            <h1>ご注文内容の確認</h1>
            <p>下記の内容でお申し込みします。よろしければ「注文を確定する」を押してください。</p>
          </header>

          <section className="confirm-section">
            <div className="cs-head"><h3>保護者情報</h3><button className="edit-link" onClick={onBack}>編集</button></div>
            <dl className="cs-dl">
              <div><dt>メールアドレス</dt><dd>{info.email}</dd></div>
              <div><dt>保護者氏名</dt><dd>{info.parentName}（{info.parentKana}）</dd></div>
              <div><dt>携帯電話番号</dt><dd>{info.phone}</dd></div>
              <div><dt>児童氏名</dt><dd>{info.childName}</dd></div>
              <div><dt>クラス</dt><dd>{info.childClass} 組</dd></div>
            </dl>
          </section>

          <section className="confirm-section">
            <div className="cs-head"><h3>ご注文商品（{cart.reduce((s,i)=>s+i.qty,0)}点）</h3></div>
            <div className="confirm-items">
              {cart.map((it, idx) => {
                const p = window.PRODUCTS.find(x => x.id === it.productId);
                return (
                  <div className="confirm-item" key={idx}>
                    <div className="ci-thumb" style={{ background: p.color === '#FFFFFF' ? '#F7F3EB' : 'transparent' }}>
                      <ProductVisual product={p} size={72} colorKey={it.color} />
                    </div>
                    <div className="ci-body">
                      <div className="ci-name">{p.code} {p.name}</div>
                      <div className="ci-meta">
                        {p.variants.length > 1 && <span>{window.VARIANT_LABELS[it.variant]}</span>}
                        {it.color && <span>{window.VARIANT_LABELS[it.color]}</span>}
                        <span>
                          サイズ {it.size}
                          {(() => {
                            const KID = ['100','110','120','130','140','150','160'];
                            const ADULT = ['S','M','L','XL','XXL','XXXL'];
                            if (KID.includes(it.size)) return <span className="size-age-tag tag tag-kid">キッズ</span>;
                            if (ADULT.includes(it.size)) return <span className="size-age-tag tag tag-adult">大人</span>;
                            return null;
                          })()}
                        </span>
                        <span>× {it.qty}</span>
                      </div>
                    </div>
                    <div className="ci-price">¥{(it.qty * it.unitPrice).toLocaleString()}</div>
                  </div>
                );
              })}
            </div>
          </section>

          <section className="confirm-section payment-note">
            <div className="cs-head"><h3>お支払い・お受取</h3></div>
            <ul className="pn-list">
              <li><strong>お支払い</strong>：商品お受け取り時に現金またはPayPayで</li>
              <li><strong>お受け取り</strong>：場所・日時は後日「まちコミ」にてお知らせします</li>
              <li><strong>生産</strong>：受注生産のため、お申し込み後のキャンセル・変更はできません</li>
            </ul>
          </section>

          <label className="agree">
            <input type="checkbox" checked={agreed} onChange={e => setAgreed(e.target.checked)} />
            <span>上記の内容で申し込みます。受注生産のためキャンセルできないことを了承しました。</span>
          </label>

          <div className="co-actions">
            <button className="btn-ghost" onClick={onBack} disabled={submitting}>← 情報を修正</button>
            <button
              className={`btn-primary large ${agreed ? '' : 'disabled'}`}
              disabled={!agreed || submitting}
              onClick={onSubmit}
            >
              {submitting ? '送信中…' : '注文を確定する →'}
            </button>
          </div>
        </main>

        <aside className="co-summary">
          <OrderSummary cart={cart} />
        </aside>
      </div>
    </div>
  );
}

function Complete({ orderId, cart, info, onReset }) {
  const total = cart.reduce((s, it) => s + it.qty * it.unitPrice, 0);

  return (
    <div className="complete-page">
      <div className="complete-card">
        <div className="complete-mark">
          <svg viewBox="0 0 120 120" width="120" height="120">
            <circle cx="60" cy="60" r="55" fill="none" stroke="var(--accent)" strokeWidth="1.5" opacity="0.3"/>
            <circle cx="60" cy="60" r="44" fill="var(--accent)" opacity="0.08"/>
            <path d="M40 60 L54 74 L82 46" fill="none" stroke="var(--accent)" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"/>
          </svg>
        </div>
        <div className="complete-eyebrow">THANK YOU</div>
        <h1>ご注文ありがとうございました</h1>
        <p className="complete-lede">
          お申し込みを受け付けました。<br/>
          お受け取りの場所・日時は後日「まちコミ」にてお知らせします。
        </p>

        <div className="complete-receipt">
          <div className="cr-row"><span>注文番号</span><span className="mono">{orderId}</span></div>
          <div className="cr-row"><span>お名前</span><span>{info.parentName} 様</span></div>
          <div className="cr-row"><span>児童</span><span>{info.childName}（{info.childClass}組）</span></div>
          <div className="cr-row"><span>点数</span><span>{cart.reduce((s,i)=>s+i.qty,0)}点</span></div>
          <div className="cr-row big"><span>合計金額</span><span>¥{total.toLocaleString()}</span></div>
        </div>

        <div className="complete-next">
          <div className="cn-title">次のステップ</div>
          <div className="cn-items">
            <div className="cn-item"><span className="cn-num">1</span><div><strong>受注締切</strong><br/>4月30日（水）まで追加注文を受け付けています</div></div>
            <div className="cn-item"><span className="cn-num">2</span><div><strong>お受け取り</strong><br/>場所・日時は「まちコミ」でお知らせします</div></div>
            <div className="cn-item"><span className="cn-num">3</span><div><strong>お支払い</strong><br/>お受け取り時に現金またはPayPayで</div></div>
          </div>
        </div>

        <button className="btn-ghost" onClick={onReset}>トップに戻る</button>
      </div>
    </div>
  );
}

window.Confirm = Confirm;
window.Complete = Complete;