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

/* =============================================================
   Profile.jsx — my profile
   --------------------------------------------------------------
   Tabs: posts · pending · reactions · challenges · rewards
   The "pending" tab (P0-10) shows submissions in
   uploading/processing/rejected states with progress + actions.
   ============================================================= */

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

const MY_POSTS = [
  { kind: "image", title: "پنجره خانه مادربزرگ",         author: "مهسا کریمی", rating: 5, count: 1820, color: "#ff4ea8", aspect: 1 },
  { kind: "text",  body: "دلی که جا گذاشتم، هنوز همون‌جاست.", author: "مهسا کریمی", rating: 4, count: 410, gradient: "gold" },
  { kind: "audio", title: "پادکست: گفت‌وگو با مادر",     author: "مهسا کریمی", rating: 5, count: 622, duration: "۱۲:۰۳" },
];

// pending submissions — match openapi.yml's Submission states
const PENDING = [
  {
    id: "sub_01J8X2",
    kind: "video",
    title: "صبحانه بندری",
    status: "uploading",
    progress_bytes: 26214400,   // 25 MB
    size_bytes:     104857600,  // 100 MB
    speed: 2621440,             // 2.5 MB/s
    submitted_at: "همین حالا",
  },
  {
    id: "sub_01J8X1",
    kind: "audio",
    title: "پادکست: قصه‌های جاده چالوس — قسمت ۲",
    status: "processing",
    eta_min: 4,
    submitted_at: "۲ دقیقه پیش",
  },
  {
    id: "sub_01J8WX",
    kind: "image",
    title: "نقاشی دیجیتال از یزد",
    status: "rejected",
    reason: "تصویر کیفیت لازم رو نداشت. می‌تونی با کیفیت بالاتر دوباره بفرستی.",
    submitted_at: "دیروز",
  },
];

// drafts + scheduled posts (P2-05)
const DRAFTS = [
  { id: "dr_1", kind: "text",  title: "یادداشتی درباره‌ی پاییز تهران", color: "#9a6cff", edited: "۲ روز پیش", scheduled: null },
  { id: "dr_2", kind: "image", title: "عکس‌های بازار تجریش",          color: "#ff8a3d", edited: "هفته پیش", scheduled: null },
  { id: "dr_3", kind: "video", title: "تایم‌لپس غروب کاشان",          color: "#ff4ea8", edited: null, scheduled: "جمعه ۱۸:۰۰" },
];

