// ─────────────────────────────────────────────────────
// PRODUCCIÓN — vista taller derivada de pedidos y partes
// ─────────────────────────────────────────────────────

const PROD_STATIONS = [
  { key:'recepcion', label:'Recepción material', cap:6, color:'var(--warn)' },
  { key:'corte',     label:'Corte vidrio',       cap:5, color:'var(--info)' },
  { key:'lacado',    label:'Lacado / acabado',   cap:4, color:'var(--warn)' },
  { key:'ens',       label:'Ensamblaje',         cap:6, color:'var(--glass)' },
  { key:'qc',        label:'Control calidad',    cap:3, color:'var(--accent)' },
  { key:'listo',     label:'Listo para entrega', cap:8, color:'var(--ok)' },
];

const PROD_MATERIAL_KEYS = [
  'perfiles','lacado','vidrios','tubos','panel_sandwich',
  'accesorios','cerraduras','toldo_estores','otros_materiales',
];

const prodMatState = (v) => {
  if (window.matVal) return window.matVal(v);
  if (!v || !String(v).trim()) return null;
  const u = String(v).trim().toUpperCase();
  if (u.startsWith('OK')) return 'ok';
  if (u.startsWith('PDTE')) return 'warn';
  return 'text';
};

const isTodayDate = (value) => {
  if (!value) return false;
  const d = new Date(value);
  if (Number.isNaN(d.getTime())) return false;
  const today = new Date();
  return d.getFullYear() === today.getFullYear()
    && d.getMonth() === today.getMonth()
    && d.getDate() === today.getDate();
};

const normalizeText = (v) => String(v || '').trim().toLowerCase();

const productMetaForPedido = (pedido) => {
  const products = window.DATA.PRODUCTOS || [];
  const text = normalizeText([
    pedido.producto_1, pedido.producto_2, pedido.producto_3, pedido.producto_4, pedido.productos_resumen,
  ].filter(Boolean).join(' '));
  return products.find(p => text.includes(normalizeText(p.name).split(' ')[0]) || text.includes(p.id)) || null;
};

const stationForPedido = (pedido) => {
  const estado = String(pedido.estado_general || '').toUpperCase();
  if (estado === 'COMPLETADO' || estado === 'LISTO_PARA_PRODUCCION') return 'listo';

  const states = PROD_MATERIAL_KEYS.map(k => [k, prodMatState(pedido[k])]);
  const filled = states.filter(([, s]) => s);
  const warnKeys = states.filter(([, s]) => s === 'warn').map(([k]) => k);
  const okCount = states.filter(([, s]) => s === 'ok').length;

  if (prodMatState(pedido.medicion) === 'warn' || filled.length === 0) return 'recepcion';
  if (warnKeys.includes('vidrios')) return 'corte';
  if (warnKeys.includes('lacado')) return 'lacado';
  if (warnKeys.length > 0) return 'recepcion';
  if (filled.length > 0 && okCount >= filled.length) return 'qc';
  if (okCount >= 2) return 'ens';
  return 'corte';
};

const stationCaption = (key) => {
  if (key === 'recepcion') return 'materiales pendientes';
  if (key === 'corte') return 'preparación vidrio';
  if (key === 'lacado') return 'acabado pendiente';
  if (key === 'ens') return 'listo para montar';
  if (key === 'qc') return 'revisión final';
  return 'entrega';
};

