/* Pantalla — Tablero de producción (kanban por etapa, hereda el patrón de deals.html) */

function BoardCard({ o, onOpen, onDragStart, onDragEnd }) {
  return (
    <div className={`bcard${o.sig[0] === 'ct' ? ' ct' : ''}`} data-id={o.op} draggable
      onClick={onOpen}
      onDragStart={(e) => onDragStart(e, o)} onDragEnd={onDragEnd}>
      <div className="bcard-top">
        <div style={{ minWidth: 0 }}>
          <div className="gar">{o.gar}</div>
          <div className="op mono">{o.op}</div>
          <div className="cli">{o.cli} · {o.plant}</div>
        </div>
        <Tile mono={o.mono} kind={o.tile} />
      </div>
      <div className="bcard-prog">
        <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>
      {o.sig[0] && (
        <div style={{ marginTop: 11 }}><Signal kind={o.sig[0]}>{o.sig[1]}</Signal></div>
      )}
      <div className="bcard-foot">
        <span className="mono" style={{ fontSize: 10.5, color: 'var(--stone)' }}>{o.units} uds</span>
        <span className={`due${o.daysSoon ? ' soon' : ''}`}><Icon name="clock" />{o.delivery} · {o.days}d</span>
      </div>
    </div>
  );
}

function Board({ openOrder, go, onBack, onClose }) {
  // sólo órdenes en piso (los borradores no entran al tablero)
  const initial = window.ORDERS.filter((o) => o.status[1] !== 'Borrador');
  const [items, setItems] = React.useState(initial);
  const [over, setOver] = React.useState(null);
  const dragId = React.useRef(null);

  const STAGES = window.STAGES;
  const byStage = (id) => items.filter((o) => o.stage === id);

  function onDragStart(e, o) {
    dragId.current = o.op;
    e.dataTransfer.effectAllowed = 'move';
    requestAnimationFrame(() => {
      const el = document.querySelector(`.bcard[data-id="${o.op}"]`);
      if (el) el.classList.add('dragging');
    });
  }
  function onDragEnd() {
    document.querySelectorAll('.bcard.dragging').forEach((el) => el.classList.remove('dragging'));
    setOver(null);
  }
  function onDrop(e, stageId) {
    e.preventDefault();
    const id = dragId.current;
    if (!id) return;
    const dragged = items.find((o) => o.op === id);
    if (!dragged) return;

    // posición de inserción según Y del cursor entre las tarjetas de la columna
    const zone = e.currentTarget;
    const cards = [...zone.querySelectorAll('.bcard')].filter((c) => c.dataset.id !== id);
    let refId = null;
    for (const c of cards) {
      const r = c.getBoundingClientRect();
      if (e.clientY < r.top + r.height / 2) { refId = c.dataset.id; break; }
    }

    const next = items.filter((o) => o.op !== id);
    const moved = { ...dragged, stage: stageId };
    if (refId) {
      const idx = next.findIndex((o) => o.op === refId);
      next.splice(idx, 0, moved);
    } else {
      // anexar al final del grupo de esa etapa
      let lastIdx = -1;
      next.forEach((o, i) => { if (o.stage === stageId) lastIdx = i; });
      if (lastIdx === -1) next.push(moved);
      else next.splice(lastIdx + 1, 0, moved);
    }
    setItems(next);
    setOver(null);
    dragId.current = null;
  }

  return (
    <div className="panel fade-in">
      <TopBar onBack={onBack} onClose={onClose}
        crumb={<div className="crumb"><b>{window.TENANT.name}</b><span className="sep">·</span>Producción<span className="sep">·</span>Tablero</div>}
        right={<button className="icon-btn"><Icon name="search" /></button>} />

      <div className="head">
        <div>
          <div className="page-h1">Tablero de producción</div>
          <div className="page-sub">{items.length} órdenes en piso · arrastra una tarjeta para moverla de etapa</div>
        </div>
        <button className="btn btn-primary"><Icon name="plus" />Nueva orden</button>
      </div>

      <div className="board-filters">
        <div className="all-pill">Todas</div>
        {STAGES.map((s) => (
          <div className="stage-f" key={s.id}>
            <Icon name={s.icon} />{s.label} <span className="ct">{byStage(s.id).length}</span>
          </div>
        ))}
        <span className="spacer"></span>
        <div className="tools">
          <div className="tool" onClick={() => go('orders')}><Icon name="rows" /><span>Lista</span></div>
          <div className="tool"><Icon name="filter" /><span>Filtrar</span></div>
        </div>
      </div>

      <div className="board">
        {STAGES.map((s) => {
          const list = byStage(s.id);
          const avg = list.length ? Math.round(list.reduce((a, o) => a + o.pct, 0) / list.length) : 0;
          return (
            <div className="bcol" key={s.id}>
              <div className="bcol-h">
                <div className="bcol-name">
                  <span className="sd" style={{ background: s.color }}></span>{s.label}
                  <span className="ct">{list.length}</span>
                </div>
                <span className="bcol-sum">Ø {avg}%</span>
              </div>
              <div className={`bcol-cards${over === s.id ? ' over' : ''}`}
                onDragOver={(e) => { e.preventDefault(); setOver(s.id); }}
                onDragLeave={(e) => { if (e.currentTarget === e.target) setOver(null); }}
                onDrop={(e) => onDrop(e, s.id)}>
                {list.map((o) => (
                  <BoardCard key={o.op} o={o} onOpen={() => openOrder(o)}
                    onDragStart={onDragStart} onDragEnd={onDragEnd} />
                ))}
                <div className="add-card"><Icon name="plus" />Añadir orden</div>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

Object.assign(window, { Board });