<?php
// admin.php - Final, Fully Enhanced Admin Dashboard
// NEW: Comprehensive bulk actions dropdown (Publish, Draft, Delete) for posts.
// NEW: Added dynamic display for AI word count based on the selected post layout.
// FIX: Minor UI enhancements for better usability.

// Add Content-Security-Policy Header for enhanced security
header("Content-Security-Policy: " .
    "default-src 'self'; " .
    "script-src 'self' 'unsafe-inline' https://cdn.tailwindcss.com https://cdn.jsdelivr.net https://static.cloudflareinsights.com; " .
    "style-src 'self' 'unsafe-inline' https://cdnjs.cloudflare.com https://fonts.googleapis.com; " .
    "font-src 'self' https://cdnjs.cloudflare.com https://fonts.gstatic.com; " .
    "img-src 'self' data: *; " . // Widened for URL uploads
    "connect-src 'self'; " .
    "frame-src 'self';");

require_once __DIR__ . '/config.php';

// --- ACTION HANDLER ---
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    if (isset($_POST['action'])) {
        if (!isLoggedIn()) {
            header('Content-Type: application/json');
            echo json_encode(['error' => 'Authentication required.']);
            exit;
        }
        header('Content-Type: application/json');

        switch ($_POST['action']) {
            case 'generate_ai_content':
            case 'generateaicontent':
                require_once 'api.php';
                $api = new BlogAPI($pdo, OPENAI_API_KEY);
                $raw_content = $_POST['raw_content'] ?? $_POST['rawcontent'] ?? '';
                $layout = $_POST['layout'] ?? 'news';
                $model = $_POST['model'] ?? 'gpt-4.1-nano'; // Default to nano
                $images = isset($_POST['images']) ? json_decode($_POST['images'], true) : [];

                if (empty($raw_content)) {
                    echo json_encode(['error' => 'Raw content cannot be empty.']);
                    exit;
                }
                
                // Pass all new parameters to the API
                $result = $api->generateAIContent($raw_content, $images, $layout, $model);
                
                if ($result && !isset($result['error'])) {
                    $featured_image_id = !empty($images) && isset($images[0]['id']) ? (int)$images[0]['id'] : null;
                    
                    $save_data = array_merge($result, [
                        'raw_content_input' => $raw_content,
                        'layout' => $layout,
                        'featured_image_id' => $featured_image_id,
                        'model_name' => $model // Save the model used
                    ]);
                    
                    $post_id = $api->savePost($save_data);
                    
                    $result['post_id'] = $post_id;
                    $result['postid'] = $post_id;
                    $result['model_name'] = $result['model_name'] ?? $model;
                    $result['modelname'] = $result['model_name'];

                    echo json_encode($result);
                } else {
                    echo json_encode(['error' => 'Failed to generate content from AI.', 'details' => $result['error'] ?? 'No details.']);
                }
                exit;

            case 'upload_image':
            case 'uploadimage':
                if (isset($_FILES['image'])) {
                    $file = $_FILES['image'];
                    $allowedTypes = ['image/jpeg', 'image/png', 'image/gif', 'image/webp'];
                    if (!in_array($file['type'], $allowedTypes) || $file['size'] > MAX_FILE_SIZE) {
                        echo json_encode(['error' => 'Invalid file type or size (Max 5MB).']);
                        exit;
                    }
                    $uploadDir = UPLOAD_DIR;
                    if (!is_dir($uploadDir)) mkdir($uploadDir, 0777, true);
                    $filename = uniqid() . '-' . basename($file['name']);
                    $filePath = $uploadDir . $filename;
                    if (move_uploaded_file($file['tmp_name'], $filePath)) {
                        $stmt = $pdo->prepare("INSERT INTO images (file_path) VALUES (?)");
                        $stmt->execute([$filePath]);
                        $lastId = $pdo->lastInsertId();
                        echo json_encode(['success' => true, 'path' => $filePath, 'id' => $lastId]);
                    } else {
                        echo json_encode(['error' => 'Failed to move uploaded file. Check directory permissions.']);
                    }
                } else {
                    echo json_encode(['error' => 'No image file provided.']);
                }
                exit;

            case 'upload_image_url':
            case 'uploadimageurl':
                $url = filter_var($_POST['image_url'] ?? $_POST['imageurl'] ?? '', FILTER_VALIDATE_URL);
                if (!$url) {
                    echo json_encode(['error' => 'Invalid or empty URL provided.']);
                    exit;
                }
                $imageData = @file_get_contents($url);
                if ($imageData === false) {
                    echo json_encode(['error' => 'Could not retrieve image from the URL.']);
                    exit;
                }
                $imageInfo = @getimagesizefromstring($imageData);
                if ($imageInfo === false) {
                    echo json_encode(['error' => 'URL does not point to a valid image.']);
                    exit;
                }
                $extension = image_type_to_extension($imageInfo[2]);
                if (!$extension || !in_array($extension, ['.jpg', '.jpeg', '.png', '.gif', '.webp'])) {
                    echo json_encode(['error' => 'Unsupported image type.']);
                    exit;
                }
                $uploadDir = UPLOAD_DIR;
                if (!is_dir($uploadDir)) mkdir($uploadDir, 0777, true);
                $filename = uniqid() . bin2hex(random_bytes(5)) . $extension;
                $filePath = $uploadDir . $filename;
                if (file_put_contents($filePath, $imageData)) {
                    $stmt = $pdo->prepare("INSERT INTO images (file_path) VALUES (?)");
                    $stmt->execute([$filePath]);
                    $lastId = $pdo->lastInsertId();
                    echo json_encode(['success' => true, 'path' => $filePath, 'id' => $lastId]);
                } else {
                    echo json_encode(['error' => 'Failed to save the image.']);
                }
                exit;

            case 'delete_images':
            case 'deleteimages':
                $image_ids = $_POST['image_ids'] ?? [];
                if (empty($image_ids) || !is_array($image_ids)) {
                    echo json_encode(['error' => 'No image IDs provided.']);
                    exit;
                }
                $ids_sanitized = array_map('intval', $image_ids);
                $placeholders = rtrim(str_repeat('?,', count($ids_sanitized)), ',');
                
                $stmt_select = $pdo->prepare("SELECT file_path FROM images WHERE id IN ($placeholders)");
                $stmt_select->execute($ids_sanitized);
                $images = $stmt_select->fetchAll(PDO::FETCH_ASSOC);
                
                foreach ($images as $image) {
                    if ($image['file_path'] && file_exists($image['file_path'])) {
                        @unlink($image['file_path']);
                    }
                }
                
                $stmt_delete = $pdo->prepare("DELETE FROM images WHERE id IN ($placeholders)");
                $stmt_delete->execute($ids_sanitized);
                
                echo json_encode(['success' => true, 'deleted_count' => count($images)]);
                exit;

            case 'bulk_update_status_posts':
                $post_ids = $_POST['post_ids'] ?? [];
                $status = $_POST['status'] ?? '';
                if (empty($post_ids) || !is_array($post_ids) || !in_array($status, ['published', 'draft'])) {
                    echo json_encode(['error' => 'Invalid data provided.']);
                    exit;
                }
                $ids_sanitized = array_map('intval', $post_ids);
                $placeholders = rtrim(str_repeat('?,', count($ids_sanitized)), ',');

                $stmt_update = $pdo->prepare("UPDATE posts SET status = ? WHERE id IN ($placeholders)");
                $stmt_update->execute(array_merge([$status], $ids_sanitized));
                
                echo json_encode(['success' => true, 'updated_count' => count($ids_sanitized)]);
                exit;
            
            case 'bulk_delete_posts':
                $post_ids = $_POST['post_ids'] ?? [];
                if (empty($post_ids) || !is_array($post_ids)) {
                    echo json_encode(['error' => 'No post IDs provided.']);
                    exit;
                }
                $ids_sanitized = array_map('intval', $post_ids);
                $placeholders = rtrim(str_repeat('?,', count($ids_sanitized)), ',');
                
                $stmt_delete = $pdo->prepare("DELETE FROM posts WHERE id IN ($placeholders)");
                $stmt_delete->execute($ids_sanitized);
                
                echo json_encode(['success' => true, 'deleted_count' => count($ids_sanitized)]);
                exit;
            
            case 'duplicate_post':
                if (!ob_get_level()) ob_start();

                header('Content-Type: application/json; charset=utf-8');

                try {
                    if (!isLoggedIn()) {
                        ob_clean();
                        echo json_encode(['error' => 'Authentication required.']);
                        exit;
                    }

                    $post_id = intval($_POST['post_id'] ?? 0);
                    if ($post_id <= 0) {
                        ob_clean();
                        echo json_encode(['error' => 'Invalid Post ID.']);
                        exit;
                    }

                    $stmt = $pdo->prepare("SELECT * FROM posts WHERE id = ?");
                    $stmt->execute([$post_id]);
                    $original_post = $stmt->fetch(PDO::FETCH_ASSOC);

                    if (!$original_post) {
                        ob_clean();
                        echo json_encode(['error' => 'Original post not found.']);
                        exit;
                    }

                    $new_title = ($original_post['title'] ?? '') . " (Copy)";
                    $new_slug = ($original_post['slug'] ?? 'post') . "-copy-" . time();

                    $insert_stmt = $pdo->prepare("
                        INSERT INTO posts (title, slug, raw_content_input, ai_generated_content_html, featured_image_id, status, meta_title, meta_description, meta_keywords, word_count, layout, model_name, created_at)
                        VALUES (?, ?, ?, ?, ?, 'draft', ?, ?, ?, ?, ?, ?, NOW())
                    ");

                    $executed = $insert_stmt->execute([
                        $new_title,
                        $new_slug,
                        $original_post['raw_content_input'] ?? '',
                        $original_post['ai_generated_content_html'] ?? '',
                        !empty($original_post['featured_image_id']) ? (int)$original_post['featured_image_id'] : null,
                        $original_post['meta_title'] ?? '',
                        $original_post['meta_description'] ?? '',
                        $original_post['meta_keywords'] ?? '',
                        intval($original_post['word_count'] ?? 0),
                        $original_post['layout'] ?? 'news',
                        $original_post['model_name'] ?? 'gpt-4.1-nano'
                    ]);

                    if (!$executed || $insert_stmt->rowCount() === 0) {
                        $err = $insert_stmt->errorInfo();
                        $pdoErr = isset($err[2]) ? $err[2] : 'Unknown PDO error during insert.';
                        error_log("Duplicate Post Insert Failed: " . $pdoErr);
                        ob_clean();
                        echo json_encode(['error' => 'Server error while duplicating post.', 'details' => $pdoErr]);
                        exit;
                    }

                    ob_clean();
                    echo json_encode(['success' => true, 'message' => 'Post duplicated successfully.']);
                    exit;
                } catch (Exception $e) {
                    error_log("Duplicate Post Exception: " . $e->getMessage());
                    ob_clean();
                    echo json_encode([
                        'error' => 'Server error while duplicating post.',
                        'details' => $e->getMessage()
                    ]);
                    exit;
                }
                break;

            case 'save_settings':
                $allowed_keys = ['blog_layout'];
                $success = true;
                foreach ($_POST as $key => $value) {
                    if (in_array($key, $allowed_keys)) {
                        $stmt = $pdo->prepare("INSERT INTO settings (setting_key, setting_value) VALUES (:key, :value) ON DUPLICATE KEY UPDATE setting_value = :value");
                        $stmt->execute(['key' => $key, 'value' => $value]);
                    }
                }
                echo json_encode(['success' => $success, 'message' => 'Settings saved successfully!']);
                exit;
        }
    }
    // Handle Login Form Submission
    if (isset($_POST['username']) && isset($_POST['password'])) {
        $username = trim($_POST['username']);
        $password = $_POST['password'];
        $error = "Invalid username or password."; // Default error

        try {
            $stmt = $pdo->prepare("SELECT id, username, password_hash FROM users WHERE username = ?");
            $stmt->execute([$username]);
            $user = $stmt->fetch();
            if ($user && password_verify($password, $user['password_hash'])) {
                $_SESSION['admin_id'] = $user['id'];
                $_SESSION['admin_username'] = $user['username'];
                header('Location: admin.php?login=success');
                exit;
            }
        } catch(Exception $e) {
            error_log("Admin Login Error: " . $e->getMessage());
        }
    }
}

