const ESTADO_LABEL = {
  ALMACEN: 'Almacén',
  RETIRADA: 'Retirada',
  PRODUCCION: 'Producción',
  TIENDA: 'Tienda',
  UNIDAD_VEHICULAR: 'Unidad vehicular',
  // Viajando por encomienda con una empresa de transporte, no en una unidad
  // nuestra. Sin esta etiqueta la pantalla mostraba el valor crudo de la base.
  EN_TRANSITO: 'En encomienda',
  INSTALADA_EN_LUZ: 'Instalada en luz',
  EXTRAVIADA: 'Extraviada',
  BAJA: 'Baja',
};

const ESTADO_CLASE = {
  ALMACEN: 'almacen',
  RETIRADA: 'retirada',
  PRODUCCION: 'produccion',
  TIENDA: 'tienda',
  UNIDAD_VEHICULAR: 'vehicular',
  EN_TRANSITO: 'transito',
  INSTALADA_EN_LUZ: 'produccion',
  EXTRAVIADA: 'extraviada',
  BAJA: 'baja',
};

function EstadoBadge({ estado }) {
  const cls = 'badge-estado badge-estado--' + (ESTADO_CLASE[estado] || String(estado || '').toLowerCase());
  return (
    <span className={cls}>
      <span className="dot" />
      {ESTADO_LABEL[estado] || estado}
    </span>
  );
}

function DevolucionBadge({ valor }) {
  if (valor === 'SI') return <span className="badge-estado badge-si"><span className="dot" style={{background:'var(--st-almacen)'}}/>Sí</span>;
  if (valor === 'PENDIENTE') return <span className="badge-estado badge-pendiente"><span className="dot" style={{background:'var(--st-retirada)'}}/>Pendiente</span>;
  return <span className="badge-estado badge-na"><span className="dot" style={{background:'var(--st-baja)'}}/>N/A</span>;
}

function MovimientoBadge({ tipo }) {
  if (!tipo) return <span className="text-muted">—</span>;
  const norm = String(tipo).toLowerCase().normalize('NFD').replace(/[\u0300-\u036f]/g, '');
  return <span className={`movement-badge movement-${norm}`}>{tipo}</span>;
}

function DevolucionHistorialBadge({ estado }) {
  if (!estado || estado === 'NA') return <span className="text-muted">—</span>;
  if (estado === 'PENDIENTE') {
    return <span className="badge-devolucion badge-devolucion--pendiente">Pendiente</span>;
  }
  if (estado === 'COMPLETADO' || estado === 'DEVOLVIO_NUEVA') {
    return <span className="badge-devolucion badge-devolucion--completado">Devuelta</span>;
  }
  if (estado === 'DEVOLVIO_USADA') {
    return <span className="badge-devolucion badge-devolucion--usada">Devolvió usada</span>;
  }
  return <span className="badge-devolucion badge-devolucion--completado">{estado}</span>;
}

// Badge con color para el campo Destino de los movimientos.
// El texto que llega desde el backend puede ser el nombre de una tienda,
// la placa de una unidad, "ALMACEN", "Almacén", o texto libre de encomienda.
function DestinoBadge({ valor }) {
  if (!valor) return <span className="text-muted">—</span>;
  const v = String(valor);
  const lower = v.toLowerCase();

  // Almacén / devolución interna
  if (lower === 'almacen' || lower === 'almacén') {
    return <span className="badge-estado badge-estado--almacen"><span className="dot" />{v === 'ALMACEN' ? 'Almacén' : v}</span>;
  }
  // Encomienda (texto típico del campo cuando el tipo es ENCOMIENDA)
  if (lower.includes('encomienda') || lower.includes('encom')) {
    return <span className="badge-estado badge-estado--transito"><span className="dot" />{v}</span>;
  }
  // Unidades vehiculares (placas suelen ser cortas y mayúsculas, ej. ABC-123)
  // El sistema guarda el texto de la placa; lo detectamos por patrón alfanumérico corto
  if (/^[A-Z0-9]{1,4}[-\s]?[A-Z0-9]{1,4}$/i.test(v.trim()) || lower.startsWith('unidad')) {
    return <span className="badge-estado badge-estado--vehicular"><span className="dot" />{v}</span>;
  }
  // Producción
  if (lower.includes('producc')) {
    return <span className="badge-estado badge-estado--produccion"><span className="dot" />{v}</span>;
  }
  // Tienda (caso por defecto cuando el texto parece nombre de tienda)
  return <span className="badge-estado badge-estado--tienda"><span className="dot" />{v}</span>;
}

