<?php
session_start();

// 配置
define('DATA_FILE', 'nav_data.json');
define('USERS_FILE', 'users.json');
define('APP_NAME', '个人导航');
define('VERSION', '1.0.0');

// 默认用户配置
 $default_users = [
    'admin' => '$2y$10$92IXUNpkjO0rOQ5byMi.Ye4oKoEa3Ro9llC/.og/at2.uheWG/igi' // password: password
];

// 初始化用户文件
if (!file_exists(USERS_FILE)) {
    file_put_contents(USERS_FILE, json_encode($default_users));
}

// 初始化导航数据文件
if (!file_exists(DATA_FILE)) {
    $default_data = [
        'quick_links' => [
            ['name' => 'Google', 'url' => 'https://www.google.com'],
            ['name' => 'GitHub', 'url' => 'https://github.com'],
            ['name' => 'YouTube', 'url' => 'https://www.youtube.com'],
            ['name' => '哔哩哔哩', 'url' => 'https://www.bilibili.com'],
            ['name' => '知乎', 'url' => 'https://www.zhihu.com'],
            ['name' => '微博', 'url' => 'https://www.weibo.com']
        ],
        'categories' => [
            [
                'title' => '工作相关',
                'links' => [
                    ['name' => 'Gmail', 'url' => 'https://mail.google.com'],
                    ['name' => 'Google Calendar', 'url' => 'https://calendar.google.com'],
                    ['name' => 'Google Docs', 'url' => 'https://docs.google.com'],
                    ['name' => 'Trello', 'url' => 'https://trello.com'],
                    ['name' => 'Slack', 'url' => 'https://slack.com']
                ]
            ],
            [
                'title' => '开发工具',
                'links' => [
                    ['name' => 'Stack Overflow', 'url' => 'https://stackoverflow.com'],
                    ['name' => 'MDN Web Docs', 'url' => 'https://developer.mozilla.org'],
                    ['name' => 'CodePen', 'url' => 'https://codepen.io'],
                    ['name' => 'CodeSandbox', 'url' => 'https://codesandbox.io'],
                    ['name' => 'NPM', 'url' => 'https://npmjs.com']
                ]
            ],
            [
                'title' => '设计资源',
                'links' => [
                    ['name' => 'Dribbble', 'url' => 'https://dribbble.com'],
                    ['name' => 'Behance', 'url' => 'https://behance.net'],
                    ['name' => 'Unsplash', 'url' => 'https://unsplash.com'],
                    ['name' => 'Figma', 'url' => 'https://figma.com'],
                    ['name' => 'Coolors', 'url' => 'https://coolors.co']
                ]
            ],
            [
                'title' => '学习平台',
                'links' => [
                    ['name' => 'Coursera', 'url' => 'https://coursera.org'],
                    ['name' => 'edX', 'url' => 'https://edx.org'],
                    ['name' => 'Udemy', 'url' => 'https://udemy.com'],
                    ['name' => 'Khan Academy', 'url' => 'https://khanacademy.org'],
                    ['name' => 'freeCodeCamp', 'url' => 'https://freecodecamp.org']
                ]
            ],
            [
                'title' => '新闻资讯',
                'links' => [
                    ['name' => 'Hacker News', 'url' => 'https://news.ycombinator.com'],
                    ['name' => 'Reddit', 'url' => 'https://www.reddit.com'],
                    ['name' => 'Product Hunt', 'url' => 'https://producthunt.com'],
                    ['name' => 'TechCrunch', 'url' => 'https://techcrunch.com'],
                    ['name' => '36氪', 'url' => 'https://36kr.com']
                ]
            ],
            [
                'title' => '娱乐休闲',
                'links' => [
                    ['name' => 'Netflix', 'url' => 'https://www.netflix.com'],
                    ['name' => 'Spotify', 'url' => 'https://www.spotify.com'],
                    ['name' => 'SoundCloud', 'url' => 'https://soundcloud.com'],
                    ['name' => 'Twitch', 'url' => 'https://www.twitch.tv'],
                    ['name' => '豆瓣', 'url' => 'https://www.douban.com']
                ]
            ]
        ]
    ];
    file_put_contents(DATA_FILE, json_encode($default_data, JSON_PRETTY_PRINT | JSON_UNESCAPED_UNICODE));
}

// 读取导航数据
function getNavData() {
    if (!file_exists(DATA_FILE)) {
        return ['quick_links' => [], 'categories' => []];
    }
    $json = file_get_contents(DATA_FILE);
    $data = json_decode($json, true);
    if (!$data) {
        return ['quick_links' => [], 'categories' => []];
    }
    if (!isset($data['quick_links'])) $data['quick_links'] = [];
    if (!isset($data['categories'])) $data['categories'] = [];
    return $data;
}

