<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>101 Orphanage</title>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body { font-family: 'Segoe UI', sans-serif; background: #0d1b2a; color: #e0e0e0; min-height: 100vh; }
    header { background: #0a1520; border-bottom: 2px solid #ff6b2b; padding: 16px 24px; display: flex; align-items: center; gap: 16px; }
    header img { width: 80px; height: 80px; border-radius: 10px; object-fit: cover; }
    header h1 { font-size: 2rem; color: #00bfff; text-shadow: 0 0 8px #00bfff, 0 0 20px #00bfff88, 0 0 2px #ff6b2b, 2px 2px 0px #ff6b2b88; letter-spacing: 1px; }
    header p { color: #aaa; font-size: 0.9rem; margin-top: 2px; }
    .main-container { max-width: 960px; margin: 32px auto; padding: 0 16px; }
    .search-section { background: #0f2236; border: 1px solid #1e3a5a; border-radius: 12px; padding: 24px; margin-bottom: 28px; }
    .search-grid { display: grid; grid-template-columns: 1fr; gap: 16px; margin-bottom: 16px; }
    .search-box { display: flex; flex-direction: column; gap: 6px; }
    .search-box label { font-size: 0.8rem; color: #00bfff; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 700; text-shadow: 0 0 6px #00bfff66; }
    input[type="text"], select { width: 100%; padding: 10px 14px; border-radius: 8px; border: 1px solid #1e3a5a; background: #0d1b2a; color: #e0e0e0; font-size: 1rem; outline: none; transition: border 0.2s; appearance: none; }
    input[type="text"]:focus, select:focus { border-color: #00bfff; }
    select option { background: #0d1b2a; }
    .btn { padding: 10px 20px; border: none; border-radius: 8px; font-size: 0.95rem; cursor: pointer; font-weight: 600; transition: all 0.2s; }
    .btn-secondary { background: #0d1b2a; color: #00bfff; border: 1px solid #00bfff; }
    .btn-secondary:hover { background: #00bfff22; }
    .btn-browse { background: linear-gradient(135deg, #ff6b2b, #e63946); color: #fff; font-size: 1rem; padding: 12px 24px; width: 100%; box-shadow: 0 0 12px #ff6b2b66; letter-spacing: 0.5px; border: none; border-radius: 8px; cursor: pointer; font-weight: 600; }
    .btn-browse:hover { box-shadow: 0 0 20px #ff6b2baa; transform: translateY(-1px); }
    .divider { text-align: center; color: #556; margin: 12px 0; font-size: 0.85rem; }
    .player-search-bar { display: none; background: #0f2236; border: 1px solid #1e3a5a; border-radius: 12px; padding: 16px 20px; margin-bottom: 20px; flex-wrap: wrap; gap: 12px; align-items: center; }
    .player-search-bar.visible { display: flex; }
    .player-search-bar label { font-size: 0.85rem; color: #00bfff; font-weight: 700; white-space: nowrap; text-shadow: 0 0 6px #00bfff66; }
    .player-search-bar input { flex: 1; min-width: 200px; padding: 9px 14px; border-radius: 8px; border: 1px solid #1e3a5a; background: #0d1b2a; color: #e0e0e0; font-size: 0.95rem; outline: none; }
    .player-search-bar input:focus { border-color: #00bfff; }
    .player-search-hint { font-size: 0.72rem; color: #445; width: 100%; margin-top: -4px; }
    .search-match-count { font-size: 0.8rem; color: #ff6b2b; font-weight: 700; white-space: nowrap; }
    #loading { display: none; text-align: center; padding: 40px; color: #00bfff; }
    .spinner { width: 36px; height: 36px; border: 3px solid #1e3a5a; border-top: 3px solid #00bfff; border-radius: 50%; animation: spin 0.8s linear infinite; margin: 0 auto 16px; }
    @keyframes spin { to { transform: rotate(360deg); } }
    .tabs { display: flex; gap: 4px; margin-bottom: 20px; border-bottom: 2px solid #1e3a5a; }
    .tab-btn { padding: 10px 20px; background: none; border: none; color: #667; font-size: 0.95rem; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -2px; transition: all 0.2s; font-weight: 600; }
    .tab-btn.active { color: #00bfff; border-bottom-color: #00bfff; }
    .tab-btn:hover:not(.active) { color: #aaa; }
    .tab-content { display: none; }
    .tab-content.active { display: block; }
    .league-card { background: #0f2236; border-radius: 12px; margin-bottom: 20px; overflow: hidden; border: 1px solid #1e3a5a; }
    .league-card.has-orphans { border-color: #ff6b2b55; }
    .league-card.hidden { display: none; }
    .league-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; cursor: pointer; user-select: none; gap: 12px; flex-wrap: wrap; }
    .league-header:hover { background: #0d2030; }
    .league-title-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
    .league-name { font-weight: 700; font-size: 1rem; color: #e0e0e0; }
    .badge { padding: 2px 8px; border-radius: 20px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.5px; }
    .badge-orphan { background: #ff6b2b22; color: #ff6b2b; border: 1px solid #ff6b2b55; }
    .badge-full { background: #00bfff22; color: #00bfff; border: 1px solid #00bfff44; }
    .badge-very-active { background: #ff6b2b33; color: #ff8c55; border: 1px solid #ff6b2b66; }
    .badge-active { background: #ffd70022; color: #ffd700; border: 1px solid #ffd70044; }
    .badge-commish { background: #ffffff11; color: #aaa; border: 1px solid #333; font-size: 0.65rem; }
    .badge-extra-picks { background: #00ff8822; color: #00ff88; border: 1px solid #00ff8844; }
    .badge-extra-1sts { background: #ffd70022; color: #ffd700; border: 1px solid #ffd70066; }
    .badge-dues-2026 { background: #ffffff11; color: #aaa; border: 1px solid #333; }
    .badge-dues-2027 { background: #00bfff22; color: #00bfff; border: 1px solid #00bfff44; }
    .badge-dues-2028 { background: #00ff8822; color: #00ff88; border: 1px solid #00ff8844; }
    .league-meta { font-size: 0.8rem; color: #667; }
    .league-body { display: none; padding: 0 18px 18px; }
    .league-body.open { display: block; }
    .roster-card { background: #0d1b2a; border: 1px solid #1e3a5a; border-radius: 10px; padding: 16px; margin-top: 14px; }
    .roster-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; flex-wrap: wrap; gap: 8px; }
    .roster-title { font-weight: 700; color: #ff6b2b; font-size: 0.95rem; }
    .grades-row { display: flex; gap: 8px; flex-wrap: wrap; }
    .grade-pill { display: flex; flex-direction: column; align-items: center; background: #0f2236; border: 1px solid #1e3a5a; border-radius: 8px; padding: 6px 12px; min-width: 72px; }
    .grade-label { font-size: 0.65rem; color: #667; text-transform: uppercase; letter-spacing: 0.5px; }
    .grade-value { font-size: 1.3rem; font-weight: 900; margin-top: 2px; }
    .grade-score { font-size: 0.65rem; color: #556; margin-top: 1px; }
    .grade-Aplus { color: #00ff88; text-shadow: 0 0 8px #00ff8888; }
    .grade-A { color: #7fff7f; }
    .grade-Bplus { color: #00bfff; text-shadow: 0 0 8px #00bfff66; }
    .grade-B { color: #87ceeb; }
    .grade-Cplus { color: #ffd700; }
    .grade-C { color: #ffaa44; }
    .grade-D { color: #ff6b6b; }
    .section-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 1px; color: #556; margin: 12px 0 6px; }
    .player-list { display: flex; flex-direction: column; gap: 4px; }
    .player-row { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 6px; background: #0f2236; font-size: 0.85rem; }
    .player-row.highlight { background: #1a3a1a; border: 1px solid #00ff8844; }
    .pos-badge { font-size: 0.65rem; font-weight: 800; padding: 1px 5px; border-radius: 4px; min-width: 26px; text-align: center; }
    .pos-QB { background: #ff6b2b33; color: #ff8c55; }
    .pos-RB { background: #00cc6633; color: #00dd77; }
    .pos-WR { background: #00bfff33; color: #00bfff; }
    .pos-TE { background: #ffd70033; color: #ffd700; }
    .pos-K { background: #ffffff11; color: #aaa; }
    .pos-DEF { background: #ffffff11; color: #aaa; }
    .pos-unknown { background: #ffffff11; color: #555; }
    .player-name { flex: 1; color: #ddd; }
    .player-name.matched { color: #00ff88; font-weight: 700; }
    .player-team { color: #556; font-size: 0.75rem; }
    .player-value { color: #00bfff; font-size: 0.75rem; min-width: 45px; text-align: right; }
    .pick-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
    .pick-pill { background: #1e3a5a; border: 1px solid #2a4a6a; border-radius: 6px; padding: 4px 10px; font-size: 0.75rem; color: #ccc; }
    .pick-pill.round-1 { border-color: #ffd700; color: #ffd700; }
    .pick-pill.round-2 { border-color: #00bfff88; color: #00bfff; }
    .pick-pill.highlight { background: #1a3a1a; border-color: #00ff88; color: #00ff88; }
    .roster-full { display: none; }
    .roster-full.open { display: block; }
    .expand-roster-btn { background: none; border: 1px solid #1e3a5a; color: #667; border-radius: 6px; padding: 5px 12px; font-size: 0.75rem; cursor: pointer; margin-top: 10px; width: 100%; text-align: center; transition: all 0.2s; }
    .expand-roster-btn:hover { color: #00bfff; border-color: #00bfff44; }
    .action-row { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
    .btn-sm { padding: 7px 14px; font-size: 0.8rem; border-radius: 6px; }
    .orphan-rank-card { background: #0f2236; border: 1px solid #1e3a5a; border-radius: 12px; padding: 16px 20px; margin-bottom: 14px; display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
    .orphan-rank-card.hidden { display: none; }
    .rank-num { font-size: 1.6rem; font-weight: 900; color: #1e3a5a; min-width: 36px; text-align: center; line-height: 1; margin-top: 4px; }
    .rank-num.top3 { color: #ffd700; text-shadow: 0 0 8px #ffd70066; }
    .orphan-rank-info { flex: 1; min-width: 200px; }
    .orphan-rank-league { font-size: 0.8rem; color: #667; margin-bottom: 2px; }
    .orphan-rank-title { font-weight: 700; font-size: 1rem; color: #ff6b2b; margin-bottom: 8px; }
    .orphan-top-players { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
    .mini-player { background: #0d1b2a; border: 1px solid #1e3a5a; border-radius: 5px; padding: 3px 8px; font-size: 0.72rem; color: #ccc; display: flex; align-items: center; gap: 5px; }
    .mini-player.matched { border-color: #00ff8866; color: #00ff88; background: #0a2a1a; }
    .orphan-rank-grades { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
    .mini-grade { display: flex; align-items: center; gap: 6px; font-size: 0.75rem; color: #667; }
    .mini-grade-val { font-weight: 900; font-size: 1rem; }
    .results-summary { background: #0f2236; border: 1px solid #1e3a5a; border-radius: 10px; padding: 14px 20px; margin-bottom: 20px; display: flex; gap: 24px; flex-wrap: wrap; align-items: center; }
    .summary-stat { text-align: center; }
    .summary-num { font-size: 1.6rem; font-weight: 900; color: #00bfff; }
    .summary-lbl { font-size: 0.7rem; color: #556; text-transform: uppercase; letter-spacing: 0.5px; }
    .toggle-detail-btn { background: none; border: 1px solid #1e3a5a; color: #667; border-radius: 6px; padding: 4px 10px; font-size: 0.75rem; cursor: pointer; margin-top: 8px; }
    .toggle-detail-btn:hover { color: #aaa; border-color: #334; }
    .roster-detail { display: none; margin-top: 12px; }
    .roster-detail.open { display: block; }
    #error-msg { background: #3a0a0a; border: 1px solid #ff444466; color: #ff8888; border-radius: 8px; padding: 12px 16px; margin-bottom: 16px; display: none; }
    .no-results-msg { text-align: center; padding: 40px; color: #445; font-size: 0.95rem; display: none; }
  </style>
</head>
<body>

<header>
  <img src="logo.png" alt="Leagues 101 Logo" />
  <div>
    <h1>101 Orphanage</h1>
    <p>Find orphaned dynasty rosters across Leagues 101</p>
  </div>
</header>

<div class="main-container">
  <div style="display:flex;flex-direction:column;gap:10px;padding:20px 0;">
    <a href="/champions.html" style="text-decoration:none">
      <button class="btn-browse" style="background:linear-gradient(135deg,#c9a84c,#8a6a20);width:100%">🏆 Wall of Champions</button>
      
    </a>
    <a href="/adp.html" style="text-decoration:none">
  <button class="btn-browse" style="background:linear-gradient(135deg,#1a4a6b,#0d2d4a);width:100%">📊 ADP Dashboard</button>
</a>
   <!-- <a href="/board.html" style="text-decoration:none"><button class="btn-browse" style="background:linear-gradient(135deg,#1a6b3a,#0d4a28);width:100%">🏈 Dynasty Orphan Board</button></a> -->
  </div>
  <div class="search-section">
  <div class="search-section">
    <div class="search-grid">
      <div class="search-box">
        <label>👤 Browse by Commissioner</label>
        <select id="commissioner-select" onchange="window.onCommissionerSelect()">
          <option value="">— Select a commissioner —</option>
          <option value="2GunCorky">2GunCorky</option>
          <option value="Flyntrock">Flyntrock</option>
          <option value="NGLofficial">NGLofficial</option>
          <option value="StepisMoody">StepisMoody</option>
          <option value="SkunkDrool">SkunkDrool</option>
          <option value="Mikeytini">Mikeytini</option>
          <option value="Dutch116">Dutch116</option>
          <option value="ttedder">ttedder</option>
          <option value="mattttt14">mattttt14</option>
          <option value="mpas28">mpas28</option>
          <option value="CaptJaG">CaptJaG</option>
          <option value="stevecutch">stevecutch</option>
          
        </select>
      </div>
    </div>
    <div class="divider">— or —</div>
    <button class="btn-browse" onclick="browseAll()">🏠 Browse All Leagues 101 Orphans</button>
  </div>

  <div id="error-msg"></div>
  <div id="loading"><div class="spinner"></div><div id="loading-text">Loading...</div></div>

  <div id="results" style="display:none">
    <div id="results-summary-bar"></div>
    <div class="player-search-bar" id="player-search-bar">
      <label>🎯 Filter Orphans by Player or Picks:</label>
      <input type="text" id="player-filter-input" placeholder='e.g. "Drake Maye" or "extra picks"' oninput="applyPlayerFilter()" />
      <span class="search-match-count" id="match-count"></span>
      <div class="player-search-hint">Keywords: "extra picks" · "2027 Paid" · "2028 Paid" — or type any player name</div>
    </div>
    <div class="tabs" id="tabs-bar" style="display:none">
      <button class="tab-btn active" onclick="switchTab('leagues', this)">📋 Leagues</button>
      <button class="tab-btn" onclick="switchTab('top-orphans', this)">🏆 Top Available Rosters</button>
    </div>
    <div id="tab-leagues" class="tab-content active"></div>
    <div id="tab-top-orphans" class="tab-content"></div>
    <div class="no-results-msg" id="no-results-msg">No orphaned rosters match your search.</div>
  </div>
</div>

<script>
  let currentMode = 'single';
  let allLeaguesData = [];
  let allOrphansData = [];

  function switchTab(tab, btn) {
    document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
    document.querySelectorAll('.tab-content').forEach(t => t.classList.remove('active'));
    btn.classList.add('active');
    document.getElementById('tab-' + tab).classList.add('active');
    if (currentMode === 'all') applyPlayerFilter();
  }

  function showLoading(msg) {
    document.getElementById('loading').style.display = 'block';
    document.getElementById('loading-text').textContent = msg;
    document.getElementById('results').style.display = 'none';
    document.getElementById('error-msg').style.display = 'none';
    document.getElementById('player-search-bar').classList.remove('visible');
  }

  function hideLoading() { document.getElementById('loading').style.display = 'none'; }

  function showError(msg) {
    const el = document.getElementById('error-msg');
    el.textContent = msg;
    el.style.display = 'block';
  }

  function gradeClass(g) { return 'grade-' + g.replace('+', 'plus'); }

  function posClass(pos) {
    return ({QB:'pos-QB',RB:'pos-RB',WR:'pos-WR',TE:'pos-TE',K:'pos-K',DEF:'pos-DEF'})[pos] || 'pos-unknown';
  }

  function renderPlayerRow(p, highlight) {
    return `<div class="player-row${highlight?' highlight':''}">
      <span class="pos-badge ${posClass(p.position)}">${p.position}</span>
      <span class="player-name${highlight?' matched':''}">${p.name}</span>
      <span class="player-team">${p.team}</span>
      ${p.value>0?`<span class="player-value">${p.value.toLocaleString()}</span>`:''}
    </div>`;
  }

  function renderGradePill(label, grade, score) {
    return `<div class="grade-pill">
      <span class="grade-label">${label}</span>
      <span class="grade-value ${gradeClass(grade)}">${grade}</span>
      <span class="grade-score">${score.toLocaleString()}</span>
    </div>`;
  }

  function countExtraPicks(picks) {
    return (picks||[]).filter(p=>p.label.includes('Via')).length;
  }

  function countExtra1sts(picks) {
    // Count all 2026 round 1 picks (own + received) - if more than 1, that's extra
    const firstRoundPicks = (picks||[]).filter(p => p.round === 1 && p.season === '2026');
    return Math.max(0, firstRoundPicks.length - 1);
  }

  function renderRosterCard(roster, showGrades, searchTerm, cardId) {
    const starters = (roster.starters||[]).filter(p=>p.name!=='Unknown');
    const bench = roster.bench||[];
    const taxi = roster.taxi||[];
    const ir = roster.ir||[];
    const picks = roster.picks||[];
    const term = searchTerm ? searchTerm.toLowerCase() : '';
    const isExtraPicks = term==='extra picks';
    const mp = p => term && !isExtraPicks && p.name && p.name.toLowerCase().includes(term);

    const gradesHtml = showGrades && roster.overallGrade ? `<div class="grades-row">
      ${renderGradePill('Overall',roster.overallGrade,roster.overallScore)}
      ${renderGradePill('Starters',roster.starterGrade,roster.starterScore)}
      ${renderGradePill('Draft Cap',roster.pickGrade,roster.pickScore)}
    </div>` : '';

    const ec = countExtraPicks(picks);
    const eb = ec>0 ? `<span class="badge badge-extra-picks">+${ec} Extra Pick${ec>1?'s':''}</span>` : '';
    const e1 = countExtra1sts(picks);
    const e1b = e1>0 ? `<span class="badge badge-extra-1sts">🥇 Extra 1st${e1>1?'s':''}</span>` : '';
    const duesYear = roster.paidThroughYear || '2026';
    const duesClass = duesYear === '2028' ? 'badge-dues-2028' : duesYear === '2027' ? 'badge-dues-2027' : 'badge-dues-2026';
    const duesLabel = duesYear === '2026' ? '💰 Paid through 2026' : duesYear === '2027' ? '💰 Paid through 2027' : '💰 Paid through 2028';
    const duesBadge = `<span class="badge ${duesClass}">${duesLabel}</span>`;
    const fullId = cardId+'-full';

    const picksHtml = picks.map(p=>{
      const isExtra = p.label.includes('Via');
      return `<span class="pick-pill round-${p.round}${isExtraPicks&&isExtra?' highlight':''}">${p.label}</span>`;
    }).join('');

    return `<div class="roster-card">
      <div class="roster-header">
        <div style="display:flex;align-items:center;gap:8px;flex-wrap:wrap">
          <span class="roster-title">Roster #${roster.roster_id} — Orphaned</span>${eb}${e1b}${duesBadge}
        </div>
        ${gradesHtml}
      </div>
      ${starters.length?`<div class="section-label">${roster.isBestBall ? 'Players (Best Ball)' : 'Starters'}</div><div class="player-list">${starters.map(p=>renderPlayerRow(p,mp(p))).join('')}</div>`:''}
      <div class="roster-full" id="${fullId}">
        ${bench.length?`<div class="section-label">Bench</div><div class="player-list">${bench.map(p=>renderPlayerRow(p,mp(p))).join('')}</div>`:''}
        ${taxi.length?`<div class="section-label">Taxi Squad</div><div class="player-list">${taxi.map(p=>renderPlayerRow(p,mp(p))).join('')}</div>`:''}
        ${ir.length?`<div class="section-label">IR</div><div class="player-list">${ir.map(p=>renderPlayerRow(p,mp(p))).join('')}</div>`:''}
        ${picks.length?`<div class="section-label">Draft Picks</div><div class="pick-list">${picksHtml}</div>`:''}
      </div>
      <button class="expand-roster-btn" onclick="toggleRosterFull('${fullId}',this)">Show full roster ▾</button>
    </div>`;
  }

  function toggleRosterFull(id, btn) {
    const el = document.getElementById(id);
    el.classList.toggle('open');
    btn.textContent = el.classList.contains('open') ? 'Hide full roster ▴' : 'Show full roster ▾';
  }

  function rosterMatchesTerm(roster, term) {
    if (!term) return true;
    if (term==='extra picks') return countExtraPicks(roster.picks||[])>0;
    if (term==='2027 paid') return roster.paidThroughYear === '2027' || roster.paidThroughYear === '2028';
    if (term==='2028 paid') return roster.paidThroughYear === '2028';
    const all = [...(roster.starters||[]),...(roster.bench||[]),...(roster.taxi||[]),...(roster.ir||[])];
    return all.some(p=>p.name&&p.name.toLowerCase().includes(term));
  }

  function ktcUrl(id) {
    return `https://keeptradecut.com/dynasty/power-rankings/league-overview?leagueId=${id}&platform=2&viewMode=1&viewSort=0`;
  }

  function renderLeagueCard(league, showCommish, searchTerm) {
    const hasOrphans = league.orphaned_count>0;
    const ob = hasOrphans
      ? `<span class="badge badge-orphan">⚠️ ${league.orphaned_count} Orphan${league.orphaned_count>1?'s':''}</span>`
      : `<span class="badge badge-full">✅ Full</span>`;
    const ab = league.activity_label==='Very Active'
      ? `<span class="badge badge-very-active">🔥 Very Active</span>`
      : league.activity_label==='Active' ? `<span class="badge badge-active">⚡ Active</span>` : '';
    const cb = showCommish ? `<span style="color:#667788;font-size:0.75rem">by</span> <strong style="color:#00bfff;font-size:0.95rem;border:1px solid #ff6b2b;border-radius:4px;padding:1px 6px;">${league.commissioner}</strong>` : '';
    const id = 'league-'+league.league_id;
    const body = hasOrphans
      ? league.orphaned_rosters.map((r,i)=>renderRosterCard(r,true,searchTerm,`lc-${league.league_id}-${i}`)).join('')
      : '<p style="color:#556;font-size:0.85rem;padding-top:8px">No orphaned rosters — this league is full.</p>';

    return `<div class="league-card ${hasOrphans?'has-orphans':''}" id="lcard-${league.league_id}">
      <div class="league-header" onclick="toggleLeague('${id}')">
        <div>
          <div class="league-title-row"><span class="league-name">${league.league_name}</span>${ob}${ab}${cb}</div>
          <div class="league-meta">${league.total_rosters} teams</div>
        </div>
        <span style="color:#556;font-size:1.2rem">▾</span>
      </div>
      <div class="league-body ${hasOrphans?'open':''}" id="${id}">
        ${body}
        <div class="action-row">
<a href="${ktcUrl(league.league_id)}" target="_blank"><button class="btn btn-secondary btn-sm">📊 KTC Rankings</button></a>
${league.commissioner_user_id ? `<button class="btn btn-secondary btn-sm" onclick="window.dmCommish('${league.commissioner_user_id}', '${league.league_name.replace(/'/g, '')}')">📩 Contact Commissioner</button>` : ''}
        </div>

      </div>
    </div>`;
  }

  function toggleLeague(id) { document.getElementById(id).classList.toggle('open'); }

  function renderSummaryBar(leagues, label) {
    const t=leagues.length, w=leagues.filter(l=>l.orphaned_count>0).length, o=leagues.reduce((s,l)=>s+l.orphaned_count,0);
    return `<div class="results-summary">
      <div class="summary-stat"><div class="summary-num">${t}</div><div class="summary-lbl">${label}</div></div>
      <div class="summary-stat"><div class="summary-num">${w}</div><div class="summary-lbl">Have Openings</div></div>
      <div class="summary-stat"><div class="summary-num">${o}</div><div class="summary-lbl">Total Orphans</div></div>
    </div>`;
  }

  function renderTopOrphans(orphans, searchTerm) {
    if (!orphans||!orphans.length) return '<p style="color:#556;padding:20px">No orphaned rosters found.</p>';
    const term = searchTerm ? searchTerm.toLowerCase() : '';
    const isEP = term==='extra picks';
    return orphans.map((o,i)=>{
      const rank=i+1;
      const top=[...(o.starters||[])].filter(p=>p.value>0).sort((a,b)=>b.value-a.value).slice(0,5);
      const ab=o.activity_label==='Very Active'?`<span class="badge badge-very-active">🔥 Very Active</span>`:o.activity_label==='Active'?`<span class="badge badge-active">⚡ Active</span>`:'';
      const ec=countExtraPicks(o.picks||[]);
      const eb=ec>0?`<span class="badge badge-extra-picks">+${ec} Extra Pick${ec>1?'s':''}</span>`:'';
      const e1=countExtra1sts(o.picks||[]);
      const e1b=e1>0?`<span class="badge badge-extra-1sts">🥇 Extra 1st${e1>1?'s':''}</span>`:'';
      const did='od-'+i;
      return `<div class="orphan-rank-card" id="ocard-${i}">
        <div class="rank-num ${rank<=3?'top3':''}">#${rank}</div>
        <div class="orphan-rank-info">
<div class="orphan-rank-league"><strong style="font-size:1.05rem;color:#e8f4ff;">${o.league_name}</strong> ${ab}${eb}${e1b} <span style="color:#667788;font-size:0.75rem">by</span> <strong style="color:#00bfff;font-size:0.95rem;border:1px solid #ff6b2b;border-radius:4px;padding:1px 6px;">${o.commissioner}</strong></div>          <div class="orphan-rank-title">Roster #${o.roster_id}</div>
          <div class="orphan-top-players">
            ${top.map(p=>{const m=term&&!isEP&&p.name.toLowerCase().includes(term);return`<span class="mini-player${m?' matched':''}"><span class="pos-badge ${posClass(p.position)}" style="font-size:0.6rem;padding:1px 4px">${p.position}</span>${p.name}</span>`;}).join('')}
          </div>
          <button class="toggle-detail-btn" onclick="toggleDetail('${did}',this)">Show full roster ▾</button>
          <div class="roster-detail" id="${did}">${renderRosterCard(o,true,searchTerm,'oc-'+i)}</div>
          <div class="action-row">
<a href="${ktcUrl(o.league_id)}" target="_blank"><button class="btn btn-secondary btn-sm">📊 KTC</button></a>
${o.commissioner_user_id ? `<button class="btn btn-secondary btn-sm" onclick="window.dmCommish('${o.commissioner_user_id}', '${o.league_name.replace(/'/g, '')}', ${o.roster_id})">📩 Contact Commissioner</button>` : ''}
<button class="btn btn-secondary btn-sm" onclick="window.shareOrphan('${o.league_id}', ${o.roster_id})">🔗 Share</button>
          </div>
        </div>
        <div class="orphan-rank-grades">
          ${o.overallGrade?`
            <div class="mini-grade"><span>Overall</span><span class="mini-grade-val ${gradeClass(o.overallGrade)}">${o.overallGrade}</span></div>
            <div class="mini-grade"><span>Starters</span><span class="mini-grade-val ${gradeClass(o.starterGrade)}">${o.starterGrade}</span></div>
            <div class="mini-grade"><span>Draft Cap</span><span class="mini-grade-val ${gradeClass(o.pickGrade)}">${o.pickGrade}</span></div>`:''}
        </div>
      </div>`;
    }).join('');
  }

  function toggleDetail(id, btn) {
    const el=document.getElementById(id);
    el.classList.toggle('open');
    btn.textContent=el.classList.contains('open')?'Hide roster ▴':'Show full roster ▾';
  }

  function applyPlayerFilter() {
    if (currentMode!=='all') return;
    const term=document.getElementById('player-filter-input').value.trim().toLowerCase();

    // Re-render league cards with filtered rosters
    document.getElementById('tab-leagues').innerHTML = allLeaguesData.map(l => {
      if (!l.orphaned_count) return '';
      const filteredRosters = term ? l.orphaned_rosters.filter(r => rosterMatchesTerm(r, term)) : l.orphaned_rosters;
      if (term && filteredRosters.length === 0) return '';
      const filteredLeague = {...l, orphaned_rosters: filteredRosters, orphaned_count: filteredRosters.length};
      return renderLeagueCard(filteredLeague, true, term);
    }).join('') || '<p style="color:#556;padding:20px">No leagues found.</p>';

    // Filter top orphan cards
    allOrphansData.forEach((o,i)=>{
      const card=document.getElementById('ocard-'+i);
      if (card) card.classList.toggle('hidden', term && !rosterMatchesTerm(o,term));
    });

    const mc = term ? allLeaguesData.filter(l=>l.orphaned_count>0&&l.orphaned_rosters.some(r=>rosterMatchesTerm(r,term))).length : allLeaguesData.filter(l=>l.orphaned_count>0).length;
    document.getElementById('match-count').textContent=term?`${mc} league${mc!==1?'s':''} found`:'';
    document.getElementById('no-results-msg').style.display=term&&mc===0?'block':'none';
  }

  function computeGrades(orphans) {
    if (!orphans.length) return;
    const mo=Math.max(...orphans.map(o=>o.overallScore));
    const ms=Math.max(...orphans.map(o=>o.starterScore));
    const mp=Math.max(...orphans.map(o=>o.pickScore));
    orphans.forEach(o=>{
      o.overallGrade=gfp(mo>0?o.overallScore/mo:0);
      o.starterGrade=gfp(ms>0?o.starterScore/ms:0);
      o.pickGrade=gfp(mp>0?o.pickScore/mp:0);
    });
  }

  function gfp(p){
    if(p>=0.85)return'A+';if(p>=0.75)return'A';
    if(p>=0.65)return'B+';if(p>=0.55)return'B';
    if(p>=0.45)return'C+';if(p>=0.35)return'C';
    return'D';
  }

window.onCommissionerSelect = function(){
    const u=document.getElementById('commissioner-select').value;
    if(u) searchCommissioner(u);
  }

  async function searchCommissioner(username){
    currentMode='single';
    showLoading('🔍 Searching through leagues... This may take up to a minute. Hang tight!');
    try{
      const res=await fetch('/api/commissioner/'+username);
      const data=await res.json();
      if(data.error){hideLoading();showError(data.error);return;}
      hideLoading();
      const leagues=data.leagues||[];
      const ao=[];
      leagues.filter(l=>l.orphaned_count>0).forEach(l=>l.orphaned_rosters.forEach(r=>ao.push({...r,league_id:l.league_id,league_name:l.league_name,activity_label:l.activity_label,commissioner:username})));
      computeGrades(ao);
      leagues.sort((a,b)=>b.orphaned_count-a.orphaned_count);
      document.getElementById('results-summary-bar').innerHTML=renderSummaryBar(leagues,'Leagues');
      document.getElementById('tab-leagues').innerHTML=leagues.map(l=>renderLeagueCard(l,false,'')).join('')||'<p style="color:#556;padding:20px">No leagues found.</p>';
      document.getElementById('tab-top-orphans').innerHTML=renderTopOrphans(ao.sort((a,b)=>b.overallScore-a.overallScore),'');
      document.getElementById('tabs-bar').style.display=ao.length>0?'flex':'none';
      document.getElementById('player-search-bar').classList.remove('visible');
      document.getElementById('results').style.display='block';
          switchTab('leagues',document.querySelector('.tab-btn'));
    }catch(e){hideLoading();showError('Failed to load all commissioners. Try again.');}
  }

  async function browseAll(){
    currentMode='all';
    showLoading('🏠 Loading all Leagues 101 orphans across 8 commissioners... This will take 2-3 minutes. Grab a coffee! ☕');
    try{
      const res=await fetch('/api/all-commissioners');
      const data=await res.json();
      if(data.error){hideLoading();showError(data.error);return;}
      hideLoading();
      allLeaguesData=(data.leagues||[]).sort((a,b)=>b.orphaned_count-a.orphaned_count);
      allOrphansData=data.topOrphans||[];
      document.getElementById('results-summary-bar').innerHTML=renderSummaryBar(allLeaguesData,'L101 Leagues');
      document.getElementById('tab-leagues').innerHTML=allLeaguesData.map(l=>renderLeagueCard(l,true,'')).join('')||'<p style="color:#556;padding:20px">No leagues found.</p>';
      document.getElementById('tab-top-orphans').innerHTML=renderTopOrphans(allOrphansData,'');
      document.getElementById('tabs-bar').style.display='flex';
      document.getElementById('player-search-bar').classList.add('visible');
      document.getElementById('results').style.display='block';
      switchTab('leagues',document.querySelector('.tab-btn'));
}catch(e){hideLoading();console.error('SEARCH ERROR:', e.message, e.stack);showError('Failed to load all commissioners. Try again. Error: '+e.message);}  }

window.dmCommish = function(userId, leagueName, rosterId) {
  const msg = rosterId
    ? `Hey! I'm interested in the ${leagueName} orphan (Roster #${rosterId}). Is it still available?`
    : `Hey! I'm interested in an orphan roster in ${leagueName}. Is it still available?`;
  navigator.clipboard.writeText(msg).then(() => {
    showToast('✅ Message copied! Opening Sleeper — just paste it in the DM.');
    setTimeout(() => window.open('https://sleeper.com/messages/' + userId, '_blank'), 2500);
  }).catch(() => {
    window.open('https://sleeper.com/messages/' + userId, '_blank');
  });
}

window.showToast = function(msg) {
  let toast = document.getElementById('toast');
  if (!toast) {
    toast = document.createElement('div');
    toast.id = 'toast';
toast.style.cssText = 'position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:#0f2236;border:1px solid #00bfff;color:#00bfff;padding:16px 28px;border-radius:8px;font-size:1rem;font-weight:600;z-index:9999;transition:opacity 0.3s;box-shadow:0 0 40px #00bfff33;';    document.body.appendChild(toast);
  }
  toast.textContent = msg;
  toast.style.opacity = '1';
  clearTimeout(toast._timeout);
  toast._timeout = setTimeout(() => toast.style.opacity = '0', 3000);
}
async function loadSharedOrphan() {
  const rawSearch = window.location.search.replace(/&amp;/g, '&');
  const params = new URLSearchParams(rawSearch);
  const leagueId = params.get('league');
  const rosterId = params.get('roster');
  if (!leagueId || !rosterId) return false;
  if (!leagueId || !rosterId) return false;

 // Hide normal UI, show shared view
  const searchSection = document.getElementById('search-section');
  const tabsBar = document.getElementById('tabs-bar');
  const playerSearchBar = document.getElementById('player-search-bar');
  const results = document.getElementById('results');

  if (searchSection) searchSection.style.display = 'none';
  if (tabsBar) tabsBar.style.display = 'none';
  if (playerSearchBar) playerSearchBar.classList.remove('visible');
  if (results) results.style.display = 'block';

if (searchSection) searchSection.style.display = 'none';
if (tabsBar) tabsBar.style.display = 'none';
if (playerSearchBar) playerSearchBar.classList.remove('visible');
if (results) results.style.display = 'block';
  showLoading('Loading orphan roster...');

  try {
    const res = await fetch(`/api/orphan?league_id=${leagueId}&roster_id=${rosterId}`);
    const data = await res.json();
    if (data.error) { hideLoading(); showError(data.error); return true; }

    hideLoading();

    const o = data.orphan;
    o.league_name = data.league_name;
    o.league_id = data.league_id;
    o.commissioner = data.commissioner;
    o.commissioner_user_id = data.commissioner_user_id;
    o.activity_label = data.activity_label;
    computeGrades([o]);

    document.getElementById('results-summary-bar').innerHTML = `
      <div style="background:#0d1f33;border:1px solid #1a3a5c;border-radius:12px;padding:16px 20px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;">
        <div>
          <div style="font-size:1.1rem;font-weight:700;color:#e8f4ff;">${data.league_name}</div>
          <div style="font-size:0.8rem;color:#667788;">Roster #${o.roster_id} — Orphaned</div>
        </div>
        <button class="btn btn-primary" onclick="browseAll()" style="background:linear-gradient(135deg,#1a6b3a,#0d4a28);">
          🏠 See All Orphans
        </button>
      </div>`;

    document.getElementById('tab-leagues').innerHTML = renderRosterCard(o, false, '', 'shared');
    document.getElementById('tab-top-orphans').innerHTML = '';
    document.getElementById('tabs-bar').style.display = 'none';
    document.getElementById('results').style.display = 'block';

  } catch(e) {
    hideLoading();
    showError('Failed to load orphan. The link may be invalid.');
  }
  return true;
}
// Check for shared orphan link on page load
window.addEventListener('load', () => loadSharedOrphan());
window.shareOrphan = function(leagueId, rosterId) {
  const url = `${window.location.origin}/?league=${leagueId}&roster=${rosterId}`;
  navigator.clipboard.writeText(url).then(() => {
    showToast('🔗 Link copied to clipboard!');
  });
}
</script>
</body>
</html>