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

/* =============================================================
   ChallengePage.jsx — daily challenge detail (P1-09)
   ============================================================= */

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

const TODAY = {
  id: "ch_breakfast",
  title: "صبحانه‌ی محله‌ت",
  emoji: "🍳",
  color: "#ff8a3d",
  gradient: "linear-gradient(135deg, #ff8a3d, #ff4ea8)",
  category_id: "image",
  intro: "هر کوچه‌ای صبحانه‌ی خودش رو داره. نون قطعی، چایی، خاگینه، یا یه شامی که از دیشب موند. بپرس از همسایه، عکس بگیر، تعریف کن.",
  rules: [
    "یه عکس یا ویدیو از صبحانه‌ی واقعی محله‌ی خودت",
    "اسم محله و یه جمله توضیح بذار",
    "تا آخر شب فردا فرصت داری",
    "بهترین ۵ تا روی استوری رسمی می‌ره",
  ],
  ends_at: Date.now() + 22 * 60 * 60 * 1000, // 22 hours from now
  participants: 1240,
  total_views: 42000,
  prizes: [
    { rank: "۱",   label: "اکران تو ۱۰ بیلبورد اصفهان", color: "#f5d589" },
    { rank: "۲-۵","label": "نمایش روی صفحه اصلی هفته آینده", color: "#bda0ff" },
  ],
  sample_submissions: [
    { kind: "image", title: "خاگینه‌ی بوشهری",          author: "فاطمه دلیری", rating: 5, count: 320, color: "#ff8a3d", aspect: 1 },
    { kind: "image", title: "نون پنیر و گردو از تالش",  author: "نگار رستمی",   rating: 4, count: 180, color: "#ff4ea8", aspect: 0.85 },
    { kind: "video", title: "چایی صبح بازار تجریش",      author: "علی رحمانی",   rating: 5, count: 420, duration: "۰:۳۲", aspect: 1.2 },
    { kind: "image", title: "صبحانه‌ی شمیران",          author: "مهسا کریمی",    rating: 4, count: 240, color: "#44e3b8", aspect: 1.1 },
  ],
};

window.ChallengePage = function ChallengePage({ onBack, onSubmit }) {
  const [remaining, setRemaining] = useState(TODAY.ends_at - Date.now());

  useEffect(() => {
    const t = setInterval(() => setRemaining(TODAY.ends_at - Date.now()), 60000);
    return () => clearInterval(t);
  }, []);

  const hours = Math.max(0, Math.floor(remaining / (60 * 60 * 1000)));
  const minutes = Math.max(0, Math.floor((remaining % (60*60*1000)) / (60*1000)));

  return (
    <div className="kd-challenge-page">
      <header className="kd-challenge-head" style={{ background: TODAY.gradient }}>
        <button className="kd-challenge-head__back" onClick={onBack} aria-label="برگشت">
          <Icon name="back" size={20} stroke={2.2} />
        </button>

        <div className="kd-challenge-head__lbl">چالش امروز</div>
        <div className="kd-challenge-head__emoji">{TODAY.emoji}</div>
        <h1 className="kd-challenge-head__title">{TODAY.title}</h1>
        <p className="kd-challenge-head__intro">{TODAY.intro}</p>

        <div className="kd-challenge-head__meta">
          <div className="kd-challenge-meta-card">
            <span className="kd-challenge-meta-card__big">
              <b>{fmtFa(hours)}</b> ساعت <b>{fmtFa(minutes)}</b> دقیقه
            </span>
            <span className="kd-challenge-meta-card__sub">تا پایان مهلت</span>
          </div>
          <div className="kd-challenge-meta-card">
            <span className="kd-challenge-meta-card__big">{fmtFa(TODAY.participants)}</span>
            <span className="kd-challenge-meta-card__sub">شرکت‌کننده</span>
          </div>
          <div className="kd-challenge-meta-card">
            <span className="kd-challenge-meta-card__big">{fmtFa(Math.floor(TODAY.total_views / 1000))} هزار</span>
            <span className="kd-challenge-meta-card__sub">بازدید</span>
          </div>
        </div>
      </header>

      <section className="kd-challenge-section">
        <h2 className="kd-challenge-h">قانون‌های این چالش</h2>
        <ul className="kd-challenge-rules">
          {TODAY.rules.map((r, i) => (
            <li key={i}>
              <span className="kd-challenge-rules__num">{fmtFa(i + 1)}</span>
              <span>{r}</span>
            </li>
          ))}
        </ul>
      </section>

      <section className="kd-challenge-section">
        <h2 className="kd-challenge-h">جوایز</h2>
        <div className="kd-challenge-prizes">
          {TODAY.prizes.map((p, i) => (
            <div key={i} className="kd-challenge-prize" style={{ ['--c']: p.color }}>
              <span className="kd-challenge-prize__rank">رتبه {p.rank}</span>
              <span className="kd-challenge-prize__lbl">{p.label}</span>
            </div>
          ))}
        </div>
      </section>

      <section className="kd-challenge-section">
        <h2 className="kd-challenge-h">آثاری که تا الان رسیده ({fmtFa(TODAY.participants)})</h2>
        <div className="kd-masonry">
          {TODAY.sample_submissions.map((p, i) => {
            if (p.kind === "image") return <ImageCard key={i} {...p} dark />;
            if (p.kind === "video") return <VideoCard key={i} {...p} dark />;
            if (p.kind === "text")  return <TextCard  key={i} {...p} dark />;
            return null;
          })}
        </div>
      </section>

      <div className="kd-challenge-submit">
        <div className="kd-challenge-submit__inner">
          <div>
            <strong>تو هم بفرست</strong>
            <span>یه عکس از صبحانه‌ی همین صبح کافیه.</span>
          </div>
          <button
            className="kd-btn kd-btn--primary kd-btn--lg"
            onClick={() => onSubmit?.(TODAY)}>
            من می‌خوام بفرستم
          </button>
        </div>
      </div>
    </div>
  );
};
})();