const ESTADO_DEVOLUCION_LABEL_HIST = {
  NA: 'N/A', PENDIENTE: 'Pendiente', DEVOLVIO_NUEVA: 'Devolvió nueva',
  DEVOLVIO_USADA: 'Devolvió usada', COMPLETADO: 'Completado',
};

function Movimientos({ params }) {
  const [tab, setTab] = React.useState('baterias'); // 'baterias' | 'luces'

  return (
    <div>
      <div className="movement-type-tabs">
        <button className={`movement-type-tab ${tab === 'baterias' ? 'active' : ''}`} onClick={() => setTab('baterias')}>
          <IconBattery size={15} style={{ verticalAlign: 'middle', marginRight: 6 }} /> Historial de Baterías
        </button>
        <button className={`movement-type-tab ${tab === 'luces' ? 'active' : ''}`} onClick={() => setTab('luces')}>
          <IconBulb size={15} style={{ verticalAlign: 'middle', marginRight: 6 }} /> Historial de Luces
        </button>
      </div>
      {tab === 'baterias' ? <HistorialTabla tipo="baterias" params={params} /> : <HistorialTabla tipo="luces" params={params} />}
    </div>
  );
}

function HistorialTabla({ tipo, params }) {
  const toast = useToast();
  const esLuz = tipo === 'luces';
  const base = esLuz ? '/movimientos-luces' : '/movimientos-baterias';

  const [codigo, setCodigo] = React.useState(params?.codigo || '');
  const [tipoMovimiento, setTipoMovimiento] = React.useState(params?.tipo_movimiento || '');
  const [numeroGuia, setNumeroGuia] = React.useState(params?.numero_guia || '');
  const [conGarantia, setConGarantia] = React.useState(params?.con_garantia || '');
  const [desde, setDesde] = React.useState('');
  const [hasta, setHasta] = React.useState('');
  const [offset, setOffset] = React.useState(0);
  const [data, setData] = React.useState({ data: [], total: 0 });
  const [loading, setLoading] = React.useState(true);
  const limit = 25;

  const filtros = {
    codigo: codigo || undefined,
    tipo_movimiento: tipoMovimiento || undefined,
    numero_guia: numeroGuia || undefined,
    con_garantia: conGarantia || undefined,
    desde: desde || undefined,
    hasta: hasta || undefined,
  };

  const cargar = React.useCallback(async () => {
    setLoading(true);
    try {
      const res = await Api.get(base, { ...filtros, limit, offset });
      setData(res);
    } catch (err) {
      toast.error(err.message);
    } finally {
      setLoading(false);
    }
  }, [base, codigo, tipoMovimiento, numeroGuia, conGarantia, desde, hasta, offset]);

  React.useEffect(() => { cargar(); }, [cargar]);
  React.useEffect(() => { setOffset(0); }, [codigo, tipoMovimiento, numeroGuia, conGarantia, desde, hasta]);

  const [modalRow, setModalRow] = React.useState(null);

  const exportar = (formato) => {
    const ext = formato === 'excel' ? 'xlsx' : formato;
    const nombre = `movimientos_${tipo}_${Date.now()}.${ext}`;
    Api.downloadFile(`${base}/exportar/${formato}`, filtros, nombre).catch((e) => toast.error(e.message));
  };

  return (
    <div className="panel">
      <div className="history-toolbar">
        <div className="filters-actions">
          <button
            className="btn btn-sm history-export-btn"
            onClick={() => exportar('csv')}
          >
            Exportar CSV
          </button>
          <button
            className="btn btn-sm history-export-btn"
            onClick={() => exportar('excel')}
          >
            Exportar Excel
          </button>
        </div>
      </div>

      <div className="filters-row">
        <div className="field"><label>Código</label><input value={codigo} onChange={(e) => setCodigo(e.target.value)} placeholder="Buscar código…" /></div>
        {!esLuz && <div className="field"><label>N° Guía</label><input value={numeroGuia} onChange={(e) => setNumeroGuia(e.target.value)} placeholder="Ej. G001…" /></div>}
        <div className="field">
          <label>Movimiento</label>
          <select value={tipoMovimiento} onChange={(e) => setTipoMovimiento(e.target.value)}>
            <option value="">Todos</option>
            <option value="Entrada">Entrada</option>
            <option value="Salida">Salida</option>
            <option value="Devolucion">Devolución</option>
          </select>
        </div>
        {!esLuz && (
          <div className="field filter-field--guarantee">
            <label>Garantía / Voltaje</label>
            <select value={conGarantia} onChange={(e) => setConGarantia(e.target.value)}>
              <option value="">Todos</option>
              <option value="pendientes_voltaje">⚡ Pendientes de Medición (Sin Voltaje)</option>
              <option value="candidatas_proveedor">🟡 Candidatas Proveedor (&lt;11V)</option>
              <option value="reutilizar_luces">🔵 Reutilizar en Luces (≥11V)</option>
              <option value="1">Con Garantía</option>
              <option value="0">Sin Garantía</option>
            </select>
          </div>
        )}
        <div className="field"><label>Desde</label><input type="date" value={desde} onChange={(e) => setDesde(e.target.value)} /></div>
        <div className="field"><label>Hasta</label><input type="date" value={hasta} onChange={(e) => setHasta(e.target.value)} /></div>
      </div>

      {loading ? <p className="text-muted">Cargando…</p> : (
        <>
          <DataTable
            columns={esLuz ? [
              { key: 'fecha', header: 'Fecha', render: (r) => (<span className="fecha-tabla">{r.fecha ? r.fecha.slice(0, 10) : ''}</span>) },
              { key: 'luz_codigo', header: 'Código', mono: true },
              { key: 'luz_modelo', header: 'Modelo', render: (r) => r.luz_modelo ? <span className="badge badge-secondary">{r.luz_modelo}</span> : <span className="text-muted">—</span> },
              { key: 'tipo_movimiento', header: 'Movimiento', render: (r) => <MovimientoBadge tipo={r.tipo_movimiento} /> },
              { key: 'origen', header: 'Origen' },
              { key: 'destino', header: 'Destino', render: (r) => <DestinoBadge valor={r.destino} /> },
              { key: 'empleado_entrega_nombre', header: 'Entrega' },
              { key: 'empleado_recibe_nombre', header: 'Recibe' },
              { key: 'estado_devolucion', header: 'Devolución', render: (r) => <DevolucionHistorialBadge estado={r.estado_devolucion} /> },
              { key: 'usuario_registro_nombre', header: 'Usuario' },
              { key: 'comentario', header: 'Comentario' },
            ] : [
              { key: 'fecha', header: 'Fecha', render: (r) => r.fecha ? r.fecha.slice(0, 10) : '' },
              { key: 'bateria_codigo', header: 'Código', mono: true },
              { key: 'tipo_movimiento', header: 'Movimiento', render: (r) => <MovimientoBadge tipo={r.tipo_movimiento} /> },
              { key: 'origen', header: 'Origen' },
              { key: 'proveedor_nombre', header: 'Proveedor', render: (r) => r.proveedor_nombre || <span className="text-muted">—</span> },
              { key: 'destino', header: 'Destino', render: (r) => <DestinoBadge valor={r.destino} /> },
              { key: 'empleado_entrega_nombre', header: 'Entrega' },
              { key: 'empleado_recibe_nombre', header: 'Recibe' },
              { key: 'estado_devolucion', header: 'Devolución', render: (r) => <DevolucionHistorialBadge estado={r.estado_devolucion} /> },
              { key: 'numero_guia', header: 'N° Guía', render: (r) => r.numero_guia ? <span className="badge badge-info" style={{ fontFamily: 'monospace' }}>{r.numero_guia}</span> : <span className="text-muted">—</span> },
              {
                key: 'con_garantia', header: 'Garantía / Voltaje', render: (r) => {
                  if (r.tipo_movimiento !== 'Devolucion' || !r.nombre_bateria_usada) return <span className="text-muted">—</span>;
                  if (!r.con_garantia) return <span className="badge badge-secondary">Sin Garantía</span>;
                  const v = r.voltaje;
                  if (v === null || v === undefined) {
                    return (
                      <button
                        className="badge badge-warning"
                        style={{ cursor: 'pointer', border: 'none', padding: '4px 8px', background: '#E5A100', color: '#fff', fontWeight: 'bold' }}
                        onClick={() => setModalRow(r)}
                        title="Clic para registrar medición de voltaje"
                      >
                        ⚡ Medir Voltaje (Sin medición)
                      </button>
                    );
                  }
                  return (
                    <button
                      className="badge"
                      style={{ cursor: 'pointer', border: 'none', padding: '4px 8px', background: v < 11 ? '#E5A100' : '#3E6E92', color: '#fff' }}
                      onClick={() => setModalRow(r)}
                      title="Clic para editar voltaje"
                    >
                      {v < 11 ? `🟡 ${v}V (<11V Prov.)` : `🔵 ${v}V (≥11V Luces)`} ✏️
                    </button>
                  );
                }
              },
              { key: 'nombre_bateria_usada', header: 'Batería usada', render: (r) => r.nombre_bateria_usada || <span className="text-muted">—</span> },
              { key: 'codigo_bateria_usada', header: 'Código batería usada', render: (r) => r.codigo_bateria_usada || <span className="text-muted">—</span> },
              { key: 'comentario', header: 'Comentario' },
            ]}
            rows={data.data}
            emptyTitle="Sin movimientos"
            emptyHint="Todavía no hay movimientos registrados con estos filtros."
          />
          <Pagination total={data.total} limit={limit} offset={offset} onChange={setOffset} />
        </>
      )}

      {modalRow && (
        <VoltajeModal
          row={modalRow}
          onClose={() => setModalRow(null)}
          onGuardado={cargar}
        />
      )}
    </div>
  );
}

