// pages/profile.jsx — 個人資料: role-aware personal-info edit form.
// role='owner' (from me.jsx) or role='pro' (from pro-me.jsx, adds verified tag + 服務地區 + 自我介紹).
const { useState: uSPF } = React;

function PField({ label, value, onChange, placeholder, inputMode, hint, req }) {
  return A('div', { style: { marginBottom: 14 } },
    A('div', { style: { fontSize: 12, fontWeight: 700, color: 'var(--ink2)', marginBottom: 7 } }, label, req && A('span', { style: { color: 'var(--err)' } }, ' *'), hint && A('span', { style: { color: 'var(--ink3)', fontWeight: 600 } }, '・' + hint)),
    A('input', { value, onChange: e => onChange(e.target.value), placeholder, inputMode,
      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' } }));
}

// service-area picker: single city + multiple districts within it
const REGIONS = {
  '台北市': ['中正', '大同', '中山', '松山', '大安', '萬華', '信義', '士林', '北投', '內湖', '南港', '文山'],
  '新北市': ['板橋', '三重', '中和', '永和', '新莊', '新店', '土城', '蘆洲', '汐止', '樹林', '淹水', '三峽'],
  '桃園市': ['桃園', '中壢', '平鎮', '八德', '龜山', '蘆竹', '大溪', '楊梅', '龍潭'],
  '台中市': ['中區', '東區', '南區', '西區', '北區', '北屯', '西屯', '南屯', '太平', '大里', '霧峰', '烏日'],
};

function RegionPicker({ city, districts, onChange }) {
  const [open, setOpen] = uSPF(false);
  const summary = districts.length ? `${city}·${districts.join('、')}` : '選擇服務地區';
  const chip = (label, sel, onClick, accent) => A('button', { key: label, className: 'ccaTap', onClick, style: {
    display: 'flex', alignItems: 'center', gap: 5, padding: '8px 13px', borderRadius: 'var(--rpill)', border: 'none', fontFamily: 'inherit', fontSize: 13, fontWeight: 700,
    background: sel ? 'var(--accent)' : 'var(--bgSoft)', color: sel ? '#fff' : 'var(--ink2)', boxShadow: sel ? 'none' : 'inset 0 0 0 1px var(--line2)' } },
    sel && accent && A(Icon, { name: 'check', size: 13, color: '#fff', sw: 2.6 }), label);
  return A('div', { style: { marginBottom: 14 } },
    A('div', { style: { fontSize: 12, fontWeight: 700, color: 'var(--ink2)', marginBottom: 7 } }, '服務地區', A('span', { style: { color: 'var(--ink3)', fontWeight: 600 } }, '・單選縣市、多選行政區')),
    // collapsed summary control
    A('button', { className: 'ccaTap', onClick: () => setOpen(o => !o), style: { width: '100%', display: 'flex', alignItems: 'center', gap: 8, boxSizing: 'border-box', border: '1px solid var(--line)', background: 'var(--surface)', borderRadius: 'var(--rmd)', padding: '13px 14px', fontFamily: 'inherit' } },
      A(Icon, { name: 'pin', size: 17, color: 'var(--ink3)', style: { flexShrink: 0 } }),
      A('span', { style: { flex: 1, textAlign: 'left', fontSize: 14, fontWeight: districts.length ? 700 : 500, color: districts.length ? 'var(--ink)' : 'var(--ink3)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' } }, summary),
      A(Icon, { name: open ? 'chevD' : 'chevR', size: 17, color: 'var(--ink3)', style: { flexShrink: 0 } })),
    // expanded picker
    open && A('div', { style: { marginTop: 10, border: '1px solid var(--line2)', borderRadius: 'var(--rlg)', background: 'var(--surface)', padding: 14 } },
      A('div', { style: { fontSize: 11.5, fontWeight: 800, color: 'var(--ink3)', marginBottom: 8 } }, '縣市 · 單選'),
      A('div', { style: { display: 'flex', flexWrap: 'wrap', gap: 7, marginBottom: 14 } },
        Object.keys(REGIONS).map(c => chip(c, c === city, () => onChange({ city: c, districts: c === city ? districts : [] }), false))),
      A('div', { style: { fontSize: 11.5, fontWeight: 800, color: 'var(--ink3)', marginBottom: 8 } }, `行政區 · 多選${districts.length ? ` · 已選 ${districts.length}` : ''}`),
      A('div', { style: { display: 'flex', flexWrap: 'wrap', gap: 7 } },
        (REGIONS[city] || []).map(d => chip(d, districts.includes(d), () => onChange({ city, districts: districts.includes(d) ? districts.filter(x => x !== d) : [...districts, d] }), true)))));
}

function ProfileEdit({ role = 'owner', onBack = () => {}, go = () => {} }) {
  const isPro = role === 'pro';
  const [f, setF] = uSPF(isPro
    ? { name: '林依婷', phone: '0912-345-678', city: '台北市', districts: ['大安', '信義'], bio: '照顧貓咪 6 年，自家也有 3 隻貓。擅長照顧高齡貓與餵藥，每次服務都會即時拍照回報，讓你出門也安心。' }
    : { nick: '王小美', name: '王小美', email: '', phone: '0912-345-678' });
  const set = (k) => (v) => setF(s => ({ ...s, [k]: v }));
  const badge = isPro ? 'var(--sage)' : 'var(--brand)';

  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' } },
      // avatar (+ verified tag for pro)
      A('div', { style: { display: 'flex', flexDirection: 'column', alignItems: 'center', marginBottom: 20 } },
        A('button', { className: 'ccaTap', style: { position: 'relative', border: 'none', background: 'transparent', padding: 0, cursor: 'pointer' } },
          A(Avatar, { size: 88, kind: 'person', ring: true }),
          A('div', { style: { position: 'absolute', bottom: -2, right: -2, width: 30, height: 30, borderRadius: 15, background: badge, color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', border: '2.5px solid var(--bg)' } }, A(Icon, { name: 'camera', size: 16, color: '#fff' }))),
        isPro && A('div', { style: { marginTop: 10 } }, A(Tag, { color: 'sage', icon: 'shield' }, '已認證 · 到府保姆'))),
      // fields by role
      isPro
        ? A(React.Fragment, null,
          A(PField, { label: '姓名', value: f.name, onChange: set('name'), placeholder: '真實姓名', req: true }),
          A(PField, { label: '聯絡電話', value: f.phone, onChange: set('phone'), placeholder: '09xx-xxx-xxx', inputMode: 'tel' }),
          A(RegionPicker, { city: f.city, districts: f.districts, onChange: ({ city, districts }) => setF(s => ({ ...s, city, districts })) }),
          A('div', { style: { fontSize: 12, fontWeight: 700, color: 'var(--ink2)', marginBottom: 7 } }, '自我介紹'),
          A('textarea', { value: f.bio, onChange: e => set('bio')(e.target.value), placeholder: '讓飼主認識你的照顧經驗與專長…', rows: 4,
            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', resize: 'none', lineHeight: 1.6 } }))
        : A(React.Fragment, null,
          A(PField, { label: '暱稱', value: f.nick, onChange: set('nick'), placeholder: '想讓保姆怎麼稱呼你？', req: true }),
          A(PField, { label: '姓名', value: f.name, onChange: set('name'), placeholder: '真實姓名' }),
          A(PField, { label: 'Email', value: f.email, onChange: set('email'), placeholder: '尚未綁定', inputMode: 'email', hint: '可之後再補' }),
          A(PField, { label: '手機號碼', value: f.phone, onChange: set('phone'), placeholder: '09xx-xxx-xxx', inputMode: 'tel' }))),
    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, { ProfileEdit, PField, RegionPicker });