function Luces() {
  const toast = useToast();
  const [texto, setTexto] = React.useState('');
  const [estado, setEstado] = React.useState('');
  const [offset, setOffset] = React.useState(0);
  const [data, setData] = React.useState({ data: [], total: 0 });
  const [loading, setLoading] = React.useState(true);
  const [modalCodigo, setModalCodigo] = React.useState(null);
  const limit = 20;

  const cargar = React.useCallback(async () => {
    setLoading(true);
    try {
      const res = await Api.get('/luces', { texto: texto || undefined, estado: estado || undefined, limit, offset });
      setData(res);
    } catch (err) {
      toast.error(err.message);
    } finally {
      setLoading(false);
    }
  }, [texto, estado, offset]);

  React.useEffect(() => { cargar(); }, [cargar]);
  React.useEffect(() => { setOffset(0); }, [texto, estado]);

  return (
    <div>
      <div className="panel">
        <div style={{ marginBottom: 12 }}>
          <div className="filters-row" style={{ marginBottom: 0 }}>
            <div className="field">
              <label>Buscar por código</label>
              <input value={texto} onChange={(e) => setTexto(e.target.value)} placeholder="LE-0001…" />
            </div>
            <div className="field">
              <label>Estado</label>
              <select value={estado} onChange={(e) => setEstado(e.target.value)}>
                <option value="">Todos</option>
                <option value="ALMACEN">Almacén</option>
                <option value="RETIRADA">Retirada</option>
                <option value="PRODUCCION">Producción</option>
                <option value="TIENDA">Tienda</option>
                <option value="UNIDAD_VEHICULAR">Unidad vehicular</option>
                <option value="EN_TRANSITO">En encomienda</option>
                <option value="EXTRAVIADA">Extraviada</option>
                <option value="BAJA">Baja</option>
              </select>
            </div>
          </div>
        </div>

        {loading ? <p className="text-muted">Cargando…</p> : (
          <>
            <p className="text-muted" style={{ fontSize: 12.5, marginBottom: 6 }}>Doble clic sobre una fila para ver el detalle.</p>
            <DataTable
              columns={[
                { key: 'codigo', header: 'Código', mono: true },
                { key: 'modelo', header: 'Tipo de luz', render: (r) => r.modelo || '—' },
                { key: 'tipo_enchufe', header: 'Enchufe', render: (r) => r.tipo_enchufe || '—' },
                { key: 'estado_actual', header: 'Estado', render: (r) => <EstadoBadge estado={r.estado_actual} /> },
                { key: 'ubicacion_actual', header: 'Ubicación' },
                { key: 'bateria_asignada_codigo', header: 'Batería instalada', render: (r) => r.bateria_asignada_codigo ? <span className="mono">{r.bateria_asignada_codigo}</span> : <span className="text-muted">Sin batería</span> },
                { key: 'acciones', header: '', render: (r) => (
                  <button className="btn btn-ghost btn-sm" onClick={() => setModalCodigo(r.codigo)}>Ver detalle</button>
                ) },
              ]}
              rows={data.data}
              onRowDoubleClick={(r) => setModalCodigo(r.codigo)}
              emptyTitle="No hay luces registradas"
              emptyHint="Las luces se crean automáticamente al registrar la asignación Luz ↔ Batería desde Producción."
            />
            <Pagination total={data.total} limit={limit} offset={offset} onChange={setOffset} />
          </>
        )}
      </div>

      {modalCodigo && <LuzModal codigo={modalCodigo} onClose={() => setModalCodigo(null)} onCambiado={cargar} />}
    </div>
  );
}

