import React from 'react';
import { Link } from 'react-router-dom';
import { ChevronRight, Package } from 'lucide-react';
import { __ } from '@/lib/i18n';
import { Checkbox } from '@/components/ui/checkbox';

const stockStatusStyle: Record<string, { bg: string; text: string }> = {
  instock: { bg: 'bg-emerald-100 dark:bg-emerald-900/30', text: 'text-emerald-800 dark:text-emerald-300' },
  outofstock: { bg: 'bg-rose-100 dark:bg-rose-900/30', text: 'text-rose-800 dark:text-rose-300' },
  onbackorder: { bg: 'bg-amber-100 dark:bg-amber-900/30', text: 'text-amber-800 dark:text-amber-300' },
};

const typeStyle: Record<string, string> = {
  simple: __('Simple'),
  variable: __('Variable'),
  grouped: __('Grouped'),
  external: __('External'),
};

interface ProductCardProps {
  product: any;
  selected?: boolean;
  onSelect?: (id: number) => void;
}

export function ProductCard({ product, selected, onSelect }: ProductCardProps) {
  const stockStatus = product.stock_status?.toLowerCase() || 'instock';
  const stockColors = stockStatusStyle[stockStatus] || stockStatusStyle.instock;
  
  return (
    <Link 
      to={`/products/${product.id}/edit`}
      className="block bg-card border border-border rounded-xl p-3 hover:bg-accent/50 transition-colors active:scale-[0.98] active:transition-transform shadow-sm"
    >
      <div className="flex items-center gap-3">
        {/* Checkbox */}
        {onSelect && (
          <div 
            onClick={(e) => {
              e.preventDefault();
              e.stopPropagation();
              onSelect(product.id);
            }}
          >
            <Checkbox
              checked={selected}
              aria-label={__('Select product')}
              className="w-5 h-5"
            />
          </div>
        )}

        {/* Product Image or Icon */}
        <div className="flex-shrink-0">
          {product.image_url ? (
            <img 
              src={product.image_url} 
              alt={product.name}
              className="w-16 h-16 object-cover rounded-lg border"
            />
          ) : (
            <div className="w-16 h-16 bg-muted rounded-lg border flex items-center justify-center">
              <Package className="w-8 h-8 text-muted-foreground" />
            </div>
          )}
        </div>

        {/* Content */}
        <div className="flex-1 min-w-0">
          {/* Product Name */}
          <h3 className="font-semibold text-base leading-tight mb-1 truncate">
            {product.name}
          </h3>

          {/* SKU & Type */}
          <div className="text-xs text-muted-foreground mb-2">
            {product.sku && (
              <span className="font-mono">{product.sku}</span>
            )}
            {product.sku && product.type && <span className="mx-1">·</span>}
            {product.type && (
              <span>{typeStyle[product.type] || product.type}</span>
            )}
          </div>

          {/* Price & Stock */}
          <div className="flex items-center gap-2">
            {/* Price */}
            <div 
              className="font-bold text-sm text-primary"
              dangerouslySetInnerHTML={{ __html: product.price_html || __('N/A') }}
            />
            
            {/* Stock Status Badge */}
            <span className={`inline-flex items-center px-2 py-0.5 rounded text-xs font-medium ${stockColors.bg} ${stockColors.text}`}>
              {product.stock_status === 'instock' && __('In Stock')}
              {product.stock_status === 'outofstock' && __('Out of Stock')}
              {product.stock_status === 'onbackorder' && __('On Backorder')}
              {product.manage_stock && product.stock_quantity !== null && (
                <span className="ml-1">({product.stock_quantity})</span>
              )}
            </span>
          </div>
        </div>

        {/* Chevron */}
        <ChevronRight className="w-5 h-5 text-muted-foreground flex-shrink-0" />
      </div>
    </Link>
  );
}
