import React, { useState, useEffect, useMemo } from 'react';
import { Clock, ExternalLink } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { getStatusBadge } from '@/utils/statusHelpers.jsx';
import { supabase } from '@/lib/supabaseClient';

const CouponCard = ({ coupon, handleCouponClick }) => {
  const [logoUrl, setLogoUrl] = useState(null);
  const [imageError, setImageError] = useState(false);

  useEffect(() => {
    setImageError(false); 
    const imagePath = coupon?.logo;
    if (coupon && imagePath) {
      if (imagePath.startsWith('http') || imagePath.startsWith('data:')) {
        setLogoUrl(imagePath);
      } else {
        const { data } = supabase.storage.from('coupon_images').getPublicUrl(imagePath);
        setLogoUrl(data?.publicUrl || 'https://via.placeholder.com/128x96?text=Image+Not+Found');
      }
    } else {
      setLogoUrl('https://via.placeholder.com/128x96?text=No+Image');
    }
  }, [coupon?.logo, coupon?.id]);

  const ctaText = useMemo(() => coupon.action_type === 'Get Deal' ? 'View Promo' : (coupon.action_type || 'View Offer'), [coupon.action_type]);

  const formatDiscountForCard = (discountString, currency, discountType) => {
    if (!discountString) return { main: '', sub: '' };

    let mainText = discountString;
    let subText = '';

    const lowerDiscountString = discountString.toLowerCase();
    const lowerDiscountType = discountType ? discountType.toLowerCase() : '';

    if (lowerDiscountType.includes('percentage')) {
        mainText = discountString.replace(/%/g, '') + '%';
        subText = 'off';
    } else if (lowerDiscountType.includes('points')) {
        mainText = discountString.replace(/\s*points/i, '');
        subText = 'Points';
    } else if (lowerDiscountType.includes('fixed amount')) {
        mainText = discountString;
        if (currency) {
            subText = currency;
        } else {
            subText = 'off'; 
        }
    } else if (lowerDiscountString === 'free shipping' || lowerDiscountString === 'buy 1 get 1') {
        mainText = discountString;
        subText = '';
    }
    
    if (lowerDiscountType.includes('up to')) {
        mainText = mainText.replace(/up to\s*/i, '');
        if (subText) {
            subText = `up to ${subText}`;
        } else {
            subText = 'up to';
        }
    }
    
    if (currency && (lowerDiscountType.includes('fixed amount') || (lowerDiscountType === 'other' && /^\d/.test(mainText)))) {
        mainText = `${currency} ${mainText.replace(currency, '').trim()}`;
        subText = 'off';
         if (lowerDiscountType.includes('up to')) {
            mainText = mainText.replace(/up to\s*/i, '');
            subText = `up to ${currency}`;
        }
    }

    if (mainText.includes(subText) && subText !== 'off' && subText !== 'up to' && !subText.includes('Points')) {
        mainText = mainText.replace(subText, '').trim();
    }
    
    if (subText === 'Points' && mainText.toLowerCase().endsWith(' points')) {
        mainText = mainText.substring(0, mainText.toLowerCase().lastIndexOf(' points')).trim();
    }
    
    if (subText.toLowerCase().startsWith('up to') && mainText.toLowerCase().startsWith('up to')) {
        mainText = mainText.substring(5).trim();
    }

    if (currency && mainText.startsWith(currency)) {
        subText = currency;
        mainText = mainText.substring(currency.length).trim();
        if (lowerDiscountType.includes('up to')) {
             subText = `up to ${currency}`;
        }
    }

    return { main: mainText.trim(), sub: subText.trim() };
  };
  
  const { main: mainDiscount, sub: subDiscount } = useMemo(() => formatDiscountForCard(coupon.discount, coupon.currency, coupon.discount_type), [coupon.discount, coupon.currency, coupon.discount_type]);

  const placeholderSrc = 'data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22128%22%20height%3D%2296%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20128%2096%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_15f1a3c913a%20text%20%7B%20fill%3A%23AAAAAA%3Bfont-weight%3Abold%3Bfont-family%3AArial%2C%20Helvetica%2C%20Open%20Sans%2C%20sans-serif%2C%20monospace%3Bfont-size%3A10pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_15f1a3c913a%22%3E%3Crect%20width%3D%22128%22%20height%3D%2296%22%20fill%3D%22%23EEEEEE%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%2236.5%22%20y%3D%2252.8%22%3ENo%20Image%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E';

  return (
    <article
      className="coupon-card rounded-2xl p-3 sm:p-6 transition-all duration-300 hover:shadow-2xl flex flex-col"
      itemScope
      itemType="https://schema.org/Offer"
    >
      <div className="flex flex-col space-y-4 sm:flex-row sm:space-y-0 sm:items-stretch sm:justify-between sm:gap-6 flex-grow">
        <div className="flex flex-row space-x-3 sm:space-x-4 sm:flex-1 w-full sm:w-2/3">
          <div className="flex-shrink-0 w-20 h-16 sm:w-32 sm:h-24 rounded-lg sm:rounded-xl shadow-md sm:shadow-lg bg-gray-200 overflow-hidden self-start sm:self-center">
            <img 
              src={imageError ? placeholderSrc : (logoUrl || placeholderSrc)} 
              alt={`${coupon.brand || 'Brand'} logo`}
              className="w-full h-full object-cover"
              loading="lazy"
              width="128" 
              height="96"
              itemProp="image"
              onError={() => setImageError(true)}
              style={{aspectRatio: '128/96'}}
            />
          </div>
          
          <div className="flex-1 min-w-0 flex flex-col justify-between">
            <div>
              <h2 className="text-gray-800 truncate mb-0.5 sm:mb-1 md:mb-1.5" itemProp="brand">{coupon.brand}</h2>
              
              <h3 className="font-black text-gray-900 mb-1 sm:mb-1.5 md:mb-2 leading-tight line-clamp-3 sm:line-clamp-2" itemProp="name">
                {coupon.title}
              </h3>
            </div>
            
            <div className="flex flex-col gap-y-1 text-gray-500 mt-auto pt-1 sm:pt-0">
              {getStatusBadge(coupon.status, coupon.status_type, 'base', 'sm:text-xs')}
              <div className="flex items-center">
                <Clock className="mr-1" aria-hidden="true" />
                <span>Expires: <time itemProp="validThrough" dateTime={coupon.expiry_date}>{coupon.expiry_date || 'N/A'}</time></span>
              </div>
            </div>
          </div>
        </div>
        
        <div className="flex flex-col items-center justify-around sm:justify-center sm:items-end space-y-2 sm:space-y-3 md:space-y-4 w-full sm:w-auto sm:flex-shrink-0 text-center sm:text-right">
          {mainDiscount && (
            <div itemProp="offers" itemScope itemType="https://schema.org/Offer" className="w-full">
              <div className="flex items-baseline justify-center sm:justify-end">
                <span className="font-bold text-orange-600" itemProp="price">
                  {mainDiscount}
                </span>
                {subDiscount && (
                  <span className="font-medium text-gray-500 ml-0.5 sm:ml-1">
                    {subDiscount}
                  </span>
                )}
                <meta itemProp="priceCurrency" content={coupon.currency || "IDR"} />
              </div>
            </div>
          )}
          
          <Button
            onClick={() => handleCouponClick(coupon)}
            className="w-full max-w-[200px] sm:w-36 md:w-40 h-auto py-2 sm:h-10 md:h-12 bg-orange-500 hover:bg-orange-600 text-white transition-all duration-300 flex items-center justify-center space-x-1.5 sm:space-x-2 rounded-lg sm:rounded-xl shadow-md sm:shadow-lg hover:shadow-xl px-3 sm:px-4"
            aria-label={`${ctaText} untuk ${coupon.title}`}
          >
            <span>{ctaText}</span>
            {(coupon.action_type === 'Get Deal' || (coupon.action_type === 'See Coupon' && coupon.link && !coupon.code)) && 
              <ExternalLink className="h-5 w-5 sm:h-3.5 md:h-4 sm:w-3.5 md:w-4" aria-hidden="true" />
            }
          </Button>
        </div>
      </div>
    </article>
  );
};

export default React.memo(CouponCard);