function ToggleRow({ label, sub, on, onChange, dark }) {
  const th = useTheme(dark);
  return (
    <div style={{ display:'flex', alignItems:'center', gap:12, padding:'13px 0', borderBottom:`1px solid ${th.border}`, cursor:'pointer' }} onClick={() => onChange(!on)}>
      <div style={{ flex:1, minWidth:0 }}>
        <div style={{ fontSize:FS(14), fontWeight:600, color:th.text }}>{label}</div>
        {sub && <div style={{ fontSize:FS(11.5), color:th.textSub, marginTop:2 }}>{sub}</div>}
      </div>
      <Toggle on={on} onChange={() => onChange(!on)} dark={dark} />
    </div>
  );
}

function Row({ label, value, dark, danger, mono, onClick }) {
  const th = useTheme(dark);
  return (
    <div onClick={onClick} style={{ display:'flex', alignItems:'center', padding:'12px 0', borderBottom:`1px solid ${th.border}`, cursor:onClick?'pointer':'default' }}>
      <span style={{ fontSize:FS(13), color:th.textSub }}>{label}</span>
      <span style={{ marginLeft:'auto', fontSize:FS(13), fontWeight: danger?700:600, color: danger?th.danger:th.text, fontFamily: mono?FONTS.mono:'Noto Sans TC' }}>{value}</span>
      {onClick && <span style={{ color:th.textMuted, marginLeft:6 }}>›</span>}
    </div>
  );
}

