/* Pantalla 2 — Dashboard de inicio (home del supervisor) */

function StatCard({ icon, label, n, clay, trend, alert }) {
  return (
    <div className={`stat${alert ? ' alert' : ''}`}>
      <div className="l"><Icon name={icon} />{label}</div>
      <div className={`n${clay ? ' clay' : ''}`}>{n}</div>
      <div className="t" dangerouslySetInnerHTML={{ __html: trend }} />
    </div>
  );
}

/* Gráfico de throughput — réplica del patrón de la referencia, en clay terracota.
   La caída del jueves hace visible la rotura del flujo. */
function ThroughputChart() {
  const T = window.THROUGHPUT;
  const data = T.days;
  const hostRef = React.useRef(null);
  const [w, setW] = React.useState(0);
  const H = 210;
  const [hover, setHover] = React.useState(3); // por defecto, el día de la rotura

  React.useEffect(() => {
    const el = hostRef.current;
    if (!el) return;
    const measure = () => setW(el.clientWidth);
    measure();
    const ro = new ResizeObserver(measure);
    ro.observe(el);
    return () => ro.disconnect();
  }, []);

  const padL = 18, padR = 18, padT = 26, padB = 30;
  const max = Math.max(T.target, ...data.map((d) => d.v)) * 1.14;
  const X = (i) => padL + (w - padL - padR) * (i / (data.length - 1));
  const Y = (v) => padT + (H - padT - padB) * (1 - v / max);
  const pts = data.map((d, i) => [X(i), Y(d.v)]);

  const smooth = (p) => {
    if (p.length < 2) return '';
    let d = `M${p[0][0]},${p[0][1]}`;
    for (let i = 0; i < p.length - 1; i++) {
      const p0 = p[i - 1] || p[i], p1 = p[i], p2 = p[i + 1], p3 = p[i + 2] || p2;
      d += ` C${p1[0] + (p2[0] - p0[0]) / 6},${p1[1] + (p2[1] - p0[1]) / 6} ${p2[0] - (p3[0] - p1[0]) / 6},${p2[1] - (p3[1] - p1[1]) / 6} ${p2[0]},${p2[1]}`;
    }
    return d;
  };
  const line = smooth(pts);
  const yTarget = Y(T.target);

  let tip = null;
  if (w > 0 && hover != null) {
    const d = data[hover], p = pts[hover];
    let left = p[0] + 16, top = p[1] - 8;
    if (left + 180 > w) left = p[0] - 196;
    if (top < 0) top = 8;
    const crit = d.note;
    tip = (
      <div className="ctip" style={{ left, top }}>
        <div className="d">{d.label}</div>
        <div className="v">
          <span className="lab"><span className="dd" style={{ background: crit ? 'var(--critical)' : 'var(--chart)' }}></span>{d.partial ? 'Parcial' : 'Terminadas'}</span>
          <b>{d.v} {T.unit}</b>
        </div>
        {crit && <div className="v" style={{ marginTop: 5, color: 'var(--crit-tx)', fontSize: 11 }}>{d.note}</div>}
      </div>
    );
  }

  return (
    <div className="block chart-block">
      <div className="block-h">
        <div className="t">Throughput de planta</div>
        <div className="right">
          <div className="chart-legend">
            <span className="k"><span className="sw line"></span>Terminadas/día</span>
            <span className="k"><span className="sw tgt"></span>Meta {T.target}</span>
          </div>
          <div className="selchip"><Icon name="clock" />Últimos 7 días<Icon name="chevD" /></div>
        </div>
      </div>
      <div className="chart-host" ref={hostRef} onMouseLeave={() => setHover(3)}>
        {w > 0 && (
          <svg viewBox={`0 0 ${w} ${H}`} width={w} height={H}>
            <defs>
              <linearGradient id="thArea" x1="0" y1="0" x2="0" y2="1">
                <stop offset="0%" stopColor="#4c6b8b" stopOpacity="0.16" />
                <stop offset="100%" stopColor="#4c6b8b" stopOpacity="0" />
              </linearGradient>
            </defs>
            {[0, 1, 2, 3].map((g) => {
              const yy = padT + (H - padT - padB) * (g / 3);
              return <line key={g} x1={padL} y1={yy} x2={w - padR} y2={yy} stroke="var(--line)" strokeWidth="1" />;
            })}
            {/* línea de meta */}
            <line x1={padL} y1={yTarget} x2={w - padR} y2={yTarget} stroke="var(--stone-2)" strokeWidth="1.4" strokeDasharray="5 5" opacity="0.7" />
            {/* área + línea */}
            <path d={`${line} L${pts[pts.length - 1][0]},${H - padB} L${pts[0][0]},${H - padB} Z`} fill="url(#thArea)" />
            <path d={line} fill="none" stroke="var(--chart)" strokeWidth="2.6" strokeLinecap="round" strokeLinejoin="round" />
            {/* guía vertical */}
            {hover != null && <line x1={pts[hover][0]} y1={padT - 8} x2={pts[hover][0]} y2={H - padB} stroke="var(--line-2)" strokeWidth="1.5" />}
            {/* etiquetas X */}
            {data.map((d, i) => (
              <text key={i} x={X(i)} y={H - 10} textAnchor="middle" fontSize="11" fill="var(--stone)"
                fontFamily="var(--font-mono)">{d.d}</text>
            ))}
            {/* puntos */}
            {pts.map((p, i) => {
              const crit = data[i].note, partial = data[i].partial;
              return (
                <circle key={i} cx={p[0]} cy={p[1]} r={crit ? 5.5 : 4.5}
                  fill={crit ? 'var(--critical)' : partial ? 'var(--card)' : 'var(--chart)'}
                  stroke={partial ? 'var(--chart)' : 'none'} strokeWidth={partial ? 2 : 0} />
              );
            })}
            {/* zonas de hover */}
            {pts.map((p, i) => (
              <rect key={'h' + i} x={X(i) - (w / data.length) / 2} y="0" width={w / data.length} height={H}
                fill="transparent" onMouseEnter={() => setHover(i)} style={{ cursor: 'pointer' }} />
            ))}
          </svg>
        )}
        {tip}
      </div>
    </div>
  );
}

