// ProductCard.jsx — Oblak i Sunce UI Kit

const T = window.OBS_TOKENS;

function ProductCard(props) {
  const { name, brand, price, oldPrice, tag, bgColor = '#FBF7F1', img, onAddToCart, onQuickView } = props;
  const [hovered, setHovered] = React.useState(false);
  const [previewImg, setPreviewImg] = React.useState(null);

  // Lista želja — radi i kad je kartica umotana u <a> (preventDefault zaustavlja navigaciju)
  const [wishVersion, setWishVersion] = React.useState(0);
  const inWishlist = window.OBS_WISHLIST && props.id ? window.OBS_WISHLIST.has(props.id) : false;
  const toggleWishlist = (e) => {
    e.preventDefault();
    e.stopPropagation();
    if (!window.OBS_WISHLIST || !props.id) return;
    window.OBS_WISHLIST.toggle({
      productId: props.id,
      name, brand,
      price: rawPrice,
      image: displayImg,
    });
    setWishVersion(v => v + 1);
  };

  const P = window.OBS_PRODUCT;
  const hasVariants = P && props.variants && P.hasVariants(props);
  const dezens = hasVariants ? P.dezens(props) : [];
  const displayImg = previewImg || (hasVariants ? P.displayImage(props) : img);
  const rawPrice = hasVariants ? P.displayPrice(props) : price;
  const displayPrice = rawPrice == null ? null : (hasVariants ? rawPrice.toFixed(2) + '€' : rawPrice);

  const tagColors = {
    'Bestseller': { bg: '#C27B6B', color: 'white' },
    'Novo': { bg: '#D6EAF4', color: '#6BA3C7' },
    'Popularno': { bg: '#F5DDD1', color: '#D4918A' },
    'Sniženo': { bg: '#F5DDD1', color: '#D4918A' },
    'Premium': { bg: '#E3EDE0', color: '#7BA87B' },
    'Sezona': { bg: '#F0E6C8', color: '#D4A843' },
    'Trending': { bg: '#E3EDE0', color: '#7BA87B' },
  };
  const tc = tagColors[tag] || { bg: T.concretePale, color: T.textMid };

  // Boja kategorije iz jedinstvene mape (ista kao meni/hero) — hover glow, wash, traka.
  const cstyle = window.OBS_CAT_STYLE ? window.OBS_CAT_STYLE(props.cat) : { tint: '#F3EDE3', accent: T.terracotta };
  const Heart = ({ filled }) => (
    <svg width="17" height="17" viewBox="0 0 24 24" fill={filled ? 'currentColor' : 'none'} stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
      <path d="M12 21s-7.5-4.6-10-9C.4 9 1.6 5.3 5 4.4c2.1-.6 4 .4 5 2 1-1.6 2.9-2.6 5-2 3.4.9 4.6 4.6 3 7.6-2.5 4.4-10 9-10 9z"/>
    </svg>
  );

  return (
    <div
      onMouseEnter={() => setHovered(true)}
      onMouseLeave={() => setHovered(false)}
      style={{ position: 'relative', borderRadius: 20, overflow: 'hidden', cursor: 'pointer', background: 'white', border: `1px solid ${hovered ? cstyle.accent + '44' : 'rgba(0,0,0,0.04)'}`, transition: 'all 0.5s cubic-bezier(0.16,1,0.3,1)', transform: hovered ? 'translateY(-8px)' : 'none', boxShadow: hovered ? `0 28px 56px ${cstyle.accent}33, 0 8px 16px rgba(0,0,0,0.05)` : '0 2px 8px rgba(0,0,0,0.03)' }}
    >
      {/* Image area — pozadina prelazi u boju kategorije na hover (uparuje se sa menijem) */}
      <div style={{ height: 200, background: hovered ? cstyle.tint : bgColor, position: 'relative', display: 'flex', alignItems: 'center', justifyContent: 'center', overflow: 'hidden', transition: 'background 0.5s ease' }}>
        {displayImg
          ? <img src={displayImg} alt={name} style={{ width: '100%', height: '100%', objectFit: 'cover', transform: hovered ? 'scale(1.04)' : 'scale(1)', transition: 'transform 0.6s cubic-bezier(0.16,1,0.3,1)' }} />
          : <span style={{ fontFamily: "'Outfit', sans-serif", fontSize: 10, color: 'rgba(45,41,38,0.25)', letterSpacing: '0.05em' }}>product image</span>
        }
        {/* Wash u boji kategorije pri dnu — daje kontrast traci i topao brendiran ton na hover */}
        <div style={{ position: 'absolute', inset: 0, pointerEvents: 'none', background: `linear-gradient(to top, ${cstyle.accent}26, transparent 45%)`, opacity: hovered ? 1 : 0, transition: 'opacity 0.5s ease' }} />
        {/* Tag */}
        {tag && <span style={{ position: 'absolute', top: 12, left: 12, padding: '3px 10px', borderRadius: 20, fontSize: 10, fontWeight: 600, background: tc.bg, color: tc.color, zIndex: 2 }}>{tag}</span>}
        {/* Quick actions */}
        <div style={{ position: 'absolute', right: 12, top: 12, zIndex: 2, display: 'flex', flexDirection: 'column', gap: 7, opacity: hovered || inWishlist ? 1 : 0, transform: hovered || inWishlist ? 'translateX(0)' : 'translateX(10px)', transition: 'all 0.35s ease' }}>
          <button onClick={toggleWishlist} title={inWishlist ? 'Ukloni iz liste želja' : 'Dodaj u listu želja'}
            style={{ width: 34, height: 34, borderRadius: '50%', background: 'rgba(255,255,255,0.96)', backdropFilter: 'blur(8px)', border: 'none', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center', boxShadow: '0 2px 8px rgba(0,0,0,0.10)', transition: 'all 0.25s', color: inWishlist ? T.terracotta : T.textMid }}>
            <Heart filled={inWishlist} />
          </button>
        </div>
        {/* Add to cart bar — u boji kategorije */}
        <button onClick={hasVariants ? undefined : onAddToCart} style={{ position: 'absolute', bottom: 0, left: 0, right: 0, zIndex: 2, background: cstyle.accent, color: 'white', padding: 12, textAlign: 'center', fontFamily: "'Outfit', sans-serif", fontWeight: 600, fontSize: 11, letterSpacing: '0.1em', textTransform: 'uppercase', border: 'none', cursor: 'pointer', transform: hovered ? 'translateY(0)' : 'translateY(100%)', transition: 'transform 0.4s cubic-bezier(0.16,1,0.3,1)' }}>{hasVariants ? 'Izaberi opcije' : 'Dodaj u korpu'}</button>
      </div>

      {/* Info */}
      <div style={{ padding: '14px 16px 18px', background: 'white' }}>
        <div style={{ fontFamily: "'Outfit', sans-serif", fontSize: 10, fontWeight: 600, letterSpacing: '0.1em', textTransform: 'uppercase', color: T.textLight, marginBottom: 5 }}>{brand}</div>
        <div style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: 16, fontWeight: 600, color: T.textDark, lineHeight: 1.25, marginBottom: dezens.length > 1 ? 8 : 10 }}>{name}</div>
        {/* Dezen swatches — samo ako proizvod ima više od jednog dezena */}
        {dezens.length > 1 && (
          <div style={{ display: 'flex', gap: 6, marginBottom: 10 }}>
            {dezens.slice(0, 4).map((d, i) => (
              <div key={d.dezen} title={d.dezen}
                onMouseEnter={() => setPreviewImg(d.thumb)}
                onMouseLeave={() => setPreviewImg(null)}
                style={{ width: 20, height: 20, borderRadius: '50%', overflow: 'hidden', border: '1.5px solid rgba(45,41,38,0.12)', cursor: 'pointer', flexShrink: 0 }}>
                <img src={d.thumb} alt={d.dezen} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
              </div>
            ))}
            {dezens.length > 4 && (
              <span style={{ fontFamily: "'Outfit', sans-serif", fontSize: 10.5, color: T.textLight, alignSelf: 'center' }}>+{dezens.length - 4}</span>
            )}
          </div>
        )}
        <div style={{ display: 'flex', alignItems: 'baseline', gap: 7 }}>
          <span style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: displayPrice == null ? 12 : 19, fontWeight: displayPrice == null ? 500 : 700, color: displayPrice == null ? T.textLight : T.terracotta, fontStyle: displayPrice == null ? 'italic' : 'normal' }}>
            {displayPrice == null ? 'Cijena na upit' : (hasVariants ? `od ${displayPrice}` : displayPrice)}
          </span>
          {oldPrice && <span style={{ fontFamily: "'Outfit', sans-serif", fontSize: 11, color: T.textLight, textDecoration: 'line-through' }}>{oldPrice}</span>}
        </div>
      </div>
    </div>
  );
}

