import React from 'react';
import { Plus, Package } from 'lucide-react';
import { Card } from '../../ui/Card';
import { Button } from '../../ui/Button';
import { Badge } from '../../ui/Badge';
import { useTenantCurrency } from '../../../hooks/useTenantCurrency';

interface POSProductCardProps {
  id: string;
  name: string;
  price: number;
  category: string;
  stock: number;
  cartQuantity?: number;
  onAddToCart: () => void;
  onClick?: () => void;
}

/**
 * POSProductCard - Large, touch-friendly product card optimized for POS operations
 * Designed for 80cm+ viewing distance with clear visual hierarchy
 */
export const POSProductCard: React.FC<POSProductCardProps> = ({
  name,
  price,
  category,
  stock,
  cartQuantity = 0,
  onAddToCart,
  onClick,
}) => {
  const { currencySymbol } = useTenantCurrency();
  const remainingStock = stock - cartQuantity;
  const isOutOfStock = remainingStock <= 0;
  const isLowStock = remainingStock > 0 && remainingStock <= 5;

  // Stock status configuration
  const getStockConfig = () => {
    if (isOutOfStock) {
      return {
        color: 'var(--color-error)',
        bgColor: 'var(--color-error-light)',
        text: 'Sin Stock',
        icon: '🚫',
      };
    } else if (isLowStock) {
      return {
        color: 'var(--color-warning)',
        bgColor: 'var(--color-warning-light)',
        text: `${remainingStock} disponibles`,
        icon: '⚠️',
      };
    } else {
      return {
        color: 'var(--color-success)',
        bgColor: 'var(--color-success-light)',
        text: `${remainingStock} disponibles`,
        icon: '✓',
      };
    }
  };

  const stockConfig = getStockConfig();

  return (
    <Card
      className={`
        relative overflow-hidden transition-all duration-200 hover:shadow-xl
        ${isOutOfStock ? 'opacity-60' : 'hover:scale-[1.02]'}
        ${onClick ? 'cursor-pointer' : ''}
      `}
      onClick={onClick}
    >
      <div className="p-4 sm:p-6 space-y-3">
        {/* Product Image Placeholder with Category Icon */}
        <div
          className="w-full h-32 sm:h-40 rounded-xl flex items-center justify-center mb-3"
          style={{
            backgroundColor: 'var(--bg-tertiary)',
            border: '2px dashed var(--border-secondary)',
          }}
        >
          <Package className="w-12 h-12 sm:w-16 sm:h-16 text-[var(--text-tertiary)]" />
        </div>

        {/* Product Name */}
        <div className="space-y-1">
          <h3
            className="text-base sm:text-lg font-bold text-[var(--text-primary)] truncate"
            title={name}
          >
            {name}
          </h3>
          <p className="text-xs sm:text-sm text-[var(--text-secondary)] capitalize">
            {category}
          </p>
        </div>

        {/* Price - Large and prominent */}
        <div className="flex items-baseline gap-2">
          <span className="text-2xl sm:text-3xl font-bold text-[var(--color-primary)]">
            {currencySymbol}{price.toFixed(2)}
          </span>
          <span className="text-sm text-[var(--text-tertiary)]">c/u</span>
        </div>

        {/* Stock Status Badge */}
        <div
          className="inline-flex items-center gap-2 px-3 py-2 rounded-lg text-sm font-semibold"
          style={{
            backgroundColor: stockConfig.bgColor,
            color: stockConfig.color,
          }}
        >
          <span>{stockConfig.icon}</span>
          <span>{stockConfig.text}</span>
        </div>

        {/* In Cart Indicator */}
        {cartQuantity > 0 && (
          <div className="flex items-center gap-2 text-sm">
            <Badge variant="secondary" size="md">
              En carrito: {cartQuantity}
            </Badge>
          </div>
        )}

        {/* Add to Cart Button - Large and prominent */}
        <Button
          onClick={(e) => {
            e.stopPropagation();
            onAddToCart();
          }}
          disabled={isOutOfStock}
          variant="primary"
          size="lg"
          className="w-full mt-4 text-base sm:text-lg font-semibold py-3 sm:py-4"
        >
          <Plus className="w-5 h-5 sm:w-6 sm:h-6 mr-2" />
          {isOutOfStock ? 'Sin Stock' : 'Agregar'}
        </Button>
      </div>

      {/* Out of Stock Overlay */}
      {isOutOfStock && (
        <div className="absolute inset-0 bg-[var(--bg-primary)] bg-opacity-50 flex items-center justify-center pointer-events-none">
          <div className="bg-[var(--color-error)] text-white px-6 py-3 rounded-lg font-bold text-lg shadow-lg">
            AGOTADO
          </div>
        </div>
      )}
    </Card>
  );
};

export default POSProductCard;
