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

/* =============================================================
   StreamView.jsx — personal mixed feed
   Sources: Koshvardoust posts (followed users) + external
   channel posts (approved subscriptions). Single chronological
   list with source-attribution chips and "Manage stream" CTA.
   ============================================================= */

const fmtFa = (n) => String(n).replace(/\d/g, d => "۰۱۲۳۴۵۶۷۸۹"[d]);
const fmtCount = (n) => {
  if (n < 1000) return fmtFa(n);
  if (n < 1000000) return fmtFa((n/1000).toFixed(1).replace(/\.0$/, "")) + " هزار";
  return fmtFa((n/1000000).toFixed(1).replace(/\.0$/, "")) + " م";
};

const NETWORK_META = {
  bale:      { label: "بَله",       glyph: "B",  color: "#2C7DFA" },
  eitaa:     { label: "ایتا",       glyph: "E",  color: "#FFA300" },
  virasti:   { label: "ویراستی",    glyph: "و",  color: "#7A4DFF" },
  wisgoon:   { label: "ویسگون",     glyph: "س",  color: "#F1535E" },
  rubika:    { label: "روبیکا",     glyph: "R",  color: "#FF1E56" },
  twitter:   { label: "X",          glyph: "𝕏",  color: "#101418" },
  instagram: { label: "اینستاگرام", glyph: "◯", color: "#E1306C" },
  telegram:  { label: "تلگرام",     glyph: "✈", color: "#229ED9" },
  facebook:  { label: "فیسبوک",     glyph: "f",  color: "#1877F2" },
};

const FILTERS = [
  { id: "all",         label: "همه" },
  { id: "koshvardoost",label: "کشوردوست" },
  { id: "external",    label: "کانال‌های دیگه" },
];

const STREAM = [
  {
    id: "ks1",
    source_type: "koshvardoost",
    kind: "video",
    author: { name: "نگار رستمی", handle: "negar.r", city: "رشت" },
    caption: "رقص محلی توی کوچهٔ سنگ‌فرش، صبح بازار رشت. هیچ بهانه‌ای لازم نیست برای زنده بودن.",
    media_bg: `radial-gradient(420px at 30% 30%, rgba(255,78,168,.55), transparent 60%),
               radial-gradient(360px at 75% 75%, rgba(154,108,255,.5), transparent 60%),
               linear-gradient(135deg, #2a0a1f, #0a1018)`,
    duration: "۲:۱۴",
    likes: 2380, comments: 124, saves: 412, rating: 4.7,
    posted_at: "۲ ساعت پیش",
  },
  {
    id: "ex1",
    source_type: "external_post",
    channel: { network: "telegram", title: "رادیو مرز", handle: "@radiomarz", followers: 84200 },
    text: "اپیزود جدید پادکست: «صدای جاده‌های شمال». یه ساعت پیاده‌روی توی جاده چالوس قبل از باز شدن آسمون. لینک تو پروفایل.",
    media_bg: `radial-gradient(420px at 50% 30%, rgba(75,227,255,.5), transparent 60%),
               radial-gradient(360px at 80% 80%, rgba(68,227,184,.4), transparent 60%),
               linear-gradient(135deg, #0a1f2e, #08231e)`,
    has_audio: true,
    likes_external: 1840, shares_external: 312,
    original_url: "https://t.me/radiomarz/482",
    posted_at: "۳ ساعت پیش",
  },
  {
    id: "ks2",
    source_type: "koshvardoost",
    kind: "text",
    author: { name: "علی رحمانی", handle: "ali.r", city: "تهران" },
    caption: "وقتی حرف می‌زنی، شهر گوش می‌ده.",
    text_grad: "linear-gradient(135deg, #ff4ea8, #ff8a3d)",
    likes: 540, comments: 38, saves: 62, rating: 4.4,
    posted_at: "۵ ساعت پیش",
  },
  {
    id: "ex2",
    source_type: "external_post",
    channel: { network: "twitter", title: "شعر فارسی", handle: "@persianpoetry", followers: 240000 },
    text: "«تو که در راه بمانی، چه گریزی است ز ما؟ / آن‌که می‌گفت بمان، رفت و نشد یار شما.»\n— غزل امروز",
    likes_external: 6420, shares_external: 1240,
    original_url: "https://twitter.com/persianpoetry/status/123",
    posted_at: "۸ ساعت پیش",
  },
  {
    id: "ks3",
    source_type: "koshvardoost",
    kind: "image",
    author: { name: "مهسا کریمی", handle: "mahsa.k", city: "اصفهان" },
    caption: "پنجره خانهٔ مادربزرگ، که هنوز هر صبح کفترها میان لب پنجره برای آب.",
    media_bg: `radial-gradient(420px at 30% 30%, rgba(255,78,168,.55), transparent 60%),
               radial-gradient(360px at 75% 75%, rgba(255,138,61,.4), transparent 60%),
               linear-gradient(135deg, #2a1408, #0a1018)`,
    likes: 1820, comments: 98, saves: 248, rating: 4.9,
    posted_at: "دیروز",
  },
  {
    id: "ex3",
    source_type: "external_post",
    channel: { network: "bale", title: "اقتصاد روز", handle: "@khabar_eqtesadi", followers: 56200 },
    text: "گزارش امروز: قیمت زعفران در بازارهای صادراتی ۹٪ بالا رفت. علت اصلی، کاهش برداشت در خراسان رضوی به‌خاطر گرمای نامتعارف اواخر مهر بوده.",
    likes_external: 412, shares_external: 88,
    original_url: "https://ble.ir/khabar_eqtesadi/284",
    posted_at: "دیروز",
  },
  {
    id: "ex4",
    source_type: "external_post",
    channel: { network: "instagram", title: "تهران امروز", handle: "@tehrandayreal", followers: 320000 },
    text: "غروب امروز از پل طبیعت — یه عکس از کسی که فقط چند دقیقه ایستاد و رفت.",
    media_bg: `radial-gradient(420px at 50% 30%, rgba(255,138,61,.6), transparent 60%),
               radial-gradient(360px at 80% 80%, rgba(255,78,168,.4), transparent 60%),
               linear-gradient(135deg, #2a1a06, #0a1018)`,
    likes_external: 18420, shares_external: 2120,
    original_url: "https://instagram.com/p/abc",
    posted_at: "۲ روز پیش",
  },
];

