/* global React, Icon, Origin, SyncChip, Meter, CB, RoleChip, JobChip, Portrait, Tag, Empty, Seg, Input, useRoute */
// ============================================================
// Screens 5-7: Static roster, Raid night (FFLogs), Loot table
// ============================================================
const { useState: useS57, useMemo: useM57 } = React;

const STATIC_MEMBERS = [
  { name: 'Aerith Nightsong',    job: 'PLD', alt: 'WAR', synced: '2h ago' },
  { name: 'Korr Brassbottom',    job: 'WAR', alt: 'GNB', synced: '4h ago' },
  { name: 'Liliane d\'Aubreville', job: 'WHM', alt: 'AST', synced: '1d ago' },
  { name: 'Yumi Shiroyama',      job: 'SCH', alt: 'SGE', synced: '2h ago' },
  { name: 'Veska Voidsong',      job: 'NIN', alt: 'VPR', synced: '3h ago' },
  { name: 'Olric Stonebreak',    job: 'SAM', alt: 'DRG', synced: '6h ago' },
  { name: 'Thalia Greycloak',    job: 'BRD', alt: 'DNC', synced: '2h ago' },
  { name: 'Imre Kalvain',        job: 'BLM', alt: 'PCT', synced: '12h ago' },
];
const SUBS = [
  { name: 'Mira Sundwalker', job: 'AST', alt: 'WHM', synced: '1d ago' },
  { name: 'Brennan Holt',    job: 'DRK', alt: 'PLD', synced: '3d ago' },
];

