<?php
// FILE: popup_sambutan.php
// Fitur: Dynamic Island Animation (Konsisten dengan Native Toast)
?>

<div id="initialModalOverlay" class="modal-overlay" style="display: none;">
    <div id="initialModalContent">
        <img src="sambutan.png" alt="Gambar Sambutan" class="initial-sambutan-image" onerror="this.style.display='none'">
        <p>Klik di mana saja untuk melanjutkan.</p>
    </div>
</div>

<div id="welcomeModalOverlay" class="modal-overlay-push" style="display: none;">
    <div id="welcomeModalContent">
        <div class="island-content-wrapper">
            <div class="notification-icon-col">
                 <img src="icon-512-hijau.png" alt="Icon" class="notification-image" onerror="this.src='https://via.placeholder.com/40'">
            </div>
            <div class="notification-text-col">
                <div class="notification-header">
                    <span class="app-name">Siswa Plus</span>
                    <span class="time-stamp" id="notificationTimestamp"></span>
                </div>
                <div class="notification-body">
                    <h3 class="notification-title">Halo, <?= htmlspecialchars($namaLengkap ?? 'Pengguna') ?></h3>
                    <p class="notification-message">Selamat datang kembali.</p>
                </div>
            </div>
        </div>
    </div>
</div>

<audio id="notificationSound" preload="auto">
    <source src="assets/notification.mp3" type="audio/mpeg">
</audio>

