// ===========================================================
// 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;
  // KPI snapshot per role (reuse what dashboards show)
  // Số liệu hiệu suất cá nhân — backend cung cấp; để 0 chờ tích hợp
  const myStats = [
    {l:'Khách đang phụ trách', v:'0'},
    {l:'Đơn ghi nhận tháng', v:'0'},
    {l:'Doanh số tháng', v:fmt.vndFull(0)},
    {l:'Follow-up đang mở', v:'0'},
  ];

  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 className="acct-hero" style={{padding:'0 var(--space-6) var(--space-5)',display:'flex',gap:'var(--space-4)',alignItems:'flex-end',marginTop:-36}}>
              <div style={{border:'4px solid var(--bg-page)',borderRadius:'50%',position:'relative'}}>
                <Avatar 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)'}}>{role.person}</h2>
                  <Tag variant="info">{role.label}</Tag>
                </div>
                <div className="text-sm fg-muted mt-1">{role.team}</div>
              </div>
              <button className="btn btn-secondary" onClick={() => window.tvsDemo('Đổi ảnh đại diện')}><Icon name="user" size={14}/>Đổi ảnh</button>
              <button className="btn btn-cta" onClick={() => window.tvsToast('Đã lưu thông tin hồ sơ')}><Icon name="check" size={14}/>Lưu thay đổi</button>
            </div>
          </Card>

          {/* Performance snapshot */}
          <div className="kpi-grid">
            {myStats.map(s => (
              <KPI key={s.l} label={s.l} value={s.v}/>
            ))}
          </div>

          <div className="grid grid-2">
            <Card pad={false}>
              <CardHeader title="Thông tin cá nhân"/>
              <div className="card-pad">
                {[
                  ['Họ và tên', role.person],
                  // Email thật của tài khoản demo — trùng với màn đăng nhập
                  ['Email', role.email || ({telesale:'linh.nm@tvs.vn', instore:'bao.tq@tvs.vn', b2b:'anh.lp@tvs.vn', director:'hung.pd@tvs.vn', manager:'admin@tvs.vn'})[role.id] || '—'],
                  ['Số điện thoại', role.phone || '0903 •••  ••• (ẩn)'],
                  ['Phòng ban', role.team],
                  ['Vai trò', role.label],
                  ['Mã nhân viên', 'NV-' + (role.id === 'telesale' ? '0241' : role.id === 'instore' ? '0118' : role.id === 'b2b' ? '0077' : role.id === 'director' ? '0002' : '0001')],
                ].map(([l,v]) => (
                  <div key={l} className="row" style={{padding:'10px 0',borderBottom:'1px solid var(--border-1)'}}>
                    <span className="text-sm fg-muted" style={{flex:'0 0 140px'}}>{l}</span>
                    <span className="text-sm strong fg-1" style={{flex:1}}>{v}</span>
                    <button className="btn btn-icon btn-sm btn-ghost" onClick={() => window.tvsDemo('Chỉnh sửa ' + l.toLowerCase())}><Icon name="note" size={13}/></button>
                  </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>
                {[
                  ['Xem & quản lý khách hàng', true],
                  ['Ghi nhận đơn hàng', true],
                  [role.id === 'telesale' ? 'Console gọi telesale' : role.id === 'instore' ? 'Tra cứu tồn kho' : role.id === 'b2b' ? 'Quản lý đối tác B2B' : role.id === 'director' ? 'Chăm sóc khách hàng & đối tác' : 'Toàn quyền hệ thống', true],
                  ['Xem báo cáo doanh số', role.id === 'manager'],
                  ['Quản lý người dùng & phân quyền', role.id === 'manager'],
                  ['Sửa bảng giá B2B', role.id === 'manager' || role.id === 'b2b'],
                ].map(([l, ok]) => (
                  <div key={l} className="row" style={{padding:'8px 0'}}>
                    <Icon name={ok ? 'check' : 'close'} size={15} style={{color: ok ? 'var(--status-success)' : 'var(--fg-muted)'}}/>
                    <span className="text-sm fg-2" style={{flex:1,marginLeft:8}}>{l}</span>
                    {ok ? <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">
            <PasswordCard/>

            <Card pad={false}>
              <CardHeader title="Bảo mật 2 lớp (2FA)"/>
              <div className="card-pad">
                <div className="row">
                  <div style={{flex:1}}>
                    <div className="strong fg-1">Xác thực qua SMS / App</div>
                    <div className="text-xs fg-muted mt-1">Tăng bảo mật khi đăng nhập từ thiết bị mới</div>
                  </div>
                  <button className="btn btn-secondary btn-sm" onClick={() => window.tvsDemo('Bật 2FA')}>Bật</button>
                </div>
              </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.id === 'instore' || role.id === 'manager'],
                  ['Báo cáo định kỳ qua email', true],
                  ['Thông báo qua Zalo', false],
                ].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>
            </Card>

            <Card pad={false}>
              <CardHeader title="Ngôn ngữ & Hiển thị"/>
              <div className="card-pad col gap-3">
                <div className="row">
                  <span className="text-sm fg-2" style={{flex:1}}>Ngôn ngữ</span>
                  <select className="select" style={{width:160}}>
                    <option>Tiếng Việt</option>
                    <option>English</option>
                  </select>
                </div>
                <div className="row">
                  <span className="text-sm fg-2" style={{flex:1}}>Múi giờ</span>
                  <select className="select" style={{width:200}}>
                    <option>(GMT+7) Hồ Chí Minh</option>
                  </select>
                </div>
              </div>
            </Card>

            <Card pad={false}>
              <CardHeader title="Phiên đăng nhập" sub="Thiết bị đang truy cập tài khoản"/>
              <div className="card-pad">
                {[
                  {dev:'Trình duyệt hiện tại', loc:'Phiên đang đăng nhập', now:true},
                ].map((s, i) => (
                  <div key={i} className="row" style={{padding:'10px 0',borderBottom: i===0 ? '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.dev}</div>
                      <div className="text-xs fg-muted">{s.loc}</div>
                    </div>
                    {s.now ? <Tag variant="success" dot>Phiên này</Tag> : <button className="btn btn-ghost btn-sm" onClick={() => window.tvsToast('Đã đăng xuất thiết bị')}>Đăng xuất</button>}
                  </div>
                ))}
              </div>
            </Card>
          </div>
        </div>
      )}
    </>
  );
}

// Đổi mật khẩu — có kiểm tra đủ 8 ký tự và khớp xác nhận trước khi báo thành công
function PasswordCard() {
  const [cur, setCur] = useState('');
  const [next, setNext] = useState('');
  const [confirm, setConfirm] = useState('');
  const [err, setErr] = useState('');
  const submit = () => {
    if (!cur) { setErr('Nhập mật khẩu hiện tại'); return; }
    if (next.length < 8) { setErr('Mật khẩu mới cần tối thiểu 8 ký tự'); return; }
    if (next !== confirm) { setErr('Xác nhận mật khẩu không khớp'); return; }
    setErr('');
    setCur(''); setNext(''); setConfirm('');
    window.tvsToast('Đã cập nhật mật khẩu');
  };
  return (
    <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" placeholder="••••••••" value={cur} onChange={(e)=>setCur(e.target.value)}/>
        </div>
        <div>
          <div className="field-label">Mật khẩu mới</div>
          <input className="input" type="password" placeholder="Tối thiểu 8 ký tự" value={next} onChange={(e)=>setNext(e.target.value)}/>
        </div>
        <div>
          <div className="field-label">Xác nhận mật khẩu mới</div>
          <input className="input" type="password" placeholder="Nhập lại mật khẩu mới" value={confirm} onChange={(e)=>setConfirm(e.target.value)}
            style={confirm && next !== confirm ? {borderColor:'var(--status-sale)'} : undefined}/>
        </div>
        {err && <div className="text-xs" style={{color:'var(--status-sale)',fontWeight:700}}>⚠ {err}</div>}
        <button className="btn btn-cta" style={{alignSelf:'flex-start'}} onClick={submit}>
          <Icon name="check" size={14}/>Cập nhật mật khẩu
        </button>
      </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;