// 保存导航数据
function saveNavData($data) {
    return file_put_contents(DATA_FILE, json_encode($data, JSON_PRETTY_PRINT | JSON_UNESCAPED_UNICODE));
}

// 验证用户
function verifyUser($username, $password) {
    if (!file_exists(USERS_FILE)) {
        return false;
    }
    $users = json_decode(file_get_contents(USERS_FILE), true);
    if (!isset($users[$username])) {
        return false;
    }
    return password_verify($password, $users[$username]);
}

// 检查是否已登录
function isLoggedIn() {
    return isset($_SESSION['logged_in']) && $_SESSION['logged_in'] === true;
}

// 处理登录
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['action']) && $_POST['action'] === 'login') {
    $username = $_POST['username'] ?? '';
    $password = $_POST['password'] ?? '';
    
    if (verifyUser($username, $password)) {
        $_SESSION['logged_in'] = true;
        $_SESSION['username'] = $username;
        header('Location: ?');
        exit;
    } else {
        $error = '用户名或密码错误';
    }
}

// 处理登出
if (isset($_GET['logout'])) {
    session_destroy();
    header('Location: ?');
    exit;
}

// 处理API请求
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['api'])) {
    if (!isLoggedIn()) {
        http_response_code(401);
        echo json_encode(['error' => '未授权']);
        exit;
    }
    
    header('Content-Type: application/json');
    $data = getNavData();
    
    switch ($_POST['api']) {
        case 'add_category':
            $title = trim($_POST['title'] ?? '');
            if ($title) {
                if (!isset($data['categories'])) {
                    $data['categories'] = [];
                }
                $data['categories'][] = ['title' => $title, 'links' => []];
                if (saveNavData($data)) {
                    echo json_encode(['success' => true, 'message' => '分类添加成功']);
                } else {
                    echo json_encode(['error' => '保存失败']);
                }
            } else {
                echo json_encode(['error' => '分类名称不能为空']);
            }
            break;
            
        case 'edit_category':
            $index = intval($_POST['index'] ?? -1);
            $title = trim($_POST['title'] ?? '');
            if ($index >= 0 && $title) {
                if (isset($data['categories'][$index])) {
                    $data['categories'][$index]['title'] = $title;
                    if (saveNavData($data)) {
                        echo json_encode(['success' => true, 'message' => '分类修改成功']);
                    } else {
                        echo json_encode(['error' => '保存失败']);
                    }
                } else {
                    echo json_encode(['error' => '分类不存在']);
                }
            } else {
                echo json_encode(['error' => '参数错误']);
            }
            break;
            
        case 'delete_category':
            $index = intval($_POST['index'] ?? -1);
            if ($index >= 0 && isset($data['categories'][$index])) {
                array_splice($data['categories'], $index, 1);
                if (saveNavData($data)) {
                    echo json_encode(['success' => true, 'message' => '分类删除成功']);
                } else {
                    echo json_encode(['error' => '保存失败']);
                }
            } else {
                echo json_encode(['error' => '分类不存在']);
            }
            break;
            
        case 'add_link':
            $type = $_POST['type'] ?? 'category';
            $index = intval($_POST['index'] ?? -1);
            $name = trim($_POST['name'] ?? '');
            $url = trim($_POST['url'] ?? '');
            
            if ($name && $url) {
                if ($type === 'quick') {
                    if (!isset($data['quick_links'])) {
                        $data['quick_links'] = [];
                    }
                    $data['quick_links'][] = ['name' => $name, 'url' => $url];
                    if (saveNavData($data)) {
                        echo json_encode(['success' => true, 'message' => '快速链接添加成功']);
                    } else {
                        echo json_encode(['error' => '保存失败']);
                    }
                } elseif ($type === 'category' && $index >= 0 && isset($data['categories'][$index])) {
                    if (!isset($data['categories'][$index]['links'])) {
                        $data['categories'][$index]['links'] = [];
                    }
                    $data['categories'][$index]['links'][] = ['name' => $name, 'url' => $url];
                    if (saveNavData($data)) {
                        echo json_encode(['success' => true, 'message' => '链接添加成功']);
                    } else {
                        echo json_encode(['error' => '保存失败']);
                    }
                } else {
                    echo json_encode(['error' => '分类不存在']);
                }
            } else {
                echo json_encode(['error' => '链接名称和地址不能为空']);
            }
            break;
            
        case 'edit_link':
            $type = $_POST['type'] ?? 'category';
            $categoryIndex = intval($_POST['category_index'] ?? -1);
            $linkIndex = intval($_POST['link_index'] ?? -1);
            $name = trim($_POST['name'] ?? '');
            $url = trim($_POST['url'] ?? '');
            
            if ($name && $url) {
                if ($type === 'quick' && $linkIndex >= 0 && isset($data['quick_links'][$linkIndex])) {
                    $data['quick_links'][$linkIndex] = ['name' => $name, 'url' => $url];
                    if (saveNavData($data)) {
                        echo json_encode(['success' => true, 'message' => '快速链接修改成功']);
                    } else {
                        echo json_encode(['error' => '保存失败']);
                    }
                } elseif ($type === 'category' && $categoryIndex >= 0 && $linkIndex >= 0 && isset($data['categories'][$categoryIndex])) {
                    $data['categories'][$categoryIndex]['links'][$linkIndex] = ['name' => $name, 'url' => $url];
                    if (saveNavData($data)) {
                        echo json_encode(['success' => true, 'message' => '链接修改成功']);
                    } else {
                        echo json_encode(['error' => '保存失败']);
                    }
                } else {
                    echo json_encode(['error' => '链接不存在']);
                }
            } else {
                echo json_encode(['error' => '链接名称和地址不能为空']);
            }
            break;
            
        case 'delete_link':
            $type = $_POST['type'] ?? 'category';
            $categoryIndex = intval($_POST['category_index'] ?? -1);
            $linkIndex = intval($_POST['link_index'] ?? -1);
            
            if ($type === 'quick' && $linkIndex >= 0 && isset($data['quick_links'][$linkIndex])) {
                array_splice($data['quick_links'], $linkIndex, 1);
                if (saveNavData($data)) {
                    echo json_encode(['success' => true, 'message' => '快速链接删除成功']);
                } else {
                    echo json_encode(['error' => '保存失败']);
                }
            } elseif ($type === 'category' && $categoryIndex >= 0 && $linkIndex >= 0 && isset($data['categories'][$categoryIndex])) {
                array_splice($data['categories'][$categoryIndex]['links'], $linkIndex, 1);
                if (saveNavData($data)) {
                    echo json_encode(['success' => true, 'message' => '链接删除成功']);
                } else {
                    echo json_encode(['error' => '保存失败']);
                }
            } else {
                echo json_encode(['error' => '链接不存在']);
            }
            break;
            
        case 'get_data':
            echo json_encode($data);
            break;
            
        default:
            echo json_encode(['error' => '未知操作']);
    }
    exit;
}

