---
layout: default
title: メンバープロフィール
---

<div class="profiles-container">
    <!-- ヘッダー -->
    <div class="profiles-header text-center mb-4">
        <h1>👥 KRAFTメンバープロフィール</h1>
        <p class="lead">コミュニティメンバーの成長と活動を紹介</p>
    </div>

    <!-- フィルター・検索バー -->
    <div class="row mb-4">
        <div class="col-md-4">
            <div class="input-group">
                <span class="input-group-text"><i class="fas fa-search"></i></span>
                <input type="text" id="search-input" class="form-control" placeholder="メンバーを検索...">
            </div>
        </div>
        <div class="col-md-4">
            <select id="level-filter" class="form-select">
                <option value="">すべてのレベル</option>
                <option value="1-10">Lv 1-10</option>
                <option value="11-20">Lv 11-20</option>
                <option value="21-30">Lv 21-30</option>
                <option value="31-40">Lv 31-40</option>
                <option value="41-50">Lv 41-50</option>
                <option value="50+">Lv 50+</option>
            </select>
        </div>
        <div class="col-md-4">
            <select id="sort-filter" class="form-select">
                <option value="level">🏆 レベルランキング</option>
                <option value="activity">💬 アクティブランキング</option>
                <option value="quests">🎯 クエスト達成数ランキング</option>
                <option value="quest_rate">📊 クエスト達成率ランキング</option>
                <option value="donation">🎁 寄付総額ランキング</option>
                <option value="gift">💝 ギフト総額ランキング</option>
                <option value="investment_profit" disabled>💹 投資利益額 (未実装)</option>
                <option value="investment_rate" disabled>📈 投資利益率 (未実装)</option>
            </select>
        </div>
    </div>

    <!-- ローディング -->
    <div id="profiles-loading" class="text-center p-4">
        <div class="spinner-border text-primary" role="status">
            <span class="visually-hidden">読み込み中...</span>
        </div>
        <p>プロフィールデータを読み込み中...</p>
    </div>

    <!-- プロフィールグリッド -->
    <div id="profiles-grid" class="row g-4" style="display: none;">
        <!-- 動的に生成されるプロフィールカード -->
    </div>

    <!-- 詳細モーダル -->
    <div class="modal fade" id="profileModal" tabindex="-1">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="modalUserName">プロフィール詳細</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div id="modal-profile-content">
                        <!-- 詳細プロフィール情報 -->
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
.profile-card {
    border: none;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    transition: all 0.3s ease;
    cursor: pointer;
}

.profile-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

.profile-avatar {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.5rem;
    font-weight: bold;
    margin: 0 auto 1rem;
}

.level-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background: linear-gradient(45deg, #667eea, #764ba2);
    color: white;
    padding: 0.25rem 0.5rem;
    border-radius: 15px;
    font-size: 0.75rem;
    font-weight: bold;
}

.progress-custom {
    height: 8px;
    border-radius: 4px;
    background-color: #e9ecef;
}

