/* global React */
(function(){
const { useState } = React;

/* =============================================================
   cards.jsx — UGC content cards
   ============================================================= */

const fmtFa = (n) => String(n).replace(/\d/g, d => "۰۱۲۳۴۵۶۷۸۹"[d]);

// Deterministic lorem placeholder image (stable per seed) — picsum.photos
function imgFor(seed, w = 600, h = 600) {
  const s = encodeURIComponent(String(seed || "kd").slice(0, 24));
  return `https://picsum.photos/seed/kd-${s}/${w}/${h}`;
}
window.kdImgFor = imgFor;

function CardChrome({ children, dark, accent, onClick }) {
  return (
    <article className={`kd-card ${dark ? "kd-card--dark" : ""} ${onClick ? "kd-card--clickable" : ""}`}
      onClick={onClick}
      style={accent ? { boxShadow: `0 0 18px ${accent}40, var(--shadow-1)` } : undefined}>
      {children}
    </article>
  );
}

function CardFooter({ author, type, rating, count, dark }) {
  return (
    <footer className="kd-card__foot">
      <div className="kd-card__author">
        <Avatar name={author} size={26} />
        <div>
          <div className="kd-card__name">{author}</div>
          <div className="kd-card__type">{type}</div>
        </div>
      </div>
      <div className="kd-card__rate">
        <StarRate value={rating} dark={dark} size={16} />
        <span className="kd-card__count">{fmtFa(count)}</span>
      </div>
    </footer>
  );
}

window.TextCard = function TextCard({ body, author, rating = 0, count = 0, gradient = "gold", dark, onClick }) {
  const grads = {
    gold:   "linear-gradient(135deg,#3a2c08,#f5d589 200%)",
    rose:   "linear-gradient(135deg,#ff4ea8,#ff8a3d)",
    mint:   "linear-gradient(135deg,#44e3b8,#4be3ff)",
    violet: "linear-gradient(135deg,#9a6cff,#ff4ea8)",
    sky:    "linear-gradient(135deg,#4be3ff,#9a6cff)",
  };
  const fg = "#fff";
  return (
    <CardChrome dark={dark} onClick={onClick}>
      <div className="kd-card__text" style={{ background: grads[gradient], color: fg }}>
        <p className="kd-card__quote">«{body}»</p>
      </div>
      <CardFooter author={author} type="انتقادمو" rating={rating} count={count} dark={dark} />
    </CardChrome>
  );
};

window.ImageCard = function ImageCard({ title, author, rating = 0, count = 0, color = "#7d6ad4", aspect = 1, dark, onClick }) {
  return (
    <CardChrome dark={dark} onClick={onClick}>
      <div className="kd-card__media" style={{ aspectRatio: aspect, background: `linear-gradient(135deg, ${color}cc, ${color}55)` }}>
        <img className="kd-card__img" src={imgFor(title, 600, Math.round(600 / aspect))} alt={title} loading="lazy" />
        <span className="kd-card__chip"><Icon name="image" size={11} stroke={2} /> تصویر</span>
      </div>
      <div className="kd-card__body">
        <h4 className="kd-card__title">{title}</h4>
      </div>
      <CardFooter author={author} type="تصویر" rating={rating} count={count} dark={dark} />
    </CardChrome>
  );
};

window.VideoCard = function VideoCard({ title, author, rating = 0, count = 0, duration = "۲:۱۴", aspect = 1.4, dark, onClick }) {
  const [hover, setHover] = useState(false);
  return (
    <CardChrome dark={dark} onClick={onClick}>
      <div className="kd-card__media kd-card__media--video"
        style={{ aspectRatio: aspect }}
        onMouseEnter={() => setHover(true)}
        onMouseLeave={() => setHover(false)}>
        <img className="kd-card__img" src={imgFor("v" + title, 600, Math.round(600 / aspect))} alt={title} loading="lazy" />
        <div className="kd-card__videogradient" />
        <span className="kd-card__chip kd-card__chip--rose"><Icon name="video" size={11} stroke={2} /> ویدیو</span>
        <span className="kd-card__playbtn" aria-label="پخش">▶</span>
        <span className="kd-card__duration">{duration}</span>
        {hover && <span className="kd-card__sound">🔊 صدا</span>}
      </div>
      <div className="kd-card__body">
        <h4 className="kd-card__title">{title}</h4>
      </div>
      <CardFooter author={author} type="ویدیو" rating={rating} count={count} dark={dark} />
    </CardChrome>
  );
};

window.AudioCard = function AudioCard({ title, author, rating = 0, count = 0, duration = "۸:۱۲", dark, onClick }) {
  return (
    <CardChrome dark={dark} onClick={onClick}>
      <div className="kd-card__audio">
        <span className="kd-card__chip kd-card__chip--mint"><Icon name="audio" size={11} stroke={2} /> پادکست</span>
        <div className="kd-card__waveform">
          {Array.from({ length: 36 }).map((_, i) => (
            <span key={i} style={{ height: `${20 + Math.abs(Math.sin(i * 0.7)) * 80}%` }} />
          ))}
        </div>
        <div className="kd-card__audiometa">
          <button className="kd-card__playmini">▶</button>
          <span>{duration}</span>
        </div>
      </div>
      <div className="kd-card__body">
        <h4 className="kd-card__title">{title}</h4>
      </div>
      <CardFooter author={author} type="صوت" rating={rating} count={count} dark={dark} />
    </CardChrome>
  );
};
})();