function VoltajeModal({ row, onClose, onGuardado }) {
  const toast = useToast();
  const [voltajeInput, setVoltajeInput] = React.useState(row.voltaje !== null && row.voltaje !== undefined ? String(row.voltaje) : '');
  const [guardando, setGuardando] = React.useState(false);

  const guardar = async () => {
    const valTrim = voltajeInput.trim();
    const num = valTrim === '' ? null : Number(valTrim);
    if (valTrim !== '' && isNaN(num)) {
      toast.error('Ingresa una medición de voltaje válida (ej. 10.5)');
      return;
    }
    setGuardando(true);
    try {
      await Api.post(`/movimientos-baterias/${row.id}/voltaje`, { voltaje: num });
      toast.success('Medición de voltaje guardada correctamente');
      onGuardado();
      onClose();
    } catch (err) {
      toast.error(err.message);
    } finally {
      setGuardando(false);
    }
  };

  const numVoltaje = voltajeInput !== '' && !isNaN(Number(voltajeInput)) ? Number(voltajeInput) : null;

  return (
    <div className="modal-overlay modal-overlay--voltage" onMouseDown={(e) => e.target === e.currentTarget && onClose()}>
      <div className="modal-card modal-card--voltage" role="dialog" aria-modal="true" aria-labelledby="voltaje-title">
        <div className="modal-card__header modal-card__header--voltage">
          <div>
            <div className="voltage-modal__eyebrow">EVALUACIÓN DE GARANTÍA</div>
            <div id="voltaje-title" className="modal-card__title voltage-modal__title">
              Registrar / editar voltaje
            </div>
          </div>
          <button className="icon-btn" onClick={onClose} aria-label="Cerrar"><IconX size={16} /></button>
        </div>

        <div className="modal-card__body voltage-modal__body">
          <div className="voltage-modal__identity">
            <div className="voltage-modal__battery-icon"><IconBattery size={22} /></div>
            <div>
              <div className="voltage-modal__label">Batería usada que regresa</div>
              <div className="voltage-modal__model">{row.nombre_bateria_usada || 'Batería usada'}</div>
              <div className="voltage-modal__meta">Código referente: <span className="mono">{row.bateria_codigo}</span>{row.numero_guia ? <> · Guía: <span className="mono">{row.numero_guia}</span></> : null}</div>
            </div>
          </div>

          <div className="voltage-modal__rule">
            <div className="voltage-modal__rule-item"><strong>&lt; 11 V</strong><span>Cambio con proveedor</span></div>
            <div className="voltage-modal__rule-divider" />
            <div className="voltage-modal__rule-item"><strong>≥ 11 V</strong><span>Luces internas</span></div>
          </div>

          <div className="field voltage-modal__field">
            <label htmlFor="voltaje-input">Medición de voltaje</label>
            <div className="voltage-input-wrap">
              <input
                id="voltaje-input"
                type="number"
                inputMode="decimal"
                step="0.1"
                min="0"
                max="30"
                value={voltajeInput}
                onChange={(e) => setVoltajeInput(e.target.value)}
                placeholder="Ej. 10.5"
                autoFocus
                onKeyDown={(e) => { if (e.key === 'Enter') { e.preventDefault(); guardar(); } }}
              />
              <span>V</span>
            </div>
          </div>

          {numVoltaje !== null && (
            <div className={`voltage-result ${numVoltaje < 11 ? 'voltage-result--provider' : 'voltage-result--lights'}`}>
              <div className="voltage-result__icon">{numVoltaje < 11 ? <IconAlert size={18} /> : <IconCheck size={18} />}</div>
              <div>
                <strong>{numVoltaje < 11 ? 'Candidata a cambio con proveedor' : 'Reutilizar para luces internas'}</strong>
                <span>Medición registrada: <b>{numVoltaje} V</b></span>
              </div>
            </div>
          )}

          {voltajeInput.trim() === '' && (
            <div className="voltage-modal__hint"><IconInfo size={15} /> Ingresa la medición tomada con el multímetro para clasificar automáticamente la batería.</div>
          )}
        </div>

        <div className="modal-card__footer voltage-modal__footer">
          <button className="btn btn-ghost" onClick={onClose} disabled={guardando}>Cancelar</button>
          <button className="btn btn-primary voltage-modal__save" onClick={guardar} disabled={guardando || numVoltaje === null}>
            {guardando ? 'Guardando…' : 'Guardar medición'}
          </button>
        </div>
      </div>
    </div>
  );
}