.progress-bar-custom {
    background: linear-gradient(90deg, #28a745, #20c997);
    border-radius: 4px;
    transition: width 0.5s ease;
}

.title-badge {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    margin: 0.125rem;
    border-radius: 12px;
    font-size: 0.65rem;
    font-weight: 500;
    background: linear-gradient(45deg, #ffd700, #ffed4e);
    color: #333;
}

.stat-item {
    text-align: center;
    padding: 0.5rem;
}

.stat-value {
    font-size: 1.25rem;
    font-weight: bold;
    color: #0d6efd;
}

.stat-label {
    font-size: 0.75rem;
    color: #6c757d;
    text-transform: uppercase;
}

.achievement-badge {
    background: linear-gradient(45deg, #ff6b6b, #ee5a24);
    color: white;
    padding: 0.25rem 0.5rem;
    border-radius: 10px;
    font-size: 0.7rem;
    margin: 0.125rem;
}
/* ===== モバイル最適化 ===== */

/* スマートフォン (768px以下) */
@media (max-width: 768px) {
    /* ヘッダー調整 */
    .profiles-header h1 {
        font-size: 1.75rem;
    }
    
    .profiles-header .lead {
        font-size: 1rem;
    }
    
    /* 検索・フィルターバーのモバイル対応 */
    .row.mb-4 .col-md-4 {
        margin-bottom: 0.75rem;
    }
    
    /* プロフィールカードのモバイル調整 */
    .profile-card {
        margin-bottom: 1rem;
    }
    
    .profile-avatar {
        width: 50px;
        height: 50px;
        font-size: 1.25rem;
    }
    
    .level-badge {
        font-size: 0.65rem;
        padding: 0.2rem 0.4rem;
    }
    
    .stat-value {
        font-size: 1rem;
    }
    
    .stat-label {
        font-size: 0.65rem;
    }
    
    .title-badge {
        font-size: 0.6rem;
        padding: 0.2rem 0.4rem;
    }
    
    /* モーダルのモバイル調整 */
    .modal-dialog {
        margin: 0.5rem;
        max-width: calc(100% - 1rem);
    }
    
    .modal-body .profile-avatar {
        width: 80px;
        height: 80px;
        font-size: 1.5rem;
    }
    
    .modal-body .col-md-4,
    .modal-body .col-md-8 {
        margin-bottom: 1rem;
    }
    
    .modal-body .row.g-3 .col-6.col-lg-3 {
        margin-bottom: 0.5rem;
    }
}

/* タブレット (768px-992px) */
@media (min-width: 768px) and (max-width: 992px) {
    .profile-avatar {
        width: 55px;
        height: 55px;
        font-size: 1.3rem;
    }
    
    .modal-dialog {
        max-width: 90%;
    }
}

/* タッチデバイス最適化 */
@media (hover: none) and (pointer: coarse) {
    .profile-card {
        transform: none;
    }
    
    .profile-card:active {
        transform: scale(0.98);
        transition: transform 0.1s ease;
    }
    
    /* タッチターゲットサイズ最適化 */
    .btn-close {
        padding: 0.75rem;
    }
    
    .form-select,
    .form-control {
        font-size: 16px; /* iOS Safari のズーム防止 */
    }
}

/* 小さなスマートフォン (480px以下) */
@media (max-width: 480px) {
    .profiles-header h1 {
        font-size: 1.5rem;
    }
    
    .profile-avatar {
        width: 45px;
        height: 45px;
        font-size: 1.1rem;
    }
    
    .stat-value {
        font-size: 0.9rem;
    }
    
    .card-title {
        font-size: 0.9rem;
    }
    
    /* モーダルの縦スクロール対応 */
    .modal-body {
        max-height: 70vh;
        overflow-y: auto;
    }
}
</style>

<script>
let allProfiles = [];
let filteredProfiles = [];
let currentPage = 1;
const profilesPerPage = 12;

document.addEventListener('DOMContentLoaded', async function() {
    console.log("👥 プロフィール一覧初期化");
    
    // データマネージャー待機
    while (!window.kraftDataManager || !window.kraftDataManager.initialized) {
        await new Promise(resolve => setTimeout(resolve, 100));
    }
    
    // プロフィール読み込み
    await loadProfiles();
    
    // フィルターイベントリスナー
    document.getElementById('search-input').addEventListener('input', filterProfiles);
    document.getElementById('level-filter').addEventListener('change', filterProfiles);
    document.getElementById('sort-filter').addEventListener('change', filterProfiles);
});

async function loadProfiles() {
    try {
        document.getElementById('profiles-loading').style.display = 'block';
        document.getElementById('profiles-grid').style.display = 'none';
        
        console.log("📊 プロフィールデータ取得中...");
        allProfiles = await window.kraftDataManager.getUserProfiles();
        
        filteredProfiles = [...allProfiles];
        renderProfiles();
        
        document.getElementById('profiles-loading').style.display = 'none';
        document.getElementById('profiles-grid').style.display = 'flex';
        
        console.log(`✅ ${allProfiles.length}件のプロフィールを読み込み完了`);
        
    } catch (error) {
        console.error("❌ プロフィール読み込みエラー:", error);
        showError("プロフィールデータの取得に失敗しました。");
    }
}

function renderProfiles() {
    const grid = document.getElementById('profiles-grid');
    grid.innerHTML = '';
    
    if (filteredProfiles.length === 0) {
        grid.innerHTML = `<div class="col-12 text-center"><div class="alert alert-info"><i class="fas fa-info-circle"></i> 条件に一致するメンバーが見つかりませんでした。</div></div>`;
        updatePagination();
        return;
    }
    
    const startIndex = (currentPage - 1) * profilesPerPage;
    const endIndex = startIndex + profilesPerPage;
    const currentProfiles = filteredProfiles.slice(startIndex, endIndex);
    
    currentProfiles.forEach(profile => {
        const card = createProfileCard(profile);
        grid.appendChild(card);
    });
    
    updatePagination();
}

// プロフィールカード作成
function createProfileCard(profile) {
    const col = document.createElement('div');
    col.className = 'col-lg-4 col-md-6';
    
    // XP進捗計算
    const nextLevelXP = calculateXPForLevel(profile.level + 1);
    const currentLevelXP = profile.level > 1 ? calculateXPForLevel(profile.level) : 0;
    const progressXP = profile.xp - currentLevelXP;
    const neededXP = nextLevelXP - currentLevelXP;
    const progressPercent = Math.min((progressXP / neededXP) * 100, 100);
    
    // アバター文字（名前の最初の文字）
    const avatarChar = profile.display_name.charAt(profile.display_name.length - 1);
    
    col.innerHTML = `
        <div class="card profile-card h-100" onclick="showProfileDetail('${profile.id}')">
            <div class="card-body position-relative">
                <div class="level-badge">Lv ${profile.level}</div>
                
                <div class="profile-avatar">
                    ${avatarChar}
                </div>
                
                <h6 class="card-title text-center mb-3">${profile.display_name}</h6>
                
                <!-- XP進捗バー -->
                <div class="mb-3">
                    <div class="d-flex justify-content-between mb-1">
                        <small>次のレベルまで</small>
                        <small>${Math.max(0, calculateXPForLevel(profile.level + 1) - profile.xp).toLocaleString()} XP</small>
                    </div>
                    <div class="progress" style="height: 10px; background-color: #e9ecef;">
                        <div class="progress-bar" style="width: ${Math.max(5, Math.min(100, ((profile.xp - (profile.level > 1 ? calculateXPForLevel(profile.level) : 0)) / (calculateXPForLevel(profile.level + 1) - (profile.level > 1 ? calculateXPForLevel(profile.level) : 0))) * 100))}%; background: linear-gradient(90deg, #28a745, #20c997);"></div>
                    </div>
                </div>
                
                <!-- 統計 -->
                <div class="row g-2 mb-3">
                    <div class="col-4">
                        <div class="stat-item">
                            <div class="stat-value">${profile.completed_quests}</div>
                            <div class="stat-label">クエスト</div>
                        </div>
                    </div>
                    <div class="col-4">
                        <div class="stat-item">
                            <div class="stat-value">${Math.floor(profile.balance / 1000)}K</div>
                            <div class="stat-label">KR</div>
                        </div>
                    </div>
                    <div class="col-4">
                        <div class="stat-item">
                            <div class="stat-value">${profile.titles.length}</div>
                            <div class="stat-label">称号</div>
                        </div>
                    </div>
                </div>
                
                <!-- 称号表示（最大3個） -->
                <div class="text-center">
                    ${profile.titles.slice(0, 3).map(title => 
                        `<span class="title-badge">${title}</span>`
                    ).join('')}
                    ${profile.titles.length > 3 ? 
                        `<span class="title-badge">+${profile.titles.length - 3}</span>` : ''
                    }
                </div>
            </div>
        </div>
    `;
    
    return col;
}

// 詳細プロフィール表示
function showProfileDetail(profileId) {
    const profile = allProfiles.find(p => p.id === profileId);
    if (!profile) return;
    
    const modal = document.getElementById('profileModal');
    const modalTitle = document.getElementById('modalUserName');
    const modalContent = document.getElementById('modal-profile-content');
    
    modalTitle.textContent = `${profile.display_name} のプロフィール`;
    
    // 詳細情報生成
    modalContent.innerHTML = `
    <div class="row">
        <div class="col-md-4 text-center">
            <div class="profile-avatar mb-3" style="width: 100px; height: 100px; font-size: 2rem;">
                ${profile.display_name.charAt(0)}
            </div>
            <h4>レベル ${profile.level}</h4>
            <p class="text-muted">${profile.xp.toLocaleString()} XP</p>
            
            <!-- XP進捗バー -->
            <div class="mb-3">
                <div class="d-flex justify-content-between mb-1">
                    <small>次のレベルまで</small>
                    <small>${Math.max(0, calculateXPForLevel(profile.level + 1) - profile.xp).toLocaleString()} XP</small>
                </div>
                <div class="progress" style="height: 10px;">
                    <div class="progress-bar" style="width: ${Math.max(5, Math.min(100, ((profile.xp - (profile.level > 1 ? calculateXPForLevel(profile.level) : 0)) / Math.max(1, calculateXPForLevel(profile.level + 1) - (profile.level > 1 ? calculateXPForLevel(profile.level) : 0))) * 100))}%; background: linear-gradient(90deg, #28a745, #20c997); min-width: 10px;"></div>
                </div>
            </div>
        </div>
        
        <div class="col-md-8">
            <!-- 成長チャートエリア -->
            <div class="mb-4">
                <h6>📈 成長推移</h6>
                <div style="height: 200px; background: #f8f9fa; border-radius: 8px; display: flex; align-items: center; justify-content: center;">
                    <canvas id="profileGrowthChart" width="400" height="180"></canvas>
                </div>
            </div>
            
            <h6>📊 詳細統計</h6>
            <div class="row g-3 mb-4">
                <div class="col-6 col-lg-3">
                    <div class="stat-item border rounded p-2 text-center">
                        <div class="stat-value text-primary">${profile.completed_quests}</div>
                        <div class="stat-label">クエスト達成</div>
                    </div>
                </div>
                <div class="col-6 col-lg-3">
                    <div class="stat-item border rounded p-2 text-center">
                        <div class="stat-value text-success">${profile.quest_streak}</div>
                        <div class="stat-label">連続達成</div>
                    </div>
                </div>
                <div class="col-6 col-lg-3">
                    <div class="stat-item border rounded p-2 text-center">
                        <div class="stat-value text-warning">${profile.balance.toLocaleString()}</div>
                        <div class="stat-label">所持KR</div>
                    </div>
                </div>
                <div class="col-6 col-lg-3">
                    <div class="stat-item border rounded p-2 text-center">
                        <div class="stat-value text-info">${profile.total_messages.toLocaleString()}</div>
                        <div class="stat-label">投稿数</div>
                    </div>
                </div>
            </div>
            
            <!-- 活動統計 -->
            <h6>📈 活動統計</h6>
            <div class="row g-3 mb-4">
                <div class="col-md-6">
                    <div class="card bg-light">
                        <div class="card-body text-center">
                            <h5 class="text-success">${profile.donation_total.toLocaleString()}</h5>
                            <p class="mb-0">🎁 寄付総額 (KR)</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="card bg-light">
                        <div class="card-body text-center">
                            <h5 class="text-primary">${profile.transfers_total.toLocaleString()}</h5>
                            <p class="mb-0">💝 ギフト総額 (KR)</p>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 称号詳細 -->
            <h6>🏅 獲得称号 (${profile.titles.length}個)</h6>
            <div class="mb-3" style="max-height: 120px; overflow-y: auto;">
                ${profile.titles.length > 0 ? 
                    profile.titles.map((title, index) => {
                        const colors = ['#007bff', '#28a745', '#ffc107', '#dc3545', '#6f42c1', '#fd7e14'];
                        const color = colors[index % colors.length];
                        return `<span class="badge me-1 mb-1" style="background-color: ${color}; color: white;">${title}</span>`;
                    }).join('') :
                    '<span class="text-muted">称号未獲得</span>'
                }
            </div>
            
            <!-- ランキング情報 -->
            <h6>🏆 コミュニティランキング</h6>
            <div class="row g-2">
                <div class="col-6">
                    <small class="text-muted">レベルランキング</small>
                    <div class="fw-bold">#${getRankInCategory(profile, 'level')}位</div>
                </div>
                <div class="col-6">
                    <small class="text-muted">クエストランキング</small>
                    <div class="fw-bold">#${getRankInCategory(profile, 'quests')}位</div>
                </div>
            </div>
        </div>
    </div>
`;
// モーダル表示
    const bsModal = new bootstrap.Modal(modal);
    bsModal.show();
}

// ランキング順位取得関数
function getRankInCategory(targetProfile, category) {
    let sortedProfiles = [...allProfiles];
    
    switch(category) {
        case 'level':
            sortedProfiles.sort((a, b) => b.level - a.level || b.xp - a.xp);
            break;
        case 'quests':
            sortedProfiles.sort((a, b) => b.completed_quests - a.completed_quests);
            break;
    }
    
    return sortedProfiles.findIndex(p => p.id === targetProfile.id) + 1;
}

// フィルター処理
function filterProfiles() {
    const searchTerm = document.getElementById('search-input').value.toLowerCase();
    const levelFilter = document.getElementById('level-filter').value;
    const sortFilter = document.getElementById('sort-filter').value;
    
    // フィルタリング
    filteredProfiles = allProfiles.filter(profile => {
        // 検索フィルター
        const matchesSearch = profile.display_name.toLowerCase().includes(searchTerm) ||
                             profile.titles.some(title => title.toLowerCase().includes(searchTerm));
        
        // レベルフィルター
        let matchesLevel = true;
        if (levelFilter) {
            const level = profile.level;
            switch(levelFilter) {
                case '1-10': matchesLevel = level >= 1 && level <= 10; break;
                case '11-20': matchesLevel = level >= 11 && level <= 20; break;
                case '21-30': matchesLevel = level >= 21 && level <= 30; break;
                case '31-40': matchesLevel = level >= 31 && level <= 40; break;
                case '41-50': matchesLevel = level >= 41 && level <= 50; break;
                case '50+': matchesLevel = level > 50; break;
            }
        }
        
        return matchesSearch && matchesLevel;
    });
    
    // ソート処理
filteredProfiles.sort((a, b) => {
    switch(sortFilter) {
        case 'level': 
            return b.level - a.level || b.xp - a.xp;
        
        case 'activity': 
            return b.total_messages - a.total_messages;
        
        case 'quests': 
            return b.completed_quests - a.completed_quests;
        
        case 'quest_rate': 
            // クエスト達成率計算（簡易版）
            const rateA = a.completed_quests > 0 ? (a.completed_quests / (a.completed_quests + Math.floor(a.level / 3) + 1)) : 0;
            const rateB = b.completed_quests > 0 ? (b.completed_quests / (b.completed_quests + Math.floor(b.level / 3) + 1)) : 0;
            return rateB - rateA;
        
        case 'donation': 
            return b.donation_total - a.donation_total;
        
        case 'gift': 
            return b.transfers_total - a.transfers_total;
            
        default: 
            return 0;
    }
});

currentPage = 1;
renderProfiles(); 
}

function updatePagination() {
    let paginationContainer = document.getElementById('pagination-container');
    
    // ページネーションコンテナがない場合は作成
    if (!paginationContainer) {
        const profilesGrid = document.getElementById('profiles-grid');
        profilesGrid.insertAdjacentHTML('afterend', `
            <div id="pagination-container" class="d-flex justify-content-between align-items-center mt-4">
                <div class="pagination-info">
                    <span id="pagination-info-text" class="text-muted">-</span>
                </div>
                <nav>
                    <ul class="pagination pagination-sm mb-0" id="pagination-nav">
                    </ul>
                </nav>
            </div>
        `);
        paginationContainer = document.getElementById('pagination-container');
    }
    
    const totalProfiles = filteredProfiles.length;
    const totalPages = Math.ceil(totalProfiles / profilesPerPage);
    
    // 情報表示更新
    const infoText = document.getElementById('pagination-info-text');
    if (totalProfiles === 0) {
        infoText.textContent = '0件';
    } else {
        const startItem = (currentPage - 1) * profilesPerPage + 1;
        const endItem = Math.min(currentPage * profilesPerPage, totalProfiles);
        infoText.textContent = `${startItem}-${endItem} / ${totalProfiles}件`;
    }
    
    // ページネーション非表示判定
    if (totalPages <= 1) {
        paginationContainer.style.display = 'none';
        return;
    }
    
    paginationContainer.style.display = 'flex';
    
    // ページネーション生成
    const paginationNav = document.getElementById('pagination-nav');
    paginationNav.innerHTML = '';
    
    // 前へボタン
    const prevLi = document.createElement('li');
    prevLi.className = `page-item ${currentPage === 1 ? 'disabled' : ''}`;
    prevLi.innerHTML = `<a class="page-link" href="#" onclick="changePage(${currentPage - 1})">前へ</a>`;
    paginationNav.appendChild(prevLi);
    
    // ページ番号
    for (let i = 1; i <= Math.min(totalPages, 5); i++) {
        const pageLi = document.createElement('li');
        pageLi.className = `page-item ${i === currentPage ? 'active' : ''}`;
        pageLi.innerHTML = `<a class="page-link" href="#" onclick="changePage(${i})">${i}</a>`;
        paginationNav.appendChild(pageLi);
    }
    
    // 次へボタン
    const nextLi = document.createElement('li');
    nextLi.className = `page-item ${currentPage === totalPages ? 'disabled' : ''}`;
    nextLi.innerHTML = `<a class="page-link" href="#" onclick="changePage(${currentPage + 1})">次へ</a>`;
    paginationNav.appendChild(nextLi);
}

function changePage(page) {
    const totalPages = Math.ceil(filteredProfiles.length / profilesPerPage);
    
    if (page < 1 || page > totalPages) return;
    
    currentPage = page;
    renderProfiles();
    
    // ページトップへスクロール
    document.querySelector('.profiles-header').scrollIntoView({ behavior: 'smooth' });
}

// XP計算（簡易版）
function calculateXPForLevel(level) {
    if (level <= 10) {
        return Math.floor(50 * Math.pow(level, 1.8));
    } else if (level <= 30) {
        return Math.floor(80 * Math.pow(level, 1.9));
    } else if (level <= 60) {
        return Math.floor(75 * Math.pow(level, 2) + 200 * (level - 30));
    } else {
        return Math.floor(75 * Math.pow(level, 2) + 200 * 30 + 100 * (level - 60));
    }
}

// エラー表示
function showError(message) {
    const alertDiv = document.createElement('div');
    alertDiv.className = 'alert alert-danger alert-dismissible fade show';
    alertDiv.innerHTML = `
        ${message}
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    `;
    
    document.querySelector('.profiles-container').insertBefore(
        alertDiv, 
        document.querySelector('.profiles-header').nextSibling
    );
}

// ===== 成長データ生成関数 =====
function generateGrowthData(profile) {
    const endDate = new Date();
    const startDate = new Date();
    startDate.setDate(endDate.getDate() - 90); // 3ヶ月前
    
    const dailyData = {
        xp: [],
        kr: []
    };
    
    // 現在の値から逆算してスタート値を決定
    const currentXP = profile.xp;
    const currentKR = profile.balance;
    const startXP = Math.max(50, currentXP - Math.floor(currentXP * 0.7)); 
    const startKR = Math.max(1000, currentKR - Math.floor(currentKR * 0.6)); 
    
    // 日次データ生成
    for (let d = new Date(startDate); d <= endDate; d.setDate(d.getDate() + 1)) {
        const dayOfWeek = d.getDay(); 
        const daysSinceStart = Math.floor((d - startDate) / (1000 * 60 * 60 * 24));
        const progress = daysSinceStart / 90; 
        
        // 基本成長カーブ（右肩上がり）
        const baseXPGrowth = startXP + (currentXP - startXP) * Math.pow(progress, 0.8);
        const baseKRGrowth = startKR + (currentKR - startKR) * Math.pow(progress, 0.9);
        
        // 週次変動（平日活発、週末ゆるやか）
        let weeklyMultiplier = 1.0;
        if (dayOfWeek === 0 || dayOfWeek === 6) { 
            weeklyMultiplier = 0.3;
        } else if (dayOfWeek >= 1 && dayOfWeek <= 5) { 
            weeklyMultiplier = 1.2;
        }
        
        // 月次イベント効果
        let eventMultiplier = 1.0;
        const dayOfMonth = d.getDate();
        if (dayOfMonth === 15 || dayOfMonth === 28) { 
            eventMultiplier = 2.5;
        }
        
        // ランダム変動
        const randomVariation = 0.85 + Math.random() * 0.3;
        
        const prevXP = daysSinceStart > 0 ? dailyData.xp[daysSinceStart - 1]?.value || startXP : startXP;
        const prevKR = daysSinceStart > 0 ? dailyData.kr[daysSinceStart - 1]?.value || startKR : startKR;
        
        // 必ず右肩上がりを保証
        const xpValue = Math.max(prevXP + 1, prevXP + Math.max(1, Math.floor((baseXPGrowth - prevXP) * weeklyMultiplier * eventMultiplier * randomVariation)));
        const krValue = Math.max(prevKR + 10, prevKR + Math.max(10, Math.floor((baseKRGrowth - prevKR) * weeklyMultiplier * eventMultiplier * randomVariation)));
        
        dailyData.xp.push({
            date: d.toISOString().split('T')[0],
            value: Math.min(xpValue, currentXP) 
        });
        
        dailyData.kr.push({
            date: d.toISOString().split('T')[0],
            value: Math.min(krValue, currentKR) 
        });
    }
    
    // 最後の値を現在値に調整
    if (dailyData.xp.length > 0) {
        dailyData.xp[dailyData.xp.length - 1].value = currentXP;
    }
    if (dailyData.kr.length > 0) {
        dailyData.kr[dailyData.kr.length - 1].value = currentKR;
    }
    
    // 週次データ生成
    const weeklyData = { xp: [], kr: [] };
    for (let i = 6; i < dailyData.xp.length; i += 7) {
        weeklyData.xp.push({
            date: dailyData.xp[i].date,
            value: dailyData.xp[i].value
        });
        weeklyData.kr.push({
            date: dailyData.kr[i].date,
            value: dailyData.kr[i].value
        });
    }
    
    // 月次データ生成
    const monthlyData = { xp: [], kr: [] };
    let currentMonth = -1;
    dailyData.xp.forEach((item, index) => {
        const itemDate = new Date(item.date);
        const month = itemDate.getMonth();
        
        if (month !== currentMonth) {
            currentMonth = month;
            let monthEndIndex = index;
            for (let j = index; j < dailyData.xp.length; j++) {
                const checkDate = new Date(dailyData.xp[j].date);
                if (checkDate.getMonth() === month) {
                    monthEndIndex = j;
                } else {
                    break;
                }
            }
            
            monthlyData.xp.push({
                date: dailyData.xp[monthEndIndex].date,
                value: dailyData.xp[monthEndIndex].value
            });
            
            monthlyData.kr.push({
                date: dailyData.kr[monthEndIndex].date,
                value: dailyData.kr[monthEndIndex].value
            });
        }
    });
    
    return {
        daily: dailyData,
        weekly: weeklyData,
        monthly: monthlyData
    };
}

// ===== チャート関数 =====
function getProfileGrowthData(profileId) {
    const profile = allProfiles.find(p => p.id === profileId);
    if (!profile) return null;
    return generateGrowthData(profile);
}

function initializeGrowthChart(profileId) {
    const canvas = document.getElementById('profileGrowthChart');
    if (!canvas) return;
    
    // 既存のチャートを破棄
    if (window.profileChart) {
        window.profileChart.destroy();
    }
    
    const growthData = getProfileGrowthData(profileId);
    if (!growthData) return;
    
    // 初期は日次データを表示
    const ctx = canvas.getContext('2d');
    window.profileChart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: growthData.daily.xp.map(item => {
                const date = new Date(item.date);
                return `${date.getMonth() + 1}/${date.getDate()}`;
            }),
            datasets: [{
                label: 'XP',
                data: growthData.daily.xp.map(item => item.value),
                borderColor: '#0d6efd',
                backgroundColor: 'rgba(13, 110, 253, 0.1)',
                fill: true,
                tension: 0.3,
                pointRadius: 0,
                pointHoverRadius: 4
            }, {
                label: 'KR',
                data: growthData.daily.kr.map(item => item.value),
                borderColor: '#198754',
                backgroundColor: 'rgba(25, 135, 84, 0.1)',
                fill: true,
                tension: 0.3,
                pointRadius: 0,
                pointHoverRadius: 4,
                yAxisID: 'y1'
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    position: 'top',
                    labels: {
                        usePointStyle: true,
                        padding: 20
                    }
                }
            },
            scales: {
                x: {
                    display: true,
                    title: {
                        display: true,
                        text: '日付'
                    }
                },
                y: {
                    type: 'linear',
                    display: true,
                    position: 'left',
                    title: {
                        display: true,
                        text: 'XP'
                    }
                },
                y1: {
                    type: 'linear',
                    display: true,
                    position: 'right',
                    title: {
                        display: true,
                        text: 'KR'
                    },
                    grid: {
                        drawOnChartArea: false,
                    },
                }
            }
        }
    });
}

