// ============================================================
// RingSizeGuide — "Hướng dẫn chọn size" cho nhẫn có từ 2 size trở lên.
// Bảng trượt từ dưới lên (điện thoại) / hộp giữa màn hình (máy tính).
// Bản mẫu: tools/thiet-ke/huong-dan-do-size-nhan.html.
// Size 5: Shopee chưa ghi số đo -> "đang cập nhật" cho tới khi Ngọc xác nhận. Không tự điền.
// Không thêm câu chính sách đổi/trả size.
// ============================================================

// Bảng size (đường kính trong, mm) — chỉ size đã có số đo chính thức (R3513, R3542 trên Shopee)
const JM_RING_SIZES = [{ s: 6, d: 18 }, { s: 7, d: 19 }, { s: 8, d: 20 }];

function JmRingSizeGuide({ open, onClose }) {
  const [mm, setMm] = React.useState('');
  const [kind, setKind] = React.useState('c');

  React.useEffect(() => {
    if (!open) return;
    const onKey = (e) => { if (e.key === 'Escape') onClose(); };
    document.addEventListener('keydown', onKey);
    document.body.style.overflow = 'hidden';
    return () => { document.removeEventListener('keydown', onKey); document.body.style.overflow = ''; };
  }, [open]);
  React.useEffect(() => { if (open && window.lucide) lucide.createIcons(); });

  if (!open) return null;

  function suggest() {
    const v = parseFloat((mm || '').replace(',', '.'));
    if (!v) return '';
    const d = kind === 'c' ? v / Math.PI : v;
    if (d < JM_RING_SIZES[0].d - 1) return 'Số đo nhỏ hơn size 6 — nhắn Jesmee để được tư vấn.';
    const fit = JM_RING_SIZES.find(x => d <= x.d + 0.25);
    return fit ? `Gợi ý: size ${fit.s} (đường kính ≈ ${d.toFixed(1).replace('.', ',')} mm)` : 'Số đo lớn hơn size 8 — nhắn Jesmee để được tư vấn.';
  }

  const ring = <circle cx="60" cy="45" r="26" fill="none" stroke="#C9A24A" strokeWidth="7"/>;
  const finger = <React.Fragment><rect x="45" y="8" width="30" height="76" rx="15" fill="#E8C9B0"/><rect x="42" y="52" width="36" height="7" rx="3" fill="#C05C2A"/></React.Fragment>;

  return (
    <div className="jm-sg-overlay" onClick={onClose}>
      <section className="jm-sg" role="dialog" aria-modal="true" aria-labelledby="jm-sg-title" onClick={(e) => e.stopPropagation()}>
        <button className="jm-sg__close" onClick={onClose} aria-label="Đóng"><i data-lucide="x" className="jm-icon"></i></button>
        <h2 id="jm-sg-title" className="jm-sg__title">Hướng dẫn chọn size nhẫn</h2>
        <p className="jm-sg__lead">Chỉ cần 2 phút và một cây thước. Chọn 1 trong 2 cách dưới đây.</p>

        <h3 className="jm-sg__h">Cách 1 · Đo chiếc nhẫn đang đeo vừa</h3>
        <div className="jm-sg__way">
          <div className="jm-sg__steps">
            <div className="jm-sg__step"><svg viewBox="0 0 120 90" aria-hidden="true">{ring}</svg><b>BƯỚC 1</b>Lấy chiếc nhẫn chị đang đeo vừa ở đúng ngón muốn đeo.</div>
            <div className="jm-sg__step"><svg viewBox="0 0 120 90" aria-hidden="true"><rect x="8" y="58" width="104" height="18" fill="#fff" stroke="#8B7B72"/><g stroke="#8B7B72">{[18, 28, 38, 48, 58, 68, 78, 88, 98].map((x, i) => <line key={x} x1={x} y1="58" x2={x} y2={i % 2 ? 64 : 66}/>)}</g><circle cx="58" cy="34" r="20" fill="none" stroke="#C9A24A" strokeWidth="6"/></svg><b>BƯỚC 2</b>Đặt nhẫn lên thước, nhìn thẳng từ trên xuống.</div>
            <div className="jm-sg__step"><svg viewBox="0 0 120 90" aria-hidden="true">{ring}<line x1="37.5" y1="45" x2="82.5" y2="45" stroke="#C05C2A" strokeWidth="2"/><polygon points="37.5,45 43,42 43,48" fill="#C05C2A"/><polygon points="82.5,45 77,42 77,48" fill="#C05C2A"/></svg><b>BƯỚC 3</b>Đo <u>mép trong</u> sang mép trong (đường kính trong), rồi so bảng.</div>
          </div>
        </div>

        <h3 className="jm-sg__h">Cách 2 · Đo ngón tay bằng sợi chỉ hoặc mẩu giấy</h3>
        <div className="jm-sg__way">
          <div className="jm-sg__steps">
            <div className="jm-sg__step"><svg viewBox="0 0 120 90" aria-hidden="true">{finger}</svg><b>BƯỚC 1</b>Quấn chỉ/giấy quanh <u>gốc ngón</u>, vừa khít, không siết.</div>
            <div className="jm-sg__step"><svg viewBox="0 0 120 90" aria-hidden="true">{finger}<circle cx="78" cy="55" r="4" fill="#1C1412"/></svg><b>BƯỚC 2</b>Đánh dấu điểm hai đầu chỉ gặp nhau.</div>
            <div className="jm-sg__step"><svg viewBox="0 0 120 90" aria-hidden="true"><line x1="10" y1="40" x2="100" y2="40" stroke="#C05C2A" strokeWidth="4"/><circle cx="100" cy="40" r="4" fill="#1C1412"/><rect x="8" y="52" width="104" height="18" fill="#fff" stroke="#8B7B72"/></svg><b>BƯỚC 3</b>Duỗi thẳng, đo bằng thước (mm) = <u>chu vi</u>, rồi so bảng.</div>
          </div>
          <div className="jm-sg__calc">
            <label htmlFor="jm-sg-mm">Nhập số đo của chị (mm) — web gợi ý size:</label>
            <div className="jm-sg__calc-row">
              <input id="jm-sg-mm" type="number" inputMode="decimal" placeholder="vd 58" value={mm} onChange={(e) => setMm(e.target.value)}/>
              <select aria-label="Loại số đo" value={kind} onChange={(e) => setKind(e.target.value)}>
                <option value="c">Chu vi ngón tay</option>
                <option value="d">Đường kính trong nhẫn</option>
              </select>
            </div>
            <div className="jm-sg__out" aria-live="polite">{suggest()}</div>
          </div>
        </div>

        <h3 className="jm-sg__h">Bảng size Jesmee</h3>
        <table className="jm-sg__table">
          <thead><tr><th>Size</th><th>Đường kính trong</th><th>Chu vi ngón tay</th></tr></thead>
          <tbody>
            <tr className="is-pending"><td>5</td><td colSpan="2">Đang cập nhật — nhắn Jesmee để được tư vấn</td></tr>
            <tr><td>6</td><td>18 mm</td><td>≈ 56,5 mm</td></tr>
            <tr><td>7</td><td>19 mm</td><td>≈ 59,7 mm</td></tr>
            <tr><td>8</td><td>20 mm</td><td>≈ 62,8 mm</td></tr>
          </tbody>
        </table>

        <h3 className="jm-sg__h">Mẹo để chọn đúng</h3>
        <ul className="jm-sg__tips">
          <li>Đo vào cuối ngày, khi tay ấm — ngón tay buổi sáng và lúc trời lạnh thường nhỏ hơn.</li>
          <li>Đo 2–3 lần cho chắc. Nếu khớp ngón to hơn gốc ngón, đo thêm ở khớp và lấy số lớn hơn.</li>
          <li>Số đo nằm giữa hai size: chọn size lớn hơn. Nhẫn bản to ôm ngón chặt hơn nhẫn bản mảnh.</li>
          <li>Mỗi ngón tay có size khác nhau — đo đúng ngón chị định đeo.</li>
        </ul>

        <p className="jm-sg__help">Vẫn chưa chắc? Nhắn Jesmee qua Zalo <a href={JM.shop.zalo} target="_blank" rel="noopener">{JM.shop.hotline}</a>, gửi số đo, Jesmee chọn size giúp chị.</p>
      </section>
    </div>
  );
}

window.JmRingSizeGuide = JmRingSizeGuide;