function LuzModal({ codigo, onClose, onCambiado }) {
  const toast = useToast();
  const [data, setData] = React.useState(null);
  const [tab, setTab] = React.useState('general');
  const [cambiandoBateria, setCambiandoBateria] = React.useState(false);
  const [nuevaBateria, setNuevaBateria] = React.useState('');
  const [motivo, setMotivo] = React.useState('');
  const [guardando, setGuardando] = React.useState(false);

  const cargar = React.useCallback(() => {
    Api.get(`/luces/codigo/${encodeURIComponent(codigo)}/historial`).then((r) => setData(r.data)).catch((e) => toast.error(e.message));
  }, [codigo]);

  React.useEffect(() => { cargar(); }, [cargar]);

  const confirmarCambioBateria = async () => {
    if (!nuevaBateria.trim()) { toast.error('Escribe el código de la nueva batería'); return; }
    setGuardando(true);
    try {
      await Api.post(`/luces/${data.luz.id}/cambiar-bateria`, { codigo_bateria: nuevaBateria.trim(), motivo: motivo || undefined });
      toast.success('Batería actualizada');
      setCambiandoBateria(false);
      setNuevaBateria('');
      setMotivo('');
      cargar();
      onCambiado && onCambiado();
    } catch (err) {
      toast.error(err.message);
    } finally {
      setGuardando(false);
    }
  };

  if (!data) {
    return (
      <div className="modal-overlay" onMouseDown={(e) => e.target === e.currentTarget && onClose()}>
        <div className="modal-card modal-card--lg"><div className="modal-card__body"><p className="text-muted">Cargando…</p></div></div>
      </div>
    );
  }

  const l = data.luz;

  return (
    <div className="modal-overlay" onMouseDown={(e) => e.target === e.currentTarget && onClose()}>
      <div className="modal-card modal-card--lg">
        <div className="modal-card__header">
          <div className="modal-card__title">{l.codigo}</div>
          <button className="icon-btn" onClick={onClose}><IconX size={16} /></button>
        </div>
        <div className="modal-card__body" style={{ maxHeight: '68vh', overflowY: 'auto' }}>
          <div className="modal-tabs">
            <button className={`modal-tab ${tab === 'general' ? 'active' : ''}`} onClick={() => setTab('general')}>General</button>
            <button className={`modal-tab ${tab === 'historial' ? 'active' : ''}`} onClick={() => setTab('historial')}>Historial ({data.movimientos.length + data.asignaciones.length})</button>
          </div>

          {tab === 'general' && (
            <div className="stack-y">
              <div>
                <div className="text-muted" style={{ fontSize: 11, textTransform: 'uppercase', marginBottom: 8 }}>Información general</div>
                <dl className="info-grid">
                  <div><dt>Código</dt><dd className="mono">{l.codigo}</dd></div>
                  <div><dt>Tipo de luz</dt><dd>{l.modelo || '—'}</dd></div>
                  <div><dt>Enchufe</dt><dd>{l.tipo_enchufe || '—'}</dd></div>
                  <div><dt>Estado</dt><dd><EstadoBadge estado={l.estado_actual} /></dd></div>
                </dl>
              </div>
              <div>
                <div className="text-muted" style={{ fontSize: 11, textTransform: 'uppercase', margin: '14px 0 8px' }}>Ubicación</div>
                <dl className="info-grid">
                  <div><dt>Ubicación actual</dt><dd>{l.ubicacion_actual}</dd></div>
                  <div><dt>Último cambio de batería</dt><dd>{l.ultimo_cambio_bateria ? l.ultimo_cambio_bateria.slice(0, 10) : 'Nunca'}</dd></div>
                </dl>
              </div>
              <div>
                <div className="text-muted" style={{ fontSize: 11, textTransform: 'uppercase', margin: '14px 0 8px' }}>Batería instalada</div>
                {l.bateria_asignada_codigo ? (
                  <div className="flex-between" style={{ background: 'var(--bg-surface-2)', padding: '10px 14px', borderRadius: 'var(--radius-sm)' }}>
                    <span className="mono" style={{ fontWeight: 700 }}>{l.bateria_asignada_codigo}</span>
                    <button className="btn btn-ghost btn-sm" onClick={() => setCambiandoBateria(true)}>Cambiar batería</button>
                  </div>
                ) : (
                  <div className="flex-between" style={{ background: 'var(--bg-surface-2)', padding: '10px 14px', borderRadius: 'var(--radius-sm)' }}>
                    <span className="text-muted">Sin batería asignada</span>
                    <button className="btn btn-ghost btn-sm" onClick={() => setCambiandoBateria(true)}>Asignar batería</button>
                  </div>
                )}

                {cambiandoBateria && (
                  <div className="panel" style={{ marginTop: 10, background: 'var(--hazard-soft)' }}>
                    <div className="field"><label>Código de la nueva batería</label><input value={nuevaBateria} onChange={(e) => setNuevaBateria(e.target.value)} autoFocus /></div>
                    <div className="field"><label>Motivo</label><input value={motivo} onChange={(e) => setMotivo(e.target.value)} placeholder="Ej. Batería agotada" /></div>
                    <div style={{ display: 'flex', gap: 8, marginTop: 8 }}>
                      <button className="btn btn-primary btn-sm" disabled={guardando} onClick={confirmarCambioBateria}>{guardando ? 'Guardando…' : 'Confirmar'}</button>
                      <button className="btn btn-ghost btn-sm" onClick={() => setCambiandoBateria(false)}>Cancelar</button>
                    </div>
                  </div>
                )}
              </div>
            </div>
          )}

          {tab === 'historial' && (
            <div className="stack-y">
              <div>
                <div className="text-muted" style={{ fontSize: 11, textTransform: 'uppercase', marginBottom: 8 }}>Movimientos</div>
                <DataTable
                  columns={[
                    { key: 'fecha', header: 'Fecha', render: (r) => r.fecha ? r.fecha.slice(0, 10) : '' },
                    { key: 'tipo_movimiento', header: 'Mov.' },
                    { key: 'origen', header: 'Origen' },
                    { key: 'destino', header: 'Destino' },
                    { key: 'comentario', header: 'Comentario' },
                  ]}
                  rows={data.movimientos}
                  emptyTitle="Sin movimientos" emptyHint="Esta luz no tiene movimientos registrados."
                />
              </div>
              <div>
                <div className="text-muted" style={{ fontSize: 11, textTransform: 'uppercase', margin: '16px 0 8px' }}>Asignaciones / cambios de batería</div>
                <DataTable
                  columns={[
                    { key: 'creado_en', header: 'Fecha', render: (r) => r.creado_en ? r.creado_en.slice(0, 10) : '' },
                    { key: 'bateria_codigo', header: 'Batería', mono: true },
                    { key: 'anulado', header: 'Vigente', render: (r) => r.anulado ? <span className="text-muted">Reemplazada</span> : <span style={{ color: 'var(--st-almacen)', fontWeight: 700 }}>Vigente</span> },
                    { key: 'comentario', header: 'Motivo' },
                  ]}
                  rows={data.asignaciones}
                  emptyTitle="Sin asignaciones" emptyHint="Esta luz nunca tuvo una batería asignada."
                />
              </div>
            </div>
          )}
        </div>
        <div className="modal-card__footer">
          <button className="btn btn-ghost" onClick={onClose}>Cerrar</button>
        </div>
      </div>
    </div>
  );
}