// akun.jsx — User Profile / Orders

const AKUN_MENU = [
  { id: 'profil',   label: 'Profil Saya',     jp: 'プロフィール', icon: 'user' },
  { id: 'pesanan',  label: 'Pesanan Saya',    jp: '注文履歴',     icon: 'cart' },
  { id: 'alamat',   label: 'Alamat',          jp: '住所',         icon: 'pin' },
  { id: 'wishlist', label: 'Wishlist',        jp: 'お気に入り',   icon: 'heart' },
  { id: 'voucher',  label: 'Voucher',         jp: 'クーポン',     icon: 'giftbox' },
  { id: 'poin',     label: 'Poin Reward',     jp: 'ポイント',     icon: 'spark' },
  { id: 'notif',    label: 'Notifikasi',      jp: '通知',         icon: 'bell' },
  { id: 'pengaturan', label: 'Pengaturan',    jp: '設定',         icon: 'shield' },
];

const ORDER_FILTERS = [
  { id: 'all', label: 'Semua', filter: () => true },
  { id: 'pending', label: 'Bayar', filter: o => o.status === 'pending' },
  { id: 'packing', label: 'Dikemas', filter: o => o.status === 'packing' },
  { id: 'shipping', label: 'Dikirim', filter: o => o.status === 'shipping' },
  { id: 'done', label: 'Selesai', filter: o => o.status === 'done' },
  { id: 'refund', label: 'Refund', filter: o => o.status === 'refund' },
];

