<?php
require_once '../includes/auth.php';
require_once '../includes/language_manager.php';

$auth = new Auth();
$auth->requireLogin();

// Get user data
require_once '../config/database.php';
$database = new Database();
$db = $database->getConnection();

$user_id = $_SESSION['user_id'];
$query = "SELECT * FROM users WHERE id = :id";
$stmt = $db->prepare($query);
$stmt->bindParam(':id', $user_id);
$stmt->execute();
$user = $stmt->fetch(PDO::FETCH_ASSOC);
?>
<!DOCTYPE html>
<html lang="zh-TW">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>個人資料 - SEO AI 自動化系統</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <link href="../assets/css/admin.css" rel="stylesheet">
</head>
<body>
<?php include '../includes/language_switcher.php'; ?>
    <div class="admin-layout">
        <!-- Sidebar -->
        <aside class="sidebar">
            <div class="sidebar-header">
                <div class="logo">
                    <i class="fas fa-robot"></i>
                    <span>SEO AI</span>
                </div>
            </div>
            
            <nav class="sidebar-nav">
                <ul>
                    <li>
                        <a href="dashboard.php">
                            <i class="fas fa-tachometer-alt"></i>
                            <span>儀表板</span>
                        </a>
                    </li>
                    <li>
                        <a href="brands.php">
                            <i class="fas fa-building"></i>
                            <span>品牌管理</span>
                        </a>
                    </li>
                    <li>
                        <a href="reports.php">
                            <i class="fas fa-chart-line"></i>
                            <span>SEO報告</span>
                        </a>
                    </li>
                    <li>
                        <a href="content.php">
                            <i class="fas fa-edit"></i>
                            <span>內容管理</span>
                        </a>
                    </li>
                    <li>
                        <a href="analytics.php">
                            <i class="fas fa-analytics"></i>
                            <span>成效分析</span>
                        </a>
                    </li>
                    <li>
                        <a href="settings.php">
                            <i class="fas fa-cog"></i>
                            <span>系統設定</span>
                        </a>
                    </li>
                    <li>
                        <a href="help.php">
                            <i class="fas fa-question-circle"></i>
                            <span>使用說明</span>
                        </a>
                    </li>
                </ul>
            </nav>
        </aside>
        
        <!-- Main Content -->
        <main class="main-content">
            <!-- Header -->
            <header class="header">
                <div class="header-left">
                    <h1>個人資料</h1>
                    <p>管理您的帳戶資訊和偏好設定</p>
                </div>
                <div class="header-right">
                    <div class="user-menu">
                        <div class="user-info">
                            <i class="fas fa-user-circle"></i>
                            <span><?php echo htmlspecialchars($_SESSION['username']); ?></span>
                        </div>
                        <div class="user-dropdown">
                            <a href="profile.php"><i class="fas fa-user"></i> 個人資料</a>
                            <a href="settings.php"><i class="fas fa-cog"></i> 設定</a>
                            <a href="logout.php"><i class="fas fa-sign-out-alt"></i> 登出</a>
                        </div>
                    </div>
                </div>
            </header>
            
            <!-- Profile Content -->
            <div class="profile-content">
                <div class="profile-sections">
                    <!-- Basic Info -->
                    <div class="profile-section">
                        <h2><i class="fas fa-user"></i> 基本資訊</h2>
                        <div class="form-container">
                            <form id="profileForm">
                                <div class="form-group">
                                    <label for="username">使用者名稱</label>
                                    <input type="text" id="username" name="username" class="form-control" 
                                           value="<?php echo htmlspecialchars($user['username']); ?>" readonly>
                                </div>
                                
                                <div class="form-group">
                                    <label for="email">電子郵件</label>
                                    <input type="email" id="email" name="email" class="form-control" 
                                           value="<?php echo htmlspecialchars($user['email'] ?: ''); ?>">
                                </div>
                                
                                <div class="form-group">
                                    <label for="role">角色權限</label>
                                    <input type="text" id="role" class="form-control" 
                                           value="<?php echo $user['role'] === 'admin' ? '管理員' : '一般用戶'; ?>" readonly>
                                </div>
                                
                                <div class="form-group">
                                    <label for="created_at">註冊時間</label>
                                    <input type="text" id="created_at" class="form-control" 
                                           value="<?php echo date('Y-m-d H:i:s', strtotime($user['created_at'])); ?>" readonly>
                                </div>
                                
                                <button type="submit" class="btn btn-primary">
                                    <i class="fas fa-save"></i>
                                    更新資料
                                </button>
                            </form>
                        </div>
                    </div>
                    
                    <!-- Change Password -->
                    <div class="profile-section">
                        <h2><i class="fas fa-lock"></i> 修改密碼</h2>
                        <div class="form-container">
                            <form id="passwordForm">
                                <div class="form-group">
                                    <label for="current_password">目前密碼</label>
                                    <input type="password" id="current_password" name="current_password" class="form-control" required>
                                </div>
                                
                                <div class="form-group">
                                    <label for="new_password">新密碼</label>
                                    <input type="password" id="new_password" name="new_password" class="form-control" required>
                                </div>
                                
                                <div class="form-group">
                                    <label for="confirm_password">確認新密碼</label>
                                    <input type="password" id="confirm_password" name="confirm_password" class="form-control" required>
                                </div>
                                
                                <button type="submit" class="btn btn-primary">
                                    <i class="fas fa-key"></i>
                                    修改密碼
                                </button>
                            </form>
                        </div>
                    </div>
                    
                    <!-- Account Stats -->
                    <div class="profile-section">
                        <h2><i class="fas fa-chart-bar"></i> 帳戶統計</h2>
                        <div class="stats-grid">
                            <div class="stat-card">
                                <div class="stat-icon">
                                    <i class="fas fa-building"></i>
                                </div>
                                <div class="stat-content">
                                    <h3><?php 
                                        $brand_count = $db->query("SELECT COUNT(*) FROM brands")->fetchColumn();
                                        echo $brand_count;
                                    ?></h3>
                                    <p>管理品牌</p>
                                </div>
                            </div>
                            
                            <div class="stat-card">
                                <div class="stat-icon">
                                    <i class="fas fa-chart-line"></i>
                                </div>
                                <div class="stat-content">
                                    <h3><?php 
                                        $report_count = $db->query("SELECT COUNT(*) FROM seo_reports")->fetchColumn();
                                        echo $report_count;
                                    ?></h3>
                                    <p>生成報告</p>
                                </div>
                            </div>
                            
                            <div class="stat-card">
                                <div class="stat-icon">
                                    <i class="fas fa-edit"></i>
                                </div>
                                <div class="stat-content">
                                    <h3><?php 
                                        $content_count = $db->query("SELECT COUNT(*) FROM content_plans")->fetchColumn();
                                        echo $content_count;
                                    ?></h3>
                                    <p>內容計畫</p>
                                </div>
                            </div>
                            
                            <div class="stat-card">
                                <div class="stat-icon">
                                    <i class="fas fa-key"></i>
                                </div>
                                <div class="stat-content">
                                    <h3><?php 
                                        $keyword_count = $db->query("SELECT COUNT(DISTINCT keyword) FROM seo_tracking")->fetchColumn();
                                        echo $keyword_count;
                                    ?></h3>
                                    <p>追蹤關鍵字</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </div>
    
    <style>
        .profile-content {
            padding: 30px;
        }
        
        .profile-sections {
            max-width: 1000px;
            margin: 0 auto;
        }
        
        .profile-section {
            background: white;
            border-radius: 15px;
            padding: 30px;
            margin-bottom: 30px;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
        }
        
        .profile-section h2 {
            font-size: 1.5rem;
            font-weight: 600;
            color: #333;
            margin-bottom: 25px;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
        }
    </style>
    
    <script src="../assets/js/admin.js"></script>
    <script>
        // Handle profile form submission
        document.getElementById('profileForm').addEventListener('submit', function(e) {
            e.preventDefault();
            
            const formData = new FormData(this);
            const data = Object.fromEntries(formData);
            
            console.log('Profile data:', data);
            updateProfile(data);
        });
        
        // Handle password form submission
        document.getElementById('passwordForm').addEventListener('submit', function(e) {
            e.preventDefault();
            
            const newPassword = document.getElementById('new_password').value;
            const confirmPassword = document.getElementById('confirm_password').value;
            
            if (newPassword !== confirmPassword) {
                alert('新密碼與確認密碼不一致！');
                return;
            }
            
            if (newPassword.length < 6) {
                alert('密碼長度至少需要6個字符！');
                return;
            }
            
            const formData = new FormData(this);
            const data = Object.fromEntries(formData);
            
            console.log('Password data:', data);
            changePassword(data);
        
        function updateProfile(data) {
            fetch('/api/profile.php', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                credentials: 'same-origin',
                body: JSON.stringify({
                    action: 'update_profile',
                    ...data
                })
            })
            .then(response => response.json())
            .then(result => {
                if (result.success) {
                    alert('個人資料更新成功！');
                } else {
                    alert('更新失敗: ' + result.message);
                }
            })
            .catch(error => {
                console.error('Error:', error);
                alert('網路錯誤，請稍後再試');
            });
        }
        
        function changePassword(data) {
            fetch('/api/profile.php', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                credentials: 'same-origin',
                body: JSON.stringify({
                    action: 'change_password',
                    ...data
                })
            })
            .then(response => response.json())
            .then(result => {
                if (result.success) {
                    alert('密碼修改成功！');
                    document.getElementById('passwordForm').reset();
                } else {
                    alert('修改失敗: ' + result.message);
                }
            })
            .catch(error => {
                console.error('Error:', error);
                alert('網路錯誤，請稍後再試');
            });
        }
        });
    </script>
</body>
</html>
