/* Pantalla 3 — Órdenes de producción (lista, hereda el layout de Companies) */

function OrdersList({ openOrder, onBack, onClose }) {
  const [tab, setTab] = React.useState('all');
  const tabs = [
    { id: 'all',  label: 'Todas las órdenes', ct: 12 },
    { id: 'prod', label: 'En producción', ct: 9 },
    { id: 'risk', label: 'En riesgo', ct: 4, icon: 'triangle' },
    { id: 'draft',label: 'Borradores', ct: 1 },
  ];
  const rows = window.ORDERS.filter((o) => {
    if (tab === 'prod') return o.status[1] === 'En producción';
    if (tab === 'risk') return o.sig[0] === 'ct' || o.sig[0] === 'wn';
    if (tab === 'draft') return o.status[1] === 'Borrador';
    return true;
  });

  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</div>}
        right={<button className="icon-btn"><Icon name="search" /></button>} />

      <div className="head">
        <div className="page-h1">Órdenes de producción</div>
        <button className="btn btn-primary"><Icon name="plus" />Nueva orden</button>
      </div>

      <div className="bar-row">
        <div className="tabs">
          <div className="tab">
            <Icon name="rows" />Listas<Icon name="chevD" />
          </div>
          {tabs.map((t) => (
            <div key={t.id} className={`tab${tab === t.id ? ' on' : ''}`} onClick={() => setTab(t.id)}>
              {t.icon ? <Icon name={t.icon} /> : <Icon name="target" />}
              {t.label} <span className="ct">{t.ct}</span>
            </div>
          ))}
          <div className="tab"><span className="plus">+</span></div>
        </div>
        <div className="tools">
          <div className="tool"><Icon name="filter" /><span>Filtrar</span></div>
          <div className="tool"><Icon name="sort" /><span>Ordenar</span></div>
          <div className="tool"><Icon name="view" /><span>Vista</span></div>
        </div>
      </div>

      <div className="twrap">
        <table className="dt">
          <thead>
            <tr>
              <th className="c-chk"><span className="chk"></span></th>
              <th className="c-num"></th>
              <th>Orden</th><th>Cliente</th><th>Planta</th><th>Avance</th>
              <th>Entrega</th><th>Estado</th><th>Señal en vivo</th>
              <th className="c-add"><Icon name="plus" />Añadir columna</th>
            </tr>
          </thead>
          <tbody>
            {rows.map((o) => (
              <tr key={o.op} onClick={() => openOrder(o)}>
                <td className="c-chk"><span className="chk"></span></td>
                <td className="c-num">{o.n}</td>
                <td>
                  <div className="namecell">
                    <Tile mono={o.mono} kind={o.tile} />
                    <span className="nm">{o.gar}<small className="mono">{o.op}{o.ref ? ' · ' + o.ref : ''}</small></span>
                  </div>
                </td>
                <td className="muted">{o.cli}</td>
                <td className="muted">{o.plant}</td>
                <td><ProgressBar pct={o.pct} kind={o.bar} /></td>
                <td className="muted m">{o.delivery}</td>
                <td><Pill kind={o.status[0]}>{o.status[1]}</Pill></td>
                <td><Signal kind={o.sig[0]}>{o.sig[1]}</Signal></td>
                <td><span className="expand"><Icon name="chevR" /></span></td>
              </tr>
            ))}
          </tbody>
        </table>
        <div className="tfade"></div>
      </div>
    </div>
  );
}

Object.assign(window, { OrdersList });