/* ==========================================================
   綠界廟 Donate
   - 添香油 (Online)
   - 梟婆財運卦 (FortuneCard — 不發錢，是卦象/方位/開運)
   - 點光明燈 (LampGrid)
   - 功德名簿 (DonorWall)
   ========================================================== */

const STORAGE = {
  donors:    "xpg_donors",
  lamps:     "xpg_lamps",
  mine:      "xpg_my_lamp_idx",
  myDono:    "xpg_my_donations",
  lastCard:  "xpg_last_card_date",
};
const safeGet = (k, fallback) => {
  try { const v = localStorage.getItem(k); return v ? JSON.parse(v) : fallback; }
  catch (e) { return fallback; }
};
const safeSet = (k, v) => { try { localStorage.setItem(k, JSON.stringify(v)); } catch (e) {} };

/* ---------- Sub Hero ---------- */
const DonateHero = ({stats}) => (
  <section className="subhero">
    <div className="deco" aria-hidden="true">
      <div className="ring r1"></div>
      <div className="ring r2"></div>
      <div className="ring r3"></div>
    </div>
    <div className="wrap inner">
      <div>
        <div className="breadcrumb">
          <a href="index.html">首頁</a>　／　綠界廟　線上參拜
        </div>
        <h1>
          綠界廟<br/>
          <span className="accent">千里同心　雲端有靈</span>
        </h1>
        <p className="lead">
          身在千里，亦得參拜。本宮值殿師父將代為敬香、誦疏、點燈一炷；
          所有香油、點燈、卦象紀錄皆上達梟婆神壇，當日即刻生效。
          歡迎遠程信眾敬獻香油、點亮光明燈、求梟婆財運卦，並於功德名簿留名。
        </p>
        <div className="info-pills">
          <span className="p"><strong>{stats.donors}</strong>　位信眾今日參拜</span>
          <span className="p"><strong>{stats.lamps}</strong>　盞光明燈點亮</span>
          <span className="p"><strong>NT${stats.total.toLocaleString()}</strong>　今日香油</span>
        </div>
      </div>
      <div className="visual">
        <img src="assets/censer.png" alt="綠界廟香爐" style={{width: "60%"}} />
        <div style={{
          position: "absolute", left: "50%", top: "55%",
          transform: "translateX(-50%)",
          width: 100, height: 200,
          pointerEvents: "none",
        }}>
          {[0,1,2].map(i => (
            <span key={i} style={{
              position: "absolute", bottom: 0,
              left: ["20%","48%","78%"][i],
              width: 3, height: "100%",
              background: "linear-gradient(180deg, transparent, rgba(28,20,14,0.4) 30%, rgba(28,20,14,0.5) 60%, transparent)",
              filter: "blur(2px)",
              animation: `rise 5s ease-in infinite ${[0,-1.5,-3][i]}s`,
            }}></span>
          ))}
        </div>
      </div>
    </div>

    {/* 三件式快速入口 */}
    <div className="wrap" style={{position: "relative", zIndex: 2}}>
      <div className="entry-rites">
        <a href="#offer" className="entry-rite" data-glyph="香">
          <h4>添　香　油</h4>
          <div className="lat">MAKE  AN  OFFERING</div>
          <div className="desc">敬獻香油，由本宮值殿師父代為焚香誦疏。</div>
        </a>
        <a href="#lamps" className="entry-rite" data-glyph="燈">
          <h4>點光明燈</h4>
          <div className="lat">LIGHT  A  LAMP</div>
          <div className="desc">一盞光明，一年照拂；姓名供奉於本宮燈座之上。</div>
        </a>
        <a href="#lucky" className="entry-rite" data-glyph="卦">
          <h4>梟婆財運卦</h4>
          <div className="lat">DRAW  A  FORTUNE</div>
          <div className="desc">求梟婆指示本月財運卦象、開運方位與招財建議。</div>
        </a>
      </div>
    </div>
  </section>
);

