// ===========================================================
// Account — Hồ sơ cá nhân + Cài đặt tài khoản
// (mở từ menu avatar góc phải; mode = 'profile' | 'account')
// ===========================================================

function AccountScreen({ role, mode = 'profile', onChangeMode }) {
  const D = window.TVS_DATA;
  const live = window.TVS_API && window.TVS_API.isAuthed();
  const fileRef = useRef(null);
  const [name, setName] = useState(role.person || '');
  const [phone, setPhone] = useState(role.phone || '');
  const [avatarUrl, setAvatarUrl] = useState(role.avatarUrl || null);
  const [savingProfile, setSavingProfile] = useState(false);
  // đổi mật khẩu
  const [pw, setPw] = useState({ cur: '', next: '', confirm: '' });
  const [pwMsg, setPwMsg] = useState(null);

  const pickAvatar = (e) => {
    const f = e.target.files && e.target.files[0];
    if (!f) return;
    if (f.size > 500 * 1024) { window.tvsToast && window.tvsToast('Ảnh tối đa 500KB'); return; }
    const reader = new FileReader();
    reader.onload = () => setAvatarUrl(reader.result);
    reader.readAsDataURL(f);
  };
  const saveProfile = async () => {
    if (!live) return;
    setSavingProfile(true);
    try {
      const body = { name, phone };
      if (avatarUrl && avatarUrl.startsWith('data:image/')) body.avatarDataUrl = avatarUrl;
      const r = await window.TVS_API.api('/api/me', { method: 'PATCH', body: JSON.stringify(body) });
      if (r.user && D.roles[0]) Object.assign(D.roles[0], r.user);
      await window.TVS_API.refresh();
      window.tvsRefreshUI && window.tvsRefreshUI();
      window.tvsToast && window.tvsToast('Đã lưu hồ sơ');
    } catch (e) { window.tvsToast && window.tvsToast('Lỗi: ' + e.message); }
    setSavingProfile(false);
  };
  const changePassword = async () => {
    setPwMsg(null);
    if (pw.next.length < 6) { setPwMsg({ ok: false, t: 'Mật khẩu mới tối thiểu 6 ký tự' }); return; }
    if (pw.next !== pw.confirm) { setPwMsg({ ok: false, t: 'Xác nhận mật khẩu không khớp' }); return; }
    try {
      await window.TVS_API.api('/api/me/password', { method: 'POST', body: JSON.stringify({ currentPassword: pw.cur, newPassword: pw.next }) });
      setPwMsg({ ok: true, t: 'Đã đổi mật khẩu' }); setPw({ cur: '', next: '', confirm: '' });
    } catch (e) { setPwMsg({ ok: false, t: e.message }); }
  };

  const notifPrefKey = 'tvs_notif_' + role.id;
  const empCode = 'NV-' + (role.id || '').replace(/[^0-9a-z]/gi, '').slice(0, 6).toUpperCase();

  return (
    <>
      <div className="page-header">
        <div>
          <h1>{mode === 'profile' ? 'Hồ sơ cá nhân' : 'Cài đặt tài khoản'}</h1>
          <div className="sub">{mode === 'profile' ? 'Thông tin cá nhân, vai trò và hiệu suất của bạn' : 'Bảo mật, mật khẩu, thông báo và phiên đăng nhập'}</div>
        </div>
        <Segmented value={mode} options={[
          {value:'profile', label:'Hồ sơ'},
          {value:'account', label:'Cài đặt'},
        ]} onChange={onChangeMode}/>
      </div>

      {mode === 'profile' ? (
        <>
          {/* Profile header card */}
          <Card className="mb-4" style={{padding:0,overflow:'hidden'}}>
            <div style={{height:96,background:'linear-gradient(135deg, var(--vs-dark-blue) 0%, #01337f 60%, #013189 100%)',position:'relative'}}>
              <div style={{position:'absolute',right:-30,top:-30,width:180,height:180,background:'radial-gradient(circle,rgba(65,182,230,0.30) 0%,transparent 60%)',borderRadius:'50%'}}/>
            </div>
            <div style={{padding:'0 var(--space-6) var(--space-5)',display:'flex',gap:'var(--space-4)',alignItems:'flex-end',marginTop:-36,position:'relative',zIndex:1}}>
              <div style={{border:'4px solid var(--bg-page)',borderRadius:'50%',position:'relative'}}>
                {avatarUrl
                  ? <img src={avatarUrl} alt="avatar" style={{width:72,height:72,borderRadius:'50%',objectFit:'cover',display:'block'}}/>
                  : <Avatar name={name || role.person} size="xl"/>}
              </div>
              <div style={{flex:1,paddingBottom:6}}>
                <div className="row gap-2">
                  <h2 style={{margin:0,fontFamily:'var(--font-display)',fontWeight:700,fontSize:24,color:'var(--fg-1)'}}>{name || role.person}</h2>
                  <Tag variant="info">{role.label}</Tag>
                </div>
                <div className="text-sm fg-muted mt-1">{role.team} · {role.email}</div>
              </div>
              <input ref={fileRef} type="file" accept="image/*" style={{display:'none'}} onChange={pickAvatar}/>
              <button className="btn btn-secondary" onClick={() => fileRef.current && fileRef.current.click()}><Icon name="user" size={14}/>Đổi ảnh</button>
              <button className="btn btn-cta" onClick={saveProfile} disabled={savingProfile}><Icon name="check" size={14}/>{savingProfile?'Đang lưu…':'Lưu thay đổi'}</button>
            </div>
          </Card>

          <div className="grid grid-2">
            <Card pad={false}>
              <CardHeader title="Thông tin cá nhân" sub="Chỉnh sửa rồi bấm Lưu thay đổi ở trên"/>
              <div className="card-pad col gap-3">
                <div><div className="field-label">Họ và tên</div><input className="input" value={name} onChange={e=>setName(e.target.value)}/></div>
                <div><div className="field-label">Email (đăng nhập)</div><input className="input" value={role.email} disabled style={{opacity:0.6}}/></div>
                <div><div className="field-label">Số điện thoại</div><input className="input tnum" value={phone} onChange={e=>setPhone(e.target.value)} placeholder="0903..."/></div>
                <div className="row" style={{gap:16}}>
                  <div style={{flex:1}}><div className="field-label">Vai trò</div><div className="text-sm strong fg-1">{role.label}</div></div>
                  <div style={{flex:1}}><div className="field-label">Mã nhân viên</div><div className="text-sm strong fg-1 tnum">{empCode}</div></div>
                </div>
              </div>
            </Card>

            <Card pad={false}>
              <CardHeader title="Quyền truy cập" sub="Theo vai trò của bạn"/>
              <div className="card-pad">
                <div className="banner mb-3">
                  <Icon name="crown" size={16}/>
                  <div className="text-sm" style={{flex:1}}>Bạn đang đăng nhập với vai trò <b>{role.label}</b>. Liên hệ quản trị để thay đổi quyền.</div>
                </div>
                {(role.permMatrix || []).map(({key, label, granted}) => (
                  <div key={key} className="row" style={{padding:'8px 0'}}>
                    <Icon name={granted ? 'check' : 'close'} size={15} style={{color: granted ? 'var(--status-success)' : 'var(--fg-muted)'}}/>
                    <span className="text-sm fg-2" style={{flex:1,marginLeft:8}}>{label}</span>
                    {granted ? <Tag variant="success">Được phép</Tag> : <Tag variant="outline">Không</Tag>}
                  </div>
                ))}
              </div>
            </Card>
          </div>
        </>
      ) : (
        <div className="grid grid-2" style={{alignItems:'flex-start'}}>
          {/* Left column */}
          <div className="col gap-4">
            <Card pad={false}>
              <CardHeader title="Đổi mật khẩu"/>
              <div className="card-pad col gap-3">
                <div>
                  <div className="field-label">Mật khẩu hiện tại</div>
                  <input className="input" type="password" value={pw.cur} onChange={e=>setPw(s=>({...s,cur:e.target.value}))} placeholder="••••••••"/>
                </div>
                <div>
                  <div className="field-label">Mật khẩu mới</div>
                  <input className="input" type="password" value={pw.next} onChange={e=>setPw(s=>({...s,next:e.target.value}))} placeholder="Tối thiểu 6 ký tự"/>
                </div>
                <div>
                  <div className="field-label">Xác nhận mật khẩu mới</div>
                  <input className="input" type="password" value={pw.confirm} onChange={e=>setPw(s=>({...s,confirm:e.target.value}))} placeholder="Nhập lại mật khẩu mới"/>
                </div>
                {pwMsg && <div className={'banner '+(pwMsg.ok?'success':'danger')} style={{padding:'8px 10px'}}><span className="text-sm">{pwMsg.t}</span></div>}
                <button className="btn btn-cta" style={{alignSelf:'flex-start'}} onClick={changePassword}>
                  <Icon name="check" size={14}/>Cập nhật mật khẩu
                </button>
              </div>
            </Card>
          </div>

          {/* Right column */}
          <div className="col gap-4">
            <Card pad={false}>
              <CardHeader title="Tuỳ chọn thông báo"/>
              <div className="card-pad">
                {[
                  ['Follow-up đến hạn', true],
                  ['Đơn hàng mới ghi nhận', true],
                  ['Cảnh báo hết hàng', role.role === 'admin'],
                  ['Cảnh báo qua email', true],
                ].map(([l, on]) => (
                  <div key={l} className="row" style={{padding:'10px 0',borderBottom:'1px solid var(--border-1)'}}>
                    <span className="text-sm fg-2" style={{flex:1}}>{l}</span>
                    <ToggleSwitch defaultOn={on}/>
                  </div>
                ))}
                <div className="text-xs fg-muted mt-2">Cảnh báo qua email cần Admin cấu hình SMTP tại Cài đặt → Tích hợp → Email.</div>
              </div>
            </Card>

            <SessionsCard live={live}/>
          </div>
        </div>
      )}
    </>
  );
}

