"use client";

import React from 'react';
import { useShopifyCart } from '@/hooks/use-shopify-cart';
import { truncate } from '../lib/utils';
import { Card, CardContent } from './ui/card';
import { Button } from './ui/button';

interface ProductImage {
  url: string;
  altText?: string;
}

interface ProductPrice {
  amount: string;
  currencyCode: string;
}

interface ProductVariant {
  id: string;
  title: string;
  price: ProductPrice;
  availableForSale: boolean;
}

interface Product {
  id: string;
  title: string;
  description?: string;
  handle: string;
  images: {
    edges: Array<{
      node: ProductImage;
    }>;
  };
  priceRange: {
    minVariantPrice: ProductPrice;
  };
  compareAtPriceRange?: {
    minVariantPrice: ProductPrice;
  };
  variants: {
    edges: Array<{
      node: ProductVariant;
    }>;
  };
}

interface ProductCardProps {
  product: Product;
  onAddToCart?: (product: Product) => void;
  onClick?: (product: Product) => void;
}

const ProductCard: React.FC<ProductCardProps> = ({ product, onAddToCart, onClick }) => {
  const { addItem, openCart } = useShopifyCart();

  const firstImage = product.images.edges[0]?.node;
  const price = product.priceRange.minVariantPrice;
  const compareAtPrice = product.compareAtPriceRange?.minVariantPrice;
  const hasDiscount = compareAtPrice && parseFloat(compareAtPrice.amount) > parseFloat(price.amount);
  const firstVariant = product.variants.edges[0]?.node;
  const isAvailable = firstVariant?.availableForSale || false;

  const handleAddToCart = async (e: React.MouseEvent) => {
    e.preventDefault();
    e.stopPropagation();

    if (!firstVariant || !isAvailable) return;

    try {
      await addItem(firstVariant.id, 1);
      openCart();

      if (onAddToCart) {
        onAddToCart(product);
      }
    } catch (error) {
      console.error('Failed to add item to cart:', error);
    }
  };

  return (
    <Card className="!py-0 !gap-0 rounded-xs overflow-hidden hover:shadow-xl transition-shadow duration-300 group">
      {/* Product Image */}
      <div
        className="aspect-square overflow-hidden bg-gray-100 relative cursor-pointer"
        onClick={() => {
          if (onClick) {
            onClick(product);
          }
        }}
      >
        {firstImage ? (
          <img
            src={firstImage.url}
            alt={firstImage.altText || product.title}
            className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
          />
        ) : (
          <div className="w-full h-full flex items-center justify-center text-gray-400">
            <i className="ri-image-line text-6xl"></i>
          </div>
        )}

        {/* Discount Badge */}
        {hasDiscount && compareAtPrice && (
          <div className="absolute top-3 left-3 bg-red-500 text-white text-xs font-semibold px-2 py-1 rounded">
            {Math.round(((parseFloat(compareAtPrice.amount) - parseFloat(price.amount)) / parseFloat(compareAtPrice.amount)) * 100)}% OFF
          </div>
        )}
      </div>

      {/* Product Info */}
      <CardContent className="p-6">
        <h3 className="text-xl font-semibold text-gray-900 mb-2 font-heading">
          {truncate(product.title, 60)}
        </h3>

        {/* Price Section */}
        <div className="flex items-center justify-between mb-4">
          <div>
            <span className="text-sm font-bold text-muted-foreground">
              ${parseFloat(price.amount).toFixed(2)}
            </span>
          </div>
        </div>

        {/* View Details Button */}
        <Button
          onClick={(e) => {
            e.preventDefault();
            e.stopPropagation();
            if (onClick) {
              onClick(product);
            }
          }}
          className="w-full"
          size="lg"
        >
          View Details
        </Button>
      </CardContent>
    </Card>
  );
};

export default ProductCard;