<?php
session_start();
require_once '../config/database.php';
require_once '../helpers/quiz-recommendations.php';

$database = new Database();
$conn = $database->getConnection();

// Get result ID
$resultId = isset($_GET['id']) ? intval($_GET['id']) : 0;

if (!$resultId) {
    header('Location: skin-quiz.php');
    exit;
}

// Fetch result
$stmt = $conn->prepare("SELECT * FROM skin_quiz_results WHERE id = ?");
$stmt->execute([$resultId]);
$result = $stmt->fetch(PDO::FETCH_ASSOC);

if (!$result) {
    header('Location: skin-quiz.php');
    exit;
}

// Decode JSON data
$concerns = json_decode($result['skin_concerns'], true) ?? [];
$recommendedProducts = json_decode($result['recommended_products'], true) ?? [];

// Get skin care tips
$tips = getSkinCareTips($result['skin_type'], $concerns);

// Skin type info
$skinTypeInfo = [
    'oily' => [
        'name' => 'دهنية',
        'icon' => '💧',
        'color' => '#3b82f6',
        'description' => 'بشرتك تفرز زيوت زائدة مما يسبب اللمعان والمسام الواسعة'
    ],
    'dry' => [
        'name' => 'جافة',
        'icon' => '🏜️',
        'color' => '#f59e0b',
        'description' => 'بشرتك تحتاج لترطيب مستمر وعميق'
    ],
    'combination' => [
        'name' => 'مختلطة',
        'icon' => '🌓',
        'color' => '#8b5cf6',
        'description' => 'بشرتك دهنية في المنطقة T وجافة على الخدود'
    ],
    'normal' => [
        'name' => 'عادية',
        'icon' => '✨',
        'color' => '#10b981',
        'description' => 'بشرتك متوازنة وصحية'
    ],
    'sensitive' => [
        'name' => 'حساسة',
        'icon' => '🌸',
        'color' => '#ec4899',
        'description' => 'بشرتك تتهيج بسهولة وتحتاج لعناية خاصة'
    ]
];

$skinInfo = $skinTypeInfo[$result['skin_type']] ?? $skinTypeInfo['normal'];