/* ---------- 添香油 ---------- */
const OnlineOffering = ({onContribute}) => {
  const AMTS = [
    {n: 168,  l: "祈　安"},
    {n: 600,  l: "添香油"},
    {n: 1200, l: "點　燈"},
    {n: 3600, l: "結　緣"},
  ];
  const [amt, setAmt] = React.useState(600);
  const [wish, setWish] = React.useState("");
  const [name, setName] = React.useState("");

  const submit = () => {
    const who = (name.trim() || "善信").slice(0, 8);
    onContribute({ who, amount: amt, kind: AMTS.find(a => a.n === amt).l.replace(/\s/g, "") });
    window.__xpgToast(`已記錄香油　NT$ ${amt.toLocaleString()}`,
      "梟婆已收下您的心願 · 三日內必有應");
    setWish("");
  };

  return (
    <section className="online" id="offer" style={{paddingTop: 120}}>
      <div className="wrap">
        <SectionHead kicker="添香油" title="於綠界廟　插一炷清香" latin="Make an Offering" />
        <div className="online-copy" style={{maxWidth: 760, margin: "0 auto"}}>
          <p style={{textAlign: "center", marginBottom: 36}}>
            本宮自二零二五年起設「綠界廟」線上參拜服務。信眾可於遠端指定香油，
            本宮值殿師父將代為敬香、誦疏一炷，並將心願封入專屬光明燈。
          </p>

          <div className="amount-row">
            {AMTS.map(a => (
              <div key={a.n}
                   className={"a-btn" + (amt === a.n ? " active" : "")}
                   onClick={() => setAmt(a.n)}>
                <span className="num">{a.n}</span>
                <span className="lbl">{a.l}</span>
              </div>
            ))}
          </div>

          <div style={{display: "grid", gridTemplateColumns: "1fr 1.6fr", gap: 10, marginTop: 12}}>
            <input
              className="wish-input" type="text"
              placeholder="姓名 (預設「善信」)"
              value={name} onChange={e => setName(e.target.value)}
              maxLength={10}
            />
            <input
              className="wish-input" type="text"
              placeholder="敬填心願 · 全家平安 / 學業有成 / 早日脫單…"
              value={wish} onChange={e => setWish(e.target.value)}
              maxLength={36}
            />
          </div>

          <div className="pay-row">
            <button className="btn-light" onClick={submit}>
              敬獻香油 · NT$ {amt.toLocaleString()}
            </button>
            <div className="note">綠界 / Apple Pay / 街口　皆可</div>
          </div>

          <div className="online-foot">
            <span>當日代香</span>
            <span>專屬光明燈</span>
            <span>電子疏文回覆</span>
            <span>年度安太歲</span>
          </div>
        </div>
      </div>
    </section>
  );
};

/* ---------- 梟婆財運卦 (取代發財金) ---------- */
const FORTUNE_GRADES = [
  { grade: "上上", blessing: "日進斗金", weight: 2 },
  { grade: "上吉", blessing: "金玉滿堂", weight: 3 },
  { grade: "中吉", blessing: "財源廣進", weight: 4 },
  { grade: "中平", blessing: "守成有福", weight: 4 },
  { grade: "下下", blessing: "暫避鋒芒", weight: 2 },
];
const DIRECTIONS = ["正東", "正西", "正南", "正北", "東南", "西南", "東北", "西北"];
const F_COLORS    = ["朱紅", "鵝黃", "翠綠", "靛藍", "雪白", "玄黑", "金", "胭脂"];
const F_NUMBERS   = ["三", "六", "七", "八", "九"];
const F_ADVICES = {
  "上上": [
    "宜出門遠行，貴人相助有期；本月偏財運極旺，可大舉行動。",
    "宜投資穩健標的，但不可貪近利；以善行回饋，加倍歸來。",
  ],
  "上吉": [
    "宜會友議事，多聽少言；正財順遂，偏財需謹慎而行。",
    "宜整理舊物去蕪存菁，意外之財將至。",
  ],
  "中吉": [
    "宜本業精進，財自累積而豐；偏財運中庸，勿冒進。",
    "宜捐財佈施，廣結善緣，福報緩來。",
  ],
  "中平": [
    "宜守不宜攻，勿冒險嘗試新投資；本月以保本為要。",
    "宜閉戶安守，財不外流；多陪伴家人，福澤綿長。",
  ],
  "下下": [
    "宜閉戶讀經，避免重大財務決策；本月以平安為福。",
    "宜行善積德，待時而動；本月不宜借貸與簽約。",
  ],
};
const pickByWeight = (arr) => {
  const total = arr.reduce((s, x) => s + x.weight, 0);
  let n = Math.random() * total;
  for (const x of arr) { n -= x.weight; if (n <= 0) return x; }
  return arr[0];
};
const pickRand = (arr) => arr[Math.floor(Math.random() * arr.length)];

