<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>大会管理画面</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
    <style>
        :root {
            --sidebar-bg: #2c3e50;
            --entry-bg: #34495e;
            --main-bg: #1e2b37;
            --accent: #3498db;
            --win-color: #27ae60;
            --btn-purple: #9b59b6;
            --danger: #e74c3c;
            --card-radius: 12px;
            --text-main: #ecf0f1;
            --text-muted: #bdc3c7;
            --bg-gold: rgba(212, 175, 55, 0.4);
            --bg-silver: rgba(149, 165, 166, 0.4);
            --bg-bronze: rgba(166, 124, 82, 0.4);
            --win-bg: rgba(39, 174, 96, 0.25);
            --p-height: 38px;
            --p-gap: 8px;
            --btn-height: calc((var(--p-height) * 2) + var(--p-gap));
            --header-height: 50px;
        }

        body {
            font-family: sans-serif;
            margin: 0;
            display: flex;
            flex-direction: column;
            height: 100vh;
            background: var(--main-bg);
            color: var(--text-main);
            overflow: hidden;
        }

        /* ヘッダー */
        .nav-header {
            height: var(--header-height);
            background: #1a252f;
            display: flex;
            align-items: center;
            padding: 0 20px;
            justify-content: space-between;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            flex-shrink: 0;
        }

        .nav-logo {
            font-weight: bold;
            font-size: 18px;
        }

        .nav-links {
            display: flex;
            gap: 10px;
        }

        .nav-btn {
            padding: 8px 15px;
            border-radius: 4px;
            text-decoration: none;
            color: white;
            font-size: 14px;
            background: rgba(255, 255, 255, 0.1);
            transition: 0.2s;
        }

        .nav-btn:hover { background: var(--accent); }
        .nav-btn.active { background: var(--accent); font-weight: bold; }

        /* レイアウト */
        .app-container {
            display: flex;
            flex-grow: 1;
            overflow: hidden;
        }

        .lists-wrapper {
            display: flex;
            width: 480px;
            flex-shrink: 0;
            background: var(--sidebar-bg);
        }

        .list-col {
            width: 240px;
            display: flex;
            flex-direction: column;
            height: 100%;
        }

        .list-col.entry-side {
            background: var(--entry-bg);
            border-left: 1px solid rgba(0, 0, 0, 0.2);
        }

        .header {
            height: 50px;
            display: flex;
            align-items: center;
            padding: 0 15px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            box-sizing: border-box;
            flex-shrink: 0;
        }

        .control-panel {
            padding: 8px 0 0 0;
            display: flex;
            flex-direction: column;
            gap: var(--p-gap);
            flex-shrink: 0;
        }

        .scroll-area {
            flex-grow: 1;
            overflow-y: auto;
            padding: 0 0 10px 0;
        }

        /* 操作パネルのコンポーネント */
        .mode-switch-container, .btn-main, .btn-sub, .count-display {
            height: var(--btn-height);
            box-sizing: border-box;
            margin: 0 10px;
            flex-shrink: 0;
        }

        .mode-switch-container {
            position: relative;
            background: rgba(0, 0, 0, 0.4);
            border-radius: 8px;
            display: flex;
            padding: 4px;
            cursor: pointer;
        }

        .mode-slider {
            position: absolute;
            top: 4px;
            left: 4px;
            width: calc(50% - 4px);
            height: calc(100% - 8px);
            background: var(--accent);
            border-radius: 6px;
            transition: transform 0.3s;
            z-index: 1;
        }

        .mode-switch-container.is-trio .mode-slider { transform: translateX(100%); }

        .mode-label {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 13px;
            font-weight: bold;
            color: white;
            z-index: 2;
            text-align: center;
            line-height: 1.2;
            opacity: 0.5;
        }

        .mode-label.active { opacity: 1; }

        .btn-main {
            background: var(--btn-purple);
            color: white;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            font-weight: bold;
            font-size: 15px;
        }

        .btn-main.finish { background: var(--danger); }

        .btn-sub {
            background: var(--accent);
            color: white;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            font-size: 14px;
            font-weight: bold;
        }

        .count-display {
            background: rgba(0, 0, 0, 0.2);
            border-radius: 8px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            border: 1px solid rgba(255, 255, 255, 0.1);
        }

        .count-label { font-size: 11px; color: #bdc3c7; margin-bottom: 2px; }

        /* リストアイテム */
        .player-item {
            background: rgba(255, 255, 255, 0.05);
            padding: 0 15px;
            margin: 0 10px var(--p-gap);
            border-radius: 6px;
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            font-size: 14px;
            height: var(--p-height);
            align-items: center;
            box-sizing: border-box;
        }

        #masterArea { padding-top: 8px; }
        #entryArea { padding-top: var(--p-gap); }

        /* メイン表示エリア */
        .main-content {
            flex-grow: 1;
            padding: 25px;
            overflow-y: auto;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        #captureArea {
            width: 100%;
            max-width: 900px;
            padding: 30px;
            box-sizing: border-box;
            background: var(--main-bg);
            border-radius: 20px;
        }

        .hidden { display: none !important; }

        /* 試合・勝者表示 */
        .winner-display {
            background: rgba(212, 175, 55, 0.15);
            border: 1px solid #d4af37;
            color: #f1c40f;
            padding: 25px;
            border-radius: 12px;
            text-align: center;
            margin-bottom: 25px;
        }

        .winner-name { font-size: 32px; font-weight: bold; }

        .round-header {
            background: rgba(255, 255, 255, 0.05);
            color: white;
            padding: 15px;
            border-radius: 8px;
            border-left: 5px solid var(--accent);
            font-weight: bold;
            margin-bottom: 20px;
            font-size: 18px;
        }

        .match-card {
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: var(--card-radius);
            overflow: hidden;
            margin-bottom: 15px;
        }

        .team-container { display: flex; width: 100%; }

        .team-side {
            flex: 1;
            padding: 15px;
            display: flex;
            flex-direction: column;
            gap: 8px;
            box-sizing: border-box;
        }

        .team-side.is-winner { background: var(--win-bg); }

        .vs-center {
            width: 80px;
            flex-shrink: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            background: rgba(0, 0, 0, 0.2);
        }

        .p-clickable {
            width: 100%;
            padding: 10px;
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 6px;
            text-align: center;
            cursor: pointer;
            background: rgba(255, 255, 255, 0.05);
            color: white;
            font-size: 14px;
            box-sizing: border-box;
        }

        .p-clickable.selected { background: var(--win-color); font-weight: bold; }

        .swiss-match-row { padding: 15px; display: flex; gap: 10px; align-items: center; }
        .vs-label-muted { font-weight: bold; opacity: 0.3; }
        .bye-label { flex: 1; text-align: center; color: var(--text-muted); }
        .bye-card-content { text-align: center; opacity: 0.6; padding: 20px; }

        /* 順位表 */
        .rank-container {
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 12px;
            overflow: hidden;
            margin-bottom: 8px;
            background: rgba(255, 255, 255, 0.02);
        }

        .rank-table {
            width: 100%;
            border-collapse: separate;
            border-spacing: 0;
            font-size: 14px;
            color: var(--text-main);
            table-layout: fixed;
        }

        .rank-table th, .rank-table td {
            padding: 12px 10px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.08);
            text-align: center;
        }

        .rank-table th { background: rgba(255, 255, 255, 0.08); color: var(--text-muted); font-weight: bold; }

        .col-rank { width: 50px; }
        .col-name {
            width: auto;
            text-align: left !important;
            padding-left: 20px !important;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .row-1 td { background-color: var(--bg-gold) !important; }
        .row-2 td { background-color: var(--bg-silver) !important; }
        .row-3 td { background-color: var(--bg-bronze) !important; }

        .rank-note { font-size: 11px; color: var(--text-muted); margin-bottom: 25px; padding-left: 5px; }

        .title-row { display: flex; justify-content: space-between; align-items: flex-end; width: 100%; margin: 30px 0 15px; }

        h4 { border-left: 5px solid var(--accent); padding-left: 12px; margin: 0; color: var(--text-muted); font-size: 16px; }

        .datetime-display { font-size: 12px; color: var(--text-muted); }

        .matrix-cell-self { background: rgba(0, 0, 0, 0.2); opacity: 0.2; }
        .matrix-header-side { background: rgba(255, 255, 255, 0.05); font-weight: bold; }
    </style>
</head>
<body>
    <header class="nav-header">
        <div class="nav-logo">大会マネージャー</div>
        <nav class="nav-links">
            <a href="index.html" class="nav-btn active">大会管理画面</a>
            <a href="rating_view.html" class="nav-btn">レーティングを見る</a>
            <a href="management.html" class="nav-btn">名簿管理</a>
        </nav>
    </header>

    <div class="app-container">
        <div class="lists-wrapper">
            <div class="list-col">
                <div class="header"><h3>部員名簿</h3></div>
                <div class="scroll-area" id="masterArea"></div>
            </div>
            <div class="list-col entry-side">
                <div class="header"><h3>大会操作</h3></div>
                <div class="control-panel">
                    <div id="modeSwitch" class="mode-switch-container" onclick="toggleMode()">
                        <div class="mode-slider"></div>
                        <div id="lbl-swiss" class="mode-label active">個人<br>スイス</div>
                        <div id="lbl-trio" class="mode-label">トリオ<br>リーグ</div>
                    </div>
                    <button id="mainActionButton" class="btn-main" onclick="handleAction()">大会を開始する</button>
                    <button class="btn-sub" onclick="saveAsImage()">結果を画像保存</button>
                    <div class="count-display">
                        <div class="count-label">現在のエントリー</div>
                        <div><span id="count" class="count-val">0</span><small>名</small></div>
                    </div>
                </div>
                <div class="scroll-area" id="entryArea"></div>
            </div>
        </div>

        <div class="main-content">
            <div id="captureArea">
                <div id="winnerArea" class="hidden"></div>
                <div id="matchView" class="hidden">
                    <div id="roundLabelArea"></div>
                    <div id="matchupArea"></div>
                </div>
                
                <div id="teamStatsSection" class="hidden">
                    <div class="title-row">
                        <h4>チーム順位</h4>
                        <div class="datetime-display current-dt"></div>
                    </div>
                    <div class="rank-container">
                        <table class="rank-table">
                            <thead>
                                <tr>
                                    <th class="col-rank">順位</th>
                                    <th class="col-name">チーム</th>
                                    <th class="col-num">勝</th>
                                    <th class="col-num">個勝計</th>
                                </tr>
                            </thead>
                            <tbody id="teamRankBody"></tbody>
                        </table>
                    </div>
                    <div class="rank-note">※順位決定：①チーム勝利数 ＞ ②個人の合計勝利数 ＞ ③直接対決勝敗</div>
                    
                    <div class="title-row">
                        <h4>対戦マトリクス</h4>
                    </div>
                    <div class="rank-container">
                        <table class="rank-table" id="teamMatrixTab"></table>
                    </div>
                </div>

                <div id="personalStatsSection">
                    <div class="title-row">
                        <h4>個人順位</h4>
                        <div class="datetime-display current-dt"></div>
                    </div>
                    <div class="rank-container">
                        <table class="rank-table">
                            <thead>
                                <tr>
                                    <th class="col-rank">順位</th>
                                    <th class="col-name">名前</th>
                                    <th class="col-num">勝</th>
                                    <th class="col-num">負</th>
                                    <th class="col-omw">OMW%</th>
                                </tr>
                            </thead>
                            <tbody id="rankBody"></tbody>
                        </table>
                    </div>
                    <div class="rank-note">※順位決定：①勝利数 ＞ ②OMW% ＞ ③直接対決</div>
                </div>
            </div>
        </div>
    </div>

    <script>
        const API_URL = 'save.php';
        let masters = []; let entries = []; let mode = 'swiss'; let isDuringMatch = false; 
        let isFinished = false; let currentRound = 0; let activeMatches = []; 
        let trioTeams = []; let trioResults = {}; let teamHistory = [];
        let trioSchedule = [];

        window.onload = async () => { 
            await fetchPlayers(); 
            renderList(); 
            updateDateTime(); 
        };

        function updateDateTime() {
            const now = new Date();
            const dateStr = now.toLocaleDateString('ja-JP', { year: 'numeric', month: '2-digit', day: '2-digit', weekday: 'short' });
            const timeStr = now.toLocaleTimeString('ja-JP', { hour: '2-digit', minute: '2-digit' });
            document.querySelectorAll('.current-dt').forEach(el => el.innerText = `${dateStr} ${timeStr}`);
        }

        async function fetchPlayers() {
            try {
                const res = await fetch(`${API_URL}?type=players`);
                const data = await res.json();
                masters = data.map(p => ({ id: p.id, name: p.name }));
            } catch(e) { console.error("名簿取得失敗"); }
        }

        function renderList() {
            document.getElementById('masterArea').innerHTML = masters.map(p => `<div class="player-item" onclick="toggleEntry('${p.name}')">${p.name}<span>＋</span></div>`).join('');
            document.getElementById('entryArea').innerHTML = entries.map(p => `<div class="player-item" onclick="toggleEntry('${p.name}')">${p.name}<span>×</span></div>`).join('');
            document.getElementById('count').innerText = entries.length;
            updateRanking();
        }

        function toggleEntry(n) {
            if(isDuringMatch || isFinished) return;
            const i = entries.findIndex(p => p.name === n);
            if(i === -1) { 
                const mIdx = masters.findIndex(m=>m.name===n);
                if(mIdx !== -1) {
                    const p = masters.splice(mIdx, 1)[0];
                    entries.push({ id: p.id, name: p.name, wins: 0, losses: 0, opponentNames: [], omwp: 0 }); 
                }
            } else { masters.push(entries.splice(i, 1)[0]); }
            renderList();
        }

        function toggleMode() {
            if(isDuringMatch || isFinished) return;
            setMode(mode === 'swiss' ? 'trio' : 'swiss');
        }

        function setMode(m) { 
            mode = m; 
            const container = document.getElementById('modeSwitch');
            const teamSection = document.getElementById('teamStatsSection');
            if(m === 'trio') { 
                container.classList.add('is-trio'); 
                document.getElementById('lbl-trio').classList.add('active'); 
                document.getElementById('lbl-swiss').classList.remove('active'); 
                teamSection.classList.remove('hidden');
            }
            else { 
                container.classList.remove('is-trio'); 
                document.getElementById('lbl-swiss').classList.add('active'); 
                document.getElementById('lbl-trio').classList.remove('active'); 
                teamSection.classList.add('hidden');
            }
        }
        
        async function handleAction() {
            if (isFinished) { if(confirm("大会をリセットしますか？")) location.reload(); return; }
            if (isDuringMatch) {
                if(mode==='trio'){
                    for(let i=0; i<activeMatches.length; i++){ 
                        if(activeMatches[i].type!=='bye'){ for(let j=0; j<3; j++) if(!trioResults[`${i}-${j}`]) return alert("未入力があります"); } 
                    }
                } else { if(activeMatches.some(m=>m.winner===null)) return alert("勝者を選んでください"); }
                await commitAndSave(); return;
            }
            startTournament();
        }

        function startTournament() {
            if(mode === 'trio') { if(entries.length < 6 || entries.length % 3 !== 0) return alert("トリオリーグは6名以上の3の倍数で開始してください"); initTrioSchedule(); }
            else { if(entries.length < 2) return alert("人数が足りません"); }
            isDuringMatch = true; isFinished = false; currentRound = 0; teamHistory = [];
            document.getElementById('matchView').classList.remove('hidden');
            document.getElementById('winnerArea').classList.add('hidden');
            if(mode==='trio') setupTrioRound(); else setupSwiss();
            updateMainButton();
        }

        function initTrioSchedule() {
            let s = [...entries].sort(()=>Math.random()-0.5);
            trioTeams = [];
            for(let i=0; i<entries.length/3; i++) {
                trioTeams.push({ id: i, name: `チーム${String.fromCharCode(65+i)}`, members: s.slice(i*3, i*3+3), wins: 0, headToHead: {} });
            }
            let teams = trioTeams.map(t => t.id); if(teams.length % 2 !== 0) teams.push(null);
            trioSchedule = []; let numRounds = teams.length - 1;
            for (let r = 0; r < numRounds; r++) {
                let roundMatches = [];
                for (let i = 0; i < teams.length / 2; i++) {
                    let t1 = teams[i], t2 = teams[teams.length - 1 - i];
                    if (t1 !== null && t2 !== null) roundMatches.push([t1, t2]);
                    else if (t1 !== null) roundMatches.push([t1, 'bye']);
                    else if (t2 !== null) roundMatches.push([t2, 'bye']);
                }
                trioSchedule.push(roundMatches); teams.splice(1, 0, teams.pop());
            }
        }

        async function commitAndSave() {
            const savePromises = [];
            activeMatches.forEach((m, idx) => {
                if(mode==='trio' && m.type!=='bye') {
                    let w1=0, w2=0;
                    m.team1.members.forEach((p, j) => {
                        let res = trioResults[`${idx}-${j}`], e1=entries.find(e=>e.name===p.name), e2=entries.find(e=>e.name===m.team2.members[j].name);
                        let winnerId = null;
                        if(res==='l'){ e1.wins++; e2.losses++; w1++; winnerId = e1.id; } 
                        else { e2.wins++; e1.losses++; w2++; winnerId = e2.id; }
                        e1.opponentNames.push(e2.name); e2.opponentNames.push(e1.name);
                        savePromises.push(sendMatchData(e1.id, e2.id, winnerId));
                    });
                    let tw = w1 > w2 ? m.team1 : m.team2; tw.wins++;
                    m.team1.headToHead[m.team2.name] = (w1 > w2 ? 1 : -1);
                    m.team2.headToHead[m.team1.name] = (w2 > w1 ? 1 : -1);
                    teamHistory.push({ t1: m.team1.name, t2: m.team2.name, s1: w1, s2: w2, winner: tw.name });
                } else if (mode==='swiss') {
                    let w=entries.find(e=>e.name===m.winner);
                    let l=entries.find(e=>e.name===(m.winner===m.p1.name?m.p2?.name:m.p1.name));
                    if(w && l){ 
                        w.wins++; l.losses++; w.opponentNames.push(l.name); l.opponentNames.push(w.name); 
                        savePromises.push(sendMatchData(w.id, l.id, w.id));
                    } else if(w) { w.wins++; }
                }
            });
            if(savePromises.length > 0) await Promise.all(savePromises);
            updateRanking(); checkNextStep();
        }

        async function sendMatchData(p1_id, p2_id, winner_id) {
            try {
                await fetch(API_URL, {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ action: 'add_match', p1_id, p2_id, winner_id })
                });
            } catch(e) { console.error("データ保存失敗", e); }
        }

        function checkNextStep() {
            if(mode==='swiss' && (entries.filter(e=>e.losses===0).length<=1 && currentRound>0)) finish();
            else if(mode==='trio' && currentRound >= trioSchedule.length) finish();
            else mode==='trio' ? setupTrioRound() : setupSwiss();
            updateMainButton();
        }

        function finish() { 
            isDuringMatch=false; isFinished=true; 
            document.getElementById('matchView').classList.add('hidden'); 
            showWinnerBanner(); updateRanking(); updateMainButton(); updateDateTime(); 
        }

        function showWinnerBanner() {
            updateRanking();
            let winnerTitle = "";
            if(mode==='trio') {
                let tr = [...trioTeams].sort((a,b) => (b.wins - a.wins) || (getTeamMemberWins(b) - getTeamMemberWins(a)));
                winnerTitle = `🏆 優勝：${tr[0].name} 🏆`;
            } else {
                let pr = [...entries].sort((a,b) => (b.wins - a.wins) || (b.omwp - a.omwp));
                winnerTitle = `🏆 優勝：${pr[0].name} 様 🏆`;
            }
            const area = document.getElementById('winnerArea');
            area.innerHTML = `<div class="winner-display"><div>CONGRATULATIONS</div><div class="winner-name">${winnerTitle}</div></div>`;
            area.classList.remove('hidden');
        }

        function getTeamMemberWins(team) {
            return team.members.reduce((sum, memberName) => {
                const player = entries.find(e => e.name === memberName);
                return sum + (player ? player.wins : 0);
            }, 0);
        }

        function setupTrioRound() {
            let matches = trioSchedule[currentRound]; currentRound++; activeMatches = []; trioResults = {};
            let normal = [], bye = [];
            matches.forEach(pair => {
                if (pair[1] === 'bye') { let t = trioTeams.find(t=>t.id===pair[0]); bye.push({ team1: t, type: 'bye' }); t.wins++; } 
                else { normal.push({ team1: trioTeams.find(t=>t.id===pair[0]), team2: trioTeams.find(t=>t.id===pair[1]) }); }
            });
            activeMatches = normal.concat(bye); renderMatches(`第${currentRound}戦`);
        }

        function setupSwiss() {
            currentRound++; activeMatches=[];
            let s=[...entries].sort((a,b)=>b.wins-a.wins || b.omwp-a.omwp || Math.random()-0.5), p=new Set();
            let normal = [], bye = [];
            for(let i=0; i<s.length; i++){
                if(p.has(s[i].name)) continue;
                let o=s.find((e,j)=>j>i && !p.has(e.name) && !s[i].opponentNames.includes(e.name));
                if(!o) o=s.find((e,j)=>j>i && !p.has(e.name));
                if(o){ p.add(s[i].name); p.add(o.name); normal.push({p1:s[i], p2:o, winner:null}); }
                else { p.add(s[i].name); bye.push({p1:s[i], p2:null, winner:s[i].name, type:'bye'}); }
            }
            activeMatches = normal.concat(bye); renderMatches(`第${currentRound}ラウンド`);
        }

        function renderMatches(label) {
            document.getElementById('roundLabelArea').innerHTML = `<div class="round-header">${label}</div>`;
            let h = "";
            activeMatches.forEach((m, i) => {
                if(mode==='trio'){
                    if(m.type==='bye') h+=`<div class="match-card"><div class="bye-card-content"><b>${m.team1.name}</b> (不戦勝)</div></div>`;
                    else {
                        let s1=0, s2=0; for(let j=0; j<3; j++){ if(trioResults[`${i}-${j}`]==='l') s1++; else if(trioResults[`${i}-${j}`]==='r') s2++; }
                        h+=`<div class="match-card"><div class="team-container">
                            <div class="team-side ${s1>=2?'is-winner':''}"><b>${m.team1.name}</b>${m.team1.members.map((p,j)=>`<div class="p-clickable ${trioResults[i+'-'+j]==='l'?'selected':''}" onclick="trioResults['${i+'-'+j}']='l';renderMatches('${label}')">${p.name}</div>`).join('')}</div>
                            <div class="vs-center"><div>${s1} - ${s2}</div><small>VS</small></div>
                            <div class="team-side ${s2>=2?'is-winner':''}"><b>${m.team2.name}</b>${m.team2.members.map((p,j)=>`<div class="p-clickable ${trioResults[i+'-'+j]==='r'?'selected':''}" onclick="trioResults['${i+'-'+j}']='r';renderMatches('${label}')">${p.name}</div>`).join('')}</div>
                        </div></div>`;
                    }
                } else {
                    h+=`<div class="match-card"><div class="swiss-match-row">
                        <div class="p-clickable ${m.winner===m.p1.name?'selected':''}" onclick="activeMatches[${i}].winner='${m.p1.name}';renderMatches('${label}')">${m.p1.name}</div>
                        <div class="vs-label-muted">vs</div>
                        ${m.p2 ? `<div class="p-clickable ${m.winner===m.p2.name?'selected':''}" onclick="activeMatches[${i}].winner='${m.p2.name}';renderMatches('${label}')">${m.p2.name}</div>` : `<div class="bye-label">不戦勝</div>`}
                    </div></div>`;
                }
            });
            document.getElementById('matchupArea').innerHTML = h;
        }

        function updateRanking() {
            entries.forEach(p=>{ 
                let ops=p.opponentNames; if(ops.length){ 
                    let s=ops.reduce((acc,n)=>{ let o=entries.find(e=>e.name===n); return acc+(o?Math.max(o.wins/(o.wins+o.losses||1),0.33):0.33) },0); p.omwp=(s/ops.length)*100; 
                } 
            });
            let pr = [...entries].sort((a,b) => (b.wins - a.wins) || (b.omwp - a.omwp));
            document.getElementById('rankBody').innerHTML = pr.map((p,i)=>{
                let cls = (isFinished && i < 3) ? `row-${i+1}` : "";
                return `<tr class="${cls}"><td class="col-rank">${i+1}</td><td class="col-name">${p.name}</td><td class="col-num">${p.wins}</td><td class="col-num">${p.losses}</td><td class="col-omw">${p.omwp.toFixed(1)}%</td></tr>`
            }).join('');
            if(mode==='trio') {
                let tr = [...trioTeams].sort((a,b) => (b.wins - a.wins) || (getTeamMemberWins(b) - getTeamMemberWins(a)));
                document.getElementById('teamRankBody').innerHTML = tr.map((t,i)=>{
                    let cls = (isFinished && i < 3) ? `row-${i+1}` : "";
                    return `<tr class="${cls}"><td class="col-rank">${i+1}</td><td class="col-name">${t.name}</td><td class="col-num">${t.wins}</td><td class="col-num">${getTeamMemberWins(t)}</td></tr>`
                }).join('');
                renderMatrix();
            }
        }

        function renderMatrix() {
            let h = `<thead><tr><th class="col-rank"></th>${trioTeams.map(t=>`<th class="col-name">${t.name}</th>`).join('')}</tr></thead><tbody>`;
            trioTeams.forEach(r => {
                h += `<tr><td class="matrix-header-side">${r.name}</td>`;
                trioTeams.forEach(c => {
                    if(r===c) h+=`<td class="matrix-cell-self">-</td>`;
                    else {
                        let m=teamHistory.find(h=>(h.t1===r.name && h.t2===c.name)||(h.t1===c.name && h.t2===r.name));
                        if(m){ let is1=m.t1===r.name, res=m.winner===r.name?'○':'●', sc=is1?`${m.s1}-${m.s2}`:`${m.s2}-${m.s1}`; h+=`<td>${res}<br><small>${sc}</small></td>`; }
                        else h+=`<td>-</td>`;
                    }
                });
                h += `</tr>`;
            });
            document.getElementById('teamMatrixTab').innerHTML = h + `</tbody>`;
        }

        function updateMainButton() { 
            let b=document.getElementById('mainActionButton'); b.classList.toggle('finish', isFinished); 
            if(isFinished) b.innerText = "大会をリセット"; else if(isDuringMatch) b.innerText = "成績を登録"; else b.innerText = "大会を開始する";
        }

        function saveAsImage() {
            updateDateTime();
            const target = document.getElementById('captureArea');
            html2canvas(target, { backgroundColor: "#1e2b37", scale: 2, useCORS: true }).then(canvas => {
                let link = document.createElement('a');
                link.download = `大会結果_${new Date().toLocaleDateString()}.png`;
                link.href = canvas.toDataURL("image/png");
                link.click();
            });
        }
    </script>
</body>
</html>