window.Profile = function Profile({ onSettings, onOpenSubmission, onOpenList }) {
  const [tab, setTab] = useState("posts");
  return (
    <div className="kd-profile-page">
      <header className="kd-profile-page__head">
        <Avatar name="مهسا" size={92} ring="#dcba6a" />
        <div className="kd-profile-page__id">
          <h1 className="kd-profile-page__name">مهسا کریمی</h1>
          <p className="kd-profile-page__bio">داستانک‌نویس · گیلان · از ۱۴۰۲</p>
          <div className="kd-profile-page__badges">
            <Badge tone="gold">★ ۴٫۸ امتیاز</Badge>
            <Badge tone="rose"><Icon name="flame" size={11} stroke={2} style={{ marginInlineEnd: 3 }} />۷ روز پیاپی</Badge>
            <Badge tone="violet">برگزیده مرداد</Badge>
            <Badge tone="mint">۲۴ پست</Badge>
          </div>
        </div>
        <div className="kd-profile-page__actions">
          <button className="kd-btn kd-btn--secondary kd-btn--md" onClick={onSettings}>ویرایش</button>
          <button className="kd-btn kd-btn--primary kd-btn--md" onClick={() => window.dispatchEvent(new CustomEvent("kd-invite-open"))}>دعوت دوستان</button>
        </div>
      </header>

      <section className="kd-profile-page__stats">
        <button className="kd-profile-page__statbtn" onClick={() => onOpenList?.("followers")}>
          <span className="kd-profile-page__big">۱٬۸۲۰</span><span>دنبال‌کننده</span>
        </button>
        <button className="kd-profile-page__statbtn" onClick={() => onOpenList?.("following")}>
          <span className="kd-profile-page__big">۳۱۸</span><span>دنبال می‌کنم</span>
        </button>
        <button className="kd-profile-page__statbtn" onClick={() => onOpenList?.("liked")}>
          <span className="kd-profile-page__big">۹۶</span><span>پسندیده</span>
        </button>
        <button className="kd-profile-page__statbtn" onClick={() => onOpenList?.("saved")}>
          <span className="kd-profile-page__big">۲۴</span><span>ذخیره</span>
        </button>
      </section>

      <nav className="kd-profile-page__tabs">
        <Pill active={tab === "posts"} onClick={() => setTab("posts")}>محتوای من</Pill>
        <Pill active={tab === "pending"} onClick={() => setTab("pending")} dot={PENDING.length > 0 ? "#f5d589" : null}>
          در حال بررسی {PENDING.length > 0 && `(${fmtFa(PENDING.length)})`}
        </Pill>
        <Pill active={tab === "drafts"} onClick={() => setTab("drafts")} dot={DRAFTS.length > 0 ? "#9a6cff" : null}>
          پیش‌نویس {DRAFTS.length > 0 && `(${fmtFa(DRAFTS.length)})`}
        </Pill>
        <Pill active={tab === "reactions"} onClick={() => setTab("reactions")}>واکنش‌ها</Pill>
        <Pill active={tab === "challenges"} onClick={() => setTab("challenges")}>چالش‌ها</Pill>
        <Pill active={tab === "rewards"} onClick={() => setTab("rewards")}>پاداش‌ها</Pill>
      </nav>

      {tab === "posts" && (
        <div className="kd-profile-page__grid">
          {MY_POSTS.map((p, i) => {
            if (p.kind === "image") return <ImageCard key={i} {...p} />;
            if (p.kind === "text")  return <TextCard  key={i} {...p} />;
            if (p.kind === "audio") return <AudioCard key={i} {...p} />;
            return null;
          })}
        </div>
      )}

      {tab === "pending" && (
        <div className="kd-pending">
          <p className="kd-pending__hint">
            <Icon name="check" size={12} stroke={2.4} />
            آپلودها قطع شدن؟ اشکالی نداره — از همون‌جا که بودن ادامه می‌دیم.
          </p>
          {PENDING.map(s => <PendingRow key={s.id} sub={s} onOpen={() => onOpenSubmission?.(s)} />)}
          {PENDING.length === 0 && (
            <div className="kd-pending__empty">
              <p>هیچی در صف نیست. ✨</p>
            </div>
          )}
        </div>
      )}

      {tab === "drafts" && (
        <div className="kd-drafts">
          {DRAFTS.length === 0 ? (
            <div className="kd-profile-empty"><p>پیش‌نویسی نداری. هر وقت نصفه‌کاره ولش کردی، اینجا نگهش می‌داریم.</p></div>
          ) : DRAFTS.map(d => (
            <div key={d.id} className={`kd-draft ${d.scheduled ? "is-scheduled" : ""}`}>
              <span className="kd-draft__thumb" style={{ ['--c']: d.color }}>
                <Icon name={d.kind} size={20} stroke={1.7} />
              </span>
              <div className="kd-draft__body">
                <strong>{d.title}</strong>
                <span className="kd-draft__meta">
                  {d.scheduled
                    ? <React.Fragment><Icon name="bell" size={11} stroke={2} /> زمان‌بندی‌شده برای {d.scheduled}</React.Fragment>
                    : <React.Fragment>پیش‌نویس · ویرایش‌شده {d.edited}</React.Fragment>}
                </span>
              </div>
              <div className="kd-draft__actions">
                <button className="kd-draft__btn kd-draft__btn--primary" onClick={() => window.dispatchEvent(new CustomEvent("kd-open-upload"))}>
                  {d.scheduled ? "ویرایش" : "ادامه بده"}
                </button>
                <button className="kd-draft__btn">حذف</button>
              </div>
            </div>
          ))}
        </div>
      )}

      {tab === "reactions" && (
        <div className="kd-profile-empty">
          <p>۹۶ واکنش روی پست‌هات — به‌زودی این بخش لیست بهت می‌ده.</p>
        </div>
      )}      {tab === "challenges" && (
        <div className="kd-profile-empty">
          <p>تو ۳ چالش شرکت کردی. این بخش به‌زودی آماده می‌شه.</p>
        </div>
      )}
      {tab === "rewards" && (
        <div className="kd-profile-empty">
          <p>پاداش‌هات بعد از انتخاب ماهانه اینجا میان.</p>
        </div>
      )}
    </div>
  );
};