function switchGrowthPeriod(profileId, period) {
    const growthData = getProfileGrowthData(profileId);
    if (!growthData || !window.profileChart) return;
    
    let data, labels;
    
    switch(period) {
        case 'daily':
            data = growthData.daily;
            labels = data.xp.map(item => {
                const date = new Date(item.date);
                return `${date.getMonth() + 1}/${date.getDate()}`;
            });
            break;
        case 'weekly':
            data = growthData.weekly;
            labels = data.xp.map(item => {
                const date = new Date(item.date);
                return `${date.getMonth() + 1}/${date.getDate()}`;
            });
            break;
        case 'monthly':
            data = growthData.monthly;
            labels = data.xp.map(item => {
                const date = new Date(item.date);
                return `${date.getFullYear()}/${date.getMonth() + 1}`;
            });
            break;
        default:
            return;
    }
    
    // チャートデータ更新
    window.profileChart.data.labels = labels;
    window.profileChart.data.datasets[0].data = data.xp.map(item => item.value);
    window.profileChart.data.datasets[1].data = data.kr.map(item => item.value);
    window.profileChart.update();
    
    // ボタンの状態更新
    document.querySelectorAll('.period-btn').forEach(btn => {
        btn.classList.remove('active');
    });
    document.querySelector(`[data-period="${period}"]`).classList.add('active');
}