const ProduccionView = ({ onOpen, onToast }) => {
  const [pedidos, setPedidos] = React.useState([]);
  const [partes, setPartes] = React.useState([]);
  const [loading, setLoading] = React.useState(true);
  const [error, setError] = React.useState('');

  React.useEffect(() => {
    let alive = true;
    setLoading(true);
    setError('');
    Promise.all([
      API.get('/api/compras'),
      API.get('/api/partes').catch(() => []),
    ]).then(([comprasRows, partesRows]) => {
      if (!alive) return;
      const hydrated = (Array.isArray(comprasRows) ? comprasRows : []).map(p => ({
        ...p,
        _station: stationForPedido(p),
      }));
      setPedidos(hydrated);
      setPartes(Array.isArray(partesRows) ? partesRows : []);
    }).catch(e => {
      if (!alive) return;
      const msg = e.message || 'Error al cargar producción';
      setError(msg);
      onToast && onToast(msg, true);
    }).finally(() => {
      if (alive) setLoading(false);
    });
    return () => { alive = false; };
  }, [onToast]);

  const byStation = React.useMemo(() => {
    const map = Object.fromEntries(PROD_STATIONS.map(s => [s.key, []]));
    pedidos.forEach(p => {
      const key = p._station || stationForPedido(p);
      (map[key] || map.recepcion).push(p);
    });
    return map;
  }, [pedidos]);

  const stationRows = React.useMemo(() => PROD_STATIONS.map(s => ({
    ...s,
    c: (byStation[s.key] || []).length,
  })), [byStation]);

  const bottleneck = React.useMemo(() => {
    const candidates = stationRows.filter(s => s.key !== 'listo' && s.c >= s.cap - 1);
    return (candidates[0] || stationRows.filter(s => s.key !== 'listo').sort((a, b) => (b.c / b.cap) - (a.c / a.cap))[0] || stationRows[0]);
  }, [stationRows]);

  const active = pedidos.filter(p => String(p.estado_general || '').toUpperCase() !== 'COMPLETADO');
  const completed = pedidos.filter(p => String(p.estado_general || '').toUpperCase() === 'COMPLETADO');
  const partesToday = partes.filter(p => isTodayDate(p.fecha || p.submitted_at));
  const activeOps = new Set(partesToday.map(p => p.operario).filter(Boolean)).size;
  const bottleneckLabel = active.length ? bottleneck.label.replace(' / acabado','') : 'Sin carga';
  const bottleneckValue = active.length ? `${bottleneck.c}/${bottleneck.cap}` : '0/0';

  const openPedido = (pedido) => {
    if (onOpen) onOpen(pedido);
  };

  return (
    <>
      <div className="page-h">
        <div>
          <h1>Producción</h1>
          <div className="sub">Estado del taller derivado de pedidos y partes</div>
        </div>
        <div className="page-h-actions">
          <button className="btn tip" data-tip="Próximamente" title="Próximamente" disabled style={{opacity:.55,cursor:'not-allowed'}}>
            <Icon name="print"/> Imprimir hoja taller
          </button>
          <button className="btn primary tip" data-tip="Próximamente" title="Próximamente" disabled style={{opacity:.55,cursor:'not-allowed'}}>
            <Icon name="play"/> Iniciar lote
          </button>
        </div>
      </div>

      {error && (
        <div className="panel" style={{marginBottom:14,borderColor:'var(--err)'}}>
          <div className="panel-b" style={{color:'var(--err)',fontSize:13}}>{error}</div>
        </div>
      )}

      <div className="kpi-grid" style={{gridTemplateColumns:'repeat(4,1fr)'}}>
        <div className="kpi"><div className="lbl">Pedidos en taller</div><div className="row"><div className="num">{active.length}</div><span className="sub">de {pedidos.length} pedidos</span></div></div>
        <div className="kpi"><div className="lbl"><span className="dot" style={{background:'var(--ok)'}}/> Completados</div><div className="row"><div className="num">{completed.length}</div><span className="sub">listos</span></div></div>
        <div className="kpi"><div className="lbl"><span className="dot" style={{background:'var(--warn)'}}/> Cuello de botella</div><div className="row"><div className="num" style={{fontSize:16}}>{bottleneckLabel}</div><span className="sub">{bottleneckValue}</span></div></div>
        <div className="kpi"><div className="lbl">Partes hoy</div><div className="row"><div className="num">{partesToday.length}</div><span className="sub">{activeOps} operarios</span></div></div>
      </div>

      <div className="panel" style={{marginBottom:14}}>
        <div className="panel-h">
          Flujo de taller
          <span className="badge">{loading ? 'Cargando' : 'Tiempo real'}</span>
        </div>
        <div className="panel-b">
          <div style={{display:'grid',gridTemplateColumns:`repeat(${PROD_STATIONS.length * 2 - 1}, minmax(0, 1fr))`,gap:0,alignItems:'stretch'}}>
            {stationRows.map((s,i) => {
              const pct = Math.min(100, (s.c / s.cap) * 100);
              const isBottleneck = s.key !== 'listo' && s.c >= s.cap - 1;
              return (
                <React.Fragment key={s.key}>
                  <div style={{padding:'14px 12px',textAlign:'center',background: isBottleneck ? 'var(--warn-bg)':'var(--surface-2)',borderRadius:8,border:`1px solid ${isBottleneck?'var(--warn)':'var(--line)'}`,position:'relative',minWidth:0}}>
                    <div style={{fontSize:11,fontWeight:600,textTransform:'uppercase',letterSpacing:'.06em',color:'var(--ink-3)',marginBottom:6,whiteSpace:'nowrap',overflow:'hidden',textOverflow:'ellipsis'}} title={s.label}>{s.label}</div>
                    <div className="num" style={{fontSize:26,fontWeight:700,color:isBottleneck?'var(--warn)':'var(--ink)'}}>{loading ? '…' : s.c}<span style={{fontSize:14,color:'var(--ink-4)'}}>/{s.cap}</span></div>
                    <div style={{marginTop:8}}>
                      <span className={`pbar ${isBottleneck?'warn':'ok'}`} style={{width:'100%',height:4}}><i style={{width:`${pct}%`}}/></span>
                    </div>
                  </div>
                  {i < PROD_STATIONS.length-1 && <div style={{display:'flex',alignItems:'center',justifyContent:'center',color:'var(--ink-4)'}}><Icon name="chevron_right" size={16}/></div>}
                </React.Fragment>
              );
            })}
          </div>
        </div>
      </div>

      <div style={{display:'grid',gridTemplateColumns:'repeat(3,1fr)',gap:12}}>
        {stationRows.map(col => {
          const items = byStation[col.key] || [];
          return (
            <div key={col.key} className="panel">
              <div className="panel-h">
                <span className="dot" style={{background:col.color}}/> {col.label}
                <span className="badge">{items.length}</span>
              </div>
              <div className="panel-b" style={{display:'flex',flexDirection:'column',gap:8,minHeight:90}}>
                {loading && <div className="muted" style={{padding:'20px 0',textAlign:'center',fontSize:12}}>Cargando pedidos…</div>}
                {!loading && items.length === 0 && <div className="muted" style={{padding:'20px 0',textAlign:'center',fontSize:12}}>Sin pedidos</div>}
                {!loading && items.map(it => {
                  const prod = productMetaForPedido(it);
                  return (
                    <button key={it.id} type="button" onClick={() => openPedido(it)}
                      style={{display:'flex',gap:10,padding:10,border:'1px solid var(--line)',borderRadius:6,background:'var(--bg-elev)',cursor:'pointer',textAlign:'left',width:'100%',fontFamily:'inherit',color:'inherit'}}>
                      <span className="prod" style={{width:32,height:32,flexShrink:0}}>{prod && <img src={prod.img} alt=""/>}</span>
                      <span style={{flex:1,minWidth:0}}>
                        <span style={{display:'flex',justifyContent:'space-between',alignItems:'baseline',gap:8}}>
                          <span className="mono" style={{fontSize:11,color:'var(--ink-3)'}}>{it.numero_compra || `#${it.id}`}</span>
                          <span className="mono" style={{fontSize:10.5,color:'var(--ink-4)',whiteSpace:'nowrap'}}>{stationCaption(col.key)}</span>
                        </span>
                        <span style={{display:'block',fontSize:12.5,fontWeight:600,whiteSpace:'nowrap',overflow:'hidden',textOverflow:'ellipsis'}}>{it.nombre_cliente || it.num_cliente || '—'}</span>
                        <span className="muted" style={{display:'block',fontSize:11,whiteSpace:'nowrap',overflow:'hidden',textOverflow:'ellipsis'}}>{it.productos_resumen || it.fecha_instalacion || 'Sin producto'}</span>
                      </span>
                    </button>
                  );
                })}
              </div>
            </div>
          );
        })}
      </div>
    </>
  );
};

window.ProduccionView = ProduccionView;