// 如果未登录，显示登录页面
if (!isLoggedIn()) {
?>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录 - <?php echo APP_NAME; ?></title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .login-container {
            background: white;
            padding: 40px;
            border-radius: 12px;
            box-shadow: 0 20px 60px rgba(0,0,0,0.3);
            width: 100%;
            max-width: 400px;
        }

        .login-header {
            text-align: center;
            margin-bottom: 30px;
        }

        .login-header h1 {
            font-size: 28px;
            color: #333;
            margin-bottom: 10px;
        }

        .login-header p {
            color: #666;
            font-size: 14px;
        }

        .form-group {
            margin-bottom: 20px;
        }

        .form-label {
            display: block;
            margin-bottom: 8px;
            color: #555;
            font-size: 14px;
        }

        .form-input {
            width: 100%;
            padding: 12px;
            border: 1px solid #ddd;
            border-radius: 6px;
            font-size: 14px;
            transition: border-color 0.3s;
        }

        .form-input:focus {
            outline: none;
            border-color: #667eea;
        }

        .login-btn {
            width: 100%;
            padding: 12px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border: none;
            border-radius: 6px;
            font-size: 16px;
            cursor: pointer;
            transition: transform 0.2s;
        }

        .login-btn:hover {
            transform: translateY(-2px);
        }

        .error {
            background: #fee;
            color: #c33;
            padding: 10px;
            border-radius: 6px;
            margin-bottom: 20px;
            font-size: 14px;
        }

        .default-info {
            margin-top: 20px;
            padding: 15px;
            background: #f8f9fa;
            border-radius: 6px;
            font-size: 13px;
            color: #666;
        }
    </style>
</head>
<body>
    <div class="login-container">
        <div class="login-header">
            <h1><?php echo APP_NAME; ?></h1>
            <p>请登录以管理您的导航</p>
        </div>
        
        <?php if (isset($error)): ?>
        <div class="error"><?php echo $error; ?></div>
        <?php endif; ?>
        
        <form method="post">
            <input type="hidden" name="action" value="login">
            <div class="form-group">
                <label class="form-label">用户名</label>
                <input type="text" name="username" class="form-input" required>
            </div>
            <div class="form-group">
                <label class="form-label">密码</label>
                <input type="password" name="password" class="form-input" required>
            </div>
            <button type="submit" class="login-btn">登录</button>
        </form>
        
        <div class="default-info">
            <strong>默认账号：</strong><br>
            用户名：admin<br>
            密码：password
        </div>
    </div>
</body>
</html>
<?php
exit;
}

