// pages/address-detail.jsx — 地址詳情: view / edit one saved address from the 地址簿.
const { useState: uSAD } = React;

function AddrField({ label, value, icon, rows }) {
  const multiline = !!rows;
  return A('div', { style: { marginBottom: 12 } },
    A('div', { style: { fontSize: 12, fontWeight: 700, color: 'var(--ink2)', marginBottom: 7 } }, label),
    A('div', { style: { display: 'flex', alignItems: multiline ? 'flex-start' : 'center', gap: 9, background: 'var(--surface)', border: '1px solid var(--line)', borderRadius: 'var(--rmd)', padding: '12px 14px' } },
      icon && A(Icon, { name: icon, size: 17, color: 'var(--ink3)', style: { flexShrink: 0, marginTop: multiline ? 2 : 0 } }),
      A('div', { style: { flex: 1, fontSize: 14.5, color: value ? 'var(--ink)' : 'var(--ink3)', lineHeight: 1.5, fontWeight: 500, minHeight: rows ? rows * 22 : undefined } }, value || '未填寫')));
}

function AddressDetail({ onBack = () => {}, go = () => {} }) {
  const a = (window.ADDRESSES && window.ADDRESSES[0]) || { label: '住家', icon: 'pin', name: '王小美', phone: '0912-345-678', city: '台北市大安區', line: '復興南路一段 1 號 5 樓', note: '門禁密碼 1234#', def: true };
  const [def, setDef] = uSAD(a.def);

  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(AddrField, { label: '完整地址', value: `${a.city}${a.line}`, icon: 'pin' }),
      A(AddrField, { label: '門禁 / 鑰匙備註', value: a.note, icon: 'doc', rows: 3 }),
      // default toggle
      A('div', { style: { display: 'flex', alignItems: 'center', gap: 12, background: 'var(--surface)', border: '1px solid var(--line2)', borderRadius: 'var(--rmd)', padding: '14px', marginTop: 4 } },
        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('button', { className: 'ccaTap', style: { width: '100%', marginTop: 18, padding: 14, borderRadius: 'var(--rmd)', border: 'none', background: 'transparent', color: 'var(--err)', fontFamily: 'inherit', fontSize: 14, fontWeight: 700 } }, '刪除這個地址')),
    A('div', { style: { flexShrink: 0, background: 'var(--surface)', borderTop: '1px solid var(--line2)', padding: '12px 20px 8px' } },
      A(Btn, { full: true, onClick: onBack, style: { padding: '15px' } }, '儲存')),
    A(HomeBar, {}));
}

Object.assign(window, { AddressDetail, AddrField });