<?php
/**
 * Store Setup Page - First-time setup for new store owners
 */

session_start();
require_once '../config.php';
require_once '../app/classes/StoreManager.php';
require_once '../app/classes/StorePricingManager.php';
require_once '../app/classes/ContactConfig.php';

// Check if user is logged in
if (!isset($_SESSION['user_id'])) {
    header("Location: ../login.php");
    exit();
}

$userId = $_SESSION['user_id'];
$isNewStore = isset($_SESSION['new_store']) ? $_SESSION['new_store'] : false;

// Load store
$storeManager = new StoreManager($conn);
$store = $storeManager->getStoreByOwnerId($userId);

if (!$store) {
    header("Location: ../user_index.php");
    exit();
}

// Include reusable navigation
require_once 'includes/store_nav.php';

// If setup is complete, redirect to dashboard
if (!$isNewStore && isset($_GET['complete'])) {
    unset($_SESSION['new_store']);
    header("Location: store_dashboard.php");
    exit();
}

$pricingManager = new StorePricingManager($conn);
$storePricing = $pricingManager->getStorePricing($store['id']);

// Get admin WhatsApp contact for activation
$contactConfig = new ContactConfig($conn);
$adminWhatsApp = $contactConfig->getWhatsAppContact();
$adminWhatsAppLink = $contactConfig->getWhatsAppLink();