// Small button for collection cards that respects archColor on hover
function CollectionBtn({ archColor }) {
  const [h, setH] = React.useState(false);
  // Darken archColor slightly on hover by overlaying opacity
  return (
    <button
      onMouseEnter={() => setH(true)}
      onMouseLeave={() => setH(false)}
      style={{
        padding: '9px 24px', borderRadius: 60,
        background: archColor,
        color: 'white', border: 'none',
        fontFamily: "'Outfit', sans-serif",
        fontSize: 12, fontWeight: 600, cursor: 'pointer',
        letterSpacing: '0.05em',
        opacity: h ? 0.82 : 1,
        transform: h ? 'translateY(-2px)' : 'none',
        boxShadow: h ? `0 8px 20px rgba(0,0,0,0.15)` : 'none',
        transition: 'all 0.3s cubic-bezier(0.16,1,0.3,1)',
      }}>
      Istraži →
    </button>
  );
}

// Arch-shaped collection card
function CollectionCard({ name, desc, color, archColor, icon }) {
  const [hovered, setHovered] = React.useState(false);
  return (
    <div onMouseEnter={() => setHovered(true)} onMouseLeave={() => setHovered(false)}
      style={{ borderRadius: '120px 120px 16px 16px', background: color, padding: '48px 24px 40px', cursor: 'pointer', transition: 'all 0.5s cubic-bezier(0.16,1,0.3,1)', transform: hovered ? 'translateY(-8px) scale(1.02)' : 'none', boxShadow: hovered ? '0 24px 48px rgba(0,0,0,0.10)' : 'none', textAlign: 'center', minHeight: 300, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', position: 'relative', overflow: 'hidden' }}>
      {/* Pictogram */}
      <div style={{ marginBottom: 18, transform: hovered ? 'scale(1.12) translateY(-4px)' : 'scale(1)', transition: 'transform 0.4s cubic-bezier(0.16,1,0.3,1)' }}>
        {icon || <div style={{ width: 56, height: 56, borderRadius: '50%', background: archColor, opacity: 0.7 }} />}
      </div>
      <div style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: 21, fontWeight: 600, color: T.textDark, marginBottom: 6, transition: 'color 0.3s' }}>{name}</div>
      <div style={{ fontFamily: "'Outfit', sans-serif", fontSize: 12, color: T.textMid, marginBottom: 0 }}>{desc}</div>
      {/* Istraži button — appears on hover */}
      <div style={{ overflow: 'hidden', maxHeight: hovered ? 48 : 0, opacity: hovered ? 1 : 0, transition: 'all 0.4s cubic-bezier(0.16,1,0.3,1)', marginTop: hovered ? 20 : 0 }}>
        <CollectionBtn archColor={archColor} />
      </div>
    </div>
  );
}

// Brand pill
function BrandPill({ name, premium }) {
  const [hovered, setHovered] = React.useState(false);
  return (
    <span onMouseEnter={() => setHovered(true)} onMouseLeave={() => setHovered(false)}
      style={{ padding: '9px 20px', borderRadius: 40, border: `1px solid ${hovered ? T.terracotta : 'rgba(45,41,38,0.1)'}`, fontSize: 13, fontWeight: 500, cursor: 'pointer', transition: 'all 0.3s', whiteSpace: 'nowrap', background: hovered ? T.terracotta : 'white', color: hovered ? 'white' : T.textDark, transform: hovered ? 'translateY(-2px)' : 'none', boxShadow: hovered ? '0 4px 16px rgba(194,123,107,0.25)' : 'none', fontFamily: "'Outfit', sans-serif", display: 'inline-block' }}>
      {premium && <span style={{ marginRight: 3, fontSize: 9 }}>★</span>}{name}
    </span>
  );
}

Object.assign(window, { ProductCard, CollectionCard, BrandPill });