// -------------------- 5. Static — Roster --------------------
function ScreenStaticRoster({ empty }) {
  const { go } = useRoute();
  if (empty) {
    return (
      <div className="static-empty-page">
        <div className="page-h">
          <div>
            <h1 className="page-h-title">Static</h1>
            <div className="page-h-sub">Your raid group's home — roster, schedule, raid nights, loot, prog.</div>
          </div>
        </div>
        <div className="card" style={{ padding: '48px 24px' }}>
          <Empty
            icon={<Icon.Static />}
            title="No static yet"
            sub="Create a static to start tracking attendance, prog, and loot. You can invite up to 12 members (8 main + subs)."
            action={
              <div className="row gap-8" style={{ justifyContent: 'center' }}>
                <button className="btn primary"><Icon.Plus /> Create a static</button>
                <button className="btn">Join with code</button>
              </div>
            }
          />
        </div>
      </div>
    );
  }

  return (
    <div className="static-page">
      {/* Static header */}
      <section className="card stc-head">
        <div className="stc-head-l">
          <div className="row gap-8" style={{ marginBottom: 6 }}>
            <Tag dot kind="primary">Active</Tag>
            <Tag>M4S — Savage</Tag>
            <Tag>Phase 3 prog</Tag>
            <Origin kind="manual" />
          </div>
          <h1 style={{ margin: 0, fontSize: 24, fontWeight: 600, letterSpacing: '-0.018em', color: 'var(--text-strong)' }}>Aether Crystals</h1>
          <div className="muted" style={{ marginTop: 4, fontSize: 13 }}>
            Tue / Thu · 8:00 – 11:00 PM ET · 4 weeks until tier ends
          </div>
        </div>
        <div className="stc-head-r">
          <div className="stc-stat">
            <div className="stc-stat-l">Prog phase</div>
            <div className="stc-stat-v">P3</div>
            <Meter value={62} tone="status" showPct={true} />
          </div>
          <div className="stc-stat">
            <div className="stc-stat-l">Avg attendance</div>
            <div className="stc-stat-v">94<span className="muted" style={{ fontSize: 14 }}>%</span></div>
            <div className="muted" style={{ fontSize: 11.5, marginTop: 2 }}>last 8 nights · <Origin kind="auto" label="auto · fflogs" /></div>
          </div>
          <div className="stc-stat">
            <div className="stc-stat-l">Next raid</div>
            <div className="stc-stat-v" style={{ fontSize: 18 }}>Tue 8:00 PM</div>
            <div className="muted" style={{ fontSize: 11.5, marginTop: 2 }}>in 2d 14h · auto reminder</div>
          </div>
        </div>
      </section>

      <div className="sect-h">
        <div className="sect-h-title">Composition · 2 · 2 · 4</div>
        <div className="row gap-8">
          <button className="btn ghost small" onClick={() => go('raidnight')}><Icon.Clock /> Raid nights</button>
          <button className="btn ghost small" onClick={() => go('loot')}><Icon.Loot /> Loot table</button>
          <button className="btn small"><Icon.Plus /> Add member</button>
        </div>
      </div>

      {/* 2-2-4 composition */}
      <div className="comp-grid">
        <div className="comp-col">
          <div className="comp-col-h">
            <span className="comp-col-t">Tanks</span>
            <span className="comp-col-n">2</span>
          </div>
          <div className="comp-cards">
            {STATIC_MEMBERS.filter(m => m.job === 'PLD' || m.job === 'WAR' || m.job === 'DRK' || m.job === 'GNB').map(m => (
              <MemberCard key={m.name} m={m} />
            ))}
          </div>
        </div>
        <div className="comp-col">
          <div className="comp-col-h">
            <span className="comp-col-t">Healers</span>
            <span className="comp-col-n">2</span>
          </div>
          <div className="comp-cards">
            {STATIC_MEMBERS.filter(m => ['WHM','SCH','AST','SGE'].includes(m.job)).map(m => (
              <MemberCard key={m.name} m={m} />
            ))}
          </div>
        </div>
        <div className="comp-col wide">
          <div className="comp-col-h">
            <span className="comp-col-t">DPS</span>
            <span className="comp-col-n">4</span>
          </div>
          <div className="comp-cards two">
            {STATIC_MEMBERS.filter(m => ['NIN','SAM','BRD','BLM','DRG','MNK','RPR','VPR','MCH','DNC','SMN','RDM','PCT'].includes(m.job)).map(m => (
              <MemberCard key={m.name} m={m} />
            ))}
          </div>
        </div>
      </div>

      {/* Subs */}
      <div className="sect-h">
        <div className="sect-h-title">Subs · {SUBS.length}</div>
        <button className="btn ghost small"><Icon.Plus /> Add sub</button>
      </div>
      <div className="sub-grid">
        {SUBS.map(m => <MemberCard key={m.name} m={m} sub />)}
        <div className="sub-add">
          <Icon.Plus />
          <span>Open sub slot</span>
        </div>
      </div>

      <style>{`
        .stc-head { display: flex; padding: 22px 24px; margin-bottom: 6px; align-items: center; gap: 24px; }
        .stc-head-l { flex: 1; min-width: 0; }
        .stc-head-r {
          display: grid; grid-template-columns: repeat(3, minmax(120px, 1fr));
          gap: 18px;
          padding-left: 24px;
          border-left: 1px solid var(--border-soft);
        }
        .stc-stat-l { font-size: 11px; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 4px; }
        .stc-stat-v { font-size: 22px; font-weight: 600; color: var(--text-strong); letter-spacing: -0.01em; font-family: 'Geist Mono', monospace; margin-bottom: 6px; }

        .comp-grid { display: grid; grid-template-columns: 1fr 1fr 2fr; gap: 14px; }
        .comp-col { background: var(--bg-elev); border: 1px solid var(--border-soft); border-radius: 12px; padding: 12px; }
        .comp-col-h { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px; padding: 0 4px; }
        .comp-col-t { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-faint); }
        .comp-col-n { font-family: 'Geist Mono', monospace; color: var(--text-muted); font-size: 12px; }
        .comp-cards { display: grid; gap: 8px; }
        .comp-cards.two { grid-template-columns: 1fr 1fr; }

        .sub-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
        .sub-add {
          display: flex; align-items: center; justify-content: center; gap: 8px;
          padding: 18px;
          border: 1px dashed var(--border);
          border-radius: 10px;
          color: var(--text-faint);
          font-size: 12.5px;
          cursor: pointer;
        }
        .sub-add svg { width: 14px; height: 14px; }
        .sub-add:hover { color: var(--text-muted); border-color: var(--border-hi); }

        @media (max-width: 1100px) {
          .comp-grid { grid-template-columns: 1fr; }
          .comp-cards.two { grid-template-columns: 1fr 1fr; }
          .stc-head { flex-direction: column; align-items: stretch; }
          .stc-head-r { border-left: none; border-top: 1px solid var(--border-soft); padding-left: 0; padding-top: 16px; }
        }
      `}</style>
    </div>
  );
}

