// =============================================================================
// COLLECTION BINDER
// =============================================================================
const { useState } = React;

function CollectionScreen({ state, actions }) {
  const { PROVIDERS:CP, CARDS:CC, MYTHIC_CARDS:CM, COLLECTIONS:CCL } = window.GAME_DATA;
  const owned = state.collection;
  const [filter, setFilter] = useState('all');
  const [rarityFilter, setRarityFilter] = useState('all');

  const providersList = ['all', ...Object.keys(CP)];
  const raritiesList = ['all', 'common', 'rare', 'epic', 'legendary', 'mythic'];

  return (
    <div className="page">
      <div className="eyebrow-row">
        <span className="eyebrow">◈ <strong>COLECCIÓN</strong> / TODOS LOS PROVEEDORES</span>
      </div>
      <div style={{display:'flex', justifyContent:'space-between', alignItems:'end', marginBottom:'24px', gap:'24px', flexWrap:'wrap'}}>
        <div className="section-title" style={{margin:0}}>Tu colección</div>
        <div style={{display:'flex', gap:'16px', flexWrap:'wrap'}}>
          <FilterGroup label="Proveedor" options={providersList} active={filter} onSelect={setFilter}
                       formatLabel={(o) => o === 'all' ? 'TODOS' : CP[o].code}/>
          <FilterGroup label="Rareza" options={raritiesList} active={rarityFilter} onSelect={setRarityFilter}
                       formatLabel={(o) => o === 'all' ? 'TODAS' : window.GAME_DATA.RARITIES[o].label.slice(0,4)}/>
        </div>
      </div>

      {Object.values(CP)
        .filter(p => filter === 'all' || p.id === filter)
        .map(p => {
          const cards = CC.filter(c =>
            c.provider === p.id &&
            (rarityFilter === 'all' || c.rarity === rarityFilter)
          );
          const have = cards.filter(c => owned[c.id]).length;
          const total = CC.filter(c => c.provider === p.id).length;
          const totalHave = CC.filter(c => c.provider === p.id && owned[c.id]).length;
          const complete = totalHave === total;
          if (cards.length === 0) return null;
          return (
            <div key={p.id} className="collection-section">
              <div className="collection-header">
                <div className="coll-title">
                  <ProvChip providerId={p.id} />
                  <div>
                    <div className="coll-name">{p.name}</div>
                    <div className="coll-code">{p.tagline}</div>
                  </div>
                </div>
                <div className="coll-progress">
                  <div><strong>{totalHave}</strong> / {total}</div>
                  <div className="coll-bar">
                    <div className={`coll-bar-fill ${complete?'complete':''}`} style={{width: (100*totalHave/total) + '%'}}></div>
                  </div>
                  {complete && <div style={{color:'var(--accent-lime)', marginTop:'6px', fontSize:'10px'}}>✓ +1500 CRD · ◆ BADGE {p.code}-MASTER</div>}
                </div>
              </div>
              <div className="cards-row stagger">
                {cards.map(c => {
                  const has = !!owned[c.id];
                  return (
                    <TopTrumpsCard key={c.id} card={c} locked={!has} />
                  );
                })}
              </div>
            </div>
          );
        })}

      {/* MYTHIC SECTION */}
      <div className="collection-section">
        <div className="collection-header">
          <div className="coll-title">
            <span className="prov-chip violet">◆ MYTHIC</span>
            <div>
              <div className="coll-name">CARTAS MÍTICAS</div>
              <div className="coll-code">Solo se obtienen derrotando campeones</div>
            </div>
          </div>
          <div className="coll-progress">
            <div><strong>{Object.keys(owned).filter(k => CM[k]).length}</strong> / 5</div>
          </div>
        </div>
        <div className="cards-row stagger">
          {Object.values(CM).map(c => (
            <TopTrumpsCard key={c.id} card={c} locked={!owned[c.id]} />
          ))}
        </div>
      </div>
    </div>
  );
}

function FilterGroup({ label, options, active, onSelect, formatLabel }) {
  return (
    <div style={{display:'flex', flexDirection:'column', gap:'6px'}}>
      <span className="eyebrow" style={{fontSize:'10px'}}>{label}</span>
      <div style={{display:'flex', gap:'4px'}}>
        {options.map(o => (
          <button key={o} className={`nav-btn ${active===o?'active':''}`}
                  onClick={() => onSelect(o)}
                  style={{padding:'6px 10px', fontSize:'10px'}}>
            {formatLabel ? formatLabel(o) : o}
          </button>
        ))}
      </div>
    </div>
  );
}

window.CollectionScreen = CollectionScreen;