'use client';

import React, { useState } from 'react';
import Link from 'next/link';
import Image from 'next/image';
import { useCart } from '@/context/CartContext';
import { useSiteSettings } from '@/context/SiteSettingsContext';
import { useAuth } from '@/context/AuthContext';
import { ShoppingCart, Check } from 'lucide-react';

interface Product {
  id: number;
  name: string;
  slug: string;
  price: number;
  compare_at_price?: number;
  sale_price?: number;
  reseller_price?: number;
  image_url: string;
  category?: {
    name: string;
    slug: string;
  };
  is_best_selling?: boolean;
  quantity?: number;
}

interface ProductCardProps {
  product: Product;
  priority?: boolean;
}

export const ProductCard: React.FC<ProductCardProps> = ({ product, priority = false }) => {
  const { addToCart } = useCart();
  const { formatPrice } = useSiteSettings();
  const { user } = useAuth();
  const [success, setSuccess] = useState(false);

  // Add to cart — instant optimistic feedback, no await needed for UI
  const handleAddToCart = (e: React.MouseEvent) => {
    e.preventDefault();
    e.stopPropagation();
    if (success) return;

    // Show success state immediately (optimistic)
    setSuccess(true);
    setTimeout(() => setSuccess(false), 2000);

    // Fire and forget — CartContext handles the API + rollback if it fails
    addToCart(product.id, null, 1, false, product).catch((err) => {
      setSuccess(false);
      console.warn('Add to cart failed', err);
    });
  };

  // Price calculations
  // Admin panel: "Price" = current selling price, "Compare at price" = original/crossed-out price
  const price = Number(product.price);
  const comparePrice = product.compare_at_price ? Number(product.compare_at_price) : null;
  const discountPercent = comparePrice && comparePrice > price 
    ? Math.round(((comparePrice - price) / comparePrice) * 100)
    : 0;

  const isOutOfStock = product.quantity !== undefined && product.quantity <= 0;

  const resolvedImageUrl = !product.image_url
    ? '/images/placeholder.jpg'
    : product.image_url.startsWith('http') 
      ? product.image_url 
      : `${process.env.NEXT_PUBLIC_API_URL || 'http://localhost:8000'}${product.image_url.startsWith('/') ? '' : '/'}${product.image_url}`;

  return (
    <div className="group relative flex flex-col overflow-hidden rounded-xl border border-slate-200 bg-white">
      
      {/* Top Badges */}
      <div className="absolute top-0 right-0 z-10">
        {/* Discount Badge */}
        {discountPercent > 0 && (
          <span className="rounded-bl-lg bg-[#2ebd85] px-2.5 py-1 text-[11px] font-bold text-white shadow-xs">
            Save {discountPercent}%
          </span>
        )}
      </div>

      {product.is_best_selling && (
        <div className="absolute top-3 left-3 z-10 hidden md:block">
          <span className="rounded-md bg-[#ef4444] px-2.5 py-1 text-[10px] font-extrabold text-white shadow-sm uppercase tracking-wider flex items-center gap-1">
            ★ Best Selling
          </span>
        </div>
      )}

      {/* Image Container */}
      <Link href={`/products/${product.slug}`} className="relative block aspect-square w-full overflow-hidden bg-white p-2 flex items-center justify-center">
        <Image
          src={resolvedImageUrl}
          alt={product.name}
          fill
          sizes="(max-width: 640px) 50vw, (max-width: 1024px) 25vw, 20vw"
          priority={priority}
          className="object-contain p-2 transition-transform duration-500 ease-in-out group-hover:scale-110"
        />
      </Link>

      {/* Product Details */}
      <div className="flex flex-1 flex-col p-2">
        
        {/* Title */}
        <h3 className="text-[14px] md:text-[16px] font-medium font-open-sans text-slate-800 line-clamp-2 hover:text-secondary mb-1.5 text-left">
          <Link href={`/products/${product.slug}`}>
            {product.name}
          </Link>
        </h3>

        {/* Pricing */}
        <div className="flex flex-col gap-1 mb-2.5 text-left">
          <div className="flex items-center gap-2">
            <span className="text-[16px] font-semibold font-poppins text-secondary">
              {formatPrice(price)}
            </span>
            {comparePrice && comparePrice > price && (
              <span className="text-[12px] font-normal font-poppins text-slate-400 line-through">
                {formatPrice(comparePrice)}
              </span>
            )}
          </div>
          {user?.role === 'reseller' && product.reseller_price !== undefined && (
            <div className="text-xs bg-emerald-50 text-emerald-700 px-2 py-1 rounded-lg border border-emerald-100/80 font-medium font-open-sans">
              <div>Reseller Cost: <span className="font-medium font-open-sans text-xs">{formatPrice(product.reseller_price)}</span></div>
              <div className="text-xs text-emerald-600 mt-0.5">Reseller Profit: <span className="font-medium font-open-sans text-xs">{formatPrice(price - Number(product.reseller_price))}</span></div>
            </div>
          )}
        </div>

        {/* Action Button (Add To Cart or Stock Out) */}
        <div className="mt-auto">
          {isOutOfStock ? (
            <button
              type="button"
              className="w-full flex items-center justify-center py-1.5 sm:py-2 px-3 rounded-lg text-[12px] md:text-[14px] font-semibold font-open-sans border border-red-500 text-red-500 bg-white transition-all duration-300 hover:bg-red-600 hover:text-white cursor-pointer"
            >
              Stock Out
            </button>
          ) : (
            <button
              onClick={handleAddToCart}
              className={`w-full flex items-center justify-center gap-2 border font-semibold font-open-sans py-1.5 sm:py-2 px-3 rounded-lg text-[12px] md:text-[14px] active:scale-[0.97] cursor-pointer transition-all duration-200 ${
                success
                  ? 'border-emerald-500 bg-emerald-500 text-white'
                  : 'border-secondary text-secondary bg-white hover:bg-secondary hover:text-white'
              }`}
            >
              {success ? (
                <>
                  <Check className="h-4 w-4" />
                  <span>Added!</span>
                </>
              ) : (
                <>
                  <ShoppingCart className="h-4 w-4" />
                  <span>Add To Cart</span>
                </>
              )}
            </button>
          )}
        </div>

      </div>

    </div>
  );
};

// Helper to format prices
function numberWithCommas(x: number | null | undefined) {
  if (x === null || x === undefined || isNaN(Number(x))) {
    return '0';
  }
  return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}