import React from 'react';
import './ProductResults.css';

const categoryLabels = {
  otc: 'Sin Receta',
  baby_food: 'Alimentación Infantil',
  baby_milk: 'Leche de Fórmula',
  baby_cereal: 'Cereales Bebé'
};

const sourceColors = {
  cima: '#2563eb',
  openfoodfacts: '#16a34a'
};

const sourceLabels = {
  cima: 'CIMA',
  openfoodfacts: 'Open Food Facts'
};

function ProductResults({ products, onSelect }) {
  if (!products || products.length === 0) {
    return (
      <div className="no-results">
        <p>No se encontraron productos</p>
      </div>
    );
  }

  return (
    <div className="product-results">
      {products.map((product) => (
        <ProductCard
          key={product.id}
          product={product}
          onSelect={onSelect}
        />
      ))}
    </div>
  );
}

function ProductCard({ product, onSelect }) {
  const nutriScore = product.nutriscore;
  const nutriScoreColors = {
    a: '#16a34a',
    b: '#65a30d',
    c: '#eab308',
    d: '#f97316',
    e: '#dc2626'
  };

  return (
    <div className="product-card" onClick={() => onSelect(product)}>
      <div className="product-card-image">
        {product.image_url ? (
          <img src={product.image_url} alt={product.name} loading="lazy" />
        ) : (
          <div className="product-image-placeholder">
            <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
              <rect x="3" y="3" width="18" height="18" rx="2" ry="2" />
              <circle cx="8.5" cy="8.5" r="1.5" />
              <polyline points="21 15 16 10 5 21" />
            </svg>
          </div>
        )}
      </div>

      <div className="product-card-content">
        <div className="product-card-badges">
          <span
            className="source-badge"
            style={{ backgroundColor: sourceColors[product.source] }}
          >
            {sourceLabels[product.source]}
          </span>
          <span className="category-badge">
            {categoryLabels[product.category] || product.category}
          </span>
          {product.source === 'openfoodfacts' && nutriScore && (
            <span
              className="nutri-score-badge"
              style={{ backgroundColor: nutriScoreColors[nutriScore.toLowerCase()] || '#9ca3af' }}
            >
              Nutri-Score {nutriScore.toUpperCase()}
            </span>
          )}
        </div>

        <div className="product-card-header">
          <h3>{product.name}</h3>
        </div>

        <div className="product-card-body">
          {product.brand && (
            <p><strong>Marca:</strong> {product.brand}</p>
          )}
          {product.source === 'cima' && product.active_ingredient && (
            <p><strong>Principio Activo:</strong> {product.active_ingredient}</p>
          )}
          {product.source === 'cima' && product.dosage && (
            <p><strong>Dosis:</strong> {product.dosage}</p>
          )}
        </div>

        <div className="product-card-footer">
          <span className="view-details">Ver detalles →</span>
        </div>
      </div>
    </div>
  );
}

export default ProductResults;