// 已登录，显示导航页面
 $navData = getNavData();
?>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?php echo APP_NAME; ?></title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        :root {
            --bg-primary: #ffffff;
            --bg-secondary: #f8f9fa;
            --text-primary: #2c3e50;
            --text-secondary: #6c757d;
            --text-muted: #adb5bd;
            --border-color: #e9ecef;
            --accent-color: #3498db;
            --hover-bg: #f1f3f5;
            --shadow-sm: 0 2px 4px rgba(0,0,0,0.08);
            --shadow-md: 0 4px 12px rgba(0,0,0,0.1);
            --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        [data-theme="dark"] {
            --bg-primary: #1a1a1a;
            --bg-secondary: #2d2d2d;
            --text-primary: #e9ecef;
            --text-secondary: #adb5bd;
            --text-muted: #6c757d;
            --border-color: #404040;
            --accent-color: #5dade2;
            --hover-bg: #343434;
            --shadow-sm: 0 2px 4px rgba(0,0,0,0.3);
            --shadow-md: 0 4px 12px rgba(0,0,0,0.4);
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
            background: var(--bg-primary);
            color: var(--text-primary);
            line-height: 1.6;
            transition: var(--transition);
            min-height: 100vh;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }

        /* Header */
        header {
            padding: 40px 0;
            text-align: center;
            border-bottom: 1px solid var(--border-color);
            margin-bottom: 40px;
        }

        .header-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
            max-width: 800px;
            margin: 0 auto;
        }

        h1 {
            font-size: 2rem;
            font-weight: 300;
            letter-spacing: 2px;
            color: var(--text-primary);
        }

        .header-actions {
            display: flex;
            gap: 10px;
            align-items: center;
        }

        .theme-toggle, .logout-btn, .manage-btn {
            background: none;
            border: 1px solid var(--border-color);
            color: var(--text-primary);
            padding: 8px 12px;
            border-radius: 6px;
            cursor: pointer;
            transition: var(--transition);
            font-size: 14px;
            text-decoration: none;
        }

        .theme-toggle:hover, .logout-btn:hover, .manage-btn:hover {
            background: var(--hover-bg);
            transform: translateY(-1px);
        }

        .manage-btn {
            background: var(--accent-color);
            color: white;
            border-color: var(--accent-color);
        }

        .manage-btn:hover {
            opacity: 0.9;
        }

        /* Search */
        .search-section {
            margin-bottom: 50px;
        }

        .search-container {
            max-width: 600px;
            margin: 0 auto;
            position: relative;
        }

        .search-input {
            width: 100%;
            padding: 16px 20px;
            font-size: 16px;
            border: 1px solid var(--border-color);
            border-radius: 8px;
            background: var(--bg-secondary);
            color: var(--text-primary);
            transition: var(--transition);
        }

        .search-input:focus {
            outline: none;
            border-color: var(--accent-color);
            box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
        }

        .search-hint {
            position: absolute;
            right: 20px;
            top: 50%;
            transform: translateY(-50%);
            color: var(--text-muted);
            font-size: 14px;
            pointer-events: none;
        }

        /* Quick Links */
        .quick-links {
            background: var(--bg-secondary);
            border-radius: 12px;
            padding: 30px;
            margin-bottom: 40px;
            border: 1px solid var(--border-color);
        }

        .quick-links-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }

        .quick-links-title {
            font-size: 20px;
            font-weight: 500;
            color: var(--text-primary);
        }

        .add-quick-link {
            background: var(--accent-color);
            color: white;
            border: none;
            padding: 6px 12px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 12px;
            transition: var(--transition);
        }

        .add-quick-link:hover {
            opacity: 0.9;
        }

        .quick-links-grid {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            justify-content: center;
        }

        .quick-link {
            color: var(--text-secondary);
            text-decoration: none;
            padding: 8px 16px;
            border: 1px solid var(--border-color);
            border-radius: 20px;
            transition: var(--transition);
            font-size: 14px;
            position: relative;
        }

        .quick-link:hover {
            background: var(--accent-color);
            color: white;
            border-color: var(--accent-color);
            transform: scale(1.05);
        }

        .quick-link .delete-btn {
            display: none;
            position: absolute;
            top: -8px;
            right: -8px;
            background: #e74c3c;
            color: white;
            border: none;
            border-radius: 50%;
            width: 20px;
            height: 20px;
            font-size: 12px;
            cursor: pointer;
        }

        .quick-link:hover .delete-btn {
            display: block;
        }

        /* Navigation Grid */
        .nav-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 30px;
            margin-bottom: 50px;
        }

        .nav-category {
            background: var(--bg-secondary);
            border-radius: 12px;
            padding: 24px;
            transition: var(--transition);
            border: 1px solid var(--border-color);
            position: relative;
        }

        .nav-category:hover {
            transform: translateY(-2px);
            box-shadow: var(--shadow-md);
        }

        .category-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 16px;
        }

        .category-title {
            font-size: 18px;
            font-weight: 500;
            color: var(--text-primary);
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .category-title::before {
            content: '';
            width: 3px;
            height: 18px;
            background: var(--accent-color);
            border-radius: 2px;
        }

        .category-actions {
            display: flex;
            gap: 5px;
        }

        .category-btn {
            background: none;
            border: none;
            color: var(--text-muted);
            cursor: pointer;
            font-size: 14px;
            padding: 4px;
            transition: var(--transition);
        }

        .category-btn:hover {
            color: var(--accent-color);
        }

        .link-list {
            list-style: none;
        }

        .link-item {
            margin-bottom: 12px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .link-item:last-child {
            margin-bottom: 0;
        }

        .link {
            color: var(--text-secondary);
            text-decoration: none;
            font-size: 15px;
            display: inline-block;
            transition: var(--transition);
            position: relative;
            padding: 4px 0;
            flex: 1;
        }

        .link::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 0;
            height: 1px;
            background: var(--accent-color);
            transition: width 0.3s ease;
        }

        .link:hover {
            color: var(--accent-color);
            transform: translateX(4px);
        }

        .link:hover::after {
            width: 100%;
        }

        .link-actions {
            display: none;
            gap: 5px;
        }

        .link-item:hover .link-actions {
            display: flex;
        }

        .link-btn {
            background: none;
            border: none;
            color: var(--text-muted);
            cursor: pointer;
            font-size: 12px;
            padding: 2px;
            transition: var(--transition);
        }

        .link-btn:hover {
            color: var(--accent-color);
        }

        .link-btn.delete {
            color: #e74c3c;
        }

        .link-btn.delete:hover {
            color: #c0392b;
        }

        /* Footer */
        footer {
            text-align: center;
            padding: 30px 0;
            color: var(--text-muted);
            font-size: 14px;
            border-top: 1px solid var(--border-color);
        }

        /* Modal */
        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            z-index: 1000;
            animation: fadeIn 0.3s ease;
        }

        .modal.active {
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .modal-content {
            background: var(--bg-primary);
            border-radius: 12px;
            padding: 30px;
            max-width: 500px;
            width: 90%;
            max-height: 80vh;
            overflow-y: auto;
            animation: slideUp 0.3s ease;
        }

        .modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }

        .modal-title {
            font-size: 20px;
            font-weight: 500;
        }

        .close-btn {
            background: none;
            border: none;
            font-size: 24px;
            cursor: pointer;
            color: var(--text-secondary);
            transition: var(--transition);
        }

        .close-btn:hover {
            color: var(--text-primary);
            transform: rotate(90deg);
        }

        .form-group {
            margin-bottom: 20px;
        }

        .form-label {
            display: block;
            margin-bottom: 8px;
            font-size: 14px;
            color: var(--text-secondary);
        }

        .form-input {
            width: 100%;
            padding: 10px;
            border: 1px solid var(--border-color);
            border-radius: 6px;
            background: var(--bg-secondary);
            color: var(--text-primary);
            font-size: 14px;
        }

        .form-input:focus {
            outline: none;
            border-color: var(--accent-color);
        }

        .btn-primary {
            background: var(--accent-color);
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 6px;
            cursor: pointer;
            transition: var(--transition);
            font-size: 14px;
        }

        .btn-primary:hover {
            opacity: 0.9;
            transform: translateY(-1px);
        }

        /* Notification */
        .notification {
            position: fixed;
            top: 20px;
            right: 20px;
            padding: 12px 20px;
            border-radius: 6px;
            color: white;
            z-index: 2000;
            animation: slideInRight 0.3s ease;
            display: none;
        }

        .notification.success {
            background: #27ae60;
        }

        .notification.error {
            background: #e74c3c;
        }

        /* Animations */
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        @keyframes slideUp {
            from {
                transform: translateY(20px);
                opacity: 0;
            }
            to {
                transform: translateY(0);
                opacity: 1;
            }
        }

        @keyframes slideInRight {
            from {
                transform: translateX(100%);
                opacity: 0;
            }
            to {
                transform: translateX(0);
                opacity: 1;
            }
        }

        /* Responsive */
        @media (max-width: 768px) {
            h1 {
                font-size: 1.5rem;
            }

            .header-content {
                flex-direction: column;
                gap: 20px;
            }

            .nav-grid {
                grid-template-columns: 1fr;
                gap: 20px;
            }

            .quick-links-grid {
                gap: 12px;
            }

            .quick-link {
                font-size: 13px;
                padding: 6px 12px;
            }
        }
    </style>