// Handle Logout & Post Deletion from GET requests
if (isset($_GET['action'])) {
    if ($_GET['action'] === 'logout') {
        session_destroy();
        header('Location: admin.php?logout=success');
        exit;
    }
    if ($_GET['action'] === 'delete_post' && isLoggedIn()) {
        $post_id = intval($_GET['id']);
        $stmt = $pdo->prepare("DELETE FROM posts WHERE id = ?");
        $stmt->execute([$post_id]);
        header('Location: admin.php?deleted=success');
        exit;
    }
}

// If not logged in, display the styled login form
if (!isLoggedIn()) {
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Admin Login - <?= SITE_NAME ?></title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
</head>
<body class="bg-gradient-to-br from-blue-600 to-indigo-700 min-h-screen flex items-center justify-center p-4">
    <div class="bg-white/95 backdrop-blur-sm p-8 rounded-xl shadow-2xl w-full max-w-md border border-white/20">
        <div class="text-center mb-8">
            <div class="w-16 h-16 bg-blue-600 text-white rounded-full flex items-center justify-center mx-auto mb-4">
                <i class="fas fa-calculator text-2xl"></i>
            </div>
            <h1 class="text-3xl font-bold text-blue-700"><?= SITE_NAME ?></h1>
            <p class="text-gray-600">Admin Dashboard</p>
        </div>
        <?php if(isset($_GET['logout']) && $_GET['logout']==='success'): ?>
        <div class="bg-green-100 border-l-4 border-green-500 text-green-700 p-4 mb-4" role="alert">
            <p class="font-bold">Success</p>
            <p>You have been successfully logged out.</p>
        </div>
        <?php endif; ?>
        <?php if(isset($error) && $error): ?>
        <div class="bg-red-100 border-l-4 border-red-500 text-red-700 p-4 mb-4" role="alert">
            <p class="font-bold">Login Failed</p>
            <p><?= htmlspecialchars($error) ?></p>
        </div>
        <?php endif; ?>
        <form method="POST" action="admin.php" class="space-y-6">
            <div>
                <label for="username" class="block text-gray-700 text-sm font-bold mb-2"><i class="fas fa-user mr-2"></i>Username</label>
                <input type="text" id="username" name="username" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20 transition-all" required>
            </div>
            <div>
                <label for="password" class="block text-gray-700 text-sm font-bold mb-2"><i class="fas fa-lock mr-2"></i>Password</label>
                <input type="password" id="password" name="password" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20 transition-all" required>
            </div>
            <button type="submit" class="w-full bg-blue-600 text-white py-3 px-4 rounded-lg hover:bg-blue-700 transition-all transform hover:scale-105 font-semibold"><i class="fas fa-sign-in-alt mr-2"></i>Login to Dashboard</button>
        </form>
    </div>
</body>
</html>
<?php
    exit;
}