function SourceBadge({ item }) {
  if (item.source_type === "koshvardoost") {
    return (
      <span className="kd-stream__src kd-stream__src--ks">
        <span className="kd-stream__src-dot" />
        کشوردوست
      </span>
    );
  }
  const meta = NETWORK_META[item.channel.network] || {};
  return (
    <span className="kd-stream__src" style={{ background: `${meta.color}22`, color: meta.color, borderColor: `${meta.color}55` }}>
      <span className="kd-stream__src-glyph" style={{ background: meta.color }}>{meta.glyph}</span>
      از {meta.label}
    </span>
  );
}

function KoshvardoostItem({ item, onOpen }) {
  return (
    <article className="kd-stream__item" onClick={() => onOpen?.(item)}>
      <header className="kd-stream__head">
        <Avatar name={item.author.name} size={40} ring="#ff4ea8" />
        <div className="kd-stream__id">
          <strong>{item.author.name}</strong>
          <span>@{item.author.handle} · {item.author.city} · {item.posted_at}</span>
        </div>
        <SourceBadge item={item} />
        <button className="kd-stream__more" aria-label="گزینه‌ها"><Icon name="more" size={18} stroke={2} /></button>
      </header>

      {(item.kind === "video" || item.kind === "image") && (
        <div className={`kd-stream__media kd-stream__media--${item.kind}`} style={{ background: item.media_bg }}>
          {item.kind === "video" && (
            <React.Fragment>
              <span className="kd-stream__media-play"><Icon name="video" size={22} stroke={2.4} /></span>
              <span className="kd-stream__media-dur">{item.duration}</span>
            </React.Fragment>
          )}
          <span className="kd-stream__media-chip"><Icon name={item.kind} size={11} stroke={2.2} /> {item.kind === "video" ? "ویدیو" : "تصویر"}</span>
        </div>
      )}

      {item.kind === "text" && (
        <div className="kd-stream__quote" style={{ background: item.text_grad }}>
          <p>«{item.caption}»</p>
        </div>
      )}

      {item.kind !== "text" && <p className="kd-stream__caption">{item.caption}</p>}

      <footer className="kd-stream__foot">
        <button className="kd-stream__act"><Icon name="heart" size={18} stroke={2.2} /> <span>{fmtCount(item.likes)}</span></button>
        <button className="kd-stream__act"><Icon name="comment" size={18} stroke={2.2} /> <span>{fmtFa(item.comments)}</span></button>
        <button className="kd-stream__act"><Icon name="bookmark" size={18} stroke={2.2} /> <span>{fmtFa(item.saves)}</span></button>
        <span className="kd-stream__rate"><Icon name="star" size={14} stroke={0} style={{ fill: "#f5d589" }} /> <strong>{item.rating}</strong></span>
      </footer>
    </article>
  );
}

