import React from 'react';
import { Product, ProductVariant } from './ProductDetail.tsx';
import { Button } from '../ui/button';
import {
  RiSubtractLine,
  RiAddLine,
  RiTruckLine,
  RiArrowGoBackLine,
  RiSecurePaymentLine,
  RiLoader4Line,
} from '@remixicon/react';

interface ProductDetailInfoProps {
  product: Product;
  selectedVariant: ProductVariant | null;
  selectedOptions: Record<string, string>;
  quantity: number;
  setQuantity: (quantity: number) => void;
  handleAddToCart: () => void;
  onOptionChange: (optionName: string, value: string) => void;
  isAddingToCart?: boolean;
}

const ProductDetailInfo: React.FC<ProductDetailInfoProps> = ({
  product,
  selectedVariant,
  selectedOptions,
  quantity,
  setQuantity,
  handleAddToCart,
  onOptionChange,
  isAddingToCart = false
}) => {
  const formatPrice = (price: { amount: string; currencyCode: string }) => {
    return new Intl.NumberFormat('en-US', {
      style: 'currency',
      currency: 'USD',
    }).format(parseFloat(price.amount));
  };

  const price = selectedVariant?.price || product.priceRange.minVariantPrice;
  const compareAtPrice = product.compareAtPriceRange?.minVariantPrice;
  const hasDiscount = compareAtPrice && parseFloat(compareAtPrice.amount) > parseFloat(price.amount);

  return (
    <div>
      <h1 className="text-4xl font-bold text-gray-900 mb-4 font-heading">
        {product.title}
      </h1>

      {/* Price */}
      <div className="flex items-center space-x-4 mb-6">
        <span className="text-2xl font-bold text-gray-900">
          {formatPrice(price)}
        </span>
        {hasDiscount && compareAtPrice && (
          <>
            <span className="text-xl text-gray-500 line-through">
              {formatPrice(compareAtPrice)}
            </span>
            <div className="bg-red-100 text-red-800 text-sm font-semibold px-3 py-1 rounded">
              {Math.round(((parseFloat(compareAtPrice.amount) - parseFloat(price.amount)) / parseFloat(compareAtPrice.amount)) * 100)}% OFF
            </div>
          </>
        )}
      </div>

      {/* Description */}
      {product.description && (
        <div className="text-gray-600 mb-8 text-lg leading-relaxed">
          {product.descriptionHtml ? (
            <div dangerouslySetInnerHTML={{ __html: product.descriptionHtml }} />
          ) : (
            <p>{product.description}</p>
          )}
        </div>
      )}

      {/* Product Options */}
      {product.options
        .filter(option => option.name !== 'Title')
        .map(option => (
          <div key={option.id} className="mb-6">
            <label className="block text-sm font-semibold text-gray-700 mb-2">
              {option.name}
            </label>
            <div className="flex flex-wrap gap-2">
              {option.values.map(value => (
                <Button
                  key={value}
                  onClick={() => onOptionChange(option.name, value)}
                  variant={selectedOptions[option.name] === value ? 'default' : 'outline'}
                >
                  {value}
                </Button>
              ))}
            </div>
          </div>
        ))}

      {/* Quantity Selector */}
      <div className="mb-8">
        <label className="block text-sm font-semibold text-gray-700 mb-2">
          Quantity
        </label>
        <div className="flex items-center border border-gray-300 rounded-lg w-32">
          <Button
            onClick={() => setQuantity(Math.max(1, quantity - 1))}
            variant="ghost"
            size="icon-sm"
            disabled={quantity <= 1}
          >
            <RiSubtractLine size={16} />
          </Button>
          <span className="flex-1 text-center font-semibold text-sm">{quantity}</span>
          <Button
            onClick={() => setQuantity(quantity + 1)}
            variant="ghost"
            size="icon-sm"
          >
            <RiAddLine size={16} />
          </Button>
        </div>
      </div>

      {/* Add to Cart Button */}
      <Button
        onClick={handleAddToCart}
        disabled={!selectedVariant?.availableForSale || isAddingToCart}
        size="lg"
        className="w-full py-4 text-lg"
      >
        {isAddingToCart ? (
          <span className="flex items-center justify-center gap-2">
            <RiLoader4Line className="animate-spin" />
            Adding...
          </span>
        ) : selectedVariant?.availableForSale ? (
          'Add to Cart'
        ) : (
          'Out of Stock'
        )}
      </Button>

      {/* Additional Info */}
      <div className="mt-8 pt-8 border-t border-gray-200">
        <div className="space-y-3 text-sm text-gray-600">
          <div className="flex items-center space-x-2">
            <RiTruckLine size={16} />
            <span>Free shipping on orders over $100</span>
          </div>
          <div className="flex items-center space-x-2">
            <RiArrowGoBackLine size={16} />
            <span>30-day return policy</span>
          </div>
          <div className="flex items-center space-x-2">
            <RiSecurePaymentLine size={16} />
            <span>Secure payment</span>
          </div>
        </div>
      </div>
    </div>
  );
};

export default ProductDetailInfo;