// ===== 分潤規則設定 =====
function PctInput({ value, onChange, small }) {
  const [v, setV] = React.useState(String(value));
  React.useEffect(() => setV(String(value)), [value]);
  const commit = () => { const n = parseFloat(v); if (isFinite(n) && n >= 0 && n <= 100) onChange(n); else setV(String(value)); };
  return (
    <span className={'pct' + (small ? ' pct-sm' : '')}>
      <input className="num" value={v} onChange={(e) => setV(e.target.value)} onBlur={commit} onKeyDown={(e) => e.key === 'Enter' && e.target.blur()} />%
    </span>
  );
}

function ShareBadge({ r }) {
  const cls = r.guild ? 'share share-guild' : r.shareRate === 100 ? 'share share-100' : 'share';
  return <span className={cls} title={r.shareType}>{r.guild ? '公會 ' : ''}{r.shareRate}%</span>;
}

function RulesView({ rows, rules, setRules, toggleGuild, invoiceMap, setInvoice }) {
  const [q, setQ] = React.useState('');
  const groups = React.useMemo(() => aggregate(rows, 'group').sort((a, b) => b.bonus - a.bonus), [rows]);
  const setGroupRate = (name, v) => setRules((s) => {
    const gr = { ...s.groupRates };
    if (v == null) delete gr[name]; else gr[name] = v;
    return { ...s, groupRates: gr };
  });
  const guildRows = rows.filter((r) => r.guild);
  const s = q.trim().toLowerCase();
  const candidates = s ? rows.filter((r) => !r.guild && (r.nick.toLowerCase().includes(s) || r.handle.toLowerCase().includes(s) || r.id.includes(s))).slice(0, 8) : [];
  const totalPayout = sumBy(rows, 'payout');

  return (
    <div className="view">
      <section className="rules-grid">
        <div className="rule">
          <h4>一般分潤</h4>
          <p>未另外指定的群組，一律按此比例給付</p>
          <PctInput value={rules.defaultRate} onChange={(v) => setRules((x) => ({ ...x, defaultRate: v }))} />
        </div>
        <div className="rule">
          <h4>公會代運營主播</h4>
          <p>公會與運營對半抽，直接以此比例給付，不再另扣一般分潤</p>
          <PctInput value={rules.guildRate} onChange={(v) => setRules((x) => ({ ...x, guildRate: v }))} />
        </div>
        <div className="rule">
          <h4>本月應付分潤合計</h4>
          <p>預估獎金 {fmtMoney(sumBy(rows, 'bonus'))} 依規則計算後</p>
          <b className="num" style={{ fontSize: 26, fontWeight: 600 }}>{fmtMoney(totalPayout)}</b>
          <span className="num muted">≈ {fmtTWD(sumBy(rows, 'payoutTWD'))}（匯率 {window.RECON_FX}）</span>
        </div>
      </section>

      <section className="grid-2">
        <div className="card card-flush">
          <div className="card-head pad"><h3>群組分潤比例</h3><span className="muted">優先順序：公會代運營 → 群組指定 → 一般分潤 · 結算方式決定是否扣 5% 服務費</span></div>
          <div className="table-wrap">
            <table className="tbl">
              <thead><tr><th>群組</th><th className="r">主播</th><th className="r">預估獎金</th><th>分潤比例</th><th>結算方式</th><th className="r">應付</th></tr></thead>
              <tbody>
                {groups.map((g) => {
                  const custom = rules.groupRates[g.name] != null;
                  const currInv = getInvoiceType(invoiceMap, g.name || '');
                  return (
                    <tr key={g.name}>
                      <td><span className="name">{g.name || <i className="muted">(未指定)</i>}</span>{g.guild > 0 && <span className="share share-guild" style={{ marginLeft: 8 }}>公會 {g.guild}</span>}</td>
                      <td className="r num">{g.count}</td>
                      <td className="r num">{fmtMoney(g.bonus)}</td>
                      <td>
                        {custom ? (
                          <span style={{ display: 'inline-flex', gap: 8, alignItems: 'center' }}>
                            <PctInput small value={rules.groupRates[g.name]} onChange={(v) => setGroupRate(g.name, v)} />
                            <button className="guild-btn" onClick={() => setGroupRate(g.name, null)}>還原預設</button>
                          </span>
                        ) : (
                          <span style={{ display: 'inline-flex', gap: 8, alignItems: 'center' }}>
                            <span className="muted num">{rules.defaultRate}%（預設）</span>
                            <button className="guild-btn" onClick={() => setGroupRate(g.name, rules.defaultRate)}>自訂</button>
                          </span>
                        )}
                      </td>
                      <td>
                        <div className="seg" style={{fontSize:11}}>
                          {INVOICE_TYPES.map((it) => (
                            <button key={it.v}
                              className={currInv === it.v ? 'on' : ''}
                              onClick={() => setInvoice(g.name || '', it.v)}
                              title={it.v === 'labor' ? '收 5% 服務費 (加入對帳單)' : '免服務費'}>
                              {it.short}
                            </button>
                          ))}
                        </div>
                      </td>
                      <td className="r num strong payout">{fmtMoney(g.payout)}</td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          </div>
        </div>

        <div className="card card-flush">
          <div className="card-head pad"><h3>公會代運營主播</h3><span className="muted">{guildRows.length} 位 · 跨月份保存</span></div>
          <div className="pad" style={{ borderBottom: '1px solid var(--line)' }}>
            <div className="search" style={{ width: '100%' }}>
              <svg width="14" height="14" viewBox="0 0 16 16"><circle cx="7" cy="7" r="5" fill="none" stroke="currentColor" strokeWidth="1.6" /><path d="M11 11l3.5 3.5" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" /></svg>
              <input value={q} onChange={(e) => setQ(e.target.value)} placeholder="搜尋主播加入公會代運營名單" />
            </div>
            {candidates.map((r) => (
              <div key={r.id} className="kv" style={{ alignItems: 'center' }}>
                <span className="creator"><span className="name">{r.nick}</span><span className="handle">@{r.handle} · {r.group || '—'}</span></span>
                <button className="guild-btn" onClick={() => { toggleGuild(r.id); setQ(''); }}>＋ 加入</button>
              </div>
            ))}
          </div>
          <div className="table-wrap">
            <table className="tbl">
              <tbody>
                {guildRows.map((r) => (
                  <tr key={r.id}>
                    <td><div className="creator"><span className="name">{r.nick}</span><span className="handle">@{r.handle} · {r.group || '—'}</span></div></td>
                    <td className="r num">{fmtMoney(r.bonus)} → <b className="payout">{fmtMoney(r.payout)}</b></td>
                    <td className="r"><button className="guild-btn" onClick={() => toggleGuild(r.id)}>移除</button></td>
                  </tr>
                ))}
                {!guildRows.length && <tr><td className="empty">尚未標記。可在上方搜尋，或在「主播明細」直接點「標記公會」。</td></tr>}
              </tbody>
            </table>
          </div>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { RulesView, ShareBadge, PctInput });