<?php
/**
 * Plugin Name: Mistik Fal & Şans Kurabiyesi
 * Description: Şans kurabiyesi, kahve falı, tarot ve burç yorumları uygulaması.
 * Version: 1.0
 * Author: Mistik Kehanet
 */

if (!defined('ABSPATH')) exit;

// CSS ve JS dosyalarını yükleme
function mf_enqueue_scripts() {
    wp_enqueue_style('font-awesome', 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css');
    wp_enqueue_style('google-fonts', 'https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=Poppins:wght@300;400;500;600&display=swap', array(), null);
    
    wp_enqueue_style('mf-style', plugin_dir_url(__FILE__) . 'style.css', array(), '1.0');
    wp_enqueue_script('mf-script', plugin_dir_url(__FILE__) . 'script.js', array('jquery'), '1.0', true);
}
add_action('wp_enqueue_scripts', 'mf_enqueue_scripts');

// Shortcode oluşturma: [mistik_fal]
function mf_render_app() {
    ob_start();
    ?>
    <div class="mistik-fal-wrapper">
        <header class="mf-header">
            <div class="logo">
                <i class="fa-solid fa-moon"></i>
                <span>MİSTİK KEHANET</span>
            </div>
            <nav class="mf-nav">
                <button class="nav-btn active" onclick="switchTab('cookie')"><i class="fa-solid fa-cookie-bite"></i> Şans Kurabiyesi</button>
                <button class="nav-btn" onclick="switchTab('coffee')"><i class="fa-solid fa-mug-hot"></i> Kahve Falı</button>
                <button class="nav-btn" onclick="switchTab('tarot')"><i class="fa-solid fa-cards"></i> Tarot</button>
                <button class="nav-btn" onclick="switchTab('horoscope')"><i class="fa-solid fa-star"></i> Burçlar</button>
            </nav>
        </header>

        <main class="container">
            <!-- ŞANS KURABİYESİ BÖLÜMÜ -->
            <section id="cookie-section" class="tab-content active">
                <div class="card glass-panel">
                    <h2><i class="fa-solid fa-cookie"></i> Günlük Şans Kurabiyesi</h2>
                    <p class="subtitle">Evrenin bugün sana özel mesajını almak için kurabiyeyi kır!</p>
                    
                    <div class="cookie-box" id="cookieBox" onclick="crackCookie()">
                        <div class="cookie left-half" id="leftHalf"></div>
                        <div class="cookie right-half" id="rightHalf"></div>
                        <div class="cookie-glow"></div>
                    </div>

                    <div class="fortune-paper" id="fortunePaper">
                        <div class="paper-content">
                            <span class="paper-quote">"</span>
                            <p id="cookieFortuneText">Kaderin bugün yazılıyor...</p>
                            <span class="paper-quote">"</span>
                        </div>
                        <div class="lucky-numbers">
                            <span>Şanslı Sayıların:</span>
                            <strong id="luckyNumbers">7, 12, 23, 45, 88</strong>
                        </div>
                    </div>

                    <div class="timer-box hidden" id="timerBox">
                        <i class="fa-solid fa-clock"></i>
                        <p>Bugünkü hakkını kullandın! Yeni kurabiye için kalan süre:</p>
                        <div class="countdown" id="countdown">23:59:59</div>
                        <button class="reset-btn" onclick="resetCookieStorage()"><i class="fa-solid fa-rotate-right"></i> Test İçin Sıfırla (Geliştirici)</button>
                    </div>
                </div>
            </section>

            <!-- KAHVE FALI BÖLÜMÜ -->
            <section id="coffee-section" class="tab-content">
                <div class="card glass-panel">
                    <h2><i class="fa-solid fa-mug-hot"></i> Kahve Falı Yorumlama</h2>
                    <p class="subtitle">Fincanının fotoğrafını seç/yükle, mistik güçler yorumlasın.</p>

                    <div class="coffee-upload-area">
                        <div class="upload-box" onclick="document.getElementById('fileInput').click()">
                            <i class="fa-solid fa-cloud-arrow-up"></i>
                            <p>Fincan Fotoğrafı Yükle veya Örnek Seç</p>
                            <input type="file" id="fileInput" accept="image/*" style="display:none" onchange="handleImageUpload(event)">
                        </div>

                        <div class="sample-cups">
                            <p>Veya örnek bir fincan seçin:</p>
                            <div class="cup-grid">
                                <div class="cup-item" onclick="selectSampleCup(1)">☕ Fincan 1</div>
                                <div class="cup-item" onclick="selectSampleCup(2)">☕ Fincan 2</div>
                                <div class="cup-item" onclick="selectSampleCup(3)">☕ Fincan 3</div>
                            </div>
                        </div>
                    </div>

                    <div id="coffeePreview" class="coffee-preview hidden">
                        <img id="cupImage" src="" alt="Kahve Fincanı">
                        <button class="action-btn" id="readCoffeeBtn" onclick="readCoffee()"><i class="fa-solid fa-wand-magic-sparkles"></i> Falıma Bak</button>
                    </div>

                    <div id="coffeeLoading" class="loading-box hidden">
                        <div class="spinner"></div>
                        <p>Telvelerin gizemi çözülüyor, geleceğin okunuyor...</p>
                    </div>

                    <div id="coffeeResult" class="coffee-result hidden">
                        <h3><i class="fa-solid fa-scroll"></i> Fal Sonucun</h3>
                        <div class="result-grid">
                            <div class="result-card">
                                <h4><i class="fa-solid fa-heart"></i> Aşk & İlişkiler</h4>
                                <p id="loveReading"></p>
                            </div>
                            <div class="result-card">
                                <h4><i class="fa-solid fa-briefcase"></i> Kariyer & Para</h4>
                                <p id="careerReading"></p>
                            </div>
                            <div class="result-card">
                                <h4><i class="fa-solid fa-eye"></i> Genel Hisler</h4>
                                <p id="generalReading"></p>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            <!-- TAROT BÖLÜMÜ -->
            <section id="tarot-section" class="tab-content">
                <div class="card glass-panel">
                    <h2><i class="fa-solid fa-cards"></i> 3 Kart Tarot Falı</h2>
                    <p class="subtitle">Geçmiş, Şimdiki Zaman ve Geleceğin için 3 kart seç.</p>

                    <div class="tarot-deck" id="tarotDeck"></div>

                    <div class="tarot-slots">
                        <div class="slot">
                            <span>Geçmiş</span>
                            <div class="card-slot" id="slot-0"></div>
                        </div>
                        <div class="slot">
                            <span>Şimdiki Zaman</span>
                            <div class="card-slot" id="slot-1"></div>
                        </div>
                        <div class="slot">
                            <span>Gelecek</span>
                            <div class="card-slot" id="slot-2"></div>
                        </div>
                    </div>

                    <div id="tarotResult" class="tarot-result hidden">
                        <h3><i class="fa-solid fa-sparkles"></i> Kartların Kehaneti</h3>
                        <div id="tarotMeanings"></div>
                    </div>
                </div>
            </section>

            <!-- BURÇLAR BÖLÜMÜ -->
            <section id="horoscope-section" class="tab-content">
                <div class="card glass-panel">
                    <h2><i class="fa-solid fa-star"></i> Günlük Burç Yorumları</h2>
                    <div class="zodiac-grid" id="zodiacGrid"></div>
                    <div id="horoscopeModal" class="modal hidden">
                        <div class="modal-content glass-panel">
                            <span class="close-btn" onclick="closeModal()">&times;</span>
                            <h3 id="modalSignTitle">Burç Adı</h3>
                            <p id="modalSignDate" class="sign-date"></p>
                            <p id="modalSignComment"></p>
                        </div>
                    </div>
                </div>
            </section>
        </main>
    </div>
    <?php
    return ob_get_clean();
}
add_shortcode('mistik_fal', 'mf_render_app');