function Dashboard({ go, openOrder, onBack, onClose }) {
  const active = window.ORDERS.filter((o) => o.status[1] === 'En producción')
    .sort((a, b) => a.days - b.days);

  const alerts = [
    { sev: 'ct', icon: 'alertTri', t: 'OP-1042 · Delantero se detiene en ~40 min', m: 'Ritmo insuficiente para cubrir el ensamble. Faltan piezas de delantero.', time: 'hace 4 min' },
    { sev: 'wn', icon: 'boxes', t: 'OP-1051 · Cuello con stock bajo', m: 'Inventario 30 uds bajo el umbral de 50. El ensamble podría frenar.', time: 'hace 22 min' },
    { sev: 'wn', icon: 'clock', t: 'OP-1051 · Chaqueta Bomber cerca de vencer', m: 'Entrega en 7 días con 38% de avance. Ritmo por debajo de objetivo.', time: 'hace 1 h' },
    { sev: 'ok', icon: 'check', t: 'OP-1039 · Polo Piqué en buen ritmo', m: 'Avance 84%, sin alertas. Proyección dentro de fecha.', time: 'hace 2 h' },
  ];

  return (
    <div className="panel fade-in">
      <TopBar onBack={onBack} onClose={onClose}
        crumb={<div className="crumb"><b>{window.TENANT.name}</b><span className="sep">·</span>Vista general</div>}
        right={<div className="selchip"><Icon name="pin" />Todas las plantas<Icon name="chevD" /></div>} />

      <div className="head">
        <div>
          <div className="page-h1">Buenos días, Marcela</div>
          <div className="page-sub">Martes 28 de diciembre · 9 órdenes activas en piso</div>
        </div>
        <div className="live"><span className="pulse"></span>EN VIVO</div>
      </div>

      <div className="scroll">
        <div className="stats">
          <StatCard icon="flow" label="En producción" n="9" trend='Across <span class="mono">2</span> plantas' />
          <StatCard icon="alertTri" label="En riesgo" n="4" clay trend='<span class="mono">1</span> crítica · <span class="mono">3</span> warning' alert />
          <StatCard icon="clock" label="Entregas esta semana" n="4" trend='Más próxima en <span class="mono">2</span> días' />
          <StatCard icon="target" label="Eficiencia planta" n="61%" trend='Meta <span class="mono">75%</span> · hoy' />
        </div>

        <ThroughputChart />

        <div className="grid2">
          <div className="block">
            <div className="block-h">
              <div className="t">Órdenes activas</div>
              <div className="a" onClick={() => go('orders')}>Ver todas →</div>
            </div>
            {active.map((o) => (
              <div className="ord" key={o.op} onClick={() => openOrder(o)}>
                <Tile mono={o.mono} kind={o.tile} />
                <div className="mid">
                  <div className="meta">
                    <div className="top">
                      <span className="op mono">{o.op}</span>
                      <span className="gar">{o.gar}</span>
                    </div>
                    <div className="cli">{o.cli} · {o.plant}</div>
                  </div>
                  <div className="prog" style={{ minWidth: 0 }}>
                    <div className="bar"><i className={o.bar} style={{ width: o.pct + '%' }}></i></div>
                    <span className="pct">{o.pct}%</span>
                  </div>
                </div>
                <div className="right">
                  <span className="date mono">{o.delivery}</span>
                  <span className={`days${o.daysSoon ? ' soon' : ''}`}>{o.days} días</span>
                  <Signal kind={o.sig[0]}>{o.sig[1]}</Signal>
                </div>
              </div>
            ))}
          </div>

          <div className="block">
            <div className="block-h">
              <div className="t">Centinela · Alertas</div>
              <div className="a">Marcar leídas</div>
            </div>
            <div className="alerts">
              {alerts.map((a, i) => (
                <div className="alert" key={i}>
                  <div className={`sev ${a.sev}`}><Icon name={a.icon} /></div>
                  <div className="body">
                    <div className="t">{a.t}</div>
                    <div className="m">{a.m}</div>
                    <div className="time">{a.time}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { Dashboard });