const API_BASE = '/api';

let playlists = [];

function showError(message) {
    const errorDiv = document.getElementById('errorMessage');
    errorDiv.textContent = message;
    errorDiv.style.display = 'block';
    setTimeout(() => {
        errorDiv.style.display = 'none';
    }, 5000);
}

function showSuccess(message) {
    const successDiv = document.getElementById('successMessage');
    successDiv.textContent = message;
    successDiv.style.display = 'block';
    setTimeout(() => {
        successDiv.style.display = 'none';
    }, 3000);
}

function formatTimestamp(timestamp) {
    if (!timestamp) return '从未同步';
    const date = new Date(timestamp);
    return date.toLocaleString('zh-CN', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit'
    });
}

function getStatusClass(status) {
    switch (status) {
        case 'syncing':
            return 'status-syncing';
        case 'success':
            return 'status-success';
        case 'error':
            return 'status-error';
        default:
            return 'status-idle';
    }
}

function getStatusText(status) {
    switch (status) {
        case 'syncing':
            return '同步中';
        case 'success':
            return '同步成功';
        case 'error':
            return '同步失败';
        default:
            return '待同步';
    }
}

function renderPlaylists() {
    const container = document.getElementById('playlistList');
    
    if (playlists.length === 0) {
        container.innerHTML = `
            <div class="empty-state">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <path d="M9 18V5l12-2v13"/>
                    <circle cx="6" cy="18" r="3"/>
                    <circle cx="18" cy="16" r="3"/>
                </svg>
                <p>还没有添加任何歌单</p>
                <p>在上方输入网易云音乐歌单ID或分享链接开始同步</p>
            </div>
        `;
        return;
    }
    
    container.innerHTML = playlists.map(playlist => `
        <div class="playlist-item">
            <div class="playlist-info">
                <div class="playlist-name">${playlist.name}</div>
                <div class="playlist-meta">
                    <span>🆔 ${playlist.neteaseId}</span>
                    <span>🎵 ${playlist.songs.length} 首歌曲</span>
                    <span>⏰ ${formatTimestamp(playlist.lastSyncTime)}</span>
                    <span class="status-badge ${getStatusClass(playlist.status)}">${getStatusText(playlist.status)}</span>
                </div>
            </div>
            <div class="playlist-actions">
                <button class="btn-sync" onclick="syncPlaylist('${playlist.id}')" ${playlist.status === 'syncing' ? 'disabled' : ''}>
                    ${playlist.status === 'syncing' ? '<span class="spinner"></span>' : '立即同步'}
                </button>
                <button class="btn-delete" onclick="deletePlaylist('${playlist.id}')">删除</button>
            </div>
        </div>
    `).join('');
}

async function loadPlaylists() {
    try {
        const response = await fetch(`${API_BASE}/playlists`);
        if (!response.ok) throw new Error('加载歌单失败');
        playlists = await response.json();
        renderPlaylists();
    } catch (error) {
        console.error('加载歌单失败:', error);
        showError('加载歌单失败: ' + error.message);
    }
}

async function addPlaylist() {
    const input = document.getElementById('playlistInput');
    const value = input.value.trim();
    
    if (!value) {
        showError('请输入歌单ID或分享链接');
        return;
    }
    
    try {
        const response = await fetch(`${API_BASE}/playlists`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({ url: value })
        });
        
        if (!response.ok) {
            const error = await response.json();
            throw new Error(error.error || '添加歌单失败');
        }
        
        const playlist = await response.json();
        playlists.push(playlist);
        renderPlaylists();
        input.value = '';
        showSuccess('歌单添加成功');
    } catch (error) {
        console.error('添加歌单失败:', error);
        showError('添加歌单失败: ' + error.message);
    }
}

async function deletePlaylist(id) {
    if (!confirm('确定要删除这个歌单吗？')) return;
    
    try {
        const response = await fetch(`${API_BASE}/playlists/${id}`, {
            method: 'DELETE'
        });
        
        if (!response.ok) throw new Error('删除歌单失败');
        
        playlists = playlists.filter(p => p.id !== id);
        renderPlaylists();
        showSuccess('歌单删除成功');
    } catch (error) {
        console.error('删除歌单失败:', error);
        showError('删除歌单失败: ' + error.message);
    }
}

async function syncPlaylist(id) {
    try {
        const response = await fetch(`${API_BASE}/playlists/${id}/sync`, {
            method: 'POST'
        });
        
        if (!response.ok) throw new Error('启动同步失败');
        
        const playlist = await response.json();
        const index = playlists.findIndex(p => p.id === id);
        if (index !== -1) {
            playlists[index] = playlist;
        }
        renderPlaylists();
        showSuccess('同步已启动');
    } catch (error) {
        console.error('启动同步失败:', error);
        showError('启动同步失败: ' + error.message);
    }
}

async function updatePlaylistStatus(id) {
    try {
        const response = await fetch(`${API_BASE}/status/${id}`);
        if (!response.ok) return;
        
        const playlist = await response.json();
        const index = playlists.findIndex(p => p.id === id);
        if (index !== -1) {
            playlists[index] = playlist;
            renderPlaylists();
        }
    } catch (error) {
        console.error('更新状态失败:', error);
    }
}

function startStatusPolling() {
    setInterval(() => {
        playlists.forEach(playlist => {
            if (playlist.status === 'syncing') {
                updatePlaylistStatus(playlist.id);
            }
        });
    }, 3000);
}

document.getElementById('playlistInput').addEventListener('keypress', (e) => {
    if (e.key === 'Enter') {
        addPlaylist();
    }
});

loadPlaylists();
startStatusPolling();