const vibe = document.getElementById('vibe-sound');
const screen = document.getElementById('incoming-call-screen');
const overlay = document.getElementById('init-overlay');
const video = document.getElementById('call-video');
const progressText = document.getElementById('progress');
const shakeWrap = document.getElementById('shake-wrap');
let isCalling = false;

// --- 1. 動画の先行読み込み監視 ---
const updateProgress = () => {
    if (video.duration) {
        const buffered = video.buffered;
        if (buffered.length > 0) {
            const percent = Math.round((buffered.end(0) / video.duration) * 100);
            progressText.innerText = percent + "%";
            if (percent >= 100) showStartButton();
        }
    }
};

video.addEventListener('progress', updateProgress);
video.addEventListener('canplaythrough', showStartButton, { once: true });
setTimeout(showStartButton, 5000); // 保険

// --- 2. 読み込み完了時：プッシュ通知を出す ---
function showStartButton() {
    const noti = document.getElementById('push-notification');
    if (noti.classList.contains('notification-show')) return;

    const loaderUi = document.getElementById('loader-ui');
    loaderUi.innerHTML = '<div style="width:30px;height:30px;border:3px solid #06c755;border-radius:50%;margin-bottom:10px;animation: pulse-btn 2s infinite;"></div>';
    document.getElementById('loading-text').innerHTML = '接続準備完了<br><button id="start-btn" onclick="enterScreen2()">匿名で接続する</button>';

    noti.classList.remove('notification-hidden');
    noti.classList.add('notification-show');
}

// --- 3. 画面2（着信）へ遷移：通知クリックで発火 ---
function enterScreen2() {
    const noti = document.getElementById('push-notification');
    noti.style.transform = "translateY(-150%)";
    noti.style.opacity = "0";
    
    setTimeout(() => {
        // 画面1を隠し、画面2を可視化（opacity制御によりラグを解消）
        overlay.classList.add('hidden');
        
        // 修正点：CSSで描画済みの画面を不透明に戻し、位置を確定させる
        screen.style.top = '0';
        screen.style.opacity = '1';
        screen.style.pointerEvents = 'auto';
        screen.classList.remove('hidden');
        
        shakeWrap.classList.add('shake-animation');
        vibe.play().catch(e => console.log("音声再生エラー:", e));
    }, 300);
}

// --- 4. 画面3（通話開始）へ ---
function startCall() {
    isCalling = true;
    vibe.pause();
    vibe.currentTime = 0;
    shakeWrap.classList.remove('shake-animation');

    const blackLayer = document.getElementById('transition-black');
    blackLayer.classList.remove('hidden');

    setTimeout(() => {
        shakeWrap.classList.add('hidden');
        video.style.display = 'block';
        video.play();

        document.getElementById('small-icon').classList.remove('hidden');
        document.getElementById('right-btn').classList.add('hidden');
        document.getElementById('action-flex-box').classList.add('centered');
        
        document.getElementById('svg-decline').classList.add('hidden');
        document.getElementById('svg-hangup').classList.remove('hidden');
        document.getElementById('left-label').innerText = "終了";

        blackLayer.classList.add('hidden');
        setTimeout(showModal, 5000);
    }, 400);
}

function handleLeftClick() {
    if (!isCalling) {
        vibe.pause();
        showModal();
    } else {
        showModal();
    }
}

function showModal() {
    document.getElementById('download-modal').classList.remove('hidden');
    vibe.pause();
    if (video) video.pause();
}