/* =============================================================
   PendingRow — single submission card with status + actions
   ============================================================= */
function PendingRow({ sub, onOpen }) {
  const fmtSize = (b) => {
    if (b < 1024 * 1024) return fmtFa((b/1024).toFixed(0)) + " کیلو";
    if (b < 1024*1024*1024) return fmtFa((b/1024/1024).toFixed(1)) + " مگ";
    return fmtFa((b/1024/1024/1024).toFixed(2)) + " گیگ";
  };
  const kindColor = { video: "#ff4ea8", image: "#ff8a3d", audio: "#44e3b8", text: "#9a6cff" }[sub.kind] || "#fff";

  return (
    <div className="kd-pending__row">
      <div className="kd-pending__thumb" style={{ background: `linear-gradient(135deg, ${kindColor}33, ${kindColor}11)`, color: kindColor }}>
        <Icon name={sub.kind} size={20} stroke={1.7} />
      </div>

      <div className="kd-pending__body">
        <div className="kd-pending__topline">
          <strong>{sub.title}</strong>
          <span className="kd-pending__time">{sub.submitted_at}</span>
        </div>

        {sub.status === "uploading" && (() => {
          const pct = (sub.progress_bytes / sub.size_bytes) * 100;
          const remainingMb = (sub.size_bytes - sub.progress_bytes) / 1024 / 1024;
          const eta = sub.speed > 0 ? Math.ceil(remainingMb / (sub.speed / 1024 / 1024)) : 0;
          return (
            <React.Fragment>
              <div className="kd-pending__bar">
                <i style={{ width: pct + "%" }} />
              </div>
              <div className="kd-pending__statusline">
                <span className="kd-pending__status kd-pending__status--uploading">
                  <span className="kd-pending__pulse" />
                  در حال آپلود — {fmtFa(Math.floor(pct))}٪
                </span>
                <span className="kd-pending__detail">
                  {fmtSize(sub.progress_bytes)} از {fmtSize(sub.size_bytes)} · {fmtFa(eta)} ث مونده
                </span>
              </div>
              <div className="kd-pending__actions">
                <button className="kd-pending__btn">توقف</button>
                <button className="kd-pending__btn kd-pending__btn--danger">لغو</button>
              </div>
            </React.Fragment>
          );
        })()}

        {sub.status === "processing" && (
          <React.Fragment>
            <div className="kd-pending__bar kd-pending__bar--indet"><i /></div>
            <div className="kd-pending__statusline">
              <span className="kd-pending__status kd-pending__status--processing">
                <span className="kd-pending__spinner" />
                داریم بررسی می‌کنیم
              </span>
              <span className="kd-pending__detail">
                {sub.kind === "video" ? "ترانس‌کود + مدارسیون" : "بررسی محتوا"} · {fmtFa(sub.eta_min || 3)} دقیقه مونده
              </span>
            </div>
          </React.Fragment>
        )}

        {sub.status === "rejected" && (
          <React.Fragment>
            <div className="kd-pending__statusline">
              <span className="kd-pending__status kd-pending__status--rejected">
                <Icon name="close" size={11} stroke={2.4} /> رد شد
              </span>
            </div>
            <p className="kd-pending__reason">{sub.reason}</p>
            <div className="kd-pending__actions">
              <button className="kd-pending__btn kd-pending__btn--primary">دوباره بفرست</button>
              <button className="kd-pending__btn">حذف</button>
            </div>
          </React.Fragment>
        )}
      </div>
    </div>
  );
}
})();