function MemberCard({ m, sub }) {
  return (
    <div className={`member ${sub ? 'sub' : ''}`}>
      <Portrait size={40} label={m.name.split(' ')[0]} />
      <div className="member-info">
        <div className="row gap-6" style={{ marginBottom: 4 }}>
          <RoleChip job={m.job} />
          {m.alt && <span className="muted mono" style={{ fontSize: 10.5 }}>alt {m.alt}</span>}
          {sub && <Tag>sub</Tag>}
        </div>
        <div className="member-name">{m.name}</div>
        <div className="muted" style={{ fontSize: 11, marginTop: 2 }}>
          <Origin kind="manual" /> &nbsp;synced {m.synced}
        </div>
      </div>
      <button className="btn ghost small" style={{ width: 26, padding: 0 }}><Icon.More /></button>

      <style>{`
        .member {
          display: flex; align-items: center; gap: 12px;
          padding: 10px 12px;
          background: var(--surface);
          border: 1px solid var(--border-soft);
          border-radius: 10px;
        }
        .member:hover { border-color: var(--border); background: var(--surface-2); }
        .member-info { flex: 1; min-width: 0; }
        .member-name { font-size: 13px; font-weight: 600; color: var(--text-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .member.sub { opacity: 0.92; background: var(--bg-elev); }
      `}</style>
    </div>
  );
}

