// dashboard.jsx — portal home. KPIs, news, approvals, tasks, agenda, pinned, docs, module widgets.
function Dashboard() {
  const p = usePortal();
  const { t, tt, lang } = useLang();
  const toast = useToast();
  const [tasks, setTasks] = React.useState(TASKS);
  const [apprs, setApprs] = React.useState(APPROVALS);
  const me = p.me;

  const openTasks = tasks.filter(x => !x.done).length;
  const docIcon = { PDF:'bi-filetype-pdf', XLSX:'bi-filetype-xlsx', DOCX:'bi-filetype-docx', MP4:'bi-filetype-mp4' };
  const feat = ANNOUNCEMENTS.find(a => a.featured);
  const rest = ANNOUNCEMENTS.filter(a => !a.featured);

  const decide = (id, ok) => {
    setApprs(a => a.filter(x => x.id !== id));
    toast(ok ? (lang === 'vi' ? 'Đã duyệt' : 'Approved') : (lang === 'vi' ? 'Đã từ chối' : 'Rejected'), ok ? 'success' : 'error');
  };

  return (
    <div className="page pagefade">
      <div className="page-head">
        <div>
          <h1>{t('dash.hello')}, {me.name.split(' ').slice(-1)[0]} 👋</h1>
          <div className="sub">{lang === 'vi' ? 'Đây là tổng quan hoạt động của bạn hôm nay.' : "Here's your activity overview for today."}</div>
        </div>
        <div className="flex g8">
          <button className="btn" onClick={() => p.navigate({ name:'allapps' })}><i className="bi bi-grid-3x3-gap"></i>{t('nav.allApps')}</button>
          <button className="btn btn-primary" onClick={() => p.quick('mail')}><i className="bi bi-pencil-square"></i>{t('mail.compose')}</button>
        </div>
      </div>

      {/* KPI strip */}
      <div className="kpi-strip">
        <Kpi label={t('kpi.tasks')} value={openTasks} icon="bi-check2-square" delta="2 hôm nay" deltaDir="up" />
        <div style={{ cursor:'pointer' }} onClick={() => p.navigate({ name:'module', module:'contracts', sub:'overview' })}>
          <Kpi label={lang === 'vi' ? 'HĐ đến hạn' : 'Contracts due'} value={p.contracts.filter(c => contractStatus(c) === 'expiring').length} icon="bi-alarm" />
        </div>
        <Kpi label={t('kpi.customers')} value={CUSTOMERS.length} icon="bi-building" delta="3 tháng này" deltaDir="up" />
        <Kpi label={t('kpi.contacts')} value={CONTACTS.length} icon="bi-person-vcard" delta="5 tuần này" deltaDir="up" />
      </div>

      {/* news + agenda */}
      <div className="dash-grid" style={{ marginBottom:14 }}>
        <div className="card span2">
          <div className="card-head"><h3>{t('dash.news')}</h3><button className="btn btn-ghost btn-sm">{t('c.viewAll')}</button></div>
          <div className="card-body">
            <div className="news-feat" style={{ marginBottom:8 }}>
              <PlaceholderImg label="hero-banner.jpg" />
              <div className="flex g8 items-center"><span className="badge badge-info">{tt(feat.tag)}</span><span className="subtle mono" style={{ fontSize:'var(--fs-sm)' }}>{feat.date}</span></div>
              <div style={{ fontSize:'var(--fs-xl)', fontWeight:600, letterSpacing:'-.01em' }}>{tt(feat.title)}</div>
              <div className="muted">{tt(feat.excerpt)}</div>
            </div>
            <div className="hr" style={{ margin:'4px 0 2px' }}></div>
            {rest.map(a => (
              <div key={a.id} className="news-row">
                <PlaceholderImg />
                <div style={{ flex:1 }}>
                  <div style={{ fontWeight:500 }}>{tt(a.title)}</div>
                  <div className="subtle flex g8" style={{ fontSize:'var(--fs-sm)' }}><span className="badge badge-neutral">{tt(a.tag)}</span><span className="mono">{a.date}</span> · {a.author}</div>
                </div>
              </div>
            ))}
          </div>
        </div>

        <div className="card">
          <div className="card-head"><h3>{t('dash.agenda')}</h3><i className="bi bi-calendar3 muted"></i></div>
          <div className="card-body" style={{ paddingTop:6 }}>
            {AGENDA.map(a => (
              <div key={a.id} className="agenda-item">
                <span className="tm">{a.time}</span>
                <span className="bar" style={{ background:a.color }}></span>
                <span style={{ fontWeight:500 }}>{tt(a.title)}</span>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* approvals + tasks + pinned */}
      <div className="dash-grid" style={{ marginBottom:14 }}>
        <div className="card">
          <div className="card-head"><h3>{t('dash.approvals')}</h3><span className="badge badge-warning">{apprs.length}</span></div>
          <div className="card-body" style={{ paddingTop:4 }}>
            {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, minWidth:0 }}>
                  <div className="flex g8 items-center"><span style={{ fontWeight:500 }}>{tt(a.kind)}</span>{a.amount && <span className="badge badge-neutral mono">{a.amount}</span>}</div>
                  <div className="subtle truncate" style={{ fontSize:'var(--fs-sm)' }}>{a.who} · {tt(a.detail)}</div>
                </div>
                <div className="appr-actions">
                  <button className="btn btn-sm" onClick={() => decide(a.id, false)}><i className="bi bi-x"></i></button>
                  <button className="btn btn-sm btn-primary" onClick={() => decide(a.id, true)}><i className="bi bi-check2"></i>{t('c.approve')}</button>
                </div>
              </div>
            ))}
          </div>
        </div>

        <div className="card">
          <div className="card-head"><h3>{t('dash.tasks')}</h3><button className="btn btn-ghost btn-sm" onClick={() => toast(lang==='vi'?'Mở danh sách công việc (demo)':'Open tasks (demo)','info')}>{t('c.viewAll')}</button></div>
          <div className="card-body" style={{ paddingTop:4 }}>
            {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>

        <div className="card">
          <div className="card-head"><h3>{t('dash.pinned')}</h3><button className="btn btn-ghost btn-sm" onClick={() => p.navigate({ name:'allapps' })}><i className="bi bi-plus-lg"></i></button></div>
          <div className="card-body" style={{ paddingTop:10 }}>
            <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:8 }}>
              {p.apps.filter(a => p.pinned.includes(a.id)).slice(0, 6).map(a => (
                <button key={a.id} className="app-tile" style={{ padding:10 }} onClick={() => p.openApp(a)}>
                  <span className="ic" style={{ background:a.color }}><i className={'bi ' + a.icon}></i></span>
                  <div style={{ minWidth:0 }}><div className="at-name truncate">{tt(a.name)}</div></div>
                </button>
              ))}
            </div>
          </div>
        </div>
      </div>

      {/* module widgets */}
      <div className="dash-grid" style={{ marginBottom:14 }}>
        <EmailWidget /><CustomerWidget /><ContactWidget />
      </div>
      <div className="dash-grid" style={{ marginBottom:14 }}>
        <ContractWidget /><FinanceWidget />
      </div>

      {/* recent docs */}
      <div className="card">
        <div className="card-head"><h3>{t('dash.docs')}</h3><i className="bi bi-folder2-open muted"></i></div>
        <div style={{ overflow:'auto' }}>
          <table className="tbl">
            <thead><tr><th>{lang === 'vi' ? 'Tên tài liệu' : 'Document'}</th><th>{lang === 'vi' ? 'Loại' : 'Type'}</th><th>{lang === 'vi' ? 'Người sửa' : 'Modified by'}</th><th>{lang === 'vi' ? 'Thời gian' : 'When'}</th></tr></thead>
            <tbody>
              {DOCS.map(d => (
                <tr key={d.id} onClick={() => toast(lang === 'vi' ? 'Mở: ' + d.name : 'Open: ' + d.name, 'info')}>
                  <td><span className="flex g8 items-center"><i className={'bi ' + (docIcon[d.kind] || 'bi-file-earmark')} style={{ color:'var(--primary)' }}></i><span style={{ fontWeight:500 }}>{d.name}</span></span></td>
                  <td><span className="badge badge-neutral">{d.kind}</span></td>
                  <td>{d.who}</td><td className="muted">{d.when}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
}
Object.assign(window, { Dashboard });