/* global React, Ic, Chip, PTag, Fresh, Sec, State, useState, window */

function StatStrip({ items, cols }) {
  return (
    <div className={`stats ${cols?'cols-8':''}`}>
      {items.map((s,i)=>(
        <div key={i} className={`stat ${s.tone?'t-'+s.tone:''} ${s.glow?'t-glow':''}`}>
          <div className="stat-k"><span>{s.k}</span>{s.fresh && <Fresh state={s.fresh} label=""/>}</div>
          <div className="stat-v">{s.v}{s.u && <span className="u">{s.u}</span>}</div>
          {s.sub && <div className="stat-sub">{s.delta==='up' && <span className="delta-up">▲</span>}{s.delta==='dn' && <span className="delta-dn">▼</span>}{s.sub}</div>}
        </div>
      ))}
    </div>
  );
}

function normalizeQueuePriority(priority) {
  const raw = String(priority || '').toUpperCase();
  if (['P0', 'P1', 'P2', 'P3'].includes(raw)) return raw;
  if (raw === 'CRITICAL') return 'P0';
  if (raw === 'HIGH') return 'P1';
  if (raw === 'MEDIUM') return 'P2';
  return 'P3';
}

function formatOpsUpdatedAt(value) {
  if (!value) return '—';
  const parsed = new Date(value);
  if (Number.isNaN(parsed.getTime())) return String(value);
  return parsed.toLocaleString('et-EE', { day:'2-digit', month:'2-digit', hour:'2-digit', minute:'2-digit' });
}

function toTodayQueueItem(item) {
  const status = item.status || 'Staatus puudub';
  return {
    ...item,
    P: normalizeQueuePriority(item.priority),
    title: item.title || item.id || 'Pealkiri puudub',
    source: item.source || 'Allikas puudub',
    customer: item.customer || '—',
    status,
    updatedLabel: formatOpsUpdatedAt(item.updatedAt),
    why: `Backend queue · ${status}`,
    next: 'Ava kirje',
  };
}

function getQueueItems(opsQueue) {
  return Array.isArray(opsQueue?.data?.items) ? opsQueue.data.items : [];
}

function isMalformedQueue(opsQueue) {
  return Boolean(opsQueue?.data && !Array.isArray(opsQueue.data.items));
}

function getQueueMeta(opsQueue, opsError) {
  if (opsError) {
    return { ok:false, label:'Viga', tone:'danger', fresh:'missing', detail:opsError.message || 'backend queue päring ebaõnnestus' };
  }
  if (!opsQueue) {
    return { ok:false, label:'Laeb', tone:'warn', fresh:'missing', detail:'backend queue laeb' };
  }
  if (window.OpsProvenance.isMissing(opsQueue)) {
    return { ok:false, label:'Puudub', tone:'danger', fresh:'missing', detail:opsQueue.provenance.detail || 'backend queue allikas puudub' };
  }
  if (isMalformedQueue(opsQueue)) {
    return { ok:false, label:'Vigane kuju', tone:'danger', fresh:'missing', detail:'backend queue items ei ole massiiv' };
  }
  if (window.OpsProvenance.isPartialLive(opsQueue)) {
    return { ok:true, label:'Osaliselt live', tone:'warn', fresh:'stale', detail:opsQueue.provenance.detail || 'backend queue on osaline' };
  }
  return { ok:true, label:'Live', tone:'', fresh:'live', detail:'backend queue' };
}

function toQueueStat(queueMeta, queueCount, p0Count) {
  if (!queueMeta.ok) {
    return { k:'Piletid', v:queueMeta.label, tone:queueMeta.tone, sub:queueMeta.detail, fresh:queueMeta.fresh };
  }
  return { k:'Piletid', v:String(queueCount), tone:p0Count?'danger':queueMeta.tone, sub:`${p0Count} × P0`, fresh:queueMeta.fresh };
}