function Akun({ ctx, section }) {
  const [active, setActive] = React.useState(section || 'pesanan');
  const [orderTab, setOrderTab] = React.useState('all');

  return (
    <div className="akun">
      <aside className="akun-side">
        <div className="akun-user">
          <div className="avatar">{USER.initials}</div>
          <div>
            <h4>{USER.name}</h4>
            <p>
              <span style={{
                display: 'inline-block', background: 'var(--pink)', color: '#fff',
                fontSize: 10, fontWeight: 800, padding: '1px 6px', borderRadius: 4,
                marginRight: 4
              }}>{USER.tier}</span>
              {USER.points.toLocaleString('id-ID')} poin
            </p>
          </div>
        </div>
        <nav className="akun-menu">
          {AKUN_MENU.map(m => (
            <button key={m.id} className={active === m.id ? 'active' : ''}
                    onClick={() => setActive(m.id)}>
              <Icon name={m.icon} size={16} />
              {m.label}
              <span className="spacer" />
              <span style={{ fontFamily: 'var(--font-jp)', fontSize: 10, opacity: .7 }}>{m.jp}</span>
            </button>
          ))}
          <button style={{ marginTop: 12, color: 'var(--red)' }} onClick={() => ctx.go('home')}>
            <Icon name="close" size={16} /> Keluar
          </button>
        </nav>
      </aside>

      <div className="akun-main">
        {active === 'pesanan' && (
          <>
            <h2>
              Pesanan Saya
              <span className="muted" style={{ fontFamily: 'var(--font-jp)', fontSize: 12, fontWeight: 500, marginLeft: 8 }}>
                注文履歴
              </span>
            </h2>
            <div className="order-tabs">
              {ORDER_FILTERS.map(f => (
                <button key={f.id} className={orderTab === f.id ? 'active' : ''}
                        onClick={() => setOrderTab(f.id)}>
                  {f.label}
                  <span className="count">{ORDERS.filter(f.filter).length}</span>
                </button>
              ))}
            </div>

            {ORDERS.filter(ORDER_FILTERS.find(x => x.id === orderTab).filter).map(o => {
              const st = ORDER_STATUS_LABEL[o.status];
              return (
                <div key={o.id} className="order-card">
                  <div className="order-hd">
                    <div>
                      <span className="id">{o.id}</span>
                      <span className="date">{o.date}</span>
                    </div>
                    <span className={`status-pill ${o.status}`}>
                      <span style={{ fontFamily: 'var(--font-jp)' }}>{st.jp}</span> · {st.label}
                    </span>
                  </div>

                  <div className="order-items">
                    {o.items.map((it, i) => {
                      const cat = CATEGORY_BY_SLUG[it.product.cat];
                      return (
                        <div key={i} className="order-line">
                          <div className="mini-img" style={{ background: cat.color }}>{it.product.glyph}</div>
                          <div className="info">
                            <h5>{it.product.nameID}</h5>
                            <p>{it.product.brand}{it.variant ? ` · ${it.variant}` : ''}</p>
                          </div>
                          <div className="qty">{it.qty}× {fmtIDR(it.product.priceIDR)}</div>
                        </div>
                      );
                    })}
                  </div>

                  <div className="order-ft">
                    <div className="total">
                      {o.tracking && <span className="kbd">📦 {o.tracking}</span>}
                      <span style={{ marginLeft: o.tracking ? 12 : 0 }}>{o.courier}</span>
                      · Total: <b>{fmtIDR(o.total)}</b>
                    </div>
                    <div className="row">
                      {o.status === 'pending' && <button className="btn primary sm">Bayar Sekarang</button>}
                      {o.status === 'shipping' && <button className="btn cyan sm">Lacak Paket</button>}
                      {o.status === 'done' && <button className="btn ghost sm">Beri Ulasan</button>}
                      {o.status === 'done' && <button className="btn ghost sm">Beli Lagi</button>}
                      <button className="btn ghost sm">Detail</button>
                    </div>
                  </div>
                </div>
              );
            })}
          </>
        )}

        {active === 'profil' && (
          <>
            <h2>Profil Saya <span className="muted" style={{ fontFamily: 'var(--font-jp)', fontSize: 12, fontWeight: 500 }}>プロフィール</span></h2>
            <div className="checkout-form">
              <div className="field"><label>Nama Lengkap</label><input defaultValue={USER.name} /></div>
              <div className="field"><label>Email</label><input defaultValue={USER.email} /></div>
              <div className="field"><label>No. HP</label><input defaultValue={USER.phone} /></div>
              <div className="field"><label>Tanggal Lahir</label><input type="date" defaultValue="1994-03-21" /></div>
              <div className="field"><label>Jenis Kelamin</label><select><option>Perempuan</option><option>Laki-laki</option></select></div>
              <div className="field"><label>Bergabung Sejak</label><input value={USER.joined} disabled /></div>
            </div>
            <button className="btn primary" style={{ marginTop: 16 }}>Simpan Perubahan</button>

            <div style={{ marginTop: 32, display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 12 }}>
              {[
                { label: 'Total Pesanan', value: '24', jp: '注文数' },
                { label: 'Total Belanja', value: 'Rp 28.4 jt', jp: '購入額' },
                { label: 'Poin Aktif', value: USER.points.toLocaleString('id-ID'), jp: 'ポイント' },
              ].map(s => (
                <div key={s.label} className="card" style={{ padding: 16 }}>
                  <div style={{ fontFamily: 'var(--font-jp)', fontSize: 10, color: 'var(--pink)', letterSpacing: '.2em' }}>{s.jp}</div>
                  <div className="muted" style={{ fontSize: 12, margin: '4px 0' }}>{s.label}</div>
                  <div style={{ fontFamily: 'var(--font-display)', fontSize: 22 }}>{s.value}</div>
                </div>
              ))}
            </div>
          </>
        )}

        {active === 'alamat' && (
          <>
            <h2>Alamat Saya <span className="muted" style={{ fontFamily: 'var(--font-jp)', fontSize: 12, fontWeight: 500 }}>住所</span></h2>
            {[
              { label: 'Rumah (Utama)', name: 'Sakura Tanaka · +62 812-3456-7890', addr: 'Jl. Senopati No. 88, RT 03/RW 05, Kebayoran Baru, Jakarta Selatan 12190' },
              { label: 'Kantor', name: 'Sakura Tanaka · +62 812-3456-7890', addr: 'SCBD Lot 14, Jl. Jend. Sudirman Kav 52-53, Jakarta Selatan 12190' },
            ].map((a, i) => (
              <div key={i} className="card" style={{ padding: 16, marginBottom: 12, display: 'flex', gap: 16, alignItems: 'flex-start' }}>
                <Icon name="pin" size={24} />
                <div style={{ flex: 1 }}>
                  <h4 style={{ margin: 0 }}>
                    {a.label}
                    {i === 0 && <span style={{ marginLeft: 8, background: 'var(--pink)', color: '#fff', fontSize: 10, padding: '2px 6px', borderRadius: 4 }}>Default</span>}
                  </h4>
                  <p className="muted" style={{ margin: '4px 0', fontSize: 13 }}>{a.name}</p>
                  <p style={{ margin: 0, fontSize: 13 }}>{a.addr}</p>
                </div>
                <div className="row">
                  <button className="btn ghost sm">Ubah</button>
                  <button className="btn ghost sm">Hapus</button>
                </div>
              </div>
            ))}
            <button className="btn primary"><Icon name="plus" size={14} /> Tambah Alamat</button>
          </>
        )}

        {active === 'wishlist' && (
          <>
            <h2>Wishlist <span className="muted" style={{ fontFamily: 'var(--font-jp)', fontSize: 12, fontWeight: 500 }}>お気に入り</span></h2>
            <div className="product-grid" style={{ gridTemplateColumns: 'repeat(auto-fill, minmax(200px,1fr))' }}>
              {ctx.wishlist.map(id => PRODUCT_BY_ID[id]).filter(Boolean)
                .map(p => <ProductCard key={p.id} product={p} ctx={ctx} />)}
            </div>
            {ctx.wishlist.length === 0 && (
              <div className="empty">
                <div className="icon-big">♥</div>
                <h3>Wishlist masih kosong</h3>
                <p>Tap ikon hati di produk yang kamu suka.</p>
                <button className="btn primary" onClick={() => ctx.go('home')}>Mulai Belanja</button>
              </div>
            )}
          </>
        )}

        {active === 'voucher' && (
          <>
            <h2>Voucher Saya <span className="muted" style={{ fontFamily: 'var(--font-jp)', fontSize: 12, fontWeight: 500 }}>クーポン</span></h2>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(280px,1fr))', gap: 12 }}>
              {[
                { code: 'SAKURA10', name: 'Diskon 10%', desc: 'Min. belanja Rp 500.000', exp: '31 Mei 2026', tone: 'pink' },
                { code: 'EMS50K', name: 'Potongan Ongkir Rp 50.000', desc: 'Khusus EMS Japan Post', exp: '15 Juni 2026', tone: 'cyan' },
                { code: 'NEWBIE1K', name: 'Voucher ¥1.000', desc: 'Member baru only', exp: '30 April 2026 (expired)', tone: 'yellow', expired: true },
              ].map(v => (
                <div key={v.code} className={`campaign-card ${v.tone}`} style={{ opacity: v.expired ? 0.5 : 1 }}>
                  <div>
                    <div className="jp">VOUCHER</div>
                    <h4>{v.name}</h4>
                  </div>
                  <p>{v.desc}</p>
                  <div className="row" style={{ justifyContent: 'space-between' }}>
                    <span className="kbd" style={{ background: 'rgba(0,0,0,.15)', color: 'inherit', border: 0 }}>{v.code}</span>
                    <span style={{ fontSize: 11 }}>Exp: {v.exp}</span>
                  </div>
                </div>
              ))}
            </div>
          </>
        )}

        {active === 'poin' && (
          <>
            <h2>Poin Reward <span className="muted" style={{ fontFamily: 'var(--font-jp)', fontSize: 12, fontWeight: 500 }}>ポイント</span></h2>
            <div className="card" style={{
              padding: 28, background: 'linear-gradient(135deg, var(--pink), var(--cyan))',
              color: 'var(--ink)', marginBottom: 16
            }}>
              <div style={{ fontFamily: 'var(--font-jp)', fontWeight: 900, fontSize: 12, letterSpacing: '.25em' }}>
                総ポイント残高
              </div>
              <div style={{ fontFamily: 'var(--font-display)', fontSize: 56, lineHeight: 1, margin: '8px 0' }}>
                {USER.points.toLocaleString('id-ID')} <span style={{ fontSize: 20 }}>poin</span>
              </div>
              <div>≈ {fmtIDR(USER.points * 100)} bisa dipakai sebagai potongan</div>
            </div>
            <h4>Riwayat Poin</h4>
            <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 13 }}>
              <tbody>
                {[
                  ['18 Mei 2026', 'Pesanan NM-2026-04821', '+ 552'],
                  ['14 Mei 2026', 'Pesanan NM-2026-04702', '+ 81'],
                  ['10 Mei 2026', 'Tukar voucher Rp 50.000', '- 500'],
                  ['08 Mei 2026', 'Pesanan NM-2026-04588', '+ 450'],
                ].map(([d, k, v]) => (
                  <tr key={d + k} style={{ borderBottom: '1px dashed var(--line)' }}>
                    <td style={{ padding: '10px 0', color: 'var(--ink-3)', width: 120 }}>{d}</td>
                    <td style={{ padding: '10px 0' }}>{k}</td>
                    <td style={{ padding: '10px 0', textAlign: 'right', fontWeight: 700,
                                 color: v.startsWith('+') ? 'var(--green)' : 'var(--red)' }}>{v}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </>
        )}

        {active === 'notif' && (
          <>
            <h2>Notifikasi <span className="muted" style={{ fontFamily: 'var(--font-jp)', fontSize: 12, fontWeight: 500 }}>通知</span></h2>
            {[
              { i: 'truck', t: 'Paket NM-2026-04821 dalam perjalanan', d: '2 jam lalu · sudah tiba di Singapore Hub' },
              { i: 'spark', t: 'Flash Sale Golden Week dimulai!', d: '5 jam lalu · diskon hingga 60%' },
              { i: 'check', t: 'Pembayaran NM-2026-04702 berhasil', d: '4 hari lalu · BCA Virtual Account' },
              { i: 'giftbox', t: 'Voucher baru: SAKURA10', d: '1 minggu lalu · berlaku sampai 31 Mei' },
            ].map((n, i) => (
              <div key={i} className="card" style={{ padding: 14, marginBottom: 8, display: 'flex', alignItems: 'center', gap: 12 }}>
                <div style={{ width: 40, height: 40, borderRadius: 8, background: 'var(--pink-l)', color: 'var(--pink-d)', display: 'grid', placeItems: 'center', border: '2px solid var(--ink)' }}>
                  <Icon name={n.i} size={18} />
                </div>
                <div style={{ flex: 1 }}>
                  <div style={{ fontWeight: 700, fontSize: 14 }}>{n.t}</div>
                  <div className="muted" style={{ fontSize: 12 }}>{n.d}</div>
                </div>
              </div>
            ))}
          </>
        )}

        {active === 'pengaturan' && (
          <>
            <h2>Pengaturan <span className="muted" style={{ fontFamily: 'var(--font-jp)', fontSize: 12, fontWeight: 500 }}>設定</span></h2>
            {[
              { t: 'Notifikasi Email', d: 'Update pesanan, promo, newsletter' },
              { t: 'Notifikasi WhatsApp', d: 'Status pengiriman real-time' },
              { t: 'Mode Bahasa', d: 'Bahasa Indonesia (Default)' },
              { t: 'Mata Uang Default', d: 'IDR (Rupiah)' },
              { t: 'Ubah Password', d: 'Terakhir diubah 3 bulan lalu' },
              { t: 'Two-Factor Authentication', d: 'Belum aktif — sangat disarankan' },
            ].map((s, i) => (
              <div key={i} className="card" style={{ padding: 14, marginBottom: 8, display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12 }}>
                <div>
                  <div style={{ fontWeight: 700, fontSize: 14 }}>{s.t}</div>
                  <div className="muted" style={{ fontSize: 12 }}>{s.d}</div>
                </div>
                <button className="btn ghost sm">Ubah</button>
              </div>
            ))}
          </>
        )}
      </div>
    </div>
  );
}

Object.assign(window, { Akun });