// Phiên đăng nhập THẬT — mỗi lần login tạo 1 Session ở backend; đăng xuất 1 thiết bị = revoke session đó.
function SessionsCard({ live }) {
  const [sessions, setSessions] = useState(null);
  const load = () => { if (live) window.TVS_API.api('/api/me/sessions').then(r => setSessions(r.sessions || [])).catch(() => setSessions([])); };
  useEffect(() => { load(); }, [live]);
  const revoke = async (id) => {
    try { await window.TVS_API.api('/api/me/sessions/' + id, { method: 'DELETE' }); load(); window.tvsToast && window.tvsToast('Đã đăng xuất thiết bị'); }
    catch (e) { window.tvsToast && window.tvsToast('Lỗi: ' + e.message); }
  };
  return (
    <Card pad={false}>
      <CardHeader title="Phiên đăng nhập" sub="Thiết bị đang truy cập tài khoản (7 ngày gần nhất)"/>
      <div className="card-pad">
        {sessions === null && <div className="text-sm fg-muted">Đang tải…</div>}
        {sessions && sessions.length === 0 && <div className="text-sm fg-muted">Không có phiên nào đang hoạt động.</div>}
        {sessions && sessions.map((s, i) => (
          <div key={s.id} className="row" style={{padding:'10px 0',borderBottom: i < sessions.length-1 ? '1px solid var(--border-1)' : 'none'}}>
            <div style={{width:32,height:32,borderRadius:'50%',background:'var(--bg-soft)',color:'var(--vs-light-blue)',display:'flex',alignItems:'center',justifyContent:'center'}}>
              <Icon name="eye" size={14}/>
            </div>
            <div style={{flex:1,marginLeft:10}}>
              <div className="text-sm strong fg-1">{s.device}{s.ip ? ' · ' + s.ip : ''}</div>
              <div className="text-xs fg-muted">Hoạt động {fmt.rel(s.lastSeenAt)}</div>
            </div>
            {s.isCurrent ? <Tag variant="success" dot>Phiên này</Tag> : <button className="btn btn-ghost btn-sm" onClick={() => revoke(s.id)}>Đăng xuất</button>}
          </div>
        ))}
      </div>
    </Card>
  );
}

function ToggleSwitch({ defaultOn }) {
  const [on, setOn] = useState(!!defaultOn);
  return (
    <button onClick={() => setOn(o => !o)}
      style={{width:40,height:22,borderRadius:999,border:'none',cursor:'pointer',background: on ? 'var(--status-success)' : 'var(--bg-muted)',position:'relative',transition:'background var(--dur-fast)',padding:0}}>
      <span style={{position:'absolute',top:2,left: on ? 20 : 2,width:18,height:18,borderRadius:'50%',background:'#fff',boxShadow:'0 1px 2px rgba(0,0,0,0.2)',transition:'left var(--dur-fast)'}}/>
    </button>
  );
}

window.AccountScreen = AccountScreen;