// ─────────────────────────────────────────────────────────
// ChefVerse · V2 · Rewards page + Notification center
// ─────────────────────────────────────────────────────────
const { useState: useStateRw, useEffect: useEffectRw, useRef: useRefRw } = React;

function Rewards({ locale, profile }) {
  const t = window.I18N[locale];
  const modulesDone = profile.modules_done || 0;
  const briefsWon = profile.briefs_won || 0;
  const totalPoints = window.REWARDS
    .filter(r => (r.trigger.startsWith("module_") ? modulesDone >= r.threshold : briefsWon >= r.threshold))
    .reduce((a, r) => a + r.points, 0);

  const head = locale === "de"
    ? { h: "Belohnungen", sub: "Meilensteine schalten Material und Anerkennung frei. Versand an deine hinterlegte Adresse." }
    : locale === "id"
    ? { h: "Hadiah", sub: "Milestone membuka peralatan dan pengakuan. Dikirim ke alamatmu yang tersimpan." }
    : { h: "Rewards", sub: "Milestones unlock kit and recognition. Shipped to the address on your profile." };

  return (
    <div className="page page-rewards">
      <div className="page-head">
        <div>
          <h1>{head.h}</h1>
          <p className="lead">{head.sub}</p>
        </div>
        <div className="rw-points">
          <div className="rw-points-num">{totalPoints}</div>
          <div className="rw-points-lab">{locale === "de" ? "Punkte gesamt" : locale === "id" ? "Total poin" : "Total points"}</div>
        </div>
      </div>

      <div className="rw-grid">
        {window.REWARDS.map(r => {
          const ok = r.trigger.startsWith("module_") ? modulesDone >= r.threshold : briefsWon >= r.threshold;
          const trig = r.trigger.split("_");
          const trigLab = trig[0] === "module"
            ? (locale === "de" ? `Nach Modul ${trig[1]}` : locale === "id" ? `Setelah modul ${trig[1]}` : `After module ${trig[1]}`)
            : (locale === "de" ? `Nach ${trig[1]} Briefing${trig[1] !== "1" ? "s" : ""}` : locale === "id" ? `Setelah ${trig[1]} brief` : `After ${trig[1]} brief${trig[1] !== "1" ? "s" : ""}`);
          return (
            <div key={r.id} className={"rw-card " + (ok ? "unlocked" : "locked") + " kind-" + r.kind}>
              <div className="rw-card-head">
                <div className={"rw-icon " + r.kind}>
                  <Icon name={r.kind === "physical" ? "briefcase" : "award"} size={18} />
                </div>
                <div className="rw-tag">{r.kind === "physical"
                  ? (locale === "de" ? "Physisch" : locale === "id" ? "Fisik" : "Physical")
                  : (locale === "de" ? "Digital" : locale === "id" ? "Digital" : "Digital")}</div>
                {ok && <div className="rw-check"><Icon name="check" size={12} /></div>}
              </div>
              <div className="rw-card-title">{r.title[locale]}</div>
              <div className="rw-card-sub subtle">{r.sub[locale]}</div>
              <div className="rw-card-foot">
                <span className="rw-trigger"><Icon name={ok ? "check-circle" : "lock"} size={12} /> {trigLab}</span>
                <span className="rw-points-pill">+{r.points} pts</span>
              </div>
              {r.total && (
                <div className="rw-inventory">
                  <div className="rw-inventory-bar-wrap">
                    <div className="rw-inventory-bar" style={{ width: `${(r.claimed / r.total) * 100}%` }} />
                  </div>
                  <div className="rw-inventory-labels">
                    <span>{Math.round((r.claimed / r.total) * 100)}% {locale === "de" ? "beansprucht" : locale === "id" ? "diklaim" : "claimed"}</span>
                    <span className="rw-inventory-left">{r.total - r.claimed} {locale === "de" ? "übrig" : locale === "id" ? "tersisa" : "left"}</span>
                  </div>
                </div>
              )}
              {r.kind === "physical" && ok && (
                <div className="rw-ship">
                  <Icon name="upload" size={11} style={{ transform: "rotate(180deg)" }} />
                  <span>{locale === "de" ? "Versand vorbereitet · 3–5 Tage" : locale === "id" ? "Sedang dikirim · 3–5 hari" : "Shipped · 3–5 days"}</span>
                </div>
              )}
            </div>
          );
        })}
      </div>

      <div className="rw-address-card">
        <div>
          <span className="eyebrow">{locale === "de" ? "VERSAND AN" : locale === "id" ? "DIKIRIM KE" : "SHIPPING TO"}</span>
          <div className="rw-addr">
            <div>{profile.name}</div>
            <div className="subtle">414 Fulton Ave · Brooklyn, NY 11217</div>
            <div className="subtle">{window.I18N[locale].flag} {window.I18N[locale].market}</div>
          </div>
        </div>
        <button className="btn btn-outline"><Icon name="edit-3" size={13} /> {locale === "de" ? "Adresse ändern" : locale === "id" ? "Ubah alamat" : "Change address"}</button>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────
// Notification center (V2) — popover anchored on bell
// ─────────────────────────────────────────────────────────
function NotifCenter({ locale, open, onClose }) {
  const ref = useRefRw(null);
  useEffectRw(() => {
    if (!open) return;
    const onDoc = (e) => { if (ref.current && !ref.current.contains(e.target)) onClose(); };
    setTimeout(() => document.addEventListener("mousedown", onDoc), 0);
    return () => document.removeEventListener("mousedown", onDoc);
  }, [open, onClose]);
  if (!open) return null;
  const items = window.NOTIFICATIONS;
  const labelMap = {
    reward:   { en: "Reward", de: "Belohnung", id: "Hadiah", color: "var(--ufs-orange)", icon: "award" },
    brief:    { en: "Brief",  de: "Briefing",  id: "Brief",  color: "#dc4d8b",          icon: "briefcase" },
    captions: { en: "Captions", de: "Untertitel", id: "Subtitle", color: "#00aeba",     icon: "captions" },
    milestone:{ en: "Milestone", de: "Meilenstein", id: "Milestone", color: "#679641",   icon: "flame" },
  };
  return (
    <div className="notif-pop" ref={ref}>
      <div className="notif-head">
        <span className="eyebrow">{locale === "de" ? "BENACHRICHTIGUNGEN" : locale === "id" ? "NOTIFIKASI" : "NOTIFICATIONS"}</span>
        <button className="link-btn">{locale === "de" ? "Alle gelesen" : locale === "id" ? "Tandai dibaca" : "Mark all read"}</button>
      </div>
      <div className="notif-list">
        {items.map(n => {
          const meta = labelMap[n.kind];
          return (
            <div key={n.id} className={"notif " + (n.read ? "read" : "unread")}>
              <div className="notif-icon" style={{ background: meta.color + "20", color: meta.color }}>
                <Icon name={meta.icon} size={14} />
              </div>
              <div className="notif-body">
                <div className="notif-title">{n.title[locale]}</div>
                <div className="subtle">{n.sub[locale]}</div>
                <div className="notif-foot">
                  <span className="notif-tag" style={{ color: meta.color }}>{meta[locale]}</span>
                  <span className="subtle">· {n.time[locale]}</span>
                </div>
              </div>
              {!n.read && <span className="notif-dot" />}
            </div>
          );
        })}
      </div>
      <div className="notif-foot-bar">
        <button className="link-btn">{locale === "de" ? "Alle ansehen" : locale === "id" ? "Lihat semua" : "View all"} <Icon name="arrow-right" size={11} /></button>
      </div>
    </div>
  );
}

window.Rewards = Rewards;
window.NotifCenter = NotifCenter;