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

/* =============================================================
   TagPage.jsx — /#صبحانه‌بندری   (P1-08)
   --------------------------------------------------------------
   Header with tag name + count + follow button, filter pills,
   then masonry of posts in that tag. Also exports a tiny
   TrendingTags widget used on BentoHome (P2-07).
   ============================================================= */

const fmtFa = (n) => String(n).replace(/\d/g, d => "۰۱۲۳۴۵۶۷۸۹"[d]);
const fmtCount = (n) => n >= 1000 ? fmtFa((n/1000).toFixed(1)) + " هزار" : fmtFa(n);

const SAMPLE_TAGS = [
  { tag: "صبحانه‌بندری",   count: 2840, delta: "+۲۴٪",  color: "#ff8a3d", desc: "صبحانه‌های گرم و رنگی جنوب کشور — از قطعی تا تخم‌کبوتر." },
  { tag: "رقص_محلی",        count: 1620, delta: "+۱۸٪",  color: "#ff4ea8", desc: "حرکت‌ها و موسیقی محلی — از گیلان تا بلوچستان." },
  { tag: "جاده_چالوس",     count: 980,  delta: "+۹٪",   color: "#4be3ff", desc: "جاده‌ای که نشد هیچ‌وقت تکراری بشه." },
  { tag: "خانه_مادربزرگ", count: 720,  delta: "+۱۲٪",  color: "#9a6cff", desc: "حیاط‌ها، باغچه‌ها، و آدمایی که بزرگ‌مون کردن." },
  { tag: "هوش_مصنوعی",     count: 1340, delta: "+۴۲٪",  color: "#44e3b8", desc: "آثاری که با هوش مصنوعی ساخته شدن." },
  { tag: "شعر_معاصر",       count: 540,  delta: "+۶٪",   color: "#f5d589", desc: "شعرها و دکلمه‌های نسل امروز." },
];

const POSTS_BY_TAG = {
  "صبحانه‌بندری": [
    { kind: "video", title: "صبحانه بندری",                author: "فاطمه دلیری", rating: 5, count: 3120, duration: "۱:۰۴", aspect: 1.2 },
    { kind: "image", title: "نون قطعی + پنیر لیقوان",    author: "مهسا کریمی",   rating: 5, count: 1820, color: "#ff8a3d", aspect: 1 },
    { kind: "text",  body: "تخم‌مرغ گوجه‌فرنگی، چایی، و یه گل لیلیپوت روی میز.", author: "علی رحمانی", rating: 4, count: 540, gradient: "gold" },
    { kind: "image", title: "خاگینه بلوچی",              author: "روزبه بهزاد", rating: 4, count: 720,  color: "#ff4ea8", aspect: 1.3 },
    { kind: "video", title: "نون و پنیر و گردو از تالش", author: "نگار رستمی",  rating: 5, count: 980, duration: "۰:۴۸", aspect: 0.85 },
    { kind: "image", title: "املت خوزستانی با گوجه",      author: "زهرا مرادی",   rating: 4, count: 410, color: "#44e3b8", aspect: 0.9 },
  ],
};

window.TagPage = function TagPage({ tag = "صبحانه‌بندری", onBack, onOpenPost }) {
  const [filter, setFilter] = useState("all");
  const [following, setFollowing] = useState(false);
  const meta = SAMPLE_TAGS.find(t => t.tag === tag) || SAMPLE_TAGS[0];
  const posts = POSTS_BY_TAG[meta.tag] || POSTS_BY_TAG["صبحانه‌بندری"];
  const visible = filter === "all" ? posts : posts.filter(p => p.kind === filter);

  return (
    <div className="kd-tag-page">
      <header className="kd-tag-head" style={{ ['--tag-color']: meta.color }}>
        <button className="kd-settings__back" onClick={onBack} aria-label="برگشت">
          <Icon name="back" size={20} stroke={2.2} />
        </button>

        <div className="kd-tag-head__main">
          <div className="kd-tag-head__row">
            <span className="kd-tag-head__hash">#</span>
            <h1 className="kd-tag-head__name">{meta.tag.replace(/_/g, " ")}</h1>
            <span className="kd-tag-head__delta">{meta.delta}</span>
          </div>
          <p className="kd-tag-head__desc">{meta.desc}</p>
          <p className="kd-tag-head__meta">
            <Icon name="trending" size={12} stroke={2} />
            {fmtCount(meta.count)} اثر · {fmtFa(meta.count > 1000 ? Math.floor(meta.count / 50) : 4)} نفر این هفته
          </p>
        </div>

        <button
          className={`kd-btn ${following ? "kd-user-follow--on" : "kd-btn--primary"} kd-btn--md kd-tag-head__follow`}
          onClick={() => setFollowing(f => !f)}>
          {following ? <React.Fragment><Icon name="check" size={14} stroke={2.4} /> دنبال می‌کنی</React.Fragment> : "دنبال کن"}
        </button>
      </header>

      <div className="kd-feed-page__filters" role="tablist">
        <Pill active={filter === "all"} onClick={() => setFilter("all")}>همه</Pill>
        <Pill active={filter === "video"} dot="#ff4ea8" onClick={() => setFilter("video")}>ویدیو</Pill>
        <Pill active={filter === "image"} dot="#ff8a3d" onClick={() => setFilter("image")}>تصویر</Pill>
        <Pill active={filter === "audio"} dot="#44e3b8" onClick={() => setFilter("audio")}>صوت</Pill>
        <Pill active={filter === "text"}  dot="#7d6ad4" onClick={() => setFilter("text")}>متن</Pill>
      </div>

      <div className="kd-masonry">
        {visible.map((p, i) => {
          const props = { ...p, dark: true, onClick: () => onOpenPost?.(p) };
          if (p.kind === "video") return <VideoCard key={i} {...props} />;
          if (p.kind === "image") return <ImageCard key={i} {...props} />;
          if (p.kind === "audio") return <AudioCard key={i} {...props} />;
          if (p.kind === "text")  return <TextCard  key={i} {...props} />;
          return null;
        })}
      </div>
    </div>
  );
};

/* =============================================================
   TrendingTags — compact widget for BentoHome (P2-07)
   ============================================================= */
window.TrendingTags = function TrendingTags({ onOpenTag }) {
  return (
    <div className="kd-trending">
      <header className="kd-trending__head">
        <h3>
          <Icon name="trending" size={14} stroke={2.2} />
          داغ‌های امروز
        </h3>
        <button className="kd-trending__all">همه</button>
      </header>
      <ul className="kd-trending__list">
        {SAMPLE_TAGS.slice(0, 6).map((t, i) => (
          <li key={t.tag}>
            <button onClick={() => onOpenTag?.(t.tag)} className="kd-trending__item" style={{ ['--c']: t.color }}>
              <span className="kd-trending__rank">{fmtFa(i + 1)}</span>
              <span className="kd-trending__mid">
                <strong>#{t.tag.replace(/_/g, " ")}</strong>
                <span className="kd-trending__count">{fmtCount(t.count)} اثر</span>
              </span>
              <span className="kd-trending__delta">{t.delta}</span>
            </button>
          </li>
        ))}
      </ul>
    </div>
  );
};
})();