// Concern translations
$concernTranslations = [
    'acne' => 'حب الشباب',
    'dark_spots' => 'البقع الداكنة',
    'wrinkles' => 'التجاعيد',
    'dryness' => 'الجفاف',
    'large_pores' => 'المسام الواسعة',
    'dullness' => 'البشرة الباهتة',
    'dark_circles' => 'الهالات السوداء',
    'redness' => 'الاحمرار'
];
?>
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="theme-color" content="#667eea">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <title>نتيجة اختبار البشرة - <?php echo htmlspecialchars($result['name']); ?></title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <style>
        body { 
            font-family: 'Tajawal', sans-serif; 
            background: linear-gradient(135deg, #fce7f3 0%, #fbcfe8 20%, #f3e8ff 40%, #e9d5ff 60%, #ddd6fe 80%, #c7d2fe 100%);
            min-height: 100vh;
            position: relative;
            overflow-x: hidden;
        }
        
        body::before {
            content: '';
            position: fixed;
            top: -50%;
            right: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle at 30% 50%, rgba(251, 207, 232, 0.4) 0%, transparent 50%),
                        radial-gradient(circle at 70% 80%, rgba(233, 213, 255, 0.4) 0%, transparent 50%);
            animation: rotate 30s linear infinite;
            pointer-events: none;
            z-index: 0;
        }
        
        @keyframes rotate {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }
        
        .result-container { 
            max-width: 1200px; 
            margin: 40px auto; 
            padding: 0 20px;
            position: relative;
            z-index: 1;
        }
        
        .score-circle { 
            width: 200px; 
            height: 200px; 
            border-radius: 50%; 
            background: conic-gradient(<?php echo $skinInfo['color']; ?> <?php echo $result['score']; ?>%, #f3f4f6 <?php echo $result['score']; ?>%);
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
        }
        
        .score-inner {
            width: 160px;
            height: 160px;
            border-radius: 50%;
            background: white;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
        }
        
        .product-card { 
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            background: white;
            border-radius: 24px;
            overflow: hidden;
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
        }
        
        .product-card:hover { 
            transform: translateY(-8px) scale(1.02); 
            box-shadow: 0 20px 40px rgba(236, 72, 153, 0.2);
        }
        
        .card-gradient {
            background: rgba(255, 255, 255, 0.98);
            backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 255, 255, 0.8);
        }
        
        .badge-success {
            background: linear-gradient(135deg, #10b981 0%, #059669 100%);
            box-shadow: 0 4px 16px rgba(16, 185, 129, 0.3);
        }
        
        .btn-gradient {
            background: linear-gradient(135deg, #ec4899 0%, #a855f7 50%, #8b5cf6 100%);
            box-shadow: 0 6px 20px rgba(236, 72, 153, 0.4);
            transition: all 0.3s;
        }
        
        .btn-gradient:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 28px rgba(236, 72, 153, 0.5);
        }
        
        /* Mobile Responsive */
        @media (max-width: 768px) {
            .result-container { margin: 20px auto; padding: 0 15px; }
            
            .score-circle { width: 150px; height: 150px; }
            .score-inner { width: 120px; height: 120px; }
            .score-inner .text-5xl { font-size: 36px; }
            
            .grid.md\\:grid-cols-2 { grid-template-columns: 1fr; }
            .grid.md\\:grid-cols-3 { grid-template-columns: 1fr; }
            
            .bg-white.rounded-3xl { border-radius: 20px; padding: 24px !important; }
            
            .text-4xl { font-size: 28px; }
            .text-3xl { font-size: 24px; }
            .text-2xl { font-size: 20px; }
            .text-xl { font-size: 18px; }
            .text-lg { font-size: 16px; }
            
            .flex.flex-wrap.gap-4 { flex-direction: column; gap: 12px; }
            .flex.flex-wrap.gap-4 > * { width: 100%; }
            
            .px-8 { padding-left: 20px; padding-right: 20px; }
            .py-4 { padding-top: 12px; padding-bottom: 12px; }
            
            .mb-6 { margin-bottom: 20px; }
            .gap-6 { gap: 16px; }
        }
        
        @media (max-width: 480px) {
            .result-container { padding: 0 10px; }
            .bg-white.rounded-3xl { padding: 20px !important; }
            
            .text-4xl { font-size: 24px; }
            .text-3xl { font-size: 20px; }
            .text-2xl { font-size: 18px; }
            
            .score-circle { width: 130px; height: 130px; }
            .score-inner { width: 105px; height: 105px; }
            .score-inner .text-5xl { font-size: 32px; }
        }
    </style>
</head>
<body>

<div class="result-container">
    <!-- Header Card -->
    <div class="card-gradient rounded-3xl shadow-2xl p-8 mb-6 text-center">
        <div class="inline-block badge-success text-white px-6 py-2 rounded-full text-sm font-bold mb-4">
            <i class="fas fa-check-circle"></i> تم إكمال الاختبار
        </div>
        
        <h1 class="text-4xl font-bold text-gray-900 mb-2">مرحباً <?php echo htmlspecialchars($result['name']); ?>! 👋</h1>
        <p class="text-gray-600 text-lg">إليك تحليل شامل لبشرتك مع توصيات مخصصة</p>
    </div>

    <!-- Score & Skin Type -->
    <div class="grid md:grid-cols-2 gap-6 mb-6">
        <!-- Score Card -->
        <div class="card-gradient rounded-3xl shadow-2xl p-8 text-center">
            <h2 class="text-2xl font-bold text-gray-900 mb-6">نتيجتك</h2>
            <div class="flex justify-center mb-6">
                <div class="score-circle">
                    <div class="score-inner">
                        <div class="text-5xl font-bold" style="color: <?php echo $skinInfo['color']; ?>">
                            <?php echo $result['score']; ?>
                        </div>
                        <div class="text-gray-500 text-sm">من 100</div>
                    </div>
                </div>
            </div>
            <p class="text-gray-600">
                <?php 
                if ($result['score'] >= 80) echo '🎉 ممتاز! بشرتك في حالة رائعة';
                elseif ($result['score'] >= 60) echo '👍 جيد! مع بعض التحسينات ستكون بشرتك أفضل';
                elseif ($result['score'] >= 40) echo '💪 يمكنك تحسين روتينك للحصول على نتائج أفضل';
                else echo '🌱 لنبدأ معاً رحلة العناية ببشرتك';
                ?>
            </p>
        </div>

        <!-- Skin Type Card -->
        <div class="card-gradient rounded-3xl shadow-2xl p-8">
            <h2 class="text-2xl font-bold text-gray-900 mb-6">نوع بشرتك</h2>
            <div class="text-center mb-6">
                <div class="text-7xl mb-4"><?php echo $skinInfo['icon']; ?></div>
                <h3 class="text-3xl font-bold mb-2" style="color: <?php echo $skinInfo['color']; ?>">
                    بشرة <?php echo $skinInfo['name']; ?>
                </h3>
                <p class="text-gray-600"><?php echo $skinInfo['description']; ?></p>
            </div>
            
            <?php if (!empty($concerns)): ?>
            <div class="bg-gray-50 rounded-2xl p-4">
                <h4 class="font-bold text-gray-900 mb-3">المشاكل الرئيسية:</h4>
                <div class="flex flex-wrap gap-2">
                    <?php foreach ($concerns as $concern): ?>
                    <span class="bg-white px-4 py-2 rounded-full text-sm font-semibold text-gray-700 shadow-sm">
                        <?php echo $concernTranslations[$concern] ?? $concern; ?>
                    </span>
                    <?php endforeach; ?>
                </div>
            </div>
            <?php endif; ?>
        </div>
    </div>

    <!-- Analysis Text -->
    <?php if ($result['analysis_text']): ?>
    <div class="card-gradient rounded-3xl shadow-2xl p-8 mb-6">
        <h2 class="text-2xl font-bold text-gray-900 mb-4">
            <i class="fas fa-microscope text-purple-600"></i> التحليل التفصيلي
        </h2>
        <p class="text-gray-700 text-lg leading-relaxed whitespace-pre-line">
            <?php echo htmlspecialchars($result['analysis_text']); ?>
        </p>
    </div>
    <?php endif; ?>

    <!-- Recommended Products -->
    <?php if (!empty($recommendedProducts)): ?>
    <div class="card-gradient rounded-3xl shadow-2xl p-8 mb-6">
        <h2 class="text-2xl font-bold text-gray-900 mb-2">
            <i class="fas fa-star text-yellow-500"></i> المنتجات المناسبة لك
        </h2>
        <p class="text-gray-600 mb-6">اخترنا لك هذه المنتجات بناءً على نوع بشرتك واحتياجاتها</p>
        
        <div class="grid md:grid-cols-3 gap-6">
            <?php foreach (array_slice($recommendedProducts, 0, 6) as $product): ?>
            <div class="product-card">
                <div class="h-48 bg-gradient-to-br from-pink-300 to-purple-300 flex items-center justify-center">
                    <?php if ($product['image']): ?>
                    <img src="../<?php echo htmlspecialchars($product['image']); ?>" 
                         alt="<?php echo htmlspecialchars($product['name']); ?>"
                         class="w-full h-full object-cover">
                    <?php else: ?>
                    <i class="fas fa-box text-white text-5xl"></i>
                    <?php endif; ?>
                </div>
                
                <div class="p-5">
                    <h3 class="font-bold text-gray-900 mb-2 line-clamp-2">
                        <?php echo htmlspecialchars($product['name']); ?>
                    </h3>
                    
                    <?php if (isset($product['reason'])): ?>
                    <p class="text-sm text-purple-600 mb-3">
                        <i class="fas fa-check-circle"></i> <?php echo htmlspecialchars($product['reason']); ?>
                    </p>
                    <?php endif; ?>
                    
                    <div class="flex items-center justify-between mb-4">
                        <div>
                            <?php if ($product['discount_price']): ?>
                            <span class="text-gray-400 line-through text-sm"><?php echo number_format($product['price'], 0); ?> ج.م</span>
                            <span class="text-2xl font-bold text-purple-600 block"><?php echo number_format($product['discount_price'], 0); ?> ج.م</span>
                            <?php else: ?>
                            <span class="text-2xl font-bold text-purple-600"><?php echo number_format($product['price'], 0); ?> ج.م</span>
                            <?php endif; ?>
                        </div>
                    </div>
                    
                    <a href="product.php?id=<?php echo $product['id']; ?>" 
                       class="block w-full btn-gradient text-white text-center py-3 rounded-xl font-bold transition">
                        عرض المنتج
                    </a>
                </div>
            </div>
            <?php endforeach; ?>
        </div>
    </div>
    <?php endif; ?>

    <!-- Skin Care Tips -->
    <?php if (!empty($tips)): ?>
    <div class="card-gradient rounded-3xl shadow-2xl p-8 mb-6">
        <h2 class="text-2xl font-bold text-gray-900 mb-2">
            <i class="fas fa-lightbulb text-yellow-500"></i> نصائح للعناية ببشرتك
        </h2>
        <p class="text-gray-600 mb-6">اتبعي هذه النصائح للحصول على أفضل النتائج</p>
        
        <div class="grid md:grid-cols-2 gap-4">
            <?php foreach ($tips as $index => $tip): ?>
            <div class="flex items-start gap-3 bg-gray-50 p-4 rounded-xl">
                <div class="bg-purple-100 text-purple-600 w-8 h-8 rounded-full flex items-center justify-center font-bold flex-shrink-0">
                    <?php echo $index + 1; ?>
                </div>
                <p class="text-gray-700"><?php echo htmlspecialchars($tip); ?></p>
            </div>
            <?php endforeach; ?>
        </div>
    </div>
    <?php endif; ?>

    <!-- CTA Section -->
    <div class="btn-gradient rounded-3xl shadow-2xl p-8 text-center text-white mb-6">
        <h2 class="text-3xl font-bold mb-4">هل تحتاجين استشارة متخصصة؟</h2>
        <p class="text-lg mb-6 opacity-90">احجزي استشارة مع خبرائنا للحصول على خطة عناية مخصصة لبشرتك</p>
        
        <div class="flex flex-wrap justify-center gap-4">
            <a href="index.php#consultations" class="bg-white text-pink-600 px-8 py-4 rounded-xl font-bold text-lg hover:shadow-lg transition inline-flex items-center gap-2">
                <i class="fas fa-calendar-check"></i>
                احجزي استشارة مجانية
            </a>
            
            <a href="skin-quiz.php" class="bg-white bg-opacity-20 text-white px-8 py-4 rounded-xl font-bold text-lg hover:bg-opacity-30 transition inline-flex items-center gap-2 backdrop-blur-sm">
                <i class="fas fa-redo"></i>
                إعادة الاختبار
            </a>
        </div>
    </div>

    <!-- Share Section -->
    <div class="card-gradient rounded-3xl shadow-2xl p-8 text-center">
        <h3 class="text-xl font-bold text-gray-900 mb-4">شاركي النتيجة مع صديقاتك</h3>
        <div class="flex justify-center gap-4">
            <button onclick="shareWhatsApp()" class="bg-green-500 text-white px-6 py-3 rounded-xl font-bold hover:bg-green-600 transition">
                <i class="fab fa-whatsapp"></i> واتساب
            </button>
            <button onclick="shareFacebook()" class="bg-blue-600 text-white px-6 py-3 rounded-xl font-bold hover:bg-blue-700 transition">
                <i class="fab fa-facebook"></i> فيسبوك
            </button>
            <button onclick="copyLink()" class="bg-gray-600 text-white px-6 py-3 rounded-xl font-bold hover:bg-gray-700 transition">
                <i class="fas fa-link"></i> نسخ الرابط
            </button>
        </div>
    </div>
</div>

<script>
function shareWhatsApp() {
    const text = 'اكتشفت نوع بشرتي من خلال اختبار Roz Skin! جربيه الآن';
    const url = window.location.href;
    window.open(`https://wa.me/?text=${encodeURIComponent(text + ' ' + url)}`, '_blank');
}

function shareFacebook() {
    const url = window.location.href;
    window.open(`https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(url)}`, '_blank');
}

function copyLink() {
    navigator.clipboard.writeText(window.location.href).then(() => {
        alert('✅ تم نسخ الرابط!');
    });
}
</script>

</body>
</html>