<style>
    /* --- CSS SYSTEM (IDENTIK DENGAN TOAST) --- */
    .modal-overlay {
        position: fixed; top: 0; left: 0; width: 100%; height: 100%;
        z-index: 9998; display: flex; cursor: pointer;
        transition: opacity 0.3s ease;
        background-color: rgba(0, 0, 0, 0.7);
        justify-content: center; align-items: center;
    }

    .modal-overlay-push {
        position: fixed; top: 0; left: 0; width: 100%; height: 0;
        z-index: 9999; display: flex; 
        justify-content: center; align-items: flex-start;
        pointer-events: none;
    }

    /* Initial Modal Style */
    #initialModalContent {
        background-color: transparent; padding: 10px; border-radius: 10px;
        text-align: center; max-width: 75%; width: 75vw;
    }
    .initial-sambutan-image { max-width: 100%; height: auto; border-radius: 8px; margin: 10px 0; display: block; }
    #initialModalContent p { color: white; font-weight: 500; font-size: 13px; margin: 0; }

    /* --- DYNAMIC ISLAND CORE (Physics Sama dengan Toast) --- */
    #welcomeModalContent {
        pointer-events: auto;
        background-color: #000000; /* Konsisten Hitam */
        color: white;
        
        /* STATE 1: Hidden Top */
        margin-top: -50px; 
        
        /* STATE 2: Ball Shape */
        height: 36px; width: 36px; padding: 0; 
        border-radius: 50px;
        
        display: flex; align-items: center; justify-content: center;
        overflow: hidden;
        box-shadow: 0 5px 20px rgba(0,0,0,0.25);
        
        /* TRANSISI FISIKA (SAMA PERSIS DENGAN TOAST) */
        transition: 
            margin-top 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275), 
            width 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), 
            min-width 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), 
            padding 0.3s ease,
            border-radius 0.5s ease;
    }

    /* TAHAP 1: DROP (Turun jadi Bola) */
    #welcomeModalContent.stage-drop {
        margin-top: calc(env(safe-area-inset-top) + 8px);
    }

    /* TAHAP 2: EXPAND (Melar) */
    #welcomeModalContent.stage-expand {
        width: auto;
        min-width: 320px; /* Lebar minimum untuk notifikasi sambutan */
        max-width: 92vw;  /* Safety untuk layar HP kecil */
        height: auto;     /* Tinggi menyesuaikan konten */
        padding: 12px 15px;
        border-radius: 28px; /* Radius lebih besar saat expand */
    }

    /* --- CONTEN ISI --- */
    .island-content-wrapper {
        display: flex; align-items: center; gap: 12px; width: 100%;
        opacity: 0; transform: scale(0.9);
        transition: opacity 0.2s ease, transform 0.2s ease;
    }

    /* Munculkan konten HANYA saat expand */
    #welcomeModalContent.stage-expand .island-content-wrapper {
        opacity: 1; transform: scale(1);
        transition-delay: 0.1s;
    }

    /* Layout Notifikasi */
    .notification-icon-col { flex-shrink: 0; }
    .notification-image { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 1px solid rgba(255,255,255,0.1); }
    
    .notification-text-col { flex: 1; min-width: 0; text-align: left; }
    
    .notification-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2px; }
    .app-name { font-size: 10px; text-transform: uppercase; color: #888; letter-spacing: 0.5px; font-weight: 600; }
    .time-stamp { font-size: 10px; color: #666; }
    
    .notification-body { display: flex; flex-direction: column; }
    .notification-title { font-size: 14px; font-weight: 600; margin: 0; color: #fff; }
    .notification-message { font-size: 13px; margin: 0; color: #ccc; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

</style>

<script>
document.addEventListener("DOMContentLoaded", () => {
    // --- KONFIGURASI ---
    const STORAGE_KEY = 'welcome_popup_date'; 
    const TODAY_DATE = new Date().toDateString();

    const initialOverlay = document.getElementById('initialModalOverlay');
    const welcomeOverlay = document.getElementById('welcomeModalOverlay');
    const welcomeContent = document.getElementById('welcomeModalContent');
    const timestampEl = document.getElementById('notificationTimestamp');
    const sound = document.getElementById('notificationSound');
    let sequenceTimeout;

    // --- LOGIKA UTAMA (HANYA MUNCUL 1X SEHARI) ---
    const lastShownDate = localStorage.getItem(STORAGE_KEY);

    // Jika belum tampil hari ini
    if (lastShownDate !== TODAY_DATE) {
        initialOverlay.style.display = 'flex';
        initialOverlay.addEventListener('click', startSequence);
    }

    // --- FUNGSI URUTAN ANIMASI ---
    function startSequence() {
        // 1. Simpan tanggal hari ini
        localStorage.setItem(STORAGE_KEY, TODAY_DATE);

        // 2. Fadeout Modal Awal
        initialOverlay.style.opacity = '0';
        setTimeout(() => {
            initialOverlay.style.display = 'none';
            // 3. Mulai Animasi
            animateOpen();
        }, 300);
    }

    // --- ANIMASI DYNAMIC ISLAND (URUTAN IDENTIK TOAST) ---
    function animateOpen() {
        // Set Jam
        if (timestampEl) {
            const now = new Date();
            timestampEl.textContent = `${now.getHours()}:${String(now.getMinutes()).padStart(2,'0')}`;
        }

        // Tampilkan Container
        welcomeOverlay.style.display = 'flex';
        
        // Play Sound
        if (sound) sound.play().catch(()=>{});

        // GUNAKAN TEKNIK NESTED TIMEOUT AGAR SAMA PERSIS DENGAN TOAST
        requestAnimationFrame(() => {
            // STEP 1: TURUN (BOLA 36px)
            welcomeContent.classList.add('stage-drop');
            
            // STEP 2: MELAR (EXPAND)
            sequenceTimeout = setTimeout(() => {
                welcomeContent.classList.add('stage-expand');
                
                // STEP 3: KEMBALI JADI BOLA (SHRINK)
                sequenceTimeout = setTimeout(() => {
                    welcomeContent.classList.remove('stage-expand');
                    
                    // STEP 4: NAIK KE ATAS (ASCEND)
                    sequenceTimeout = setTimeout(() => {
                        welcomeContent.classList.remove('stage-drop');
                        
                        // STEP 5: REMOVE CONTAINER
                        setTimeout(() => {
                            welcomeOverlay.style.display = 'none';
                        }, 500);

                    }, 400); // Tunggu bola mengecil (400ms)

                }, 4000); // Durasi Baca (4 Detik)

            }, 500); // Waktu bola diam sebelum melar (500ms)
        });

        // Allow Manual Close (Click to Dismiss)
        welcomeContent.addEventListener('click', () => {
            clearTimeout(sequenceTimeout);
            welcomeContent.classList.remove('stage-expand');
            setTimeout(() => {
                welcomeContent.classList.remove('stage-drop');
                setTimeout(() => { welcomeOverlay.style.display = 'none'; }, 500);
            }, 300);
        }, {once: true});
    }
});
</script>