</head>
<body>
    <header>
        <div class="container">
            <div class="header-content">
                <h1><?php echo APP_NAME; ?></h1>
                <div class="header-actions">
                    <button class="theme-toggle" onclick="toggleTheme()">🌙 深色</button>
                    <a href="?logout" class="logout-btn">退出</a>
                    <button class="manage-btn" onclick="toggleManageMode()">管理</button>
                </div>
            </div>
        </div>
    </header>

    <main class="container">
        <!-- Search Section -->
        <section class="search-section">
            <div class="search-container">
                <input 
                    type="text" 
                    class="search-input" 
                    id="searchInput"
                    placeholder="搜索网站..."
                    onkeyup="searchLinks(event)"
                >
                <span class="search-hint">Ctrl+K</span>
            </div>
        </section>

        <!-- Quick Links -->
        <section class="quick-links">
            <div class="quick-links-header">
                <h2 class="quick-links-title">快速访问</h2>
                <button class="add-quick-link" onclick="addQuickLink()" style="display:none;">+ 添加</button>
            </div>
            <div class="quick-links-grid" id="quickLinks">
                <?php foreach ($navData['quick_links'] as $index => $link): ?>
                <a href="<?php echo htmlspecialchars($link['url']); ?>" class="quick-link" target="_blank">
                    <?php echo htmlspecialchars($link['name']); ?>
                    <button class="delete-btn" onclick="deleteQuickLink(event, <?php echo $index; ?>)" style="display:none;">×</button>
                </a>
                <?php endforeach; ?>
            </div>
        </section>

        <!-- Navigation Grid -->
        <div class="nav-grid" id="navGrid">
            <?php foreach ($navData['categories'] as $categoryIndex => $category): ?>
            <div class="nav-category">
                <div class="category-header">
                    <h3 class="category-title"><?php echo htmlspecialchars($category['title']); ?></h3>
                    <div class="category-actions" style="display:none;">
                        <button class="category-btn" onclick="editCategory(<?php echo $categoryIndex; ?>)">✏️</button>
                        <button class="category-btn delete" onclick="deleteCategory(<?php echo $categoryIndex; ?>)">🗑️</button>
                        <button class="category-btn" onclick="addLink(<?php echo $categoryIndex; ?>)">➕</button>
                    </div>
                </div>
                <ul class="link-list">
                    <?php foreach ($category['links'] as $linkIndex => $link): ?>
                    <li class="link-item">
                        <a href="<?php echo htmlspecialchars($link['url']); ?>" class="link" target="_blank">
                            <?php echo htmlspecialchars($link['name']); ?>
                        </a>
                        <div class="link-actions" style="display:none;">
                            <button class="link-btn" onclick="editLink(<?php echo $categoryIndex; ?>, <?php echo $linkIndex; ?>)">✏️</button>
                            <button class="link-btn delete" onclick="deleteLink(<?php echo $categoryIndex; ?>, <?php echo $linkIndex; ?>)">🗑️</button>
                        </div>
                    </li>
                    <?php endforeach; ?>
                </ul>
            </div>
            <?php endforeach; ?>
            
            <!-- Add Category Button -->
            <div class="nav-category" id="addCategoryBtn" style="display:none; border: 2px dashed var(--border-color); cursor: pointer;" onclick="addCategory()">
                <div style="display: flex; align-items: center; justify-content: center; height: 100%; min-height: 200px; color: var(--text-muted);">
                    <div style="text-align: center;">
                        <div style="font-size: 48px; margin-bottom: 10px;">➕</div>
                        <div>添加新分类</div>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <footer>
        <div class="container">
            <p>© 2024 <?php echo APP_NAME; ?> v<?php echo VERSION; ?> | 用心收集，高效访问</p>
        </div>
    </footer>

    <!-- Modal -->
    <div class="modal" id="editModal">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title" id="modalTitle">编辑</h3>
                <button class="close-btn" onclick="closeModal()">×</button>
            </div>
            <form id="editForm" onsubmit="handleSubmit(event)">
                <div class="form-group">
                    <label class="form-label" id="label1">名称</label>
                    <input type="text" class="form-input" id="input1" name="input1" required>
                </div>
                <div class="form-group" id="urlGroup">
                    <label class="form-label" id="label2">链接</label>
                    <input type="url" class="form-input" id="input2" name="input2">
                </div>
                <button type="submit" class="btn-primary">保存</button>
            </form>
        </div>
    </div>

    <!-- Notification -->
    <div class="notification" id="notification"></div>

    <script>
        let manageMode = false;
        let currentEdit = {
            type: '',
            index: -1,
            categoryIndex: -1,
            linkIndex: -1
        };

        // Theme Toggle
        function toggleTheme() {
            const body = document.body;
            const themeToggle = document.querySelector('.theme-toggle');
            
            if (body.getAttribute('data-theme') === 'dark') {
                body.removeAttribute('data-theme');
                themeToggle.textContent = '🌙 深色';
                localStorage.setItem('theme', 'light');
            } else {
                body.setAttribute('data-theme', 'dark');
                themeToggle.textContent = '☀️ 浅色';
                localStorage.setItem('theme', 'dark');
            }
        }

        // Load saved theme
        window.addEventListener('DOMContentLoaded', () => {
            const savedTheme = localStorage.getItem('theme');
            if (savedTheme === 'dark') {
                document.body.setAttribute('data-theme', 'dark');
                document.querySelector('.theme-toggle').textContent = '☀️ 浅色';
            }
        });

        // Search functionality
        function searchLinks(event) {
            const searchTerm = event.target.value.toLowerCase();
            const allLinks = document.querySelectorAll('.link');
            const allCategories = document.querySelectorAll('.nav-category');
            const quickLinks = document.querySelectorAll('.quick-link');
            
            if (searchTerm === '') {
                allLinks.forEach(link => {
                    link.parentElement.style.display = 'flex';
                });
                allCategories.forEach(category => {
                    category.style.display = 'block';
                });
                quickLinks.forEach(link => {
                    link.parentElement.style.display = 'inline-flex';
                });
                return;
            }
            
            allCategories.forEach(category => {
                let hasVisibleLinks = false;
                const links = category.querySelectorAll('.link');
                
                links.forEach(link => {
                    const text = link.textContent.toLowerCase();
                    if (text.includes(searchTerm)) {
                        link.parentElement.style.display = 'flex';
                        hasVisibleLinks = true;
                    } else {
                        link.parentElement.style.display = 'none';
                    }
                });
                
                category.style.display = hasVisibleLinks ? 'block' : 'none';
            });
            
            quickLinks.forEach(link => {
                const text = link.textContent.toLowerCase();
                link.parentElement.style.display = text.includes(searchTerm) ? 'inline-flex' : 'none';
            });
        }

        // Keyboard shortcut for search
        document.addEventListener('keydown', (e) => {
            if ((e.ctrlKey || e.metaKey) && e.key === 'k') {
                e.preventDefault();
                document.getElementById('searchInput').focus();
            }
        });

        // Toggle manage mode
        function toggleManageMode() {
            manageMode = !manageMode;
            const manageBtn = document.querySelector('.manage-btn');
            const hiddenElements = document.querySelectorAll('.category-actions, .link-actions, .delete-btn, .add-quick-link, #addCategoryBtn');
            
            if (manageMode) {
                manageBtn.textContent = '完成';
                manageBtn.style.background = '#e74c3c';
                hiddenElements.forEach(el => el.style.display = '');
            } else {
                manageBtn.textContent = '管理';
                manageBtn.style.background = '';
                hiddenElements.forEach(el => el.style.display = 'none');
            }
        }

        // Show notification
        function showNotification(message, type = 'success') {
            const notification = document.getElementById('notification');
            notification.textContent = message;
            notification.className = `notification ${type}`;
            notification.style.display = 'block';
            
            setTimeout(() => {
                notification.style.display = 'none';
            }, 3000);
        }

        // Modal functions
        function openModal(title, showUrl = true) {
            document.getElementById('modalTitle').textContent = title;
            const urlGroup = document.getElementById('urlGroup');
            const urlInput = document.getElementById('input2');
            
            if (showUrl) {
                urlGroup.style.display = 'block';
                urlInput.required = true;
            } else {
                urlGroup.style.display = 'none';
                urlInput.required = false;
                urlInput.value = ''; // 清空URL输入框
            }
            
            document.getElementById('editModal').classList.add('active');
        }

        function closeModal() {
            document.getElementById('editModal').classList.remove('active');
            document.getElementById('editForm').reset();
        }

        // Category functions
        function addCategory() {
            currentEdit = { type: 'add_category' };
            openModal('添加分类', false);
            document.getElementById('label1').textContent = '分类名称';
        }

        function editCategory(index) {
            currentEdit = { type: 'edit_category', index };
            const title = document.querySelectorAll('.category-title')[index].textContent.trim();
            openModal('编辑分类', false);
            document.getElementById('label1').textContent = '分类名称';
            document.getElementById('input1').value = title;
        }

        function deleteCategory(index) {
            if (confirm('确定要删除这个分类吗？')) {
                apiRequest('delete_category', { index: index });
            }
        }

        // Link functions
        function addLink(categoryIndex) {
            currentEdit = { type: 'add_link', categoryIndex };
            openModal('添加链接', true);
            document.getElementById('label1').textContent = '链接名称';
            document.getElementById('label2').textContent = '链接地址';
        }

        function editLink(categoryIndex, linkIndex) {
            currentEdit = { type: 'edit_link', categoryIndex, linkIndex };
            const link = document.querySelectorAll('.nav-category')[categoryIndex].querySelectorAll('.link')[linkIndex];
            openModal('编辑链接', true);
            document.getElementById('label1').textContent = '链接名称';
            document.getElementById('label2').textContent = '链接地址';
            document.getElementById('input1').value = link.textContent.trim();
            document.getElementById('input2').value = link.href;
        }

        function deleteLink(categoryIndex, linkIndex) {
            if (confirm('确定要删除这个链接吗？')) {
                apiRequest('delete_link', { type: 'category', category_index: categoryIndex, link_index: linkIndex });
            }
        }

        // Quick link functions
        function addQuickLink() {
            currentEdit = { type: 'add_quick_link' };
            openModal('添加快速链接', true);
            document.getElementById('label1').textContent = '链接名称';
            document.getElementById('label2').textContent = '链接地址';
        }

        function deleteQuickLink(event, index) {
            event.preventDefault();
            event.stopPropagation();
            if (confirm('确定要删除这个快速链接吗？')) {
                apiRequest('delete_link', { type: 'quick', link_index: index });
            }
        }

        // Handle form submit
        function handleSubmit(event) {
            event.preventDefault();
            
            const input1 = document.getElementById('input1').value;
            const input2 = document.getElementById('input2').value;
            
            switch (currentEdit.type) {
                case 'add_category':
                    apiRequest('add_category', { title: input1 });
                    break;
                case 'edit_category':
                    apiRequest('edit_category', { index: currentEdit.index, title: input1 });
                    break;
                case 'add_link':
                    apiRequest('add_link', { type: 'category', index: currentEdit.categoryIndex, name: input1, url: input2 });
                    break;
                case 'edit_link':
                    apiRequest('edit_link', { type: 'category', category_index: currentEdit.categoryIndex, link_index: currentEdit.linkIndex, name: input1, url: input2 });
                    break;
                case 'add_quick_link':
                    apiRequest('add_link', { type: 'quick', name: input1, url: input2 });
                    break;
            }
            
            closeModal();
        }

        // API request
        function apiRequest(action, data) {
            data.api = action;
            
            const params = new URLSearchParams();
            for (const key in data) {
                params.append(key, data[key]);
            }
            
            fetch('', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                },
                body: params
            })
            .then(response => response.json())
            .then(result => {
                if (result.success) {
                    showNotification(result.message || '操作成功');
                    setTimeout(() => {
                        location.reload();
                    }, 1000);
                } else {
                    showNotification(result.error || '操作失败', 'error');
                }
            })
            .catch(error => {
                console.error('Error:', error);
                showNotification('请求失败', 'error');
            });
        }

        // Close modal when clicking outside
        document.getElementById('editModal').addEventListener('click', (e) => {
            if (e.target === e.currentTarget) {
                closeModal();
            }
        });
    </script>
</body>
</html>
<?php
// End of file
?>