// -------------------- 6. Raid Night — FFLogs import --------------------
function ScreenRaidNight({ imported }) {
  const { go } = useRoute();
  const [link, setLink] = useS57(imported ? 'https://www.fflogs.com/reports/aBC123xYz9KqMnPp' : '');
  const [state, setState] = useS57(imported ? 'done' : 'empty'); // empty | importing | done

  const attendance = [
    { name: 'Aerith Nightsong',  job: 'PLD', present: true,  pulls: 18, best: 62, manual: false },
    { name: 'Korr Brassbottom',  job: 'WAR', present: true,  pulls: 18, best: 62, manual: false },
    { name: 'Liliane d\'Aubreville', job: 'WHM', present: true, pulls: 18, best: 62, manual: false },
    { name: 'Yumi Shiroyama',    job: 'SCH', present: true,  pulls: 18, best: 62, manual: false },
    { name: 'Veska Voidsong',    job: 'NIN', present: true,  pulls: 18, best: 62, manual: false },
    { name: 'Olric Stonebreak',  job: 'SAM', present: false, pulls: 0,  best: 0,  manual: true, note: 'Excused' },
    { name: 'Thalia Greycloak',  job: 'BRD', present: true,  pulls: 18, best: 62, manual: false },
    { name: 'Mira Sundwalker',   job: 'AST', present: true,  pulls: 12, best: 62, manual: false, isSub: true, swapsFor: 'OLR' },
    { name: 'Imre Kalvain',      job: 'BLM', present: true,  pulls: 6,  best: 41, manual: false, lateNote: 'Joined late · pull 13' },
  ];

  return (
    <div className="rn-page">
      <div className="page-h">
        <div>
          <div className="row gap-8" style={{ marginBottom: 6 }}>
            <Tag>Tuesday · March 4 · 8:00–11:00 PM ET</Tag>
            <Tag dot kind="primary">Raid night</Tag>
          </div>
          <h1 className="page-h-title">Raid night — M4S phase 3</h1>
          <div className="page-h-sub">Paste an FFLogs report below. We'll auto-fill attendance and pull the prog phase from the log.</div>
        </div>
        <div className="row gap-8">
          <button className="btn small" onClick={() => go('static')}><Icon.ChevL /> Back to static</button>
          <button className="btn small"><Icon.Loot /> Open loot table</button>
        </div>
      </div>

      {/* Import bar */}
      <section className={`fflogs-bar ${state}`}>
        <div className="fflogs-l">
          <div className="fflogs-ic">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
              <path d="M3 12 L7 12 L9 6 L13 18 L15 10 L18 13 L21 13" />
            </svg>
          </div>
          <div style={{ flex: 1 }}>
            <div className="row gap-6" style={{ marginBottom: 4 }}>
              <span className="strong" style={{ fontSize: 13 }}>FFLogs report</span>
              <Origin kind="auto" label="auto · fflogs" />
            </div>
            <Input
              icon={<Icon.Link />}
              placeholder="https://www.fflogs.com/reports/..."
              value={link}
              onChange={e => setLink(e.target.value)}
            />
          </div>
          <div className="row gap-8">
            {state === 'empty' && (
              <button className="btn primary" disabled={!link} style={!link ? { opacity: 0.4, cursor: 'not-allowed' } : {}}
                onClick={() => { setState('importing'); setTimeout(() => setState('done'), 1500); }}>
                Import
              </button>
            )}
            {state === 'importing' && (
              <button className="btn primary" disabled>
                <Icon.Spinner /> Importing…
              </button>
            )}
            {state === 'done' && (
              <>
                <button className="btn ghost small">View on FFLogs <Icon.External /></button>
                <button className="btn small" onClick={() => { setState('empty'); setLink(''); }}>
                  <Icon.Refresh /> Re-import
                </button>
              </>
            )}
          </div>
        </div>
      </section>

      {state === 'empty' && (
        <div className="card" style={{ marginTop: 16, padding: '40px 24px' }}>
          <Empty
            icon={<Icon.Link />}
            title="Paste an FFLogs link to auto-fill attendance"
            sub="We'll match each report participant to a member, mark presence, and pull the highest phase reached. You can override any row manually afterward."
            action={
              <div className="muted" style={{ fontSize: 12 }}>
                Tip: try posting your report to <span className="kbd mono">/raid log</span> in Discord — the bot will import it for you.
              </div>
            }
          />
        </div>
      )}

      {state !== 'empty' && (
        <>
          {/* Import summary */}
          <section className="rn-summary">
            <div className="rn-sum">
              <div className="rn-sum-l">Phase reached</div>
              <div className="rn-sum-v">P3 <span className="muted mono" style={{ fontSize: 14 }}>· 62%</span></div>
              <div className="muted" style={{ fontSize: 11.5 }}>previous best 58% · <Origin kind="diffed" /></div>
            </div>
            <div className="rn-sum">
              <div className="rn-sum-l">Pulls</div>
              <div className="rn-sum-v num">18</div>
              <div className="muted" style={{ fontSize: 11.5 }}>3h 02m total · <Origin kind="auto" label="auto · fflogs" /></div>
            </div>
            <div className="rn-sum">
              <div className="rn-sum-l">Present</div>
              <div className="rn-sum-v num">7 <span className="muted">/ 8</span></div>
              <div className="muted" style={{ fontSize: 11.5 }}>1 absence · 1 sub-in · <Origin kind="auto" label="auto · fflogs" /></div>
            </div>
            <div className="rn-sum">
              <div className="rn-sum-l">Best pull</div>
              <div className="rn-sum-v num">62<span className="muted" style={{ fontSize: 14 }}>%</span></div>
              <div className="muted" style={{ fontSize: 11.5 }}>pull 14 · 4m 12s</div>
            </div>
          </section>

          {/* Attendance list */}
          <div className="sect-h">
            <div className="sect-h-title">Attendance · auto-filled from log</div>
            <div className="row gap-8">
              <button className="btn ghost small">Mark all present</button>
              <button className="btn small">Save night</button>
            </div>
          </div>
          <section className="card" style={{ padding: 0 }}>
            <table className="tbl att-tbl">
              <thead>
                <tr>
                  <th style={{ width: 64 }}>Present</th>
                  <th>Member</th>
                  <th>Job</th>
                  <th>Pulls</th>
                  <th>Best phase</th>
                  <th>Source</th>
                  <th style={{ width: 80 }}></th>
                </tr>
              </thead>
              <tbody>
                {attendance.map(a => (
                  <tr key={a.name} className={!a.present ? 'absent' : ''}>
                    <td>
                      <CB on={a.present} onChange={() => {}} />
                    </td>
                    <td>
                      <div className="row gap-10">
                        <Portrait size={26} label="" />
                        <div>
                          <div className="strong" style={{ fontSize: 13 }}>{a.name}</div>
                          {a.isSub && <div className="muted" style={{ fontSize: 11 }}>sub-in for {a.swapsFor}</div>}
                          {a.lateNote && <div className="muted" style={{ fontSize: 11 }}>{a.lateNote}</div>}
                          {a.note && <div className="muted" style={{ fontSize: 11 }}>{a.note}</div>}
                        </div>
                      </div>
                    </td>
                    <td><RoleChip job={a.job} /></td>
                    <td className="num">{a.pulls}</td>
                    <td className="num">{a.best ? `${a.best}%` : '—'}</td>
                    <td>
                      {a.manual
                        ? <Origin kind="manual" label="manual override" />
                        : <Origin kind="auto" label="auto · fflogs" />}
                    </td>
                    <td>
                      <button className="btn ghost small" style={{ width: 26, padding: 0 }}><Icon.More /></button>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </section>

          <div className="rn-notes">
            <Icon.Info />
            <div>
              <div className="strong" style={{ fontSize: 12.5 }}>Manual overrides are kept separate</div>
              <div className="muted" style={{ fontSize: 12 }}>
                Re-importing the same report won't overwrite rows you marked manually. Auto rows still update if FFLogs revises the report.
              </div>
            </div>
          </div>
        </>
      )}

      <style>{`
        .fflogs-bar {
          background: var(--surface);
          border: 1px solid var(--border-soft);
          border-radius: 14px;
          padding: 14px 16px;
          margin-bottom: 4px;
        }
        .fflogs-bar.done {
          background: linear-gradient(90deg, var(--primary-bg-2) 0%, transparent 60%);
          border-color: oklch(0.50 0.13 275 / 0.35);
        }
        .fflogs-l { display: flex; align-items: flex-end; gap: 14px; }
        .fflogs-ic {
          width: 36px; height: 36px;
          border-radius: 8px;
          background: var(--surface-hi);
          border: 1px solid var(--border-soft);
          color: var(--primary-hi);
          display: grid; place-items: center;
          flex: 0 0 36px;
        }
        .fflogs-ic svg { width: 18px; height: 18px; }

        .rn-summary {
          display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
          margin-top: 14px;
        }
        .rn-sum {
          background: var(--surface);
          border: 1px solid var(--border-soft);
          border-radius: 12px;
          padding: 14px 16px;
        }
        .rn-sum-l { font-size: 11px; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 6px; }
        .rn-sum-v {
          font-family: 'Geist Mono', monospace;
          font-size: 24px;
          font-weight: 600;
          color: var(--text-strong);
          letter-spacing: -0.015em;
          margin-bottom: 4px;
        }

        .att-tbl tbody tr.absent td { opacity: 0.65; }
        .att-tbl tbody tr.absent .strong { color: var(--text-muted); }

        .rn-notes {
          display: flex; gap: 10px;
          padding: 12px 14px;
          background: var(--bg-elev);
          border: 1px solid var(--border-soft);
          border-radius: 10px;
          margin-top: 16px;
        }
        .rn-notes svg { color: var(--text-faint); width: 14px; height: 14px; flex: 0 0 14px; margin-top: 1px; }

        @media (max-width: 1100px) {
          .rn-summary { grid-template-columns: repeat(2, 1fr); }
        }
      `}</style>
    </div>
  );
}

// -------------------- 7. Static — Loot table --------------------
function ScreenLoot() {
  const { go } = useRoute();
  const drops = [
    { item: 'Crystalline ring of fending', night: 'Tue · Mar 4', to: 'Aerith Nightsong', toJob: 'PLD', rule: 'BiS priority', bisCount: 9 },
    { item: 'Crystalline trousers of healing', night: 'Tue · Mar 4', to: 'Liliane d\'Aubreville', toJob: 'WHM', rule: 'BiS priority', bisCount: 11 },
    { item: 'Sacred mythril (token)', night: 'Tue · Mar 4', to: 'Korr Brassbottom', toJob: 'WAR', rule: 'Free roll', bisCount: 8 },
    { item: 'Crystalline gloves of striking', night: 'Thu · Feb 27', to: 'Veska Voidsong', toJob: 'NIN', rule: 'BiS priority', bisCount: 7 },
    { item: 'Crystalline earring of casting', night: 'Thu · Feb 27', to: 'Imre Kalvain', toJob: 'BLM', rule: 'BiS priority', bisCount: 6 },
    { item: 'Sacred mythril (token)', night: 'Thu · Feb 27', to: 'Thalia Greycloak', toJob: 'BRD', rule: 'Free roll', bisCount: 5 },
    { item: 'Crystalline shoes of aiming', night: 'Tue · Feb 25', to: 'Olric Stonebreak', toJob: 'SAM', rule: 'BiS priority', bisCount: 4 },
  ];

  const needs = [
    { member: 'Aerith Nightsong', job: 'PLD', remaining: 3, items: ['Earring','Bracelet','Ring'] },
    { member: 'Korr Brassbottom', job: 'WAR', remaining: 5, items: ['MH','Earring','Bracelet','Ring','Necklace'] },
    { member: 'Liliane d\'Aubreville', job: 'WHM', remaining: 1, items: ['Necklace'] },
    { member: 'Yumi Shiroyama', job: 'SCH', remaining: 4, items: ['Body','Hands','Feet','Earring'] },
    { member: 'Veska Voidsong', job: 'NIN', remaining: 4, items: ['Body','Head','Ring','Necklace'] },
    { member: 'Olric Stonebreak', job: 'SAM', remaining: 6, items: ['MH','Head','Body','Hands','Earring','Ring'] },
    { member: 'Thalia Greycloak', job: 'BRD', remaining: 5, items: ['MH','Head','Body','Earring','Necklace'] },
    { member: 'Imre Kalvain', job: 'BLM', remaining: 6, items: ['MH','Head','Body','Hands','Earring','Necklace'] },
  ];

  return (
    <div className="loot-page">
      <div className="page-h">
        <div>
          <div className="row gap-8" style={{ marginBottom: 6 }}>
            <Tag>Aether Crystals · M4S</Tag>
            <Tag dot>Tier 2 of 3</Tag>
          </div>
          <h1 className="page-h-title">Loot table</h1>
          <div className="page-h-sub">Who got what, when, and under what rule. All entries are manual — including the bot's `/loot` records.</div>
        </div>
        <div className="row gap-8">
          <button className="btn small">Export CSV</button>
          <button className="btn primary small"><Icon.Plus /> Add drop</button>
        </div>
      </div>

      {/* Discord tip callout */}
      <div className="loot-tip">
        <div className="loot-tip-ic"><Icon.Bot /></div>
        <div>
          <div className="strong" style={{ fontSize: 13 }}>Log drops live in Discord</div>
          <div className="muted" style={{ fontSize: 12.5 }}>
            Run <span className="kbd mono">/loot &lt;item&gt; &lt;member&gt; &lt;rule&gt;</span> in your raid channel — the bot pushes the row straight into this table.
          </div>
        </div>
        <button className="btn ghost small">Open Discord →</button>
      </div>

      <div className="loot-grid">
        {/* Drops table */}
        <section className="card" style={{ padding: 0 }}>
          <div className="card-h">
            <Icon.Loot />
            <div className="card-h-title">Recent drops</div>
            <div className="card-h-sub">{drops.length} drops this tier</div>
            <div className="row gap-8">
              <Input icon={<Icon.Search />} placeholder="Search item or member…" style={{ width: 220 }} />
              <button className="btn ghost small"><Icon.Filter /> Filter</button>
            </div>
          </div>
          <table className="tbl loot-tbl">
            <thead>
              <tr>
                <th>Item</th>
                <th>Raid night</th>
                <th>Awarded to</th>
                <th>Rule</th>
                <th>Source</th>
                <th style={{ width: 60 }}></th>
              </tr>
            </thead>
            <tbody>
              {drops.map((d, i) => (
                <tr key={i}>
                  <td>
                    <div className="row gap-10">
                      <div className="loot-item-ic">
                        {d.item.includes('token') ? <Icon.Lock /> : <Icon.Loot />}
                      </div>
                      <div>
                        <div className="strong" style={{ fontSize: 13 }}>{d.item}</div>
                        <div className="muted" style={{ fontSize: 11 }}><Origin kind="auto" label="auto · catalog" /></div>
                      </div>
                    </div>
                  </td>
                  <td><span className="mono muted">{d.night}</span></td>
                  <td>
                    <div className="row gap-8">
                      <Portrait size={22} label="" />
                      <span className="strong" style={{ fontSize: 12.5 }}>{d.to}</span>
                      <RoleChip job={d.toJob} />
                    </div>
                  </td>
                  <td>
                    <span className={`rule-pill ${d.rule === 'BiS priority' ? 'bis' : 'free'}`}>{d.rule}</span>
                  </td>
                  <td><Origin kind="manual" /></td>
                  <td><button className="btn ghost small" style={{ width: 26, padding: 0 }}><Icon.More /></button></td>
                </tr>
              ))}
            </tbody>
          </table>
        </section>

        {/* Who still needs what */}
        <section className="card" style={{ padding: 0 }}>
          <div className="card-h">
            <Icon.Filter />
            <div className="card-h-title">Who still needs what</div>
            <div className="card-h-sub"><Origin kind="diffed" /></div>
          </div>
          <ul className="needs-list">
            {needs.map(n => (
              <li key={n.member} className="need-row">
                <div className="row gap-8">
                  <RoleChip job={n.job} />
                  <span className="strong" style={{ fontSize: 12.5 }}>{n.member}</span>
                </div>
                <div className="need-pieces">
                  {n.items.map(it => <span key={it} className="need-pill">{it}</span>)}
                </div>
                <span className="need-count num">{n.remaining}<span className="muted" style={{ fontSize: 10 }}>/14</span></span>
              </li>
            ))}
          </ul>
          <div className="muted" style={{ fontSize: 11.5, padding: '10px 16px', borderTop: '1px solid var(--border-soft)' }}>
            Computed by diffing each member's BiS list against awarded drops.
          </div>
        </section>
      </div>

      <style>{`
        .loot-tip {
          display: flex; align-items: center; gap: 12px;
          padding: 12px 16px;
          background: linear-gradient(90deg, var(--primary-bg-2) 0%, transparent 70%);
          border: 1px solid oklch(0.50 0.13 275 / 0.3);
          border-radius: 10px;
          margin-bottom: 16px;
        }
        .loot-tip-ic {
          width: 32px; height: 32px;
          flex: 0 0 32px;
          border-radius: 7px;
          background: var(--primary-bg);
          color: var(--primary-hi);
          display: grid; place-items: center;
        }
        .loot-tip > div { flex: 1; }

        .loot-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 16px; align-items: start; }

        .loot-item-ic {
          width: 28px; height: 28px;
          border-radius: 6px;
          background: var(--surface-hi);
          border: 1px solid var(--border-soft);
          display: grid; place-items: center;
          color: var(--text-muted);
          flex: 0 0 28px;
        }
        .loot-item-ic svg { width: 14px; height: 14px; }

        .rule-pill {
          display: inline-block;
          font-family: 'Geist Mono', monospace;
          font-size: 10.5px;
          padding: 3px 8px;
          border-radius: 4px;
          background: var(--surface-hi);
          border: 1px solid var(--border-soft);
          color: var(--text-muted);
        }
        .rule-pill.bis { color: var(--primary-hi); background: var(--primary-bg-2); border-color: oklch(0.55 0.13 275 / 0.35); }
        .rule-pill.free { color: var(--warning); background: var(--warning-bg); border-color: oklch(0.50 0.10 75 / 0.35); }

        .needs-list { list-style: none; padding: 0; margin: 0; }
        .need-row {
          display: grid;
          grid-template-columns: 1fr 36px;
          grid-template-areas:
            "head count"
            "pieces pieces";
          gap: 6px 12px;
          padding: 12px 16px;
          border-top: 1px solid var(--border-soft);
        }
        .need-row:first-child { border-top: none; }
        .need-row > .row { grid-area: head; }
        .need-pieces { grid-area: pieces; display: flex; flex-wrap: wrap; gap: 4px; }
        .need-count { grid-area: count; font-size: 16px; font-weight: 600; color: var(--text); text-align: right; }
        .need-pill {
          font-family: 'Geist Mono', monospace;
          font-size: 10px;
          padding: 2px 7px;
          border-radius: 3px;
          background: var(--surface-hi);
          color: var(--text-muted);
          border: 1px solid var(--border-soft);
        }

        @media (max-width: 1100px) {
          .loot-grid { grid-template-columns: 1fr; }
        }
      `}</style>
    </div>
  );
}

Object.assign(window, { ScreenStaticRoster, ScreenRaidNight, ScreenLoot });