/* ============================================================
   KODILA — Dashboard (intranet razdelilnik)
   ============================================================ */
function KpiCard({ k }) {
  return (
    <div className="kpi">
      <div className="kpi-top">
        <div className="kpi-ico" style={tintStyle(k.tint)} dangerouslySetInnerHTML={{ __html: I(k.icon, 17) }} />
        <span className="kpi-label">{k.label}</span>
      </div>
      <div className="kpi-val">{k.value}{k.cur && <span className="cur">{k.cur}</span>}</div>
      <div className={'kpi-delta ' + (k.up ? 'up' : 'down')}>
        <span dangerouslySetInnerHTML={{ __html: I(k.up ? 'trendup' : 'trenddown', 14) }} />
        {k.delta}
        <span className="muted" style={{ fontWeight: 500, marginLeft: 2 }}>vs. prej.</span>
      </div>
      <Sparkline data={k.spark} up={k.up} />
    </div>
  );
}

function Dashboard({ user, onOpen, apps }) {
  const toast = useToast();
  const hour = new Date().getHours();
  const greet = hour < 10 ? 'Dobro jutro' : hour < 18 ? 'Pozdravljeni' : 'Dober večer';
  const myApps = apps || APPS;

  return (
    <div className="page">
      <div className="page-head">
        <div className="grow">
          <div className="crumbs"><span>Intranet</span><span className="sep" dangerouslySetInnerHTML={{ __html: I('chevright', 13) }} /><span>Nadzorna plošča</span></div>
          <h1 className="h-page">{greet}, {user.fullName.split(' ')[0]}.</h1>
          <p className="muted" style={{ margin: '6px 0 0' }}>
            {new Date().toLocaleDateString('sl-SI', { weekday: 'long', day: 'numeric', month: 'long', year: 'numeric' })} · Markišavci, MS
          </p>
        </div>
        <button className="btn" onClick={() => toast('Hitri vnos — kmalu')}>
          <span dangerouslySetInnerHTML={{ __html: I('plus', 16) }} /> Hitri vnos
        </button>
        <button className="btn btn-primary" onClick={() => onOpen('dokumenti')}>
          <span dangerouslySetInnerHTML={{ __html: I('receipt', 16) }} /> Nov dokument
        </button>
      </div>

      {/* KPI */}
      {KPIS.length > 0 && (
        <div className="kpi-row">
          {KPIS.map((k, i) => <KpiCard k={k} key={i} />)}
        </div>
      )}

      <div className="dash-grid">
        {/* Aplikacije */}
        <div>
          <div className="spread" style={{ marginBottom: 14 }}>
            <h2 className="h-sec">Aplikacije</h2>
            {myApps.length > 0 && (
              <span className="count-pill muted">{myApps.filter(a => a.live).length} aktivnih · {myApps.filter(a => !a.live).length} v pripravi</span>
            )}
          </div>
          {myApps.length === 0 ? (
            <div className="card card-pad muted" style={{ textAlign: 'center', padding: '32px 16px' }}>
              Trenutno ni dodanih aplikacij. Module dodajamo sproti, ko so zgrajeni.
            </div>
          ) : (
            <div className="apps-grid">
              {myApps.map(app => (
                <button className={'app-tile' + (app.live ? '' : ' locked')} key={app.id}
                  onClick={() => app.live ? onOpen(app.route) : toast(app.name + ' — modul v pripravi', 'clock')}>
                  <div className="app-ico" style={tintStyle(app.tint)} dangerouslySetInnerHTML={{ __html: I(app.icon, 22) }} />
                  <div>
                    <div className="app-name">{app.name}</div>
                    <div className="app-desc">{app.desc}</div>
                  </div>
                  {!app.live && <span className="app-lock badge" style={{ height: 20 }}>
                    <span dangerouslySetInnerHTML={{ __html: I('clock', 12) }} /> v pripravi</span>}
                  {app.live && <span className="app-lock badge ok" style={{ height: 20 }}><span className="dot"></span>aktivno</span>}
                </button>
              ))}
            </div>
          )}
        </div>

        {/* Aktivnost */}
        <div className="card card-pad">
          <div className="spread" style={{ marginBottom: 6 }}>
            <h2 className="h-sec">Zadnje aktivnosti</h2>
            <button className="btn btn-icon btn-sm btn-ghost" dangerouslySetInnerHTML={{ __html: I('history', 16) }} />
          </div>
          {ACTIVITY.length === 0 ? (
            <div className="muted" style={{ padding: '16px 0', fontSize: 13 }}>Ni nedavnih aktivnosti.</div>
          ) : (
            <div className="feed">
              {ACTIVITY.map((a, i) => (
                <div className="feed-item" key={i}>
                  <div className="feed-dot" style={tintStyle(a.tint)} dangerouslySetInnerHTML={{ __html: I(a.icon, 15) }} />
                  <div>
                    <div className="feed-txt" dangerouslySetInnerHTML={{ __html: a.txt }} />
                    <div className="feed-meta">{a.meta}</div>
                  </div>
                </div>
              ))}
            </div>
          )}
          <button className="btn btn-sm" style={{ width: '100%', justifyContent: 'center', marginTop: 14 }}
            onClick={() => toast('Dnevnik dogodkov — kmalu')}>
            Prikaži vse
          </button>
        </div>
      </div>
    </div>
  );
}
Object.assign(window, { Dashboard });