function TabProfile({ dark, big, onToggleBig, onToggleDark, onReport, onLogout }) {
  const th = useTheme(dark);
  const d = DATA.driver;
  const [darkMode, setDarkMode] = useState(dark);
  const [shareLoc, setShareLoc] = useState(true);
  const [kenyi, setKenyi] = useState(false);
  const [toast, setToast] = useState(null);

  function showToast(m) {
    setToast(m);
    setTimeout(() => setToast(null), 1600);
  }

  const tierStyle = d.tier === '高級會員'
    ? { color:'#E8A855', bg:'rgba(232,168,85,.15)', border:'1px solid #E8A855' }
    : { color:'#F4F1EB', bg:'rgba(255,255,255,.12)', border:'1px solid rgba(255,255,255,.25)' };

  return (
    <div style={{ height:'100%', display:'flex', flexDirection:'column', background:th.bg }}>
      <ScreenHeader title="個人設定" sub={`${d.name} · ${d.tier}`} dark={dark} />

      <div style={{ flex:1, overflowY:'auto', padding:'0 16px 20px' }} className="scroll-hide">
        <div style={{ background:'#0A0A0A', borderRadius:16, padding:18 }}>
          <div style={{ display:'flex', alignItems:'center', gap:14 }}>
            <Avatar name={d.name} size={56} bg="#22221F" fg="#FFF" />
            <div style={{ flex:1 }}>
              <div style={{ display:'flex', alignItems:'center', gap:8 }}>
                <span style={{ fontSize:FS(17), fontWeight:800, color:'#FFF' }}>{d.name}</span>
                <span style={{ fontSize:FS(10), fontWeight:700, padding:'2px 8px', borderRadius:999, color:tierStyle.color, background:tierStyle.bg, border:tierStyle.border }}>{d.tier}</span>
              </div>
              <div style={{ fontSize:FS(12), color:'#A8A39B', marginTop:2 }}>{d.phone}</div>
              <div style={{ display:'flex', gap:6, marginTop:8 }}>
                <span style={{ fontFamily:FONTS.mono, fontSize:FS(11), color:'#F4F1EB', padding:'2px 8px', borderRadius:6, background:'rgba(255,255,255,.1)' }}>{d.plate}</span>
                <span style={{ fontSize:FS(11), color:'#F4F1EB', padding:'2px 8px', borderRadius:6, background:'rgba(255,255,255,.1)' }}>{d.carModel} {d.carType}</span>
              </div>
            </div>
          </div>
          <div style={{ display:'flex', gap:8, marginTop:16 }}>
            {[['可用點數', d.points.toLocaleString()], ['系統評分', d.rating], ['愛心', d.hearts]].map(([l,v]) => (
              <div key={l} style={{ flex:1, background:'#161614', borderRadius:12, padding:'12px', textAlign:'center' }}>
                <div style={{ fontFamily:FONTS.mono, fontSize:FS(20), fontWeight:900, color:'#FFF' }}>{v}</div>
                <div style={{ fontSize:FS(10.5), color:'#8A857E', marginTop:2 }}>{l}</div>
              </div>
            ))}
          </div>
        </div>

        <SectionLabel dark={dark}>快速設定</SectionLabel>
        <Card dark={dark} style={{ padding:'0 16px' }}>
          <ToggleRow label="夜間模式" sub="使用深色背景，夜間開車更護眼" on={darkMode} onChange={v => { setDarkMode(v); onToggleDark(v); }} dark={dark} />
          <ToggleRow label="位置分享" sub="開啟後小隊成員可以看到您的所在行政區" on={shareLoc} onChange={setShareLoc} dark={dark} />
          <ToggleRow label="我有肯驛系統" sub="開啟後才看得到需要肯驛系統的訂單" on={kenyi} onChange={setKenyi} dark={dark} />
          <ToggleRow label="老人家模式" sub="放大所有文字，更易閱讀" on={big} onChange={v => { onToggleBig(v); showToast(v?'老人家模式已開啟':'老人家模式已關閉'); }} dark={dark} />
        </Card>

        <SectionLabel dark={dark}>車輛資訊</SectionLabel>
        <Card dark={dark} style={{ padding:'0 16px' }}>
          {[['車牌', d.plate, true], ['廠牌', d.carBrand], ['車型', d.carModel], ['顏色', d.carColor], ['種類', d.carKind]].map(([l,v,mono]) => (
            <Row key={l} label={l} value={v} mono={mono} dark={dark} />
          ))}
        </Card>

        <SectionLabel dark={dark}>文件管理</SectionLabel>
        <Card dark={dark} style={{ padding:'0 16px' }}>
          <div style={{ background:'#FBE5E8', color:'#D7263D', borderRadius:8, padding:'10px 12px', fontSize:FS(12), lineHeight:1.6, margin:'10px 0' }}>
            ⚠️ 職業駕照 已到期，已暫停接單。請盡速補件。
          </div>
          {[['行車執照','2026-09-30','正常'],['職業駕照','2026-06-30','已過期'],['乘客險保險證','2026-12-31','正常'],['車輛外觀照片','—','審核中']].map(([name,exp,status]) => {
            const sc = status==='正常'?{c:'#0F7A3A',bg:'#E6F2EB'}:status==='已過期'?{c:'#D7263D',bg:'#FBE5E8'}:status==='審核中'?{c:'#B45309',bg:'#FBEFD9'}:{c:'#B45309',bg:'#FBEFD9'};
            return (
              <div key={name} style={{ display:'flex', alignItems:'center', padding:'12px 0', borderBottom:`1px solid ${th.border}` }}>
                <div style={{ flex:1 }}>
                  <div style={{ fontSize:FS(13), fontWeight:600, color:th.text }}>{name}</div>
                  <div style={{ fontSize:FS(11), color:th.textMuted, marginTop:1 }}>到期 {exp} · 📎 查看文件</div>
                </div>
                <StatusPill label={status} fg={sc.c} bg={sc.bg} style={{ marginRight:8 }} />
                {status!=='正常' && <button onClick={() => showToast(`送出 ${name} 補件`)} className="press" style={{ padding:'7px 12px', borderRadius:8, background:th.text, color:th.surface, border:'none', fontSize:FS(12), fontWeight:700, cursor:'pointer', fontFamily:'Noto Sans TC' }}>補件</button>}
              </div>
            );
          })}
        </Card>

        <SectionLabel dark={dark}>銀行帳號</SectionLabel>
        <Card dark={dark} onClick={() => showToast('變更銀行帳號')} style={{ padding:'0 16px', cursor:'pointer' }}>
          <Row label="收款帳戶" value={`${d.bank} ****${d.bankTail}`} onClick={() => showToast('變更銀行帳號')} dark={dark} />
        </Card>

        <SectionLabel dark={dark}>歸屬地</SectionLabel>
        <Card dark={dark}>
          <div style={{ fontSize:FS(11), color:th.textMuted, lineHeight:1.6, marginBottom:10 }}>非必填｜中南部長單司機強烈建議填寫，系統將優先派發鄰近歸屬地的長途訂單。</div>
          <div style={{ padding:'13px', borderRadius:12, border:`1.5px solid ${th.border}`, color:th.text, fontSize:FS(14) }}>{d.district}</div>
          <button onClick={() => showToast('歸屬地已儲存')} className="press" style={{ marginTop:10, width:'100%', padding:'12px', borderRadius:10, background:th.text, color:th.surface, border:'none', fontSize:FS(13), fontWeight:800, cursor:'pointer', fontFamily:'Noto Sans TC' }}>儲存歸屬地</button>
        </Card>

        <SectionLabel dark={dark}>帳號安全</SectionLabel>
        <Card dark={dark} style={{ padding:'0 16px' }}>
          <Row label="變更密碼" value="8 碼以上且含英文字母" onClick={() => showToast('變更密碼')} dark={dark} />
        </Card>

        <SectionLabel dark={dark}>名片設定</SectionLabel>
        <Card dark={dark}>
          <div style={{ display:'flex', alignItems:'center', gap:12 }}>
            <Avatar name={d.name} size={64} bg="#22221F" fg="#FFF" />
            <div style={{ fontSize:FS(12), color:th.textSub }}>點擊可上傳 / 更換大頭貼</div>
          </div>
          {[['LINE ID', 'gogmo.kevinlin'], ['個人標語', '專業機場接送，安全第一'], ['服務區', '雙北、桃園']].map(([k,v]) => (
            <div key={k} style={{ display:'flex', alignItems:'center', gap:10, marginTop:12 }}>
              <span style={{ fontSize:FS(13), color:th.textSub, flexShrink:0 }}>{k}</span>
              <span style={{ flex:1, padding:'11px 12px', borderRadius:10, border:`1px solid ${th.border}`, background:th.surfaceAlt, fontSize:FS(13), color:th.text }}>{v}</span>
            </div>
          ))}
        </Card>

        <SectionLabel dark={dark}>推薦碼</SectionLabel>
        <Card dark={dark}>
          <div style={{ textAlign:'center' }}>
            <div style={{ fontFamily:FONTS.mono, fontSize:FS(24), fontWeight:900, letterSpacing:4, color:th.text }}>{d.referral}</div>
            <div style={{ fontSize:FS(12), color:th.textSub, marginTop:6 }}>已推薦 {d.referred} 位司機加入</div>
            <div style={{ fontSize:FS(11), color:th.textMuted, marginTop:2 }}>推薦人 +500 點 · 被推薦人 +1000 點</div>
            <button onClick={() => showToast('已複製！')} className="press" style={{ marginTop:10, padding:'10px 26px', borderRadius:10, background:th.text, color:th.surface, border:'none', fontSize:FS(13), fontWeight:800, cursor:'pointer', fontFamily:'Noto Sans TC' }}>複製</button>
          </div>
        </Card>

        <button onClick={onReport} className="press" style={{
          marginTop:14, width:'100%', padding:'14px', borderRadius:12, border:'1px solid #E8A855', background:'#FFF7E6',
          color:'#A6750C', fontSize:FS(14), fontWeight:700, cursor:'pointer', fontFamily:'Noto Sans TC',
        }}>問題回報 / 賺取獎勵點數</button>

        <button onClick={onLogout} className="press" style={{
          marginTop:10, width:'100%', padding:'14px', borderRadius:12, border:'none', background:'#FBE5E8',
          color:'#D7263D', fontSize:FS(14), fontWeight:700, cursor:'pointer', fontFamily:'Noto Sans TC', marginBottom:20,
        }}>登出</button>
      </div>

      {toast && <Toast msg={toast} dark={dark} />}
    </div>
  );
}