/* Operatør-dashboard — mobil-optimalisert for daglige rutiner.
 *
 * Hver operatør ser:
 *   - "Mine automater" — kun de hen har tilgang til
 *   - For hver: status, tomme hyller (klar for henting), aktive alarmer
 *   - Quick-actions: åpne hylle for refill, marker som rensekt-ferdig, kontakt support
 *
 * Vises som ny route /operator-dashboard tilgjengelig fra sidebaren.
 */

const OperatorDashboard = ({ lang, tenant, dataVersion, onOpenMachine }) => {
  const machines = (tenant && tenant.id !== '__all__')
    ? DATA.machines.filter(m => m.tenantId === tenant.id)
    : DATA.machines;
  const t = I18N[lang];

  // Beregn "needs attention" — automater med tomme/feilede hyller
  const sorted = React.useMemo(() => {
    return [...machines].sort((a, b) => {
      // Sortering: alarm > offline > tomme hyller > vanlig
      const aScore = (a.status !== 'online' ? 100 : 0) + (a.emptyCount * 10) + (a.vacantCount * 2);
      const bScore = (b.status !== 'online' ? 100 : 0) + (b.emptyCount * 10) + (b.vacantCount * 2);
      return bScore - aScore;
    });
  }, [machines, dataVersion]);

  return (
    <div className="page" style={{ maxWidth: 720, margin: '0 auto' }}>
      <div className="page-head">
        <div>
          <h1 className="page-title">{lang === 'no' ? 'Operatør' : 'Operator'}</h1>
          <div className="page-sub">
            {sorted.length} {lang === 'no' ? 'automater å følge' : 'automats to monitor'}
          </div>
        </div>
      </div>

      {/* Sammendragslinje */}
      <div className="kpi-grid" style={{ marginBottom: 16 }}>
        <div className="kpi">
          <div className="kpi-label">{lang === 'no' ? 'Trenger oppmerksomhet' : 'Needs attention'}</div>
          <div className="kpi-value" style={{ color: 'var(--warn)' }}>
            {sorted.filter(m => m.status !== 'online' || m.emptyCount > 4).length}
          </div>
        </div>
        <div className="kpi">
          <div className="kpi-label">{lang === 'no' ? 'Tomme totalt' : 'Empty total'}</div>
          <div className="kpi-value">
            {sorted.reduce((s, m) => s + m.emptyCount, 0)}
          </div>
        </div>
        <div className="kpi">
          <div className="kpi-label">{lang === 'no' ? 'Online' : 'Online'}</div>
          <div className="kpi-value" style={{ color: 'var(--success)' }}>
            {sorted.filter(m => m.status === 'online').length}/{sorted.length}
          </div>
        </div>
      </div>

      {/* Liste */}
      <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
        {sorted.map(m => (
          <OperatorMachineCard key={m.id} machine={m} lang={lang} onOpen={() => onOpenMachine(m.id)} />
        ))}
        {sorted.length === 0 && (
          <div className="empty" style={{ padding: 30 }}>
            {lang === 'no' ? 'Ingen automater i denne tenanten' : 'No machines in this tenant'}
          </div>
        )}
      </div>
    </div>
  );
};

const OperatorMachineCard = ({ machine: m, lang, onOpen }) => {
  const empties = (m.shelves || []).filter(s => s.state === 'empty');
  const errors = (m.shelves || []).filter(s => s.state === 'error');
  const empType = {};
  empties.forEach(s => {
    const code = s.bottle || 'ukjent';
    empType[code] = (empType[code] || 0) + 1;
  });
  const urgency = m.status !== 'online' ? 'danger' : m.emptyCount > 4 ? 'warn' : 'ok';

  return (
    <div onClick={onOpen} style={{
      padding: 14, background: 'var(--surface)',
      border: '1px solid var(--border)', borderLeft: '4px solid ' +
        (urgency === 'danger' ? 'var(--danger)' : urgency === 'warn' ? 'var(--warn)' : 'var(--success)'),
      borderRadius: 'var(--radius)', cursor: 'pointer',
      display: 'flex', flexDirection: 'column', gap: 8,
    }}>
      <div className="row between" style={{ alignItems: 'flex-start' }}>
        <div>
          <div style={{ fontWeight: 600, fontSize: 14 }}>{m.location}</div>
          <div className="muted mono" style={{ fontSize: 11, marginTop: 2 }}>{m.id}</div>
        </div>
        <div className="col" style={{ alignItems: 'flex-end' }}>
          <StatusDot status={m.status} />
          <span className="muted" style={{ fontSize: 11, marginTop: 2 }}>{m.lastSeen}</span>
        </div>
      </div>

      {/* Bottle-summary inline (kun materialer med stock) */}
      <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', fontSize: 11.5 }}>
        {Object.entries(m.fullByMaterial || {})
          .filter(([_, n]) => n > 0)
          .map(([mat, n]) => (
            <span key={mat} className="pill ok" style={{ fontSize: 10 }}>
              {n}× {window.bottleHelpers.materialLabels[mat]?.plural || mat}
            </span>
          ))}
        {empties.length > 0 && (
          <span className="pill warn" style={{ fontSize: 10 }}>
            {empties.length} {lang === 'no' ? 'tomme' : 'empty'}
          </span>
        )}
        {errors.length > 0 && (
          <span className="pill danger" style={{ fontSize: 10 }}>
            {errors.length} {lang === 'no' ? 'feil' : 'error'}
          </span>
        )}
      </div>

      {/* Tomme per type — operatør vet hva som må fylles */}
      {Object.keys(empType).length > 0 && (
        <div style={{
          padding: '6px 10px', background: 'var(--warn-soft)',
          borderRadius: 6, fontSize: 11.5,
        }}>
          <span style={{ fontWeight: 500 }}>{lang === 'no' ? 'Trenger påfyll' : 'Needs refill'}: </span>
          {Object.entries(empType).map(([code, n]) => `${n}× ${code}`).join(', ')}
        </div>
      )}

      <div className="row" style={{ gap: 4, justifyContent: 'flex-end' }}>
        <button className="btn sm" onClick={(e) => { e.stopPropagation(); onOpen(); }}>
          {lang === 'no' ? 'Detaljer' : 'Details'} →
        </button>
      </div>
    </div>
  );
};

Object.assign(window, { OperatorDashboard });