// Base URL for store
$baseUrl = (isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] === 'on' ? "https" : "http") . "://" . $_SERVER['HTTP_HOST'];
$storeUrl = $baseUrl . "/store.php?slug=" . urlencode($store['store_slug']);
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <title>Welcome! Setup Your Store - <?php echo htmlspecialchars($store['store_name']); ?></title>
    
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
        body { font-family: 'Poppins', sans-serif; background: linear-gradient(180deg, #0f172a 0%, #1e293b 100%); min-height: 100vh; }
        .gradient-bg { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
        .step-active { background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%); }
        .step-complete { background: linear-gradient(135deg, #10b981 0%, #059669 100%); }
    </style>
</head>

<body>
    <?php renderStoreNav($store, 'dashboard'); ?>
    <div class="min-h-screen py-12 px-4">
        <div class="max-w-4xl mx-auto">
            <!-- Welcome Header -->
            <div class="text-center mb-12">
                <div class="w-20 h-20 gradient-bg rounded-full flex items-center justify-center mx-auto mb-6 animate-bounce">
                    <i class="fas fa-store text-white text-3xl"></i>
                </div>
                <h1 class="text-4xl font-bold text-white mb-4">
                    🎉 Welcome to Your Store!
                </h1>
                <p class="text-xl text-gray-300">
                    Let's set up <span class="text-blue-400 font-bold"><?php echo htmlspecialchars($store['store_name']); ?></span>
                </p>
            </div>

            <!-- Progress Steps -->
            <div class="flex justify-center mb-12">
                <div class="flex items-center gap-4">
                    <div class="step-complete w-12 h-12 rounded-full flex items-center justify-center text-white font-bold">
                        <i class="fas fa-check"></i>
                    </div>
                    <div class="w-16 h-1 step-complete"></div>
                    <div class="step-active w-12 h-12 rounded-full flex items-center justify-center text-white font-bold">
                        2
                    </div>
                    <div class="w-16 h-1 bg-gray-700"></div>
                    <div class="bg-gray-700 w-12 h-12 rounded-full flex items-center justify-center text-white font-bold">
                        3
                    </div>
                </div>
            </div>

            <!-- Account Activation Notice -->
            <div class="bg-amber-900/50 border-2 border-amber-600 text-amber-100 rounded-lg p-6 mb-8 shadow-lg">
                <div class="flex items-start gap-4">
                    <i class="fas fa-exclamation-triangle text-3xl text-amber-400"></i>
                    <div class="flex-1">
                        <h3 class="text-xl font-bold text-amber-300 mb-2">
                            <i class="fas fa-lock mr-2"></i>Account Activation Required
                        </h3>
                        <p class="text-amber-100 mb-4">
                            Your account has been created successfully! However, you need to contact the administrator to activate your account before you can start using the system.
                        </p>
                        <div class="bg-amber-800/30 rounded-lg p-4 border border-amber-700/50">
                            <p class="text-amber-200 font-semibold mb-3">
                                <i class="fas fa-info-circle mr-2"></i>To activate your account:
                            </p>
                            <ol class="list-decimal list-inside space-y-2 text-amber-100 mb-4">
                                <li>Contact the administrator via WhatsApp</li>
                                <li>Provide your username: <span class="font-bold text-amber-300"><?php echo htmlspecialchars($store['store_name']); ?></span></li>
                                <li>Wait for account activation confirmation</li>
                                <li>Once activated, you can start using your store</li>
                            </ol>
                            <div class="flex items-center justify-center gap-3 mt-4">
                                <a href="<?php echo htmlspecialchars($adminWhatsAppLink); ?>" 
                                   target="_blank"
                                   class="bg-green-600 hover:bg-green-700 text-white px-6 py-3 rounded-lg font-semibold transition-all transform hover:scale-105 shadow-lg flex items-center gap-2">
                                    <i class="fab fa-whatsapp text-2xl"></i>
                                    <span>Chat Admin on WhatsApp</span>
                                </a>
                            </div>
                            <p class="text-center text-amber-300 text-sm mt-3">
                                <i class="fas fa-phone mr-1"></i>Admin WhatsApp: <strong><?php echo htmlspecialchars($adminWhatsApp); ?></strong>
                            </p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Store Created Success -->
            <div class="bg-green-900 border border-green-700 text-green-100 rounded-lg p-6 mb-8">
                <div class="flex items-start gap-4">
                    <i class="fas fa-check-circle text-3xl"></i>
                    <div class="flex-1">
                        <h3 class="font-bold text-lg mb-2">✓ Your Store is Created!</h3>
                        <p class="mb-3">Your store has been successfully set up with:</p>
                        <ul class="space-y-2 text-sm">
                            <li><i class="fas fa-check mr-2"></i>Unique store URL</li>
                            <li><i class="fas fa-check mr-2"></i>Default pricing for all networks</li>
                            <li><i class="fas fa-check mr-2"></i>Store dashboard access</li>
                        </ul>
                    </div>
                </div>
            </div>

            <!-- Main Setup Card -->
            <div class="bg-gray-800 rounded-lg p-8 border border-gray-700 mb-8">
                <h2 class="text-2xl font-bold text-white mb-6">
                    <i class="fas fa-sliders-h mr-2 text-blue-400"></i>
                    Quick Setup Guide
                </h2>

                <!-- Your Store URL -->
                <div class="mb-8">
                    <label class="block text-sm font-medium text-gray-400 mb-3">
                        <i class="fas fa-link mr-2"></i>Your Store URL
                    </label>
                    <div class="bg-gray-900 p-4 rounded-lg flex items-center gap-3">
                        <input type="text" readonly value="<?php echo $storeUrl; ?>" 
                               id="storeUrl"
                               class="flex-1 bg-transparent text-white text-sm">
                        <button onclick="copyUrl()" 
                                class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700">
                            <i class="fas fa-copy mr-2"></i>Copy
                        </button>
                        <a href="<?php echo $storeUrl; ?>" target="_blank"
                           class="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700">
                            <i class="fas fa-external-link-alt mr-2"></i>Visit
                        </a>
                    </div>
                </div>

                <!-- What You Can Do -->
                <div class="grid md:grid-cols-2 gap-6 mb-8">
                    <div class="bg-gray-900 p-6 rounded-lg">
                        <div class="w-12 h-12 bg-blue-600 rounded-lg flex items-center justify-center mb-4">
                            <i class="fas fa-tag text-white text-xl"></i>
                        </div>
                        <h3 class="font-bold text-white mb-2">Customize Pricing</h3>
                        <p class="text-gray-400 text-sm mb-4">
                            Set your own prices for MTN, Telecel, and AirtelTigo packages.
                        </p>
                        <a href="store_pricing.php" 
                           class="text-blue-400 hover:text-blue-300 text-sm font-medium">
                            Go to Pricing <i class="fas fa-arrow-right ml-1"></i>
                        </a>
                    </div>

                    <div class="bg-gray-900 p-6 rounded-lg">
                        <div class="w-12 h-12 bg-purple-600 rounded-lg flex items-center justify-center mb-4">
                            <i class="fas fa-users text-white text-xl"></i>
                        </div>
                        <h3 class="font-bold text-white mb-2">Invite Agents</h3>
                        <p class="text-gray-400 text-sm mb-4">
                            Build your team by inviting agents to sell under your store.
                        </p>
                        <a href="store_dashboard.php#invite" 
                           class="text-purple-400 hover:text-purple-300 text-sm font-medium">
                            Invite Now <i class="fas fa-arrow-right ml-1"></i>
                        </a>
                    </div>

                    <div class="bg-gray-900 p-6 rounded-lg">
                        <div class="w-12 h-12 bg-green-600 rounded-lg flex items-center justify-center mb-4">
                            <i class="fas fa-share-alt text-white text-xl"></i>
                        </div>
                        <h3 class="font-bold text-white mb-2">Share Your Store</h3>
                        <p class="text-gray-400 text-sm mb-4">
                            Share your store link on WhatsApp, Facebook, or anywhere.
                        </p>
                        <button onclick="shareStore()" 
                                class="text-green-400 hover:text-green-300 text-sm font-medium">
                            Share Link <i class="fas fa-arrow-right ml-1"></i>
                        </button>
                    </div>

                    <div class="bg-gray-900 p-6 rounded-lg">
                        <div class="w-12 h-12 bg-yellow-600 rounded-lg flex items-center justify-center mb-4">
                            <i class="fas fa-edit text-white text-xl"></i>
                        </div>
                        <h3 class="font-bold text-white mb-2">Edit Store Info</h3>
                        <p class="text-gray-400 text-sm mb-4">
                            Update name, description, logo, and contact information.
                        </p>
                        <a href="store_dashboard.php#edit" 
                           class="text-yellow-400 hover:text-yellow-300 text-sm font-medium">
                            Edit Details <i class="fas fa-arrow-right ml-1"></i>
                        </a>
                    </div>
                </div>

                <!-- Current Pricing Preview -->
                <div class="mb-8">
                    <h3 class="font-bold text-white mb-4">
                        <i class="fas fa-chart-line mr-2 text-blue-400"></i>
                        Your Current Pricing
                    </h3>
                    <div class="bg-gray-900 p-4 rounded-lg">
                        <p class="text-gray-400 text-sm mb-3">
                            Default pricing has been copied to your store. You can customize these anytime!
                        </p>
                        <div class="text-center">
                            <div>
                                <div class="text-yellow-400 font-bold text-2xl mb-2">MTN</div>
                                <div class="text-gray-400 text-sm"><?php echo count(array_filter($storePricing, function($p) { return $p['network_type'] == 'mtn'; })); ?> pricing rules configured</div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Action Buttons -->
                <div class="flex gap-4">
                    <a href="store_pricing.php" 
                       class="flex-1 bg-blue-600 text-white py-4 rounded-lg hover:bg-blue-700 font-semibold text-center">
                        <i class="fas fa-tag mr-2"></i>
                        Customize Pricing Now
                    </a>
                    <a href="?complete=1" 
                       class="flex-1 bg-green-600 text-white py-4 rounded-lg hover:bg-green-700 font-semibold text-center">
                        <i class="fas fa-check mr-2"></i>
                        Go to Dashboard
                    </a>
                </div>
            </div>

            <!-- Help Card -->
            <div class="bg-blue-900 border border-blue-700 text-blue-100 rounded-lg p-6">
                <h3 class="font-bold text-lg mb-3">
                    <i class="fas fa-question-circle mr-2"></i>
                    Need Help?
                </h3>
                <p class="text-sm mb-4">
                    Check out our guide or contact support on WhatsApp if you have any questions.
                </p>
                <div class="flex gap-3">
                    <a href="https://whatsapp.com/channel/0029VannaKXCcW4lQHtiMn3F" 
                       target="_blank"
                       class="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 text-sm">
                        <i class="fab fa-whatsapp mr-2"></i>WhatsApp Support
                    </a>
                </div>
            </div>
        </div>
    </div>

    <script>
        function copyUrl() {
            const input = document.getElementById('storeUrl');
            input.select();
            document.execCommand('copy');
            alert('Store URL copied to clipboard!');
        }
        
        function shareStore() {
            const url = document.getElementById('storeUrl').value;
            const text = encodeURIComponent('Check out my data bundle store: ' + url);
            window.open('https://wa.me/?text=' + text, '_blank');
        }
    </script>
</body>
</html>