const FortuneCard = () => {
  const [flipped, setFlipped] = React.useState(false);
  const [card, setCard] = React.useState(null);
  const [drawnToday, setDrawnToday] = React.useState(() => {
    const last = safeGet(STORAGE.lastCard, null);
    const today = new Date().toDateString();
    return last === today;
  });

  const draw = () => {
    if (flipped) return;
    const g = pickByWeight(FORTUNE_GRADES);
    const c = {
      grade: g.grade,
      blessing: g.blessing,
      direction: pickRand(DIRECTIONS),
      color: pickRand(F_COLORS),
      number: pickRand(F_NUMBERS),
      advice: pickRand(F_ADVICES[g.grade]),
    };
    setCard(c);
    setFlipped(true);
    safeSet(STORAGE.lastCard, new Date().toDateString());
    setDrawnToday(true);
    window.__xpgToast && window.__xpgToast(`梟婆批示　${c.grade}`,
      `${c.blessing} · 開運方位 ${c.direction}`);
  };

  const redraw = () => {
    setFlipped(false);
    setCard(null);
  };

  return (
    <section className="lucky" id="lucky">
      <div className="wrap">
        <SectionHead kicker="梟婆財運卦" title="敬問本月　財運如何" latin="Draw Your Monthly Fortune" />
        <div className="lucky-stage">
          <div className="cardflip-wrap">
            <div className={"cardflip" + (flipped ? " flipped" : "")} onClick={draw}>
              <div className="cardflip-side front">
                <div className="lbl">梟婆財運卦</div>
                <div className="glyph brush-glyph">卦</div>
                <div className="sub">XIAO·PO  FORTUNE  ORACLE</div>
                <div className="tap">點此　翻開卦象 →</div>
              </div>
              <div className="cardflip-side back">
                {card && (
                  <React.Fragment>
                    <div className="grade-row">
                      <span className="gname">本月卦象</span>
                      <span className="grade-pill">{card.grade}</span>
                    </div>
                    <div className="blessing brush-glyph">{card.blessing}</div>
                    <div className="attrs">
                      <div className="attr">
                        <div className="k">DIRECTION</div>
                        <div className="v">{card.direction}</div>
                      </div>
                      <div className="attr">
                        <div className="k">NUMBER</div>
                        <div className="v">{card.number}</div>
                      </div>
                      <div className="attr">
                        <div className="k">COLOR</div>
                        <div className="v">{card.color}</div>
                      </div>
                      <div className="attr">
                        <div className="k">MONTH</div>
                        <div className="v">{new Date().getMonth() + 1}月</div>
                      </div>
                    </div>
                    <div className="advice">
                      <b style={{color: "var(--vermillion)"}}>· 招財建議 ·</b>　{card.advice}
                    </div>
                  </React.Fragment>
                )}
              </div>
            </div>
          </div>
          <div className="lucky-copy">
            <h3>
              <span className="sub">梟婆批示　不發紅包</span>
              一卦定方位<br/>一字鎮財運
            </h3>
            <p>
              梟婆財運卦乃本宮特設之占卜儀式，每日一次，敬問梟婆神娘娘本月財運。
              卦象分上上、上吉、中吉、中平、下下五等，並附開運方位、開運數字、
              開運色與招財建議。
            </p>
            <p>
              得卦之後，請依梟婆指示行事。財運卦不發實質金錢，
              所求者為「方位」「時機」「心態」之指引；
              得卦運用得宜，自能感應神明，福祿綿長。
            </p>
            <div className="rules">
              <h4>· 占卦須知 ·</h4>
              <ol>
                <li>每日限求一卦，反覆求問者不應。</li>
                <li>卦象不論等第，皆為梟婆所示，請敬意領受。</li>
                <li>得吉者宜謙、得平者宜守、得下者宜避，方為善信之道。</li>
                <li>事應之後，請至本宮答謝，奉香還願。</li>
              </ol>
            </div>
            <div style={{marginTop: 18, display: "flex", gap: 12}}>
              {flipped && (
                <button onClick={redraw} style={{
                  padding: "12px 24px",
                  background: "transparent", border: "1px solid var(--ink-mute)",
                  fontFamily: "var(--serif)", letterSpacing: "0.3em",
                  color: "var(--ink-soft)", cursor: "pointer",
                }}>收下卦象，蓋回正面 ↺</button>
              )}
              {drawnToday && !flipped && (
                <span style={{
                  alignSelf: "center", fontSize: 13, letterSpacing: "0.2em",
                  color: "var(--ink-mute)",
                }}>※ 您今日已求過一卦，明日再來</span>
              )}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

/* ---------- 點光明燈 LampGrid ---------- */
const LAMP_TIERS = [
  { key: "p", label: "平安燈", price: 300 },
  { key: "w", label: "光明燈", price: 600 },
  { key: "f", label: "文昌燈", price: 1200 },
  { key: "g", label: "貴人燈", price: 3000 },
];
const LampGrid = ({lamps, mineIdx, onLight}) => {
  const [name, setName] = React.useState("");
  const [tier, setTier] = React.useState("w");

  const submit = () => {
    const who = name.trim();
    if (!who) {
      window.__xpgToast && window.__xpgToast("請填寫姓名", "光明燈須有名方能點亮");
      return;
    }
    const t = LAMP_TIERS.find(t => t.key === tier);
    onLight({ name: who.slice(0, 6), tier: t.label, amount: t.price });
    setName("");
    window.__xpgToast(`已點亮 ${t.label}`, `${who} · 一年照拂`);
  };

  const slots = 88;
  const cells = Array.from({length: slots}).map((_, i) => lamps[i] || null);
  const tiers = [
    { label: "貴人燈", rows: cells.slice(0, 22)  },
    { label: "文昌燈", rows: cells.slice(22, 44) },
    { label: "光明燈", rows: cells.slice(44, 66) },
    { label: "平安燈", rows: cells.slice(66, 88) },
  ];

  return (
    <section className="lamps" id="lamps">
      <div className="wrap">
        <SectionHead kicker="點光明燈" title="一盞光明　一年照拂" latin="Light a Sacred Lamp" />

        <div className="lamp-form">
          <input
            type="text" placeholder="姓名 (供奉於燈座)"
            value={name} onChange={e => setName(e.target.value)} maxLength={8}
          />
          <select value={tier} onChange={e => setTier(e.target.value)}>
            {LAMP_TIERS.map(t => (
              <option key={t.key} value={t.key}>
                {t.label}　·　NT$ {t.price}
              </option>
            ))}
          </select>
          <button onClick={submit}>點　燈</button>
          <a href="#offer" style={{
            display: "grid", placeItems: "center",
            border: "1px solid rgba(247,239,214,0.18)",
            color: "rgba(247,239,214,0.65)",
            textDecoration: "none",
            fontFamily: "var(--serif)", fontSize: 13, letterSpacing: "0.25em",
          }}>添香油 →</a>
        </div>

        <div className="lamp-shelf">
          {tiers.map((t, ti) => (
            <div className="row" key={ti} data-tier={t.label} style={{position: "relative"}}>
              {t.rows.map((lamp, i) => {
                const globalIdx = ti * 22 + i;
                const mine = mineIdx === globalIdx;
                return (
                  <div className={"lamp" + (lamp ? "" : " empty") + (mine ? " mine" : "")}
                       key={i}
                       title={lamp ? lamp.name : "尚未點亮"}>
                    <div className="top-cap"></div>
                    <div className="flame"></div>
                    <div className="body-l">
                      <div className="name-l">{lamp ? lamp.name : ""}</div>
                    </div>
                    <div className="base"></div>
                  </div>
                );
              })}
            </div>
          ))}
        </div>

        <div className="lamp-meta">
          <span>已點亮 <b>{lamps.length}</b> / 88 盞</span>
          <span>下次補燈日 · 每月十八</span>
          <span>本宮直送　全年照拂</span>
        </div>
      </div>
    </section>
  );
};

/* ---------- 功德名簿 ---------- */
const DonorWall = ({donors, myKey, filter, setFilter}) => {
  const cats = ["全部", "祈安", "添香油", "點燈", "光明燈", "結緣"];
  const filtered = filter === "全部"
    ? donors
    : donors.filter(d => d.kind === filter);

  return (
    <section className="wall" id="wall">
      <div className="wrap">
        <SectionHead kicker="功德名簿" title="信眾芳名　永誌不忘" latin="Donor Wall" />
        <div className="wall-grid">
          <div className="wall-aside">
            <h3>每一柱香，都被記得。</h3>
            <p>
              凡於本宮添香油、點光明燈、結緣信物者，皆登錄於功德名簿。
              名簿於梟婆神前每月十八開光誦讀一次，
              名列其上者，福祿綿長，平安康泰。
            </p>
            <div className="filters">
              {cats.map(c => (
                <button key={c}
                  className={"f" + (filter === c ? " active" : "")}
                  onClick={() => setFilter(c)}>
                  {c}
                </button>
              ))}
            </div>
            <div className="meta">
              <div className="item">
                <div className="num">{donors.length}</div>
                <div className="lbl">本年度善信</div>
              </div>
              <div className="item">
                <div className="num">{filtered.length}</div>
                <div className="lbl">本類別</div>
              </div>
            </div>
          </div>

          <div className="wall-board">
            <div className="wall-list">
              {filtered.map((d, i) => (
                <div className={"name" + (d.key === myKey ? " mine" : "")} key={i}>
                  <span className="who">{d.who}</span>
                  <span className="what">
                    {d.kind} · NT${d.amount.toLocaleString()}
                  </span>
                </div>
              ))}
              {filtered.length === 0 && (
                <div style={{
                  gridColumn: "1 / -1", padding: 48, textAlign: "center",
                  color: "var(--ink-mute)", letterSpacing: "0.3em", fontSize: 13,
                }}>本類別暫無紀錄</div>
              )}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

/* ---------- DonatePage ---------- */
const DonatePage = () => {
  const [donors, setDonors] = React.useState(() => {
    const seeded = SEED_DONORS.map(([w, a, k], i) => ({
      who: w, amount: a, kind: k, key: "s" + i,
    }));
    /* 清理舊版「求發財金」殘留紀錄 (金額為 0 者) */
    const mine = safeGet(STORAGE.myDono, [])
      .filter(d => d.amount > 0 && d.kind !== "求發財金");
    safeSet(STORAGE.myDono, mine);
    return [...mine, ...seeded];
  });
  const [lamps, setLamps] = React.useState(() => {
    const stored = safeGet(STORAGE.lamps, null);
    if (stored) return stored;
    return SEED_LAMPS.map(name => ({ name, tier: "光明燈", amount: 600 }));
  });
  const [myLampIdx, setMyLampIdx] = React.useState(() => safeGet(STORAGE.mine, -1));
  const [myKey, setMyKey] = React.useState(null);
  const [filter, setFilter] = React.useState("全部");

  const stats = React.useMemo(() => ({
    donors: donors.length,
    lamps:  lamps.length,
    total:  donors.reduce((s, d) => s + (d.amount || 0), 0),
  }), [donors, lamps]);

  const addDonor = (entry) => {
    const k = "u" + Date.now();
    const fresh = {
      who: entry.who || "善信",
      amount: entry.amount || 0,
      kind: entry.kind || "添香油",
      key: k,
    };
    setDonors(prev => {
      const next = [fresh, ...prev];
      const mine = next.filter(d => d.key && d.key.startsWith("u"));
      safeSet(STORAGE.myDono, mine);
      return next;
    });
    setMyKey(k);
    setTimeout(() => setMyKey(null), 4500);
  };

  const lightLamp = (entry) => {
    setLamps(prev => {
      const idx = prev.length;
      const next = [...prev, entry];
      safeSet(STORAGE.lamps, next);
      setMyLampIdx(idx);
      safeSet(STORAGE.mine, idx);
      return next;
    });
    addDonor({ who: entry.name, amount: entry.amount, kind: entry.tier });
  };

  return (
    <React.Fragment>
      <DonateHero stats={stats} />
      <OnlineOffering onContribute={addDonor} />
      <FortuneCard />
      <LampGrid lamps={lamps} mineIdx={myLampIdx} onLight={lightLamp} />
      <DonorWall donors={donors} myKey={myKey} filter={filter} setFilter={setFilter} />
    </React.Fragment>
  );
};

Object.assign(window, { DonatePage });