/* ============================================================
       SCREEN: WARBANDS LIST
       ============================================================ */
    const WarbandsList = ({ warbands, miniatures, onOpen, onNew }) => {
      return (
        <div className="pb-24">
          <Header
            title="Warbands"
            subtitle="Forces sworn to your banner"
            action={
              <button onClick={onNew} className="btn-primary flex items-center gap-1">
                <Icon name="plus" className="w-4 h-4" /> New
              </button>
            }
          />

          {warbands.length === 0 ? (
            <EmptyState
              icon="flag"
              title="No warbands"
              hint="Muster your miniatures into a warband for battle."
              action={<button onClick={onNew} className="btn-primary">Forge Warband</button>}
            />
          ) : (
            <div className="px-4 pt-4 space-y-3">
              {warbands.map(w => {
                const minis = miniatures.filter(m => w.unitIds.includes(m.id));
                return (
                  <button
                    key={w.id}
                    onClick={() => onOpen(w.id)}
                    className="w-full bg-panel border border-line rounded p-4 panel-edge active:bg-panel2 text-left"
                  >
                    <div className="flex items-start justify-between">
                      <div className="min-w-0 flex-1">
                        <div className="serif text-gold text-lg truncate">{w.name}</div>
                        <div className="text-xs text-muted mt-0.5">{w.faction || 'No faction'} · {w.gameSystem}</div>
                      </div>
                      <Icon name="chevron" className="w-4 h-4 text-muted shrink-0 mt-1" />
                    </div>
                    <Ornament />
                    <div className="flex items-center justify-between text-xs">
                      <span className="text-muted">{minis.length} units</span>
                      <span className="serif text-goldBright">{totalPoints(minis)} pts</span>
                    </div>
                  </button>
                );
              })}
            </div>
          )}
        </div>
      );
    };

    /* ============================================================
       SCREEN: WARBAND DETAIL (Builder + Abilities View)
       ============================================================ */
    const WarbandDetail = ({ warband, miniatures, onBack, onUpdate, onDelete, onStartBattle }) => {
      const [tab, setTab] = useState('roster'); // roster | abilities
      const [picking, setPicking] = useState(false);
      const [editing, setEditing] = useState(false);
      const [editForm, setEditForm] = useState(warband);

      const minis = useMemo(() => miniatures.filter(m => warband.unitIds.includes(m.id)), [miniatures, warband.unitIds]);
      const points = totalPoints(minis);
      const abilities = useMemo(() => aggregateAbilities(minis), [minis]);

      const addUnit = (id) => {
        if (warband.unitIds.includes(id)) return;
        onUpdate({ ...warband, unitIds: [...warband.unitIds, id] });
      };
      const removeUnit = (id) => {
        onUpdate({ ...warband, unitIds: warband.unitIds.filter(x => x !== id) });
      };

      const candidates = useMemo(() =>
        miniatures.filter(m => m.gameSystem === warband.gameSystem && !warband.unitIds.includes(m.id))
      , [miniatures, warband]);

      return (
        <div className="pb-24">
          <Header
            title={warband.name}
            subtitle={`${warband.faction || 'No faction'} · ${warband.gameSystem}`}
            onBack={onBack}
            action={
              <button onClick={() => { setEditForm(warband); setEditing(true); }} className="btn-ghost p-2">
                <Icon name="edit" className="w-4 h-4" />
              </button>
            }
          />

          {/* Stat Bar */}
          <div className="px-4 pt-4">
            <div className="bg-panel border border-line rounded panel-edge p-3 grid grid-cols-3 gap-2 text-center">
              <Stat label="Units" value={minis.length} />
              <Stat label="Points" value={points} highlight />
              <Stat label="Abilities" value={abilities.length} />
            </div>
            <button onClick={() => onStartBattle(warband.id)} className="btn-blood w-full mt-3 flex items-center justify-center gap-2">
              <Icon name="sword" className="w-4 h-4" /> Begin Battle
            </button>
          </div>

          {/* Tabs */}
          <div className="px-4 mt-5 border-b border-line">
            <div className="flex gap-1">
              <TabButton active={tab === 'roster'} onClick={() => setTab('roster')}>
                <Icon name="users" className="w-4 h-4 inline mr-1" /> Roster
              </TabButton>
              <TabButton active={tab === 'abilities'} onClick={() => setTab('abilities')}>
                <Icon name="bolt" className="w-4 h-4 inline mr-1" /> Abilities
              </TabButton>
            </div>
          </div>

          {tab === 'roster' && (
            <div className="px-4 pt-4 space-y-2">
              {minis.length === 0 && (
                <p className="text-center text-muted text-sm py-8">No units in this warband yet.</p>
              )}
              {minis.map(m => (
                <div key={m.id} className="bg-panel border border-line rounded p-3 flex items-center gap-3 panel-edge">
                  <div className="w-10 h-10 shrink-0 rounded bg-gradient-to-br from-panel2 to-bg border border-line flex items-center justify-center">
                    <span className="serif text-gold">{m.name.charAt(0)}</span>
                  </div>
                  <div className="flex-1 min-w-0">
                    <div className="serif text-parchment text-sm truncate">{m.name}</div>
                    <div className="text-xs text-muted truncate">{(m.keywords || []).join(' · ')}</div>
                  </div>
                  <div className="text-right shrink-0">
                    <div className="serif text-gold">{m.points}<span className="text-[10px] text-muted ml-0.5">pts</span></div>
                  </div>
                  <button onClick={() => removeUnit(m.id)} className="p-2 text-muted hover:text-blood">
                    <Icon name="x" className="w-4 h-4" />
                  </button>
                </div>
              ))}
              <button onClick={() => setPicking(true)} className="btn-ghost w-full mt-3 border-dashed">
                <Icon name="plus" className="w-4 h-4 inline mr-1" /> Add Miniature
              </button>
            </div>
          )}

          {tab === 'abilities' && (
            <div className="px-4 pt-4">
              {abilities.length === 0 ? (
                <p className="text-center text-muted text-sm py-8">No abilities to aggregate yet.</p>
              ) : (
                <div className="space-y-3">
                  <p className="text-xs text-muted italic">
                    {abilities.length} unique abilities across {minis.length} units. Tap an ability to see who carries it.
                  </p>
                  {abilities.map(a => (
                    <AbilityCard key={a.slug} ability={a} />
                  ))}
                </div>
              )}
            </div>
          )}

          {/* Pick miniatures modal */}
          <Modal
            open={picking}
            onClose={() => setPicking(false)}
            title="Add to Warband"
          >
            {candidates.length === 0 ? (
              <p className="text-sm text-muted text-center py-6">No more {warband.gameSystem} miniatures available.</p>
            ) : (
              <div className="space-y-2">
                {candidates.map(m => (
                  <button
                    key={m.id}
                    onClick={() => { addUnit(m.id); setPicking(false); }}
                    className="w-full bg-bg border border-line rounded p-3 flex items-center gap-3 text-left active:bg-panel2"
                  >
                    <div className="w-9 h-9 shrink-0 rounded bg-panel2 border border-line flex items-center justify-center serif text-gold text-sm">
                      {m.name.charAt(0)}
                    </div>
                    <div className="flex-1 min-w-0">
                      <div className="serif text-parchment text-sm truncate">{m.name}</div>
                      <div className="text-xs text-muted truncate">{m.faction}</div>
                    </div>
                    <div className="serif text-gold text-sm">{m.points} pts</div>
                  </button>
                ))}
              </div>
            )}
          </Modal>

          {/* Edit warband modal */}
          <Modal
            open={editing}
            onClose={() => setEditing(false)}
            title="Edit Warband"
            footer={
              <>
                <button onClick={() => setEditing(false)} className="btn-ghost">Cancel</button>
                <button
                  onClick={() => { onUpdate(editForm); setEditing(false); }}
                  className="btn-primary"
                >Save</button>
              </>
            }
          >
            <div className="space-y-3">
              <Field label="Name">
                <input value={editForm.name} onChange={e => setEditForm({ ...editForm, name: e.target.value })} />
              </Field>
              <Field label="Faction">
                <input value={editForm.faction || ''} onChange={e => setEditForm({ ...editForm, faction: e.target.value })} />
              </Field>
              <Field label="Game System">
                <select value={editForm.gameSystem} onChange={e => setEditForm({ ...editForm, gameSystem: e.target.value })}>
                  {GAME_SYSTEMS.map(s => <option key={s}>{s}</option>)}
                </select>
              </Field>
              <Field label="Notes">
                <textarea rows="3" value={editForm.notes || ''} onChange={e => setEditForm({ ...editForm, notes: e.target.value })} />
              </Field>
              <button
                onClick={() => { if (confirm('Disband this warband?')) { onDelete(warband.id); } }}
                className="btn-blood w-full mt-2"
              >
                <Icon name="trash" className="w-4 h-4 inline mr-1" /> Disband Warband
              </button>
            </div>
          </Modal>
        </div>
      );
    };

    const Stat = ({ label, value, highlight }) => (
      <div>
        <div className={`serif leading-none ${highlight ? 'text-2xl text-goldBright' : 'text-xl text-parchment'}`}>{value}</div>
        <div className="text-[10px] uppercase tracking-wider text-muted mt-1">{label}</div>
      </div>
    );

    const TabButton = ({ active, children, onClick }) => (
      <button
        onClick={onClick}
        className={`px-4 py-2 text-xs uppercase tracking-widest font-semibold border-b-2 -mb-px ${
          active ? 'border-gold text-goldBright' : 'border-transparent text-muted hover:text-parchment'
        }`}
      >
        {children}
      </button>
    );

    const AbilityCard = ({ ability }) => {
      const [open, setOpen] = useState(false);
      return (
        <div className="bg-panel border border-line rounded panel-edge overflow-hidden">
          <button onClick={() => setOpen(!open)} className="w-full p-3 flex items-start gap-3 text-left">
            <div className="w-8 h-8 shrink-0 rounded bg-bloodDim/30 border border-blood/40 flex items-center justify-center">
              <Icon name="bolt" className="w-4 h-4 text-bloodBright" />
            </div>
            <div className="flex-1 min-w-0">
              <div className="serif text-parchment">{ability.name}</div>
              <div className="flex gap-1 flex-wrap mt-1">
                {(ability.tags || []).map(t => (
                  <span key={t} className="chip chip-gold">{t}</span>
                ))}
                <span className="chip">{ability.owners.length} {ability.owners.length === 1 ? 'unit' : 'units'}</span>
              </div>
            </div>
            <Icon name={open ? 'chevronDown' : 'chevron'} className="w-4 h-4 text-muted shrink-0 mt-1" />
          </button>
          {open && (
            <div className="px-3 pb-3 pt-1 border-t border-line/60">
              <p className="text-sm text-parchmentDim mb-3 leading-relaxed">{ability.description}</p>
              <div className="text-[10px] uppercase tracking-widest text-muted mb-1.5">Carried by</div>
              <div className="flex flex-wrap gap-1.5">
                {ability.owners.map(o => (
                  <span key={o.id} className="chip chip-gold">{o.name}</span>
                ))}
              </div>
            </div>
          )}
        </div>
      );
    };