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

/* =============================================================
   Feed.jsx — Pinterest-style masonry of UGC + capsule filters
   ============================================================= */

const FILTERS = [
  { id: "all",   label: "همه",     dot: null },
  { id: "video", label: "ویدیو",   dot: "#ff4ea8" },
  { id: "image", label: "تصویر",   dot: "#ff8a3d" },
  { id: "audio", label: "صوت",     dot: "#44e3b8" },
  { id: "text",  label: "متن",     dot: "#7d6ad4" },
];

const POSTS = [
  { kind: "video", title: "چالش رقص محلی گیلان",       author: "نگار رستمی",    rating: 5, count: 2300, duration: "۲:۱۴", aspect: 0.75 },
  { kind: "text",  body:  "وقتی حرف می‌زنی، شهر گوش می‌ده.", author: "علی رحمانی",    rating: 4, count: 540,  gradient: "gold" },
  { kind: "image", title: "پنجره خانه مادربزرگ",         author: "مهسا کریمی",     rating: 5, count: 1820, color: "#ff4ea8", aspect: 1 },
  { kind: "audio", title: "پادکست: قصه‌های جاده چالوس",  author: "سعید نوری",     rating: 4, count: 412,  duration: "۸:۱۲" },
  { kind: "video", title: "صبحانه بندری",                author: "فاطمه دلیری",    rating: 5, count: 3120, duration: "۱:۰۴", aspect: 1.2 },
  { kind: "image", title: "هوش مصنوعی، خیال شیراز",       author: "رضا فلاحی",      rating: 4, count: 980,  color: "#9a6cff", aspect: 0.85 },
  { kind: "text",  body:  "از ترافیک شهر خسته‌ام، اما نه از مردمش.", author: "زهرا مرادی", rating: 5, count: 1240, gradient: "rose" },
  { kind: "image", title: "نقاشی دیجیتال از یزد",         author: "آرمان احمدی",   rating: 4, count: 720,  color: "#4be3ff", aspect: 1.3 },
  { kind: "audio", title: "صدامو می‌شنوی؟ — انتقادمو",   author: "محمد رضایی",    rating: 5, count: 622,  duration: "۳:۴۸" },
  { kind: "text",  body:  "یه روز که آفتاب پشت البرز قایم شد، فهمیدم.", author: "سارا حسینی",  rating: 4, count: 410, gradient: "violet" },
];

window.Feed = function Feed({ onOpenPost, signedIn, onLogin }) {
  const [filter, setFilter] = useState("all");
  const visible = filter === "all" ? POSTS : POSTS.filter(p => p.kind === filter);
  const open = (i) => onOpenPost?.(visible[i]);

  return (
    <div className="kd-feed-page">
      <header className="kd-feed-page__head">
        <h1 className="kd-feed-page__title">«چی آوردن برامون؟»</h1>
        <p className="kd-feed-page__sub">آخرین محتوای کاربران — به ۵ تای برتر امتیاز بده.</p>
      </header>

      <div className="kd-feed-page__filters" role="tablist">
        {FILTERS.map(f => (
          <Pill key={f.id}
            active={filter === f.id}
            dot={f.dot}
            onClick={() => setFilter(f.id)}
          >{f.label}</Pill>
        ))}
      </div>

      <div className="kd-masonry">
        {visible.map((p, i) => {
          const props = { ...p, dark: true, onClick: () => open(i) };
          let card = null;
          if (p.kind === "video") card = <VideoCard key={i} {...props} />;
          if (p.kind === "image") card = <ImageCard key={i} {...props} />;
          if (p.kind === "audio") card = <AudioCard key={i} {...props} />;
          if (p.kind === "text")  card = <TextCard  key={i} {...props} />;
          // Inject a native ad slot after every 4th card (Tapsell, P1-11)
          // Only logged-out users see ads — AdSlot returns null when signedIn.
          if (i > 0 && i % 4 === 0 && window.AdSlot && !signedIn) {
            return (
              <React.Fragment key={`f-${i}`}>
                <AdSlot variant="feed" zone={`zone_feed_${i}`} signedIn={signedIn} onLogin={onLogin} />
                {card}
              </React.Fragment>
            );
          }
          return card;
        })}
      </div>
    </div>
  );
};
})();