// pages/payment.jsx — 付款方式: saved payment methods (list) + add-card form. Entry from 我的 (profile).
const { useState: uSPM } = React;
const PAYMETHODS = [
  { id: 'p1', kind: '信用卡', brand: 'VISA', last4: '4271', exp: '08 / 27', icon: 'wallet', def: true },
  { id: 'p2', kind: '行動支付', brand: 'Apple Pay', last4: '', exp: '已綁定', icon: 'phone', def: false },
];

// labelled text field for the add-card form
function PayField({ label, value, onChange, placeholder, inputMode, num, req }) {
  return A('div', { style: { flex: 1 } },
    A('div', { style: { fontSize: 12, fontWeight: 700, color: 'var(--ink2)', marginBottom: 7 } }, label, req && A('span', { style: { color: 'var(--err)' } }, ' *')),
    A('input', { value, onChange: e => onChange(e.target.value), placeholder, inputMode,
      className: num ? 'num' : undefined,
      style: { width: '100%', boxSizing: 'border-box', border: '1px solid var(--line)', background: 'var(--surface)', borderRadius: 'var(--rmd)', padding: '13px 14px', fontSize: 14.5, fontFamily: 'inherit', color: 'var(--ink)', outline: 'none' } }));
}

function AddPayment({ onBack = () => {} }) {
  const [card, setCard] = uSPM('');
  const [exp, setExp] = uSPM('');
  const [cvc, setCvc] = uSPM('');
  const [name, setName] = uSPM('');
  const [def, setDef] = uSPM(true);
  const canSave = card.trim() && exp.trim() && cvc.trim();
  return A('div', { style: { flex: 1, display: 'flex', flexDirection: 'column', minHeight: 0, background: 'var(--bg)' } },
    A(AppBar, { title: '新增付款方式', onLeft: onBack }),
    A(Scroll, { style: { padding: '4px 20px 16px' } },
      A('div', { style: { fontSize: 12.5, color: 'var(--ink3)', lineHeight: 1.6, margin: '0 2px 16px' } }, '卡號由你本人輸入 · 平台不留存完整卡號 🔒'),
      A('div', { style: { marginBottom: 14 } }, A(PayField, { label: '卡號', value: card, onChange: setCard, placeholder: '1234 5678 9012 3456', inputMode: 'numeric', num: true, req: true })),
      A('div', { style: { display: 'flex', gap: 12, marginBottom: 14 } },
        A(PayField, { label: '有效期限', value: exp, onChange: setExp, placeholder: 'MM / YY', inputMode: 'numeric', num: true, req: true }),
        A(PayField, { label: '安全碼', value: cvc, onChange: setCvc, placeholder: 'CVC', inputMode: 'numeric', num: true, req: true })),
      A('div', { style: { marginBottom: 16 } }, A(PayField, { label: '持卡人姓名', value: name, onChange: setName, placeholder: '選填' })),
      A('div', { style: { display: 'flex', alignItems: 'center', gap: 12, background: 'var(--surface)', border: '1px solid var(--line2)', borderRadius: 'var(--rmd)', padding: '14px' } },
        A('div', { style: { flex: 1 } },
          A('div', { style: { fontSize: 14, fontWeight: 700 } }, '設為預設付款方式'),
          A('div', { style: { fontSize: 11.5, color: 'var(--ink3)', marginTop: 1 } }, '預約結帳時自動帶入')),
        A(Toggle, { on: def, onClick: () => setDef(v => !v) }))),
    A('div', { style: { flexShrink: 0, background: 'var(--surface)', borderTop: '1px solid var(--line2)', padding: '12px 20px 8px' } },
      A(Btn, { full: true, disabled: !canSave, onClick: onBack, style: { padding: '15px' } }, '新增卡片')),
    A(HomeBar, {}));
}

function Payment({ onBack = () => {}, go = () => {} }) {
  const [view, setView] = uSPM('list');
  if (view === 'add') return A(AddPayment, { onBack: () => setView('list') });
  return A('div', { style: { flex: 1, display: 'flex', flexDirection: 'column', minHeight: 0, background: 'var(--bg)' } },
    A(AppBar, { title: '付款方式', onLeft: onBack }),
    A(Scroll, { style: { padding: '4px 20px 16px' } },
      A('div', { style: { fontSize: 12, color: 'var(--ink3)', margin: '0 2px 10px' } }, '預約服務付款時可直接選用 · 卡號由你本人輸入，平台不留存'),
      A('div', { style: { background: 'var(--surface)', border: '1px solid var(--line2)', borderRadius: 'var(--rlg)', overflow: 'hidden' } },
        PAYMETHODS.map((m, i) => A('div', { key: m.id, className: 'ccaTap', style: { display: 'flex', gap: 12, alignItems: 'center', padding: '14px', borderTop: i ? '1px solid var(--line2)' : 'none' } },
          A('div', { style: { width: 42, height: 42, borderRadius: 12, background: 'var(--brandSoft)', color: 'var(--brandDeep)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 } }, A(Icon, { name: m.icon, size: 20 })),
          A('div', { style: { flex: 1, minWidth: 0 } },
            A('div', { style: { display: 'flex', alignItems: 'center', gap: 7 } },
              A('span', { style: { fontSize: 14.5, fontWeight: 800 } }, m.brand),
              m.def && A(Tag, { color: 'ok', icon: 'check' }, '預設')),
            A('div', { className: 'num', style: { fontSize: 12.5, color: 'var(--ink3)', marginTop: 3 } }, m.last4 ? `•••• ${m.last4} · ${m.exp}` : `${m.kind} · ${m.exp}`)),
          A(Icon, { name: 'chevR', size: 17, color: 'var(--ink3)' })))),
      A('button', { className: 'ccaTap', onClick: () => setView('add'), style: { width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8, padding: 16, marginTop: 14, borderRadius: 'var(--rlg)', border: '1.5px dashed var(--line)', background: 'transparent', color: 'var(--ink3)', fontFamily: 'inherit', fontSize: 14, fontWeight: 700 } },
        A(Icon, { name: 'plus', size: 19 }), '新增付款方式')),
    A(HomeBar, {}));
}

Object.assign(window, { PAYMETHODS, Payment, AddPayment });