function toSummaryStat(opsSummary, opsSummaryError) {
  if (opsSummaryError) {
    return { k:'Toote seis', v:'Viga', tone:'danger', sub:opsSummaryError.message || 'backend kokkuvõtte päring ebaõnnestus', fresh:'missing' };
  }
  if (!opsSummary) {
    return { k:'Toote seis', v:'Laeb', tone:'warn', sub:'backend kokkuvõte laeb', fresh:'missing' };
  }
  if (window.OpsProvenance.isMissing(opsSummary)) {
    return { k:'Toote seis', v:'Puudub', tone:'danger', sub:opsSummary.provenance.detail || 'backend kokkuvõtte allikas puudub', fresh:'missing' };
  }
  if (window.OpsProvenance.isPartialLive(opsSummary)) {
    return { k:'Toote seis', v:'Osaliselt live', tone:'warn', sub:opsSummary.provenance.detail || 'backend kokkuvõte on osaline', fresh:'stale' };
  }
  return { k:'Toote seis', v:opsSummary.data?.status || opsSummary.provenance.kind, tone:'', sub:'backend kokkuvõte', fresh:'live' };
}

function ScreenToday({ openOp, nav, focus, setFocus, opsSummary, opsSummaryError, opsQueue, opsError }) {
  const queueMeta = getQueueMeta(opsQueue, opsError);
  const queueItems = getQueueItems(opsQueue).map(toTodayQueueItem);
  const items = queueItems.slice(0, 7);
  const malformedState = isMalformedQueue(opsQueue) ? <State icon="alert" title="Backend queue kuju ei sobi" sub="Oodati data.items massiivi. Kirjeid ei kuvata enne, kui backend leping on parandatud."/> : null;
  const opsState = malformedState || window.OpsScreenState.renderOpsState(opsQueue, opsError);
  const queueCount = opsQueue?.data?.total ?? queueItems.length;
  const p0Count = queueItems.filter((it)=>it.P === 'P0').length;
  const top = [
    toSummaryStat(opsSummary, opsSummaryError),
    toQueueStat(queueMeta, queueCount, p0Count),
  ];
  const summaryState = window.OpsScreenState.renderOpsState(opsSummary, opsSummaryError);
  const summaryScalars = window.collectOpsScalars ? window.collectOpsScalars(opsSummary?.data) : [];
  const latestQueueItems = queueItems
    .filter((item)=>item.updatedAt)
    .sort((a,b)=>String(b.updatedAt).localeCompare(String(a.updatedAt)))
    .slice(0, 5);

  if (focus) {
    const f3 = items.slice(0,3);
    const focusState = opsState || (f3.length === 0 ? <State icon="inbox" title="Backend järjekord on tühi" sub="Autoriteetne queue allikas ei tagastanud hetkel tegevusi."/> : null);
    return (
      <div className="page">
        <div className="page-intro">
          <div>
            <span className="ov">Täna · Fookusrežiim</span>
            <h1>Järgmised 3 tegevust</h1>
            <p className="lede">Kõik muu on peidetud. Tee need kolm ära.</p>
          </div>
          <div className="page-actions"><button className="btn" onClick={()=>setFocus(false)}><Ic name="layers"/>Välju fookusest</button></div>
        </div>
        <div className="decisions">
          {focusState}
          {f3.map((it,i)=>(
            <button key={it.id} className="drow" onClick={()=>openOp(it)} style={{padding:'18px'}}>
              <span className="drow-rank">{i+1}</span>
              <div className="drow-main">
                <div className="drow-top"><PTag p={it.P}/><span className="drow-title" style={{fontSize:'15px'}}>{it.title}</span></div>
                <div className="drow-why">{it.why}</div>
                <div className="drow-meta"><span>Klient <b>{it.customer}</b></span><span>Uuendatud <b>{it.updatedLabel}</b></span><span>Allikas <b>{it.source}</b></span></div>
              </div>
              <div className="drow-right"><span className="drow-next"><Ic name="arrow"/>{it.next}</span></div>
            </button>
          ))}
        </div>
      </div>
    );
  }

  return (
    <div className="page">
      <div className="page-intro">
        <div>
          <span className="ov">Täna · Command Center</span>
          <h1>Mis vajab täna tähelepanu</h1>
          <p className="lede">Vaikevaade näitab ainult seda, mis vajab tegevust. Kõik muu on kättesaadav drilldown’i kaudu.</p>
        </div>
        <div className="page-actions">
          <button className="btn" onClick={()=>nav('tickets')}><Ic name="inbox"/>Tööjärjekord</button>
          <button className="btn btn-primary" onClick={()=>setFocus(true)}><Ic name="target"/>Fookusrežiim</button>
        </div>
      </div>

      <StatStrip items={top} cols/>

      <Sec ov="Prioriteet" title="Täna vajab otsust" meta={`${items.length} kirjet · järjestatud kiireloomulisuse ja mõju järgi`} flush
        right={<button className="btn btn-sm btn-ghost" onClick={()=>nav('tickets')}>Kõik <Ic name="arrow"/></button>}>
        <div className="decisions">
          {opsState}
          {!opsState && items.length === 0 && <State icon="inbox" title="Backend järjekord on tühi" sub="Autoriteetne queue allikas ei tagastanud hetkel tegevusi."/>}
          {items.map((it,i)=>(
            <button key={it.id} className="drow" onClick={()=>openOp(it)}>
              <span className="drow-rank">{String(i+1).padStart(2,'0')}</span>
              <div className="drow-main">
                <div className="drow-top">
                  <PTag p={it.P}/>
                  <span className="drow-title">{it.title}</span>
                  <span className="drow-src">{it.source}</span>
                </div>
                <div className="drow-why">{it.why}</div>
                <div className="drow-meta">
                  <span>Klient <b>{it.customer}</b></span>
                  <span>Uuendatud <b>{it.updatedLabel}</b></span>
                  <span>Staatus <b>{it.status}</b></span>
                  <span>Prioriteet <b>{it.P}</b></span>
                </div>
              </div>
              <div className="drow-right">
                {it.updatedLabel !== '—' && <Chip tone="mute" icon="clock">{it.updatedLabel}</Chip>}
                <span className="drow-next"><Ic name="arrow"/>{it.next}</span>
              </div>
            </button>
          ))}
        </div>
      </Sec>

      <div className="grid2">
        <Sec ov="Kokkuvõte" title="Backend summary" meta="autoriteetne ops kokkuvõte" flush>
          {summaryState}
          {!summaryState && summaryScalars.length === 0 && <State icon="doc" title="Summary ei sisalda kuvatavaid mõõdikuid" sub="Backend tagastas summary jaotise, kuid data plokis ei olnud lihtsaid võtme-väärtuse välju."/>}
          {!summaryState && summaryScalars.length > 0 && (
            <ul className="mlist" style={{padding:'4px 18px 10px'}}>
              {summaryScalars.map((r,i)=>(
                <li key={i}>
                  <span className="mdot" style={{background:'var(--signal)'}}/>
                  <div><div className="mt">{r.k}</div><div className="md">{r.v}</div></div>
                  <Fresh state={r.fresh}/>
                </li>
              ))}
            </ul>
          )}
        </Sec>
        <Sec ov="Järjekord" title="Queue seis" right={<Fresh state={queueMeta.fresh}/>} flush>
          <div style={{padding:'12px 18px'}}>
            <State icon="inbox" title={queueMeta.label} sub={queueMeta.ok ? `${queueItems.length} backend queue kirjet on laaditud.` : queueMeta.detail}/>
          </div>
        </Sec>
      </div>

      <div className="grid2">
        <Sec ov="Sektsioonid" title="Mitte-queue jaotised" flush>
          <div style={{padding:'12px 18px'}}>
            <State icon="doc" title="Ava vasakust menüüst" sub="Kliendid, telemeetria, arendus, turundus, dokumendid, toetused, investorid, finants, õigus, automaatika ja seaded laaditakse oma backend jaotisest."/>
          </div>
        </Sec>
        <Sec ov="Voog" title="Viimased queue muutused" right={<Fresh state={queueMeta.fresh}/>} flush>
          {opsState}
          {!opsState && latestQueueItems.length === 0 && <State icon="inbox" title="Queue muutuseid pole" sub="Backend queue ei tagastanud updatedAt väljaga kirjeid."/>}
          {!opsState && latestQueueItems.length > 0 && (
            <ul className="feed">
              {latestQueueItems.map(f=>(
                <li key={f.id || f.title}>
                  <span className="fid">{f.id || '—'}</span>
                  <span className="fdot" style={{background:'var(--signal)'}}/>
                  <span>{f.title}</span>
                  <span className="ftime">{f.updatedLabel}</span>
                </li>
              ))}
            </ul>
          )}
        </Sec>
      </div>
    </div>
  );
}

Object.assign(window, { ScreenToday, StatStrip });