function ExternalItem({ item }) {
  const meta = NETWORK_META[item.channel.network] || {};
  return (
    <article className="kd-stream__item kd-stream__item--ext">
      <header className="kd-stream__head">
        <span className="kd-stream__chan-avatar" style={{ background: meta.color }}>{meta.glyph}</span>
        <div className="kd-stream__id">
          <strong>{item.channel.title}</strong>
          <span dir="ltr" style={{ direction: "ltr", textAlign: "start" }}>{item.channel.handle} · {fmtCount(item.channel.followers)} دنبال‌کننده · {item.posted_at}</span>
        </div>
        <SourceBadge item={item} />
        <button className="kd-stream__more" aria-label="گزینه‌ها"><Icon name="more" size={18} stroke={2} /></button>
      </header>

      {item.media_bg && (
        <div className="kd-stream__media kd-stream__media--ext" style={{ background: item.media_bg }}>
          {item.has_audio && (
            <span className="kd-stream__media-play"><Icon name="audio" size={22} stroke={2.4} /></span>
          )}
        </div>
      )}

      <p className="kd-stream__text">{item.text}</p>

      <footer className="kd-stream__foot">
        <span className="kd-stream__ext-stat"><Icon name="heart" size={16} stroke={2.2} /> {fmtCount(item.likes_external)}</span>
        <span className="kd-stream__ext-stat"><Icon name="share" size={16} stroke={2.2} /> {fmtCount(item.shares_external)}</span>
        <a className="kd-stream__ext-link" href={item.original_url} target="_blank" rel="noopener">
          باز کن در {meta.label} <Icon name="back" size={13} stroke={2.4} />
        </a>
      </footer>
    </article>
  );
}

window.StreamView = function StreamView({ onBack, onRoute, onOpenPost }) {
  const [filter, setFilter] = useState("all");

  const items = useMemo(() => {
    if (filter === "all") return STREAM;
    if (filter === "koshvardoost") return STREAM.filter(i => i.source_type === "koshvardoost");
    return STREAM.filter(i => i.source_type === "external_post");
  }, [filter]);

  const counts = useMemo(() => ({
    all: STREAM.length,
    ks:  STREAM.filter(i => i.source_type === "koshvardoost").length,
    ext: STREAM.filter(i => i.source_type === "external_post").length,
  }), []);

  return (
    <div className="kd-stream-page">
      <header className="kd-stream-head">
        <button className="kd-fh-back" onClick={onBack} aria-label="برگشت">
          <Icon name="back" size={20} stroke={2.2} />
        </button>
        <div className="kd-stream-head__id">
          <h1>استریم تو</h1>
          <p>
            <span><strong>{fmtFa(counts.ks)}</strong> از کشوردوست</span>
            <span> · </span>
            <span><strong>{fmtFa(counts.ext)}</strong> از {fmtFa(4)} کانال خارجی</span>
          </p>
        </div>
        <button className="kd-stream-head__manage" onClick={() => onRoute?.("follow")}>
          <Icon name="plus" size={16} stroke={2.4} />
          <span>مدیریت</span>
        </button>
      </header>

      <div className="kd-stream__filters" role="tablist">
        {FILTERS.map(f => (
          <Pill key={f.id} active={filter === f.id} onClick={() => setFilter(f.id)}>{f.label}</Pill>
        ))}
        <span style={{ flex: 1 }} />
        <button className="kd-stream__sort">
          <Icon name="filter" size={14} stroke={2.2} /> ترتیب: هوشمند
        </button>
      </div>

      <div className="kd-stream__list">
        {items.map(it => it.source_type === "koshvardoost"
          ? <KoshvardoostItem key={it.id} item={it} onOpen={onOpenPost} />
          : <ExternalItem key={it.id} item={it} />
        )}

        <div className="kd-stream__end">
          <Icon name="check" size={22} stroke={2.2} />
          <strong>اینجا تهِ امروزه.</strong>
          <span>برای بقیه، فردا دوباره سر بزن یا کانال‌های بیشتری اضافه کن.</span>
          <button className="kd-btn kd-btn--secondary" onClick={() => onRoute?.("follow")}>اضافه کردن کانال جدید</button>
        </div>
      </div>
    </div>
  );
};
})();