// --- ADMIN DASHBOARD (LOGGED IN) ---

// Fetch Dashboard Data
$settings_stmt = $pdo->query("SELECT setting_key, setting_value FROM settings");
$settings = $settings_stmt->fetchAll(PDO::FETCH_KEY_PAIR);

$stats = [
    'total_posts' => $pdo->query("SELECT COUNT(*) FROM posts")->fetchColumn(),
    'published_posts' => $pdo->query("SELECT COUNT(*) FROM posts WHERE status = 'published'")->fetchColumn(),
    'draft_posts' => $pdo->query("SELECT COUNT(*) FROM posts WHERE status = 'draft'")->fetchColumn(),
    'scheduled_posts' => $pdo->query("SELECT COUNT(*) FROM posts WHERE status = 'scheduled'")->fetchColumn(),
    'total_images' => $pdo->query("SELECT COUNT(*) FROM images")->fetchColumn(),
    'avg_word_count' => $pdo->query("SELECT AVG(word_count) FROM posts WHERE word_count > 0")->fetchColumn() ?: 0
];
$all_posts = $pdo->query("SELECT p.*, i.file_path as featured_image FROM posts p LEFT JOIN images i ON p.featured_image_id = i.id ORDER BY p.created_at DESC")->fetchAll();
$recent_posts = array_slice($all_posts, 0, 10);
$images = $pdo->query("SELECT * FROM images ORDER BY uploaded_at DESC")->fetchAll();

// Dynamically find available layouts from templates, with a fallback
$layouts = [];
$layout_files = glob('templates/post-layouts/post-layout-*.php');
foreach ($layout_files as $file) {
    $layout_name = str_replace(['post-layout-', '.php'], '', basename($file));
    $layouts[] = $layout_name;
}
if (empty($layouts)) {
    $layouts = ['news', 'guide', 'default']; // Fallback matching word count logic
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Admin Dashboard - <?= SITE_NAME ?></title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <style>
        .tab-button.active {
            border-bottom-width: 3px;
            border-color: #3b82f6;
            color: #3b82f6;
            background: linear-gradient(135deg, #eff6ff, #dbeafe);
        }
        .selected-image {
            border-color: #8b5cf6;
            box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.4);
        }
    </style>
</head>
<body class="bg-gray-100 min-h-screen">
    <header class="bg-white shadow-lg border-b sticky top-0 z-50">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between items-center py-4">
                <div class="flex items-center space-x-3">
                    <div class="w-10 h-10 bg-blue-600 text-white rounded-lg flex items-center justify-center font-black text-xl"><i class="fas fa-calculator"></i></div>
                    <div>
                        <h1 class="text-2xl font-bold text-blue-700"><?= SITE_NAME ?></h1>
                        <p class="text-sm text-gray-500">Enhanced Admin Dashboard</p>
                    </div>
                </div>
                <div class="flex items-center space-x-4">
                     <a href="index.php" target="_blank" class="bg-gray-100 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-200 font-semibold text-sm">
                        <i class="fas fa-external-link-alt mr-2"></i>View Site
                    </a>
                    <a href="?action=logout" class="bg-red-500 text-white px-4 py-2 rounded-lg hover:bg-red-600 font-semibold text-sm">
                        <i class="fas fa-sign-out-alt mr-2"></i>Logout
                    </a>
                </div>
            </div>
        </div>
    </header>

    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8" id="dashboard-container">
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
            <div onclick="showTabAndFilter('manage-posts', '')" class="stat-tile bg-gradient-to-br from-blue-500 to-blue-600 p-6 rounded-xl shadow-lg text-white transform hover:scale-105 transition-all cursor-pointer"><div class="flex items-center justify-between"><h3 class="font-semibold">Total Posts</h3><i class="fas fa-file-alt text-2xl opacity-50"></i></div><p class="text-3xl font-bold"><?= $stats['total_posts'] ?></p></div>
            <div onclick="showTabAndFilter('manage-posts', 'published')" class="stat-tile bg-gradient-to-br from-green-500 to-green-600 p-6 rounded-xl shadow-lg text-white transform hover:scale-105 transition-all cursor-pointer"><div class="flex items-center justify-between"><h3 class="font-semibold">Published</h3><i class="fas fa-globe text-2xl opacity-50"></i></div><p class="text-3xl font-bold"><?= $stats['published_posts'] ?></p></div>
            <div onclick="showTabAndFilter('manage-posts', 'draft')" class="stat-tile bg-gradient-to-br from-yellow-500 to-orange-500 p-6 rounded-xl shadow-lg text-white transform hover:scale-105 transition-all cursor-pointer"><div class="flex items-center justify-between"><h3 class="font-semibold">Drafts</h3><i class="fas fa-edit text-2xl opacity-50"></i></div><p class="text-3xl font-bold"><?= $stats['draft_posts'] ?></p></div>
            <div onclick="showTab('images', document.querySelector('.tab-button[onclick*=\'images\']'))" class="stat-tile bg-gradient-to-br from-purple-500 to-purple-600 p-6 rounded-xl shadow-lg text-white transform hover:scale-105 transition-all cursor-pointer"><div class="flex items-center justify-between"><h3 class="font-semibold">Images</h3><i class="fas fa-images text-2xl opacity-50"></i></div><p class="text-3xl font-bold"><?= $stats['total_images'] ?></p></div>
        </div>
        
        <div class="bg-white rounded-xl shadow-lg mb-8">
            <nav class="flex border-b border-gray-200 overflow-x-auto">
                <button onclick="showTab('dashboard', this)" class="tab-button active px-6 py-4 font-medium flex items-center"><i class="fas fa-tachometer-alt mr-2"></i>Dashboard</button>
                <button onclick="showTab('create-post', this)" class="tab-button px-6 py-4 font-medium flex items-center"><i class="fas fa-plus-circle mr-2"></i>Create Post</button>
                <button onclick="showTab('manage-posts', this)" class="tab-button px-6 py-4 font-medium flex items-center"><i class="fas fa-list-alt mr-2"></i>Manage Posts</button>
                <button onclick="showTab('images', this)" class="tab-button px-6 py-4 font-medium flex items-center"><i class="fas fa-photo-video mr-2"></i>Media Library</button>
                <button onclick="showTab('settings', this)" class="tab-button px-6 py-4 font-medium flex items-center"><i class="fas fa-cog mr-2"></i>Settings</button>
            </nav>

            <div id="dashboard-tab" class="tab-content p-6"><h2 class="text-2xl font-bold text-gray-800 mb-4">Recent Posts</h2><div class="space-y-3"><?php foreach($recent_posts as $post): ?><div class="bg-gray-50 p-3 rounded-lg flex items-center justify-between hover:bg-gray-100 transition-all"><div class="flex items-center space-x-3"><img src="<?= htmlspecialchars($post['featured_image'] ?: 'https://placehold.co/100x100/E2E8F0/4A5568?text=Thumb') ?>" class="w-12 h-12 object-cover rounded-md"><h3 class="font-semibold text-gray-800"><?= htmlspecialchars($post['title']) ?></h3></div><div class="flex items-center space-x-3"><span class="text-xs font-bold px-2 py-1 rounded-full <?= $post['status']==='published'?'bg-green-100 text-green-800':'bg-yellow-100 text-yellow-800' ?>"><?= ucfirst($post['status']) ?></span><a href="edit_blog.php?id=<?= $post['id'] ?>" class="bg-blue-500 text-white px-3 py-1 rounded text-sm hover:bg-blue-600">Edit</a></div></div><?php endforeach; ?></div></div>
            
            <div id="create-post-tab" class="tab-content hidden p-6">
                <div class="max-w-4xl mx-auto text-center"><h2 class="text-3xl font-bold text-gray-800 mb-2">AI-Powered Content Creation</h2><p class="text-gray-600 text-lg">Transform your ideas into visually stunning blog posts.</p></div>
                <form id="create-post-form" class="space-y-6 mt-8">
                     <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                         <div>
                            <label for="layout-select" class="block text-gray-700 text-sm font-bold mb-2"><i class="fas fa-layer-group mr-2"></i>1. Select Post Type & Word Count</label>
                            <select id="layout-select" class="w-full p-3 border-2 border-gray-300 rounded-xl focus:outline-none focus:border-blue-500">
                                <option value="news">News (500-600 Words)</option>
                                <option value="guide">Guide (1000-1200 Words)</option>
                                <option value="default">Article (1200-1500 Words)</option>
                            </select>
                            <p id="word-count-info" class="text-sm text-gray-500 mt-1 pl-1">AI will generate a draft of 500-600 words.</p>
                         </div>
                         <div>
                            <label for="ai-model-select" class="block text-gray-700 text-sm font-bold mb-2"><i class="fas fa-robot mr-2"></i>2. Select AI Model</label>
                            <select id="ai-model-select" class="w-full p-3 border-2 border-gray-300 rounded-xl focus:outline-none focus:border-blue-500">
                                <option value="gpt-4.1-nano" selected>GPT-4.1 Nano (Fast & Cost-Efficient)</option>
                                <option value="gpt-4.1-mini">GPT-4.1 Mini (Balanced)</option>
                                <option value="gpt-4o-mini">GPT-4o Mini (Advanced & Multimodal)</option>
                            </select>
                         </div>
                     </div>
                     <div>
                        <label class="block text-gray-700 text-sm font-bold mb-2"><i class="fas fa-images mr-2"></i>3. Add Images (Optional)</label>
                        <div class="bg-gray-50 border-2 border-dashed rounded-xl p-4 space-y-4">
                            <div id="image-previews-container" class="grid grid-cols-3 md:grid-cols-5 lg:grid-cols-8 gap-4 min-h-[6rem]"></div>
                            <div class="grid grid-cols-1 md:grid-cols-3 gap-4 items-center">
                                <button type="button" onclick="openLibraryModal()" class="w-full text-center bg-purple-500 text-white rounded-lg p-3 hover:bg-purple-600 font-semibold flex items-center justify-center col-span-1">
                                    <i class="fas fa-photo-video mr-2"></i> Select from Library
                                </button>
                               <div class="flex-grow w-full col-span-1">
                                    <div class="relative">
                                        <input type="url" id="image-url-input" placeholder="Add image from URL..." class="w-full border p-3 rounded-lg focus:outline-none focus:border-blue-500" style="padding-right: 175px;">
                                        <div class="absolute inset-y-0 right-14 flex items-center space-x-1.5 pr-2">
                                            <button type="button" onclick="copyContent('image-url-input')" class="flex items-center space-x-1.5 bg-blue-500 text-white rounded-full px-3 py-1.5 text-xs font-semibold shadow hover:bg-blue-600" title="Copy"><span>Copy</span></button>
                                            <button type="button" onclick="pasteContent('image-url-input')" class="flex items-center space-x-1.5 bg-green-500 text-white rounded-full px-3 py-1.5 text-xs font-semibold shadow hover:bg-green-600" title="Paste"><span>Paste</span></button>
                                            <button type="button" onclick="clearContent('image-url-input')" class="flex items-center space-x-1.5 bg-red-500 text-white rounded-full px-3 py-1.5 text-xs font-semibold shadow hover:bg-red-600" title="Clear"><span>Clear</span></button>
                                        </div>
                                        <button type="button" onclick="handleImageUrlAdd()" class="absolute inset-y-0 right-0 h-full bg-indigo-500 text-white px-3 rounded-r-lg hover:bg-indigo-600 text-sm font-semibold">Add</button>
                                    </div>
                               </div>
                                <div class="w-full col-span-1">
                                    <label for="image-upload-input" class="w-full text-center bg-white border-2 border-gray-300 rounded-lg p-2.5 cursor-pointer hover:bg-gray-100 flex items-center justify-center font-semibold">
                                       <i class="fas fa-upload mr-2"></i> Upload File
                                    </label>
                                    <input type="file" id="image-upload-input" class="hidden" onchange="handleImageUpload()">
                                </div>
                            </div>
                        </div>
                     </div>
                     <div><label class="block text-gray-700 text-sm font-bold mb-2"><i class="fas fa-clipboard mr-2"></i>4. Provide Raw Content</label><div class="relative"><textarea id="raw-content" oninput="updateWordCount()" class="w-full p-4 border-2 border-gray-300 rounded-xl h-48 focus:outline-none focus:border-blue-500 pr-32"></textarea><div class="absolute bottom-2 right-2 text-xs text-gray-500 bg-white px-2 py-1 rounded border"><span id="word-count">0</span> words | <span id="char-count">0</span> chars</div><div class="absolute top-2 right-2 flex items-center space-x-1"><button type="button" onclick="copyContent('raw-content')" class="flex items-center space-x-1 bg-gradient-to-r from-blue-400 to-blue-600 text-white rounded-full px-3 py-1 text-xs font-semibold hover:from-blue-500 hover:to-blue-700 transition-all transform hover:scale-105 shadow-md" title="Copy"><i class="fas fa-copy"></i><span>Copy</span></button><button type="button" onclick="pasteContent('raw-content')" class="flex items-center space-x-1 bg-gradient-to-r from-green-400 to-green-600 text-white rounded-full px-3 py-1 text-xs font-semibold hover:from-green-500 hover:to-green-700 transition-all transform hover:scale-105 shadow-md" title="Paste"><i class="fas fa-paste"></i><span>Paste</span></button><button type="button" onclick="clearContent('raw-content')" class="flex items-center space-x-1 bg-gradient-to-r from-red-400 to-red-600 text-white rounded-full px-3 py-1 text-xs font-semibold hover:from-red-500 hover:to-red-700 transition-all transform hover:scale-105 shadow-md" title="Clear"><i class="fas fa-trash"></i><span>Clear</span></button></div></div></div>
                     <div class="text-center"><button type="button" onclick="generateAIDraft()" class="bg-gradient-to-r from-blue-600 to-indigo-700 text-white px-10 py-4 rounded-xl font-bold text-lg hover:shadow-xl transform hover:scale-105 transition-all"><i class="fas fa-magic mr-3"></i>Generate AI Draft</button></div>
                     <div id="ai-result" class="hidden mt-6"></div>
                </form>
            </div>
             <div id="manage-posts-tab" class="tab-content hidden p-6"><div class="flex flex-wrap justify-between items-center gap-4 mb-6"><h2 class="text-2xl font-bold text-gray-800">All Posts</h2><div class="flex flex-wrap items-center gap-2"><button onclick="selectAllPosts()" class="bg-blue-500 text-white px-3 py-2 rounded-lg text-sm"><i class="fas fa-check-square mr-2"></i>Select All</button><button onclick="deselectAllPosts()" class="bg-gray-500 text-white px-3 py-2 rounded-lg text-sm"><i class="fas fa-square mr-2"></i>Deselect All</button><div class="relative inline-block text-left"><button type="button" onclick="toggleBulkActions()" class="inline-flex justify-center w-full rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500" id="bulk-actions-button">Bulk Actions (<span id="selected-posts-count">0</span>)<svg class="-mr-1 ml-2 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" /></svg></button><div id="bulk-actions-dropdown" class="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 hidden z-10"><div class="py-1" role="menu" aria-orientation="vertical" aria-labelledby="bulk-actions-button"><a href="#" onclick="bulkUpdateStatus('published')" class="text-gray-700 block px-4 py-2 text-sm hover:bg-gray-100" role="menuitem">Publish Selected</a><a href="#" onclick="bulkUpdateStatus('draft')" class="text-gray-700 block px-4 py-2 text-sm hover:bg-gray-100" role="menuitem">Move to Draft</a><a href="#" onclick="bulkDeletePosts()" class="text-red-700 block px-4 py-2 text-sm hover:bg-gray-100" role="menuitem">Delete Selected</a></div></div></div><div class="relative"><input type="text" id="post-search" placeholder="Search..." class="border rounded-lg p-2 pl-8 text-sm"><i class="fas fa-search absolute left-3 top-1/2 -translate-y-1/2 text-gray-400"></i></div><select id="status-filter" class="border rounded-lg p-2 text-sm"><option value="">All Status</option><option value="published">Published</option><option value="draft">Draft</option></select><select id="sort-filter" class="border rounded-lg p-2 text-sm"><option value="newest">Newest</option><option value="oldest">Oldest</option><option value="title_asc">Title A-Z</option><option value="title_desc">Title Z-A</option></select></div></div><div class="space-y-4" id="posts-grid"><?php foreach($all_posts as $post): ?><div class="post-item bg-white border border-gray-200 rounded-xl p-4 flex items-center justify-between hover:shadow-md transition-all" data-status="<?= $post['status'] ?>" data-title="<?= htmlspecialchars(strtolower($post['title'])) ?>" data-created_at="<?= strtotime($post['created_at']) ?>" data-post-id="<?= $post['id'] ?>"><div class="flex items-center space-x-4"><input type="checkbox" class="post-checkbox w-5 h-5" data-post-id="<?= $post['id'] ?>" onchange="updateSelectedPostsCount()"><img src="<?= htmlspecialchars($post['featured_image'] ?: 'https://placehold.co/100x100/E2E8F0/4A5568?text=Thumb') ?>" class="w-16 h-16 object-cover rounded-lg"><div><h3 class="font-bold text-gray-900"><?= htmlspecialchars($post['title']) ?></h3><div class="text-sm text-gray-500"><span><i class="fas fa-calendar mr-1"></i><?= date('M j, Y', strtotime($post['created_at'])) ?></span><span class="mx-2">|</span><span><i class="fas fa-font mr-1"></i><?= $post['word_count'] ?: '0' ?> words</span></div><span class="text-xs font-bold px-2 py-1 rounded-full <?= $post['status']==='published'?'bg-green-100 text-green-800':'bg-yellow-100 text-yellow-800' ?>"><?= ucfirst($post['status']) ?></span></div></div><div class="flex space-x-2"><button onclick="duplicatePost(<?= $post['id'] ?>)" class="bg-purple-500 text-white px-3 py-1 rounded text-sm">Duplicate</button><a href="view_post.php?slug=<?= $post['slug'] ?>" target="_blank" class="bg-green-500 text-white px-3 py-1 rounded text-sm">View</a><a href="edit_blog.php?id=<?= $post['id'] ?>" class="bg-blue-500 text-white px-3 py-1 rounded text-sm">Edit</a><button onclick="deletePost(<?= $post['id'] ?>)" class="bg-red-500 text-white px-3 py-1 rounded text-sm">Delete</button></div></div><?php endforeach; ?></div></div>
            <div id="images-tab" class="tab-content hidden p-6"><div class="flex justify-between items-center mb-6"><h2 class="text-2xl font-bold">Media Library</h2><button onclick="deleteSelected()" class="bg-red-500 text-white px-4 py-2 rounded-lg hover:bg-red-600"><i class="fas fa-trash mr-2"></i>Delete Selected</button></div><div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6"><div class="bg-gray-50 p-4 rounded-lg border-2 border-dashed"><form onsubmit="uploadImage(event); return false;"><h3 class="font-semibold mb-2">Upload File</h3><input type="file" name="image" required class="mb-2"><button type="submit" class="bg-blue-500 text-white px-4 py-2 rounded">Upload</button></form></div><div class="bg-gray-50 p-4 rounded-lg border-2 border-dashed"><form onsubmit="uploadImageFromURL(event); return false;"><h3 class="font-semibold mb-2">Import from URL</h3><div class="relative"><input type="url" id="image_url_input_library" name="image_url" placeholder="https://..." required class="w-full border p-2 rounded-lg" style="padding-right: 215px;"><div class="absolute inset-y-0 right-0 flex items-center pr-2 space-x-1.5"><button type="button" onclick="copyContent('image_url_input_library')" class="flex items-center space-x-1 bg-gradient-to-r from-blue-400 to-blue-600 text-white rounded-full px-3 py-1 text-xs font-semibold shadow" title="Copy"><i class="fas fa-copy"></i><span>Copy</span></button><button type="button" onclick="pasteContent('image_url_input_library')" class="flex items-center space-x-1 bg-gradient-to-r from-green-400 to-green-600 text-white rounded-full px-3 py-1 text-xs font-semibold shadow" title="Paste"><i class="fas fa-paste"></i><span>Paste</span></button><button type="button" onclick="clearContent('image_url_input_library')" class="flex items-center space-x-1 bg-gradient-to-r from-red-400 to-red-600 text-white rounded-full px-3 py-1 text-xs font-semibold shadow" title="Clear"><i class="fas fa-trash"></i><span>Clear</span></button></div></div><button type="submit" class="mt-2 bg-green-500 text-white px-4 py-2 rounded">Import</button></form></div></div><div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4" id="images-grid"><?php foreach($images as $image): ?><div class="image-item group relative border-2 border-transparent rounded-xl overflow-hidden cursor-pointer" data-image-id="<?= $image['id'] ?>" onclick="toggleImageSelection(this)"><img src="<?= htmlspecialchars($image['file_path']) ?>" class="w-full h-full object-cover aspect-square"><div class="absolute inset-0 bg-black/0 group-hover:bg-black/40 flex items-center justify-center transition-all"><input type="checkbox" class="image-checkbox absolute top-2 left-2 h-5 w-5"><button onclick="event.stopPropagation(); deleteImage(<?= $image['id'] ?>)" class="opacity-0 group-hover:opacity-100 bg-red-500 text-white p-2 rounded-full"><i class="fas fa-trash"></i></button></div></div><?php endforeach; ?></div></div>
            <div id="settings-tab" class="tab-content hidden p-6"><div class="max-w-4xl mx-auto"><h2 class="text-2xl font-bold text-gray-800 mb-6">Blog Settings</h2><form id="settings-form" onsubmit="saveSettings(event)" class="space-y-6"><div class="bg-gray-50 rounded-xl p-6"><h3 class="text-lg font-semibold mb-4"><i class="fas fa-paint-brush mr-2"></i>Appearance</h3><div><label for="blog_layout" class="block text-sm font-medium mb-2">Blog Layout</label><select id="blog_layout" name="blog_layout" class="w-full p-2 border rounded-lg"><option value="modern_grid" <?= ($settings['blog_layout'] ?? '')==='modern_grid'?'selected':'' ?>>Modern Grid</option><option value="classic_list" <?= ($settings['blog_layout'] ?? '')==='classic_list'?'selected':'' ?>>Classic List</option></select></div></div><button type="submit" class="bg-blue-600 text-white px-6 py-3 rounded-lg hover:bg-blue-700">Save Settings</button></form></div></div>
        </div>
        <div class="bg-white rounded-xl shadow-lg p-6 mt-8">
            <h2 class="text-2xl font-bold text-gray-800 mb-4">Content Analytics</h2>
            <div class="h-64"><canvas id="analyticsChart"></canvas></div>
        </div>
    </div>
    
    <div id="libraryModal" class="fixed inset-0 bg-black/50 hidden items-center justify-center z-[100] p-4" onclick="closeLibraryModal(event)">
        <div class="bg-white rounded-xl shadow-lg w-full max-w-4xl max-h-[90vh] flex flex-col">
            <div class="p-4 border-b flex justify-between items-center">
                <h3 class="text-xl font-bold text-gray-800">Select Images from Library</h3>
                <button onclick="closeLibraryModal()" class="text-2xl text-gray-500 hover:text-red-500">&times;</button>
            </div>
            <div id="modal-images-grid" class="p-4 grid grid-cols-4 md:grid-cols-6 lg:grid-cols-8 gap-4 overflow-y-auto">
                <?php foreach($images as $image): ?>
                <div class="image-item-modal group relative border-2 border-transparent rounded-lg overflow-hidden cursor-pointer aspect-square" data-image-id="<?= $image['id'] ?>" data-image-path="<?= htmlspecialchars($image['file_path']) ?>" onclick="toggleModalImageSelection(this)">
                    <img src="<?= htmlspecialchars($image['file_path']) ?>" class="w-full h-full object-cover">
                    <div class="absolute inset-0 bg-black/0 group-[.selected-image]:bg-blue-500/50 flex items-center justify-center transition-all">
                        <i class="fas fa-check-circle text-white text-3xl opacity-0 group-[.selected-image]:opacity-100"></i>
                    </div>
                </div>
                <?php endforeach; ?>
            </div>
            <div class="p-4 border-t mt-auto bg-gray-50 flex justify-end items-center space-x-4">
                <p class="text-sm text-gray-600"><span id="modal-selection-count">0</span> images selected</p>
                <button onclick="addSelectedImagesAndClose()" class="bg-blue-600 text-white px-6 py-2 rounded-lg font-semibold hover:bg-blue-700">Add Selected</button>
            </div>
        </div>
    </div>
    
<script>
    let selectedImages = new Set();
    let selectedPosts = new Set();
    
    const wordCountMap = {
        'news': '500-600 words',
        'guide': '1000-1200 words',
        'default': '1200-1500 words'
    };

    function showToast(message, type = 'info') {
        const toast = document.createElement('div');
        const styles = { info: 'bg-blue-500', success: 'bg-green-500', error: 'bg-red-500', warning: 'bg-yellow-500' };
        toast.className = `fixed top-5 right-5 text-white p-4 rounded-lg shadow-lg z-[110] ${styles[type] || styles.info}`;
        toast.textContent = message;
        document.body.appendChild(toast);
        setTimeout(() => toast.remove(), 3000);
    }
    
    async function generateAIDraft() {
        const rawContent = document.getElementById('raw-content').value.trim();
        const layout = document.getElementById('layout-select').value;
        const model = document.getElementById('ai-model-select').value;
        if (rawContent.length < 10) return showToast('Please enter more content.', 'error');
        
        const imagePreviews = document.querySelectorAll('#image-previews-container .image-preview-item');
        const imagesData = Array.from(imagePreviews).map(div => ({ id: div.dataset.imageId, path: div.dataset.imagePath }));
        
        const resultDiv = document.getElementById('ai-result');
        resultDiv.innerHTML = `<div class="p-4 bg-yellow-100 text-yellow-800 rounded-lg animate-pulse flex items-center justify-center"><i class="fas fa-spinner fa-spin mr-3"></i> Generating AI content with <strong>${model}</strong>...</div>`;
        resultDiv.classList.remove('hidden');

        const formData = new FormData();
        formData.append('action', 'generate_ai_content');
        formData.append('raw_content', rawContent);
        formData.append('layout', layout);
        formData.append('model', model);
        formData.append('images', JSON.stringify(imagesData));

        try {
            const response = await fetch('admin.php', { method: 'POST', body: formData });
            const result = await response.json();
            if (result.error) throw new Error(result.details || result.error);
            resultDiv.innerHTML = `<div class="p-4 bg-green-100 text-green-800 rounded-lg"><strong>Success!</strong> New draft created: "${result.title}". <a href="edit_blog.php?id=${result.post_id}" class="font-bold text-blue-600 hover:underline">Edit it now</a>.</div>`;
            document.getElementById('image-previews-container').innerHTML = '';
        } catch (error) {
            resultDiv.innerHTML = `<div class="p-4 bg-red-100 text-red-800 rounded-lg"><strong>Error:</strong> ${error.message}</div>`;
        }
    }
    
    async function handleImageUpload() {
        const input = document.getElementById('image-upload-input');
        if (!input.files || input.files.length === 0) return;
        
        const formData = new FormData();
        formData.append('action', 'upload_image');
        formData.append('image', input.files[0]);
        
        showToast('Uploading...', 'info');
        try {
            const response = await fetch('admin.php', { method: 'POST', body: formData });
            const result = await response.json();
            if (result.error) throw new Error(result.error);
            addPreviewImage(result.path, result.id);
            showToast('Image added!', 'success');
        } catch (error) { showToast(`Upload failed: ${error.message}`, 'error');
        } finally { input.value = ''; }
    }

    async function handleImageUrlAdd() {
        const urlInput = document.getElementById('image-url-input');
        const url = urlInput.value.trim();
        if (!url) return showToast('Please enter a URL.', 'warning');

        const formData = new FormData();
        formData.append('action', 'upload_image_url');
        formData.append('image_url', url);

        showToast('Importing from URL...', 'info');
        try {
            const response = await fetch('admin.php', { method: 'POST', body: formData });
            const result = await response.json();
            if (result.error) throw new Error(result.error);
            addPreviewImage(result.path, result.id);
            showToast('Image added!', 'success');
        } catch (error) { showToast(`Import failed: ${error.message}`, 'error');
        } finally { urlInput.value = ''; }
    }

    function addPreviewImage(path, id) {
        const container = document.getElementById('image-previews-container');
        const div = document.createElement('div');
        div.className = 'relative group image-preview-item';
        div.dataset.imageId = id;
        div.dataset.imagePath = path;
        div.innerHTML = `<img src="${path}" class="w-full h-24 object-cover rounded-lg shadow-md"><button type="button" onclick="this.parentElement.remove()" class="absolute -top-2 -right-2 bg-red-500 text-white w-6 h-6 rounded-full flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">&times;</button>`;
        container.appendChild(div);
    }
    
    function openLibraryModal() {
        document.getElementById('libraryModal').classList.remove('hidden');
        document.getElementById('libraryModal').classList.add('flex');
    }

    function closeLibraryModal(event) {
        if(event && event.target.id !== 'libraryModal' && !event.target.closest('button')) return;
        document.getElementById('libraryModal').classList.add('hidden');
        document.getElementById('libraryModal').classList.remove('flex');
    }

    function toggleModalImageSelection(element) {
        element.classList.toggle('selected-image');
        const count = document.querySelectorAll('#libraryModal .selected-image').length;
        document.getElementById('modal-selection-count').textContent = count;
    }

    function addSelectedImagesAndClose() {
        const selected = document.querySelectorAll('#libraryModal .selected-image');
        selected.forEach(element => {
            addPreviewImage(element.dataset.imagePath, element.dataset.imageId);
            element.classList.remove('selected-image');
        });
        document.getElementById('modal-selection-count').textContent = 0;
        closeLibraryModal();
    }
    
    async function uploadImage(event) {
        event.preventDefault();
        const form = event.target.closest('form');
        const formData = new FormData(form);
        formData.append('action', 'upload_image');
        try {
            const response = await fetch('admin.php', { method: 'POST', body: formData });
            const result = await response.json();
            if (result.error) throw new Error(result.error);
            showToast('Image uploaded!', 'success');
            setTimeout(() => location.reload(), 1000);
        } catch (error) {
            showToast(`Upload failed: ${error.message}`, 'error');
        }
    }
    
    async function uploadImageFromURL(event) {
        event.preventDefault();
        const form = event.target.closest('form');
        const formData = new FormData(form);
        formData.append('action', 'upload_image_url');
        try {
            const response = await fetch('admin.php', { method: 'POST', body: formData });
            const result = await response.json();
            if (result.error) throw new Error(result.error);
            showToast('Image imported!', 'success');
            setTimeout(() => location.reload(), 1000);
        } catch (error) {
            showToast(`Import failed: ${error.message}`, 'error');
        }
    }
    
    async function copyContent(id) {
        const element = document.getElementById(id);
        if(!element || !element.value) return showToast('Nothing to copy.', 'warning');
        try { 
            await navigator.clipboard.writeText(element.value); 
            showToast('Copied!', 'success'); 
        }
        catch (err) { showToast('Failed to copy.', 'error'); }
    }
    
    async function pasteContent(id) {
        try { 
            const text = await navigator.clipboard.readText(); 
            const element = document.getElementById(id);
            element.value = text;
            if (id === 'raw-content') {
                const event = new Event('input', { bubbles: true, cancelable: true });
                element.dispatchEvent(event);
            }
            showToast('Pasted!', 'success'); 
        }
        catch (err) { showToast('Clipboard is empty or permission denied.', 'error'); }
    }
    
    function clearContent(id) {
        const element = document.getElementById(id);
        element.value = '';
        if (id === 'raw-content') {
            const event = new Event('input', { bubbles: true, cancelable: true });
            element.dispatchEvent(event);
        }
        showToast('Cleared!', 'info');
    }

    function updateWordCount() {
        const content = document.getElementById('raw-content').value;
        const words = content.trim() ? content.trim().split(/\s+/).length : 0;
        document.getElementById('word-count').textContent = words;
        document.getElementById('char-count').textContent = content.length;
    }

    function showTab(tabName, element) {
        document.querySelectorAll('.tab-content').forEach(tab => tab.classList.add('hidden'));
        document.querySelectorAll('.tab-button').forEach(btn => btn.classList.remove('active'));
        document.getElementById(tabName + '-tab').classList.remove('hidden');
        element.classList.add('active');
        localStorage.setItem('activeAdminTab', tabName);
    }
    
    function showTabAndFilter(tabName, filterValue) {
        const tabButton = document.querySelector(`.tab-button[onclick*="'${tabName}'"]`);
        if (tabButton) showTab(tabName, tabButton);
        const statusFilterEl = document.getElementById('status-filter');
        if (statusFilterEl) { statusFilterEl.value = filterValue; updatePostView(); }
    }
    
    function updatePostView() {
        const searchTerm = document.getElementById('post-search').value.toLowerCase();
        const statusValue = document.getElementById('status-filter').value;
        const sortValue = document.getElementById('sort-filter').value;
        const grid = document.getElementById('posts-grid');
        const posts = Array.from(grid.querySelectorAll('.post-item'));
        posts.sort((a, b) => {
            const titleA = a.dataset.title; const titleB = b.dataset.title;
            const dateA = parseInt(a.dataset.created_at); const dateB = parseInt(b.dataset.created_at);
            switch(sortValue) {
                case 'oldest': return dateA - dateB;
                case 'title_asc': return titleA.localeCompare(titleB);
                case 'title_desc': return titleB.localeCompare(titleA);
                default: return dateB - dateA;
            }
        });
        posts.forEach(post => {
            const matchesSearch = post.dataset.title.includes(searchTerm);
            const matchesStatus = statusValue === '' || post.dataset.status === statusValue;
            post.style.display = (matchesSearch && matchesStatus) ? 'flex' : 'none';
            grid.appendChild(post);
        });
    }

    function selectAllPosts() { document.querySelectorAll('.post-checkbox').forEach(cb => { cb.checked = true; }); updateSelectedPostsCount(); }
    function deselectAllPosts() { document.querySelectorAll('.post-checkbox').forEach(cb => { cb.checked = false; }); updateSelectedPostsCount(); }
    function updateSelectedPostsCount() { document.getElementById('selected-posts-count').textContent = document.querySelectorAll('.post-checkbox:checked').length; }
    
    async function bulkUpdateStatus(status) {
        const checked = document.querySelectorAll('.post-checkbox:checked');
        if (checked.length === 0) return showToast('No posts selected', 'warning');
        if (!confirm(`Set ${checked.length} posts to ${status}?`)) return;
        const postIds = Array.from(checked).map(cb => cb.dataset.postId);
        const formData = new FormData();
        formData.append('action', 'bulk_update_status_posts');
        formData.append('status', status);
        postIds.forEach(id => formData.append('post_ids[]', id));
        try {
            const response = await fetch('admin.php', { method: 'POST', body: formData });
            const result = await response.json();
            if (result.error) throw new Error(result.error);
            showToast(`${result.updated_count} posts updated!`, 'success');
            setTimeout(() => location.reload(), 1000);
        } catch (error) { showToast(`Error: ${error.message}`, 'error'); }
    }

    async function bulkDeletePosts() {
        const checked = document.querySelectorAll('.post-checkbox:checked');
        if (checked.length === 0) return showToast('No posts selected', 'warning');
        if (!confirm(`Delete ${checked.length} posts? This is permanent.`)) return;
        const postIds = Array.from(checked).map(cb => cb.dataset.postId);
        const formData = new FormData();
        formData.append('action', 'bulk_delete_posts');
        postIds.forEach(id => formData.append('post_ids[]', id));
        try {
            const response = await fetch('admin.php', { method: 'POST', body: formData });
            const result = await response.json();
            if (result.error) throw new Error(result.error);
            showToast(`${result.deleted_count} posts deleted!`, 'success');
            setTimeout(() => location.reload(), 1000);
        } catch (error) { showToast(`Error: ${error.message}`, 'error'); }
    }

    async function duplicatePost(postId) {
        if (!confirm('Are you sure you want to duplicate this post? A new draft will be created.')) return;
        const formData = new FormData();
        formData.append('action', 'duplicate_post');
        formData.append('post_id', postId);
        try {
            const response = await fetch('admin.php', { method: 'POST', body: formData });
            const text = await response.text();
            try {
                const result = JSON.parse(text);
                if (result.error) throw new Error(result.details || result.error);
                showToast(result.message, 'success');
                setTimeout(() => location.reload(), 1000);
            } catch (e) {
                console.error('Duplicate POST response (raw):', text);
                showToast('Server returned invalid response. Check console (F12) for details.', 'error');
            }
        } catch (error) {
            showToast(`Error: ${error.message}`, 'error');
        }
    }

    function toggleImageSelection(element) { element.classList.toggle('selected-image'); const checkbox = element.querySelector('.image-checkbox'); checkbox.checked = !checkbox.checked; }
    
    async function deleteSelected() {
        const selected = document.querySelectorAll('.image-item.selected-image');
        if (selected.length === 0) return showToast('No images selected', 'warning');
        if (!confirm(`Delete ${selected.length} images? This is permanent.`)) return;
        
        const imageIds = Array.from(selected).map(el => el.dataset.imageId);
        const formData = new FormData();
        formData.append('action', 'delete_images');
        imageIds.forEach(id => formData.append('image_ids[]', id));
        
        try {
            const response = await fetch('admin.php', { method: 'POST', body: formData });
            const result = await response.json();
            if (result.error) throw new Error(result.error);
            showToast(`${result.deleted_count} images deleted!`, 'success');
            setTimeout(() => location.reload(), 1000);
        } catch (error) { showToast(`Error: ${error.message}`, 'error'); }
    }
    
    function deletePost(postId) { if(confirm('Delete this post permanently?')) window.location.href = `admin.php?action=delete_post&id=${postId}`; }
    
    async function saveSettings(event) {
        event.preventDefault();
        const formData = new FormData(event.target);
        formData.append('action', 'save_settings');
        try {
            const response = await fetch('admin.php', { method: 'POST', body: formData });
            const result = await response.json();
            if (result.error) throw new Error(result.error);
            showToast('Settings saved!', 'success');
        } catch (error) { showToast(`Error: ${error.message}`, 'error'); }
    }
    
    function initializeAnalyticsChart() {
        if (!document.getElementById('analyticsChart')) return;
        const ctx = document.getElementById('analyticsChart').getContext('2d');
        new Chart(ctx, { type: 'line', data: { labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'], datasets: [{ label: 'Posts Created', data: [12, 19, 3, 5, 2, 3], borderColor: '#3b82f6', backgroundColor: 'rgba(59, 130, 246, 0.1)', tension: 0.4 }] }, options: { responsive: true, maintainAspectRatio: false } });
    }

    document.addEventListener('DOMContentLoaded', () => {
        const savedTab = localStorage.getItem('activeAdminTab') || 'dashboard';
        const tabButton = document.querySelector(`.tab-button[onclick*="${savedTab}"]`);
        if (tabButton) showTab(savedTab, tabButton);
        document.getElementById('post-search')?.addEventListener('input', updatePostView);
        document.getElementById('status-filter')?.addEventListener('change', updatePostView);
        document.getElementById('sort-filter')?.addEventListener('change', updatePostView);
        document.getElementById('raw-content')?.addEventListener('input', updateWordCount);

        const layoutSelect = document.getElementById('layout-select');
        const wordCountInfo = document.getElementById('word-count-info');
        if (layoutSelect && wordCountInfo) {
            layoutSelect.addEventListener('change', function() {
                const selectedLayout = this.value;
                const wordCountText = wordCountMap[selectedLayout] || wordCountMap['default'];
                wordCountInfo.textContent = `AI will generate a draft of ${wordCountText}.`;
            });
            layoutSelect.dispatchEvent(new Event('change')); // Set initial text
        }

        updateWordCount();
        initializeAnalyticsChart();
        updatePostView();
    });

    function toggleBulkActions() {
        const dropdown = document.getElementById('bulk-actions-dropdown');
        dropdown.classList.toggle('hidden');
    }
</script>
</body>
</html>