/* ============================================================
   BAN YARO — Gründer-Seite
   Öffentliches Leaderboard der 100 Gründer & Partner.
   ============================================================ */

window.Page_gruender = (() => {

  let _container = null;

  async function init(container, appState) {
    _container = container;
    _render();
    _load();
  }

  function refresh() { _load(); }
  function onDogChange() {}

  function _render() {
    _container.innerHTML = `
      <div style="max-width:680px;margin:0 auto;padding:var(--space-4)">
        <div style="text-align:center;margin-bottom:var(--space-6)">
          <div style="font-size:48px;margin-bottom:var(--space-2)">🏆</div>
          <h1 style="font-size:var(--text-2xl);font-weight:800;margin:0 0 var(--space-2)">
            Die 100 Gründer von Ban Yaro
          </h1>
          <p style="color:var(--c-text-secondary);font-size:var(--text-sm);max-width:480px;margin:0 auto">
            Nur 100 Menschen weltweit können sagen: <em>Ich war von Anfang an dabei.</em>
            Diese Plätze werden nie wieder vergeben.
          </p>
        </div>
        <div id="grnd-content">
          <div style="text-align:center;padding:var(--space-8);color:var(--c-text-muted)">Lade…</div>
        </div>
      </div>
    `;
  }

  async function _load() {
    const el = _container.querySelector('#grnd-content');
    try {
      const d = await API.get('/partner/founders/stats');
      if (!d || typeof d.total === 'undefined') throw new Error('Ungültige Antwort vom Server.');
      el.innerHTML = _renderStats(d);
    } catch (e) {
      el.innerHTML = `<p style="color:var(--c-text-muted);text-align:center">${e.message || 'Fehler beim Laden.'}</p>`;
    }
  }

  function _renderStats(d) {
    const pct  = Math.round((d.total / d.max) * 100);
    const open = d.open;

    return `
      <!-- Fortschrittsbalken -->
      <div class="by-card" style="padding:var(--space-5);margin-bottom:var(--space-5)">
        <div style="display:flex;justify-content:space-between;align-items:baseline;margin-bottom:var(--space-2)">
          <span style="font-weight:700;font-size:var(--text-lg)">${d.total} / ${d.max} Gründer</span>
          <span style="font-size:var(--text-sm);color:${open > 0 ? 'var(--c-success,#16a34a)' : 'var(--c-danger,#dc2626)'}">
            ${open > 0 ? `${open} Plätze frei` : 'Geschlossen'}
          </span>
        </div>
        <div style="background:var(--c-surface-2);border-radius:var(--radius-full);height:12px;overflow:hidden">
          <div style="background:linear-gradient(90deg,#7c3aed,#a855f7);width:${pct}%;height:100%;
                      border-radius:var(--radius-full);transition:width .5s ease"></div>
        </div>
        ${open > 0 ? `
          <p style="font-size:var(--text-xs);color:var(--c-text-muted);margin:var(--space-2) 0 0;text-align:center">
            Bist du dabei? Frag einen unserer Partner nach ihrem Einladungscode.
          </p>` : `
          <p style="font-size:var(--text-xs);color:var(--c-text-muted);margin:var(--space-2) 0 0;text-align:center">
            Alle 100 Gründer-Plätze sind vergeben. Diese Gruppe ist für immer geschlossen.
          </p>`}
      </div>

      <!-- Partner-Challenge Leaderboard -->
      ${d.partners.length > 0 ? `
      <div class="by-card" style="padding:var(--space-5);margin-bottom:var(--space-5)">
        <h2 style="font-size:var(--text-base);font-weight:700;margin:0 0 var(--space-1)">
          ${UI.icon('trophy')} Partner-Challenge
        </h2>
        <p style="font-size:var(--text-xs);color:var(--c-text-muted);margin:0 0 var(--space-4)">
          Unsere Partner treten gegeneinander an — wer bringt die meisten Gründer?
        </p>
        <div style="display:flex;flex-direction:column;gap:var(--space-2)">
          ${d.partners.map((p, i) => {
            const medal = i === 0 ? '🥇' : i === 1 ? '🥈' : i === 2 ? '🥉' : `#${i+1}`;
            const barPct = d.partners[0].uses > 0 ? Math.round((p.uses / d.partners[0].uses) * 100) : 0;
            return `
              <div style="display:flex;align-items:center;gap:var(--space-3);
                          padding:var(--space-3);border-radius:var(--radius-md);
                          background:${i === 0 ? 'linear-gradient(135deg,#fef9c3,#fef3c7)' : 'var(--c-surface-2)'}">
                <div style="font-size:22px;min-width:32px;text-align:center">${medal}</div>
                <div style="flex:1;min-width:0">
                  <div style="font-weight:700;font-size:var(--text-sm)">${_esc(p.label)}</div>
                  <div style="background:var(--c-surface-3,rgba(0,0,0,.08));border-radius:var(--radius-full);
                               height:6px;margin-top:var(--space-1);overflow:hidden">
                    <div style="background:#7c3aed;width:${barPct}%;height:100%;
                                border-radius:var(--radius-full)"></div>
                  </div>
                </div>
                <div style="font-weight:800;font-size:var(--text-lg);color:#7c3aed;min-width:36px;text-align:right">
                  ${p.uses}
                </div>
              </div>
            `;
          }).join('')}
        </div>
      </div>` : ''}

      <!-- Gründer-Galerie -->
      ${d.founders.length > 0 ? `
      <div class="by-card" style="padding:var(--space-5)">
        <h2 style="font-size:var(--text-base);font-weight:700;margin:0 0 var(--space-4)">
          ${UI.icon('users')} Die Gründer
        </h2>
        <div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:var(--space-2)">
          ${d.founders.map(f => `
            <div style="padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);
                         background:var(--c-surface-2);display:flex;align-items:center;gap:var(--space-2)">
              <span style="font-size:var(--text-xs);font-weight:800;color:#7c3aed;min-width:28px">#${f.founder_number}</span>
              <span style="font-size:var(--text-sm);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">
                ${_esc(f.name)}
              </span>
            </div>
          `).join('')}
          ${Array.from({length: d.open}, (_, i) => `
            <div style="padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);
                         border:2px dashed var(--c-border);display:flex;align-items:center;gap:var(--space-2);
                         opacity:.4">
              <span style="font-size:var(--text-xs);font-weight:800;color:var(--c-text-muted);min-width:28px">
                #${d.total + i + 1}
              </span>
              <span style="font-size:var(--text-sm);color:var(--c-text-muted)">frei</span>
            </div>
          `).join('')}
        </div>
      </div>` : `
      <div class="by-card" style="padding:var(--space-6);text-align:center">
        <p style="color:var(--c-text-muted);font-size:var(--text-sm)">
          Noch keine Gründer — sei der Erste!
        </p>
      </div>`}
    `;
  }

  function _esc(s) {
    return String(s || '').replace(/[&<>"']/g, c =>
      ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]));
  }

  return { init, refresh, onDogChange };

})();