// ===== 修正版 showProfileDetail 関数 =====
function showProfileDetail(profileId) {
    const profile = allProfiles.find(p => p.id === profileId);
    if (!profile) return;
    
    const modal = document.getElementById('profileModal');
    const modalTitle = document.getElementById('modalUserName');
    const modalContent = document.getElementById('modal-profile-content');
    
    modalTitle.textContent = `${profile.display_name} のプロフィール`;
    
    // 詳細情報生成（期間切り替えボタン付き）
    modalContent.innerHTML = `
    <div class="row">
        <div class="col-md-4 text-center">
            <div class="profile-avatar mb-3" style="width: 100px; height: 100px; font-size: 2rem;">
                ${profile.display_name.charAt(0)}
            </div>
            <h4>レベル ${profile.level}</h4>
            <p class="text-muted">${profile.xp.toLocaleString()} XP</p>
            
            <!-- XP進捗バー -->
            <div class="mb-3">
                <div class="d-flex justify-content-between mb-1">
                    <small>次のレベルまで</small>
                    <small>${Math.max(0, calculateXPForLevel(profile.level + 1) - profile.xp).toLocaleString()} XP</small>
                </div>
                <div class="progress" style="height: 10px;">
                    <div class="progress-bar" style="width: ${Math.max(5, Math.min(100, ((profile.xp - (profile.level > 1 ? calculateXPForLevel(profile.level) : 0)) / Math.max(1, calculateXPForLevel(profile.level + 1) - (profile.level > 1 ? calculateXPForLevel(profile.level) : 0))) * 100))}%; background: linear-gradient(90deg, #28a745, #20c997); min-width: 10px;"></div>
                </div>
            </div>
        </div>
        
        <div class="col-md-8">
            <!-- 成長チャートエリア -->
            <div class="mb-4">
                <div class="d-flex justify-content-between align-items-center mb-2">
                    <h6 class="mb-0">📈 成長推移</h6>
                    <div class="btn-group btn-group-sm" role="group">
                        <button type="button" class="btn btn-outline-primary period-btn active" data-period="daily" onclick="switchGrowthPeriod('${profile.id}', 'daily')">日次</button>
                        <button type="button" class="btn btn-outline-primary period-btn" data-period="weekly" onclick="switchGrowthPeriod('${profile.id}', 'weekly')">週次</button>
                        <button type="button" class="btn btn-outline-primary period-btn" data-period="monthly" onclick="switchGrowthPeriod('${profile.id}', 'monthly')">月次</button>
                    </div>
                </div>
                <div style="height: 200px; background: #f8f9fa; border-radius: 8px; padding: 10px;">
                    <canvas id="profileGrowthChart" width="400" height="180"></canvas>
                </div>
            </div>
            
            <h6>📊 詳細統計</h6>
            <div class="row g-3 mb-4">
                <div class="col-6 col-lg-3">
                    <div class="stat-item border rounded p-2 text-center">
                        <div class="stat-value text-primary">${profile.completed_quests}</div>
                        <div class="stat-label">クエスト達成</div>
                    </div>
                </div>
                <div class="col-6 col-lg-3">
                    <div class="stat-item border rounded p-2 text-center">
                        <div class="stat-value text-success">${profile.quest_streak}</div>
                        <div class="stat-label">連続達成</div>
                    </div>
                </div>
                <div class="col-6 col-lg-3">
                    <div class="stat-item border rounded p-2 text-center">
                        <div class="stat-value text-warning">${profile.balance.toLocaleString()}</div>
                        <div class="stat-label">所持KR</div>
                    </div>
                </div>
                <div class="col-6 col-lg-3">
                    <div class="stat-item border rounded p-2 text-center">
                        <div class="stat-value text-info">${profile.total_messages.toLocaleString()}</div>
                        <div class="stat-label">投稿数</div>
                    </div>
                </div>
            </div>
            
            <!-- 活動統計 -->
            <h6>📈 活動統計</h6>
            <div class="row g-3 mb-4">
                <div class="col-md-6">
                    <div class="card bg-light">
                        <div class="card-body text-center">
                            <h5 class="text-success">${profile.donation_total.toLocaleString()}</h5>
                            <p class="mb-0">🎁 寄付総額 (KR)</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="card bg-light">
                        <div class="card-body text-center">
                            <h5 class="text-primary">${profile.transfers_total.toLocaleString()}</h5>
                            <p class="mb-0">💝 ギフト総額 (KR)</p>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 称号詳細 -->
            <h6>🏅 獲得称号 (${profile.titles.length}個)</h6>
            <div class="mb-3" style="max-height: 120px; overflow-y: auto;">
                ${profile.titles.length > 0 ? 
                    profile.titles.map((title, index) => {
                        const colors = ['#007bff', '#28a745', '#ffc107', '#dc3545', '#6f42c1', '#fd7e14'];
                        const color = colors[index % colors.length];
                        return `<span class="badge me-1 mb-1" style="background-color: ${color}; color: white;">${title}</span>`;
                    }).join('') :
                    '<span class="text-muted">称号未獲得</span>'
                }
            </div>
            
            <!-- ランキング情報 -->
            <h6>🏆 コミュニティランキング</h6>
            <div class="row g-2">
                <div class="col-6">
                    <small class="text-muted">レベルランキング</small>
                    <div class="fw-bold">#${getRankInCategory(profile, 'level')}位</div>
                </div>
                <div class="col-6">
                    <small class="text-muted">クエストランキング</small>
                    <div class="fw-bold">#${getRankInCategory(profile, 'quests')}位</div>
                </div>
            </div>
        </div>
    </div>
`;

    // モーダル表示
    const bsModal = new bootstrap.Modal(modal);
    bsModal.show();
    
    // モーダル表示後にチャート初期化
    modal.addEventListener('shown.bs.modal', function() {
        initializeGrowthChart(profile.id);
    }, { once: true });
}

</script>