// Lista de solicitudes
function ListaSolicitudes() {
  const [rows,    setRows]    = React.useState([]);
  const [total,   setTotal]   = React.useState(0);
  const [page,    setPage]    = React.useState(1);
  const [loading, setLoading] = React.useState(true);
  const [estado,  setEstado]  = React.useState('');
  const [vendedor, setVendedor] = React.useState('');
  const [periodo,  setPeriodo]  = React.useState('');
  const [search,   setSearch]   = React.useState('');
  const [menuOpen, setMenuOpen] = React.useState(null);

  const u = DesasfAPI.getCurrentUser() || {};
  const canCreate = DesasfAPI.hasPerm('solicitudes.crear');
  const canPay    = DesasfAPI.hasPerm('pagos.cargar');
  const isCliente = u.rol === 'cliente';

  function fetchData(p = page, e = estado) {
    setLoading(true);
    const q = new URLSearchParams({ page: p, limit: 20, ...(e ? { estado: e } : {}) });
    DesasfAPI.get('/solicitudes?' + q.toString())
      .then(data => { setRows(data.rows); setTotal(data.total); setPage(data.page); })
      .catch(console.error)
      .finally(() => setLoading(false));
  }

  React.useEffect(() => { fetchData(1, estado); }, [estado]);

  const vendedores = Array.from(new Set(rows.map(r => r.vendedor_nombre).filter(Boolean)));

  const filteredRows = rows.filter(r => {
    if (vendedor && r.vendedor_nombre !== vendedor) return false;
    if (search && !`${r.ticket} ${r.oc_numero || ''} ${r.proyecto || ''} ${r.cliente_nombre} ${r.producto_nombre}`.toLowerCase().includes(search.toLowerCase())) return false;
    if (periodo) {
      const dias = { '7d': 7, '30d': 30, '90d': 90 }[periodo];
      if (dias) {
        const cut = Date.now() - dias * 86400000;
        if (new Date(r.created_at).getTime() < cut) return false;
      }
    }
    return true;
  });

  const rowsMapped = filteredRows.map(r => ({
    id:   r.ticket,
    cli:  r.cliente_nombre,
    tipo: r.producto_nombre,
    proy: r.proyecto || '',
    vol:  fmtNum(r.volumen) + ' ' + (r.unidad || 'm³'),
    oc:   r.oc_numero || '—',
    vend: r.vendedor_nombre || '—',
    st:   estadoToKind(r.estado),
    stl:  estadoLabel(r.estado),
    step: r.paso_actual,
    inicio: r.created_at ? new Date(r.created_at).toLocaleDateString('es-PE',{day:'2-digit',month:'short',year:'2-digit'}) : '—',
    eta:  r.eta ? new Date(r.eta).toLocaleDateString('es-PE',{day:'2-digit',month:'short',year:'2-digit'}) : '—',
    pago: r.pago_estado === 'pagado'         ? 'pagado'
        : r.pago_estado === 'confirmado'     ? 'pagado'
        : r.pago_estado === 'pagado_parcial' ? 'parcial'
        : r.pago_estado === 'por_validar'    ? 'verificacion'
        : r.pago_estado === 'rechazado'      ? 'rechazado'
        : 'impago',
    pagoTot: Number(r.pagado_total || 0),
    precio:  Number(r.precio_total || 0),
    _id:  r.id,
  }));

  const filtros = [
    { key: '',            label: 'Todas' },
    { key: 'recepcion',   label: 'Recepción' },
    { key: 'analisis',    label: 'Análisis lab.' },
    { key: 'diseno',      label: 'Diseño aprobado' },
    { key: 'produccion',  label: 'Producción' },
    { key: 'transito',    label: 'Tránsito' },
    { key: 'entregado',   label: 'Entregadas' },
  ];

  return (
    <div className="app">
      <AppSidebar active="solicitudes"/>
      <Topbar crumbs={['Operación', 'Solicitudes']}/>
      <main className="main">
        <div className="page-head">
          <div>
            <h1>Solicitudes</h1>
            <p>{total} {total === 1 ? 'solicitud' : 'solicitudes'} en total{loading ? ' · cargando…' : ''}</p>
          </div>
          <div className="row">
            <button className="btn btn--ghost" onClick={() => exportCSV(
              'solicitudes-' + new Date().toISOString().slice(0,10) + '.csv',
              filteredRows,
              [
                { label: 'Ticket',      value: 'ticket' },
                { label: 'OC',          value: r => r.oc_numero || '' },
                { label: 'Proyecto',    value: r => r.proyecto || '' },
                { label: 'Cliente',     value: 'cliente_nombre' },
                { label: 'Producto',    value: 'producto_nombre' },
                { label: 'Volumen',     value: r => fmtNum(r.volumen) + ' ' + (r.unidad || 'm³') },
                { label: 'Estado',      value: r => estadoLabel(r.estado) },
                { label: 'Pago',        value: r => r.pago_estado || 'sin pago' },
                { label: 'Asistente Técnico comercial', value: r => r.vendedor_nombre || '' },
                { label: 'Inicio',      value: r => r.created_at ? new Date(r.created_at).toLocaleDateString('es-PE') : '' },
                { label: 'Venc. crédito', value: r => r.eta ? new Date(r.eta).toLocaleDateString('es-PE') : '' },
                { label: 'Precio total', value: r => Number(r.precio_total || 0) },
              ]
            )}>{Icon.download}<span>Exportar</span></button>
            {canCreate && <button className="btn btn--accent" onClick={() => openModal('nueva-solicitud')}>{Icon.plus}<span>Nueva solicitud</span></button>}
          </div>
        </div>

        <div className="filterbar">
          {filtros.map(f => (
            <span key={f.key || 'todas'}
                  className={'chip' + (estado === f.key ? ' is-active' : '')}
                  style={{ cursor: 'pointer' }}
                  onClick={() => setEstado(f.key)}>
              {f.label}
            </span>
          ))}
          <div style={{ marginLeft: 'auto', display: 'flex', gap: 8, alignItems: 'center' }}>
            <input className="input" style={{ width: 200, height: 28, padding: '0 8px', fontSize: 12 }}
              placeholder="Buscar ticket, OC, proyecto o cliente…" value={search} onChange={e => setSearch(e.target.value)}/>
            <select className="input" style={{ height: 28, padding: '0 8px', fontSize: 12 }}
              value={vendedor} onChange={e => setVendedor(e.target.value)}>
              <option value="">Asistente Técnico comercial: todos</option>
              {vendedores.map(v => <option key={v} value={v}>{v}</option>)}
            </select>
            <select className="input" style={{ height: 28, padding: '0 8px', fontSize: 12 }}
              value={periodo} onChange={e => setPeriodo(e.target.value)}>
              <option value="">Periodo: todos</option>
              <option value="7d">Últimos 7 días</option>
              <option value="30d">Últimos 30 días</option>
              <option value="90d">Últimos 90 días</option>
            </select>
          </div>
        </div>

        <div className="card" style={{ borderRadius: '0 0 var(--r-2) var(--r-2)', borderTop: 0 }}>
          <table className="tbl">
            <thead>
              <tr>
                <th style={{ width: 32 }}><input type="checkbox" readOnly/></th>
                <th>Ticket / OC</th>
                <th>Proyecto / Cliente</th>
                <th>Tipo / diseño</th>
                <th style={{ textAlign: 'right' }}>Volumen</th>
                <th style={{ width: 220 }}>Avance</th>
                <th>Estado</th>
                <th>Pago</th>
                <th>Inicio</th>
                <th>Venc. crédito</th>
                <th>Asistente Técnico comercial</th>
                <th style={{ width: 32 }}></th>
              </tr>
            </thead>
            <tbody>
              {rowsMapped.map(r => (
                <tr key={r.id} style={{ cursor: 'pointer' }} onClick={() => {
                  window._desasfCurrentSolicitud = r._id;
                  navigate('solicitud-detalle');
                }}>
                  <td onClick={e => e.stopPropagation()}><input type="checkbox" readOnly/></td>
                  <td>
                    <div className="id" style={{ fontWeight: 600, color: 'var(--ink-1)' }}>{r.id}</div>
                    <div className="muted" style={{ fontSize: 11 }}>{r.oc}</div>
                  </td>
                  <td>
                    {r.proy
                      ? <>
                          <b>{r.proy}</b>
                          <div className="muted" style={{ fontSize: 11, marginTop: 2 }}>{r.cli}</div>
                        </>
                      : <b>{r.cli}</b>}
                  </td>
                  <td className="muted">{r.tipo}</td>
                  <td className="num" style={{ textAlign: 'right', fontWeight: 600 }}>{r.vol}</td>
                  <td>
                    <MiniSteps step={r.step}/>
                  </td>
                  <td><Pill kind={r.st}>{r.stl}</Pill></td>
                  <td>
                    {r.pago === 'pagado'       && <Pill kind="ok">Pagado</Pill>}
                    {r.pago === 'parcial'      && (
                      <div>
                        <Pill kind="review">Pago parcial</Pill>
                        {r.precio > 0 && (
                          <div className="muted" style={{ fontSize: 10, marginTop: 2 }}>
                            S/ {fmtNum(r.pagoTot, 2)} de {fmtNum(r.precio, 2)}
                          </div>
                        )}
                      </div>
                    )}
                    {r.pago === 'verificacion' && <Pill kind="review">Verificación</Pill>}
                    {r.pago === 'rechazado'    && <Pill kind="danger">Rechazado</Pill>}
                    {r.pago === 'impago'       && <Pill kind="pending">Impago</Pill>}
                  </td>
                  <td className="num">{r.inicio}</td>
                  <td className="num">{r.eta}</td>
                  <td className="muted">{r.vend}</td>
                  <td onClick={e => e.stopPropagation()} style={{ position: 'relative' }}>
                    <div className="icon-btn" onClick={() => setMenuOpen(menuOpen === r._id ? null : r._id)}>{Icon.more}</div>
                    {menuOpen === r._id && (
                      <div style={{ position: 'absolute', top: '100%', right: 0, zIndex: 200, background: 'var(--surface)', border: '1px solid var(--line)', borderRadius: 8, padding: '4px 0', minWidth: 200, boxShadow: '0 4px 16px rgba(0,0,0,.18)' }}>
                        <div className="menu-item" onClick={() => {
                          setMenuOpen(null);
                          window._desasfCurrentSolicitud = r._id;
                          navigate('solicitud-detalle');
                        }}>{Icon.doc}<span>Ver detalle</span></div>
                        {canPay && r.pago !== 'pagado' && (
                          <div className="menu-item" onClick={() => {
                            setMenuOpen(null);
                            openModal('subir-voucher', { solicitudId: r._id });
                          }}>{Icon.cash}<span>Cargar voucher / Pagar</span></div>
                        )}
                        {!isCliente && (
                          <div className="menu-item" onClick={() => {
                            setMenuOpen(null);
                            window._desasfCurrentCliente = rows.find(x => x.id === r._id)?.empresa_id;
                            navigate('clientes');
                          }}>{Icon.users}<span>Ver cliente</span></div>
                        )}
                        <div className="menu-item" onClick={() => {
                          setMenuOpen(null);
                          exportCSV(`solicitud-${r.id}.csv`, [rows.find(x => x.id === r._id)], [
                            { label: 'Ticket',   value: 'ticket' },
                            { label: 'Cliente',  value: 'cliente_nombre' },
                            { label: 'Producto', value: 'producto_nombre' },
                            { label: 'Volumen',  value: r => fmtNum(r.volumen) + ' ' + (r.unidad || 'm³') },
                            { label: 'Estado',   value: 'estado' },
                            { label: 'Asistente Técnico comercial', value: 'vendedor_nombre' },
                          ]);
                        }}>{Icon.download}<span>Exportar fila</span></div>
                      </div>
                    )}
                  </td>
                </tr>
              ))}
              {!loading && rowsMapped.length === 0 && (
                <tr><td colSpan={12} style={{ padding: 32, textAlign: 'center', color: 'var(--ink-5)' }}>
                  Sin solicitudes para el filtro seleccionado.
                </td></tr>
              )}
            </tbody>
          </table>
          {menuOpen && <div style={{ position: 'fixed', inset: 0, zIndex: 199 }} onClick={() => setMenuOpen(null)}/>}
          <div style={{ padding: '12px 16px', display: 'flex', alignItems: 'center', justifyContent: 'space-between', fontSize: 12, color: 'var(--ink-5)' }}>
            <span>Mostrando {rowsMapped.length} de {total} solicitudes</span>
            <div className="row">
              <span className="chip" style={{ cursor: page > 1 ? 'pointer' : 'not-allowed', opacity: page > 1 ? 1 : 0.5 }}
                    onClick={() => page > 1 && fetchData(page - 1, estado)}>‹ Anterior</span>
              <span className="chip is-active">{page}</span>
              <span className="chip" style={{ cursor: rowsMapped.length === 20 ? 'pointer' : 'not-allowed', opacity: rowsMapped.length === 20 ? 1 : 0.5 }}
                    onClick={() => rowsMapped.length === 20 && fetchData(page + 1, estado)}>Siguiente ›</span>
            </div>
          </div>
        </div>
      </main>
    </div>
  );
}

function MiniSteps({ step }) {
  const labels = ['Recep.', 'Diseño', 'Prod.', 'Tránsito', 'Entreg.'];
  return (
    <div style={{ display: 'flex', gap: 3 }}>
      {labels.map((l, i) => (
        <div key={l} title={l} style={{
          height: 6, flex: 1, borderRadius: 1,
          background: i < step ? 'var(--ink-0)' : i === step ? 'var(--hi-vis)' : 'var(--ink-8)'
        }}/>
      ))}
    </div>
  );
}

function estadoToKind(e) {
  return { recepcion:'pending', analisis:'transit', diseno:'review', produccion:'prod',
           transito:'transit', entregado:'ok', cancelado:'danger' }[e] || 'neutral';
}
function estadoLabel(e) {
  return { recepcion:'En recepción', analisis:'Análisis lab.', diseno:'Diseño aprobado', produccion:'En producción',
           transito:'En tránsito', entregado:'Entregado', cancelado:'Cancelado' }[e] || e;
}

window.ListaSolicitudes = ListaSolicitudes;
window.MiniSteps        = MiniSteps;
window.estadoToKind     = estadoToKind;
window.estadoLabel      = estadoLabel;