// allapps.jsx — All-apps grid, Admin console, and secondary portal pages.
function AppTile({ app, pinned, onPin, onOpen }) {
  const { tt, t } = useLang();
  return (
    <button className="app-tile" onClick={onOpen}>
      <span className="ic" style={{ background:app.color }}><i className={'bi ' + app.icon}></i></span>
      <div style={{ minWidth:0, flex:1 }}>
        <div className="at-name">{tt(app.name)}</div>
        <div className="at-desc">{tt(app.desc)}</div>
        {!app.module && <div className="subtle" style={{ fontSize:'var(--fs-sm)', marginTop:4 }}><i className="bi bi-lock" style={{ fontSize:10 }}></i> {t('apps.noModule')}</div>}
      </div>
      <span className={'pin' + (pinned ? ' pinned' : '')} title={pinned ? t('apps.unpin') : t('apps.pin')}
        onClick={e => { e.stopPropagation(); onPin(); }}>
        <i className={'bi ' + (pinned ? 'bi-pin-angle-fill' : 'bi-pin-angle')}></i>
      </span>
    </button>
  );
}

function AllApps() {
  const p = usePortal();
  const { t, tt } = useLang();
  const [q, setQ] = React.useState('');
  const [grp, setGrp] = React.useState('all');
  const groups = APP_GROUPS.filter(g => g.id !== 'admin' || p.role === 'admin');
  const list = p.apps.filter(a =>
    (grp === 'all' || a.group === grp) &&
    (!q || (tt(a.name) + tt(a.desc)).toLowerCase().includes(q.toLowerCase())));
  const byGroup = groups.map(g => ({ g, apps:list.filter(a => a.group === g.id) })).filter(x => x.apps.length);

  return (
    <div className="page pagefade">
      <div className="page-head"><div><h1>{t('apps.title')}</h1><div className="sub">{t('apps.sub')}</div></div></div>
      <div className="toolbar">
        <div className="topsearch" style={{ width:260, background:'var(--bg)', border:'1px solid var(--border-strong)' }}>
          <i className="bi bi-search"></i>
          <input value={q} onChange={e => setQ(e.target.value)} placeholder={t('c.search')} style={{ border:'none', outline:'none', background:'transparent', flex:1 }} />
        </div>
        <div className="seg">
          <button className={grp === 'all' ? 'is-active' : ''} onClick={() => setGrp('all')}>{t('c.all')}</button>
          {groups.map(g => <button key={g.id} className={grp === g.id ? 'is-active' : ''} onClick={() => setGrp(g.id)}>{tt(g.name)}</button>)}
        </div>
      </div>

      {byGroup.map(({ g, apps }) => (
        <div key={g.id} style={{ marginBottom:22 }}>
          <div className="flex items-center g8" style={{ marginBottom:10 }}>
            <h3 style={{ margin:0, fontSize:'var(--fs-lg)' }}>{tt(g.name)}</h3><span className="badge badge-neutral">{apps.length}</span>
          </div>
          <div className="app-grid">
            {apps.map(a => (
              <AppTile key={a.id} app={a} pinned={p.pinned.includes(a.id)}
                onPin={() => p.togglePin(a.id)} onOpen={() => p.openApp(a)} />
            ))}
          </div>
        </div>
      ))}
      {byGroup.length === 0 && <EmptyState text={t('c.empty')} />}
    </div>
  );
}

