<?php
/**
 * Skin Analysis Interactive Experience
 * تجربة تحليل البشرة التفاعلية
 */

session_start();
require_once '../config/database.php';

// إنشاء session token جديد
if (!isset($_SESSION['analysis_token'])) {
    $_SESSION['analysis_token'] = bin2hex(random_bytes(32));
}

$pageTitle = "تحليل البشرة التفاعلي";
?>
<!DOCTYPE html>
<html dir="rtl" lang="ar">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?php echo $pageTitle; ?></title>
    
    <!-- CSS -->
    <link rel="stylesheet" href="assets/css/skin-analysis-interactive.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    <!-- Meta Tags -->
    <meta name="description" content="اكتشف مشاكل بشرتك واحصل على توصيات مخصصة">
    <meta name="keywords" content="تحليل البشرة, العناية بالبشرة, مشاكل البشرة">
</head>
<body>
    
    <!-- Loading Screen -->
    <div id="loadingScreen" class="loading-screen">
        <div class="loading-content">
            <div class="loading-spinner"></div>
            <h2>جاري تحليل بشرتك...</h2>
            <p>الرجاء الانتظار</p>
        </div>
    </div>

    <!-- Main Container -->
    <div id="analysisContainer" class="analysis-container">
        
        <!-- Screen 1: Detection -->
        <div id="screen1" class="screen active" data-screen="1">
            <div class="screen-content">
                
                <!-- Face Preview -->
                <div class="face-container">
                    <div class="face-overlay"></div>
                    <svg class="face-svg" viewBox="0 0 300 400" xmlns="http://www.w3.org/2000/svg">
                        <!-- Face Shape -->
                        <ellipse cx="150" cy="200" rx="120" ry="160" fill="rgba(255,255,255,0.1)" stroke="rgba(255,255,255,0.3)" stroke-width="2"/>
                        
                        <!-- Detection Points (will be added dynamically) -->
                        <g id="detectionPoints"></g>
                    </svg>
                </div>
                
                <!-- Detection Result -->
                <div class="detection-result">
                    <h1 class="result-title" id="detectionTitle">جاري الفحص...</h1>
                    <p class="result-subtitle" id="detectionSubtitle">الرجاء الانتظار</p>
                </div>
                
                <!-- Progress -->
                <div class="progress-indicator">
                    <span class="progress-text">1/3</span>
                </div>
                
                <!-- Navigation -->
                <div class="navigation-buttons">
                    <button class="btn btn-primary btn-next" id="nextBtn1" disabled>
                        التالي <i class="fas fa-arrow-left"></i>
                    </button>
                </div>
                
            </div>
        </div>
        
        <!-- Screen 2: Additional Symptoms -->
        <div id="screen2" class="screen" data-screen="2">
            <div class="screen-content">
                
                <!-- Background Face (Blurred) -->
                <div class="face-container blurred">
                    <div class="face-overlay"></div>
                    <svg class="face-svg" viewBox="0 0 300 400" xmlns="http://www.w3.org/2000/svg">
                        <ellipse cx="150" cy="200" rx="120" ry="160" fill="rgba(255,255,255,0.05)" stroke="rgba(255,255,255,0.2)" stroke-width="2"/>
                    </svg>
                </div>
                
                <!-- Symptoms Selection -->
                <div class="symptoms-container">
                    <h1 class="symptoms-title">هل لديك أعراض إضافية؟</h1>
                    
                    <div class="symptoms-grid" id="symptomsGrid">
                        <!-- Symptoms will be loaded dynamically -->
                    </div>
                </div>
                
                <!-- Progress -->
                <div class="progress-indicator">
                    <span class="progress-text">2/3</span>
                </div>
                
                <!-- Navigation -->
                <div class="navigation-buttons">
                    <button class="btn btn-secondary btn-back" id="backBtn2">
                        <i class="fas fa-arrow-right"></i> رجوع
                    </button>
                    <button class="btn btn-primary btn-next" id="nextBtn2">
                        التالي <i class="fas fa-arrow-left"></i>
                    </button>
                    <button class="btn btn-text btn-skip" id="skipBtn2">
                        تخطي
                    </button>
                </div>
                
            </div>
        </div>
        
        <!-- Screen 3: Results & Recommendations -->
        <div id="screen3" class="screen" data-screen="3">
            <div class="screen-content">
                
                <!-- Background Face (Blurred) -->
                <div class="face-container blurred">
                    <div class="face-overlay"></div>
                    <svg class="face-svg" viewBox="0 0 300 400" xmlns="http://www.w3.org/2000/svg">
                        <ellipse cx="150" cy="200" rx="120" ry="160" fill="rgba(255,255,255,0.05)" stroke="rgba(255,255,255,0.2)" stroke-width="2"/>
                    </svg>
                </div>
                
                <!-- Results Container -->
                <div class="results-container">
                    
                    <!-- Score Display -->
                    <div class="score-display">
                        <div class="score-circle">
                            <span class="score-number" id="scoreNumber">0</span>
                            <span class="score-percent">%</span>
                        </div>
                        <div class="score-labels">
                            <span class="score-label-right" id="scoreLabel1">دهنية</span>
                            <span class="score-label-left" id="scoreLabel2">جافة</span>
                        </div>
                    </div>
                    
                    <!-- Date Selection -->
                    <div class="date-section">
                        <h3 class="section-title">اختر موعداً</h3>
                        <div class="date-buttons" id="dateButtons">
                            <!-- Dates will be loaded dynamically -->
                        </div>
                    </div>
                    
                    <!-- Clinics Section -->
                    <div class="clinics-section">
                        <h3 class="section-title">العيادات</h3>
                        <div class="clinics-list" id="clinicsList">
                            <!-- Clinics will be loaded dynamically -->
                        </div>
                    </div>
                    
                </div>
                
                <!-- Progress -->
                <div class="progress-indicator">
                    <span class="progress-text">3/3</span>
                </div>
                
                <!-- Navigation -->
                <div class="navigation-buttons">
                    <button class="btn btn-secondary btn-back" id="backBtn3">
                        <i class="fas fa-arrow-right"></i> رجوع
                    </button>
                    <button class="btn btn-success btn-finish" id="finishBtn">
                        <i class="fas fa-check"></i> إنهاء
                    </button>
                </div>
                
            </div>
        </div>
        
    </div>

    <!-- JavaScript -->
    <script src="assets/js/skin-analysis-interactive.js"></script>
    
    <script>
        // Initialize with session token
        const ANALYSIS_TOKEN = '<?php echo $_SESSION['analysis_token']; ?>';
    </script>
    
</body>
</html>