function AdminConsole() {
  const p = usePortal();
  const { t, tt, lang } = useLang();
  const toast = useToast();
  const [tab, setTab] = React.useState('apps');
  const log = [
    { id:1, who:'Phạm Quốc Bảo', act:lang === 'vi' ? 'Ẩn ứng dụng “Kho”' : 'Hid app “Inventory”', time:'2026-06-05 09:12', type:'config' },
    { id:2, who:'Lê Thu Hà', act:lang === 'vi' ? 'Duyệt báo giá BG-2026-041' : 'Approved quote BG-2026-041', time:'2026-06-04 16:40', type:'approve' },
    { id:3, who:'Trần Minh Quân', act:lang === 'vi' ? 'Gửi email tới Kizuna JV' : 'Sent email to Kizuna JV', time:'2026-06-04 10:22', type:'mail' },
    { id:4, who:'Phạm Quốc Bảo', act:lang === 'vi' ? 'Thêm người dùng mới' : 'Added new user', time:'2026-06-03 14:05', type:'user' },
    { id:5, who:'System', act:lang === 'vi' ? 'Sao lưu dữ liệu tự động' : 'Automated data backup', time:'2026-06-03 02:00', type:'config' },
  ];
  return (
    <div className="page pagefade">
      <div className="page-head"><div><h1>{t('admin.title')}</h1><div className="sub">{lang === 'vi' ? 'Cấu hình hiển thị ứng dụng và theo dõi hoạt động.' : 'Configure app visibility and monitor activity.'}</div></div></div>
      <Tabs active={tab} onChange={setTab} tabs={[
        { id:'apps', icon:'bi-grid-3x3-gap', label:t('admin.apps') },
        { id:'log', icon:'bi-clipboard-data', label:t('admin.log') },
      ]} />

      {tab === 'apps' && (
        <div className="card" style={{ marginTop:14 }}>
          <div className="card-head"><h3>{t('admin.apps')}</h3><span className="subtle" style={{ fontSize:'var(--fs-sm)' }}><i className="bi bi-info-circle"></i> {t('admin.hint')}</span></div>
          <div style={{ overflow:'auto' }}>
            <table className="tbl">
              <thead><tr><th>{lang === 'vi' ? 'Ứng dụng' : 'Application'}</th><th>{lang === 'vi' ? 'Nhóm' : 'Group'}</th><th>{lang === 'vi' ? 'Quyền' : 'Access'}</th><th style={{ textAlign:'right' }}>{t('admin.showPortal')}</th></tr></thead>
              <tbody>
                {APPS.map(a => {
                  const hidden = p.hidden.includes(a.id);
                  const grp = APP_GROUPS.find(g => g.id === a.group);
                  return (
                    <tr key={a.id} style={{ cursor:'default' }}>
                      <td><span className="flex g8 items-center"><span className="ic" style={{ width:24, height:24, borderRadius:6, background:a.color, color:'#fff', display:'inline-flex', alignItems:'center', justifyContent:'center', fontSize:12 }}><i className={'bi ' + a.icon}></i></span><span style={{ fontWeight:500 }}>{tt(a.name)}</span>{a.module && <span className="badge badge-accent">module</span>}</span></td>
                      <td className="muted">{tt(grp.name)}</td>
                      <td>{a.adminOnly ? <span className="badge badge-info">Admin</span> : <span className="badge badge-neutral">{lang === 'vi' ? 'Mọi người' : 'Everyone'}</span>}</td>
                      <td style={{ textAlign:'right' }}>
                        <button className={'switch' + (hidden ? '' : ' on')} onClick={() => { p.toggleHidden(a.id); toast(hidden ? (lang==='vi'?'Đã hiển thị '+tt(a.name):'Shown '+tt(a.name)) : (lang==='vi'?'Đã ẩn '+tt(a.name):'Hidden '+tt(a.name)), hidden ? 'success' : 'info'); }}
                          aria-pressed={!hidden} style={{ border:'none', width:38, height:22, borderRadius:999, background:hidden ? 'var(--gray-300)' : 'var(--primary)', position:'relative', transition:'background .15s', cursor:'pointer' }}>
                          <span style={{ position:'absolute', top:2, left:hidden ? 2 : 18, width:18, height:18, borderRadius:'50%', background:'#fff', transition:'left .15s', boxShadow:'var(--sh-xs)' }}></span>
                        </button>
                      </td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          </div>
        </div>
      )}

      {tab === 'log' && (
        <div className="card" style={{ marginTop:14 }}>
          <div style={{ overflow:'auto' }}>
            <table className="tbl">
              <thead><tr><th>{lang === 'vi' ? 'Người dùng' : 'User'}</th><th>{lang === 'vi' ? 'Hành động' : 'Action'}</th><th>{lang === 'vi' ? 'Loại' : 'Type'}</th><th>{lang === 'vi' ? 'Thời gian' : 'Timestamp'}</th></tr></thead>
              <tbody>
                {log.map(l => (
                  <tr key={l.id} style={{ cursor:'default' }}>
                    <td><span className="flex g8 items-center"><Avatar name={l.who} size={22} />{l.who}</span></td>
                    <td style={{ fontWeight:500 }}>{l.act}</td>
                    <td><span className="badge badge-neutral">{l.type}</span></td>
                    <td className="muted mono" style={{ fontSize:'var(--fs-base)' }}>{l.time}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      )}
    </div>
  );
}

/* ---- simple workspace pages ---- */
function SimpleListPage({ title, sub, children }) {
  return <div className="page pagefade"><div className="page-head"><div><h1>{title}</h1>{sub && <div className="sub">{sub}</div>}</div></div>{children}</div>;
}
function TasksPage() {
  const { t, tt, lang } = useLang();
  const toast = useToast();
  const [tasks, setTasks] = React.useState(TASKS);
  return (
    <SimpleListPage title={t('nav.tasks')} sub={lang === 'vi' ? 'Mọi việc được giao cho bạn.' : 'Everything assigned to you.'}>
      <div className="card"><div className="card-body">
        {tasks.map(tk => (
          <div key={tk.id} className={'cklist' + (tk.done ? ' is-done' : '')}>
            <button className={'ckbox' + (tk.done ? ' done' : '')} onClick={() => { setTasks(s => s.map(x => x.id === tk.id ? { ...x, done:!x.done } : x)); }}>{tk.done && <i className="bi bi-check2"></i>}</button>
            <span className="tk-title grow" style={{ fontWeight:500 }}>{tt(tk.title)}</span>
            <span className={'badge ' + (tk.prio === 'high' ? 'badge-error' : tk.prio === 'med' ? 'badge-warning' : 'badge-neutral')}>{tk.due}</span>
          </div>
        ))}
      </div></div>
    </SimpleListPage>
  );
}
function ApprovalsPage() {
  const { t, tt, lang } = useLang();
  const toast = useToast();
  const [apprs, setApprs] = React.useState(APPROVALS);
  return (
    <SimpleListPage title={t('nav.approvals')} sub={lang === 'vi' ? 'Các yêu cầu chờ bạn xử lý.' : 'Requests awaiting your decision.'}>
      <div className="card"><div className="card-body">
        {apprs.length === 0 && <EmptyState icon="bi-check2-all" text={lang === 'vi' ? 'Đã xử lý hết' : 'All clear'} />}
        {apprs.map(a => (
          <div key={a.id} className="appr-row">
            <div style={{ flex:1 }}><div className="flex g8 items-center"><span style={{ fontWeight:600 }}>{tt(a.kind)}</span>{a.amount && <span className="badge badge-neutral mono">{a.amount}</span>}</div><div className="subtle" style={{ fontSize:'var(--fs-sm)' }}>{a.who} · {tt(a.detail)}</div></div>
            <div className="appr-actions">
              <button className="btn btn-sm" onClick={() => { setApprs(s => s.filter(x => x.id !== a.id)); toast(lang === 'vi' ? 'Đã từ chối' : 'Rejected', 'error'); }}>{t('c.reject')}</button>
              <button className="btn btn-sm btn-primary" onClick={() => { setApprs(s => s.filter(x => x.id !== a.id)); toast(lang === 'vi' ? 'Đã duyệt' : 'Approved', 'success'); }}>{t('c.approve')}</button>
            </div>
          </div>
        ))}
      </div></div>
    </SimpleListPage>
  );
}
function NotifsPage() {
  const { t, tt, lang } = useLang();
  return (
    <SimpleListPage title={t('nav.notifs')}>
      <div className="card"><div className="card-body">
        {NOTIFS.map(n => (
          <div key={n.id} className="list-row"><i className={'bi ' + n.icon} style={{ color:'var(--primary)', fontSize:15 }}></i><span className="grow" style={{ fontWeight:n.unread ? 600 : 400 }}>{tt(n.text)}</span><span className="subtle mono" style={{ fontSize:'var(--fs-sm)' }}>{n.time}</span></div>
        ))}
      </div></div>
    </SimpleListPage>
  );
}
function SettingsPage() {
  const p = usePortal();
  const { t, lang, setLang } = useLang();
  return (
    <SimpleListPage title={t('nav.settings')} sub={lang === 'vi' ? 'Giao diện & tài khoản.' : 'Appearance & account.'}>
      <div className="card" style={{ maxWidth:560 }}>
        <div className="card-head"><h3>{lang === 'vi' ? 'Giao diện' : 'Appearance'}</h3></div>
        <div className="card-body col g16">
          <div className="flex items-center justify-between"><span style={{ fontWeight:500 }}>{lang === 'vi' ? 'Mật độ' : 'Density'}</span>
            <Segmented value={p.density} onChange={p.setDensity} options={[{ value:'compact', label:lang==='vi'?'Gọn':'Compact' }, { value:'comfortable', label:lang==='vi'?'Vừa':'Cozy' }, { value:'spacious', label:lang==='vi'?'Rộng':'Spacious' }]} /></div>
          <div className="flex items-center justify-between"><span style={{ fontWeight:500 }}>{lang === 'vi' ? 'Cỡ chữ' : 'Font size'}</span>
            <Segmented value={p.fontsize} onChange={p.setFontsize} options={[{ value:'sm', label:'S' }, { value:'md', label:'M' }, { value:'lg', label:'L' }]} /></div>
          <div className="flex items-center justify-between"><span style={{ fontWeight:500 }}>{lang === 'vi' ? 'Ngôn ngữ' : 'Language'}</span>
            <Segmented value={lang} onChange={setLang} options={[{ value:'vi', label:'Tiếng Việt' }, { value:'en', label:'English' }]} /></div>
        </div>
      </div>
    </SimpleListPage>
  );
}

Object.assign(window, { AllApps, AdminConsole, TasksPage, ApprovalsPage, NotifsPage, SettingsPage });