<?php
// ==========================================
// PHP BACKEND (API & SQLite Database & File Uploads)
// ==========================================
session_start();
// 開啟所有錯誤報告，方便底層診斷
error_reporting(E_ALL); 
ini_set('display_errors', 0); // 關閉直接的 HTML 報錯，確保 JSON 不被污染

// 初始化並強制檢查文件夾權限
$upload_dir = __DIR__ . '/uploads';
$sub_dirs = ['/media', '/covers', '/avatars'];
if (!is_dir($upload_dir)) {
    @mkdir($upload_dir, 0777, true);
}
foreach ($sub_dirs as $sub) {
    $full_path = $upload_dir . $sub;
    if (!is_dir($full_path)) {
        @mkdir($full_path, 0777, true);
    }
    // 盡最大努力強制設置 0777 可寫權限
    @chmod($full_path, 0777);
}

// 初始化 SQLite 數據庫
$db_file = __DIR__ . '/pilipili.sqlite';
try {
    $db = new PDO('sqlite:' . $db_file);
    $db->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

    $db->exec("CREATE TABLE IF NOT EXISTS videos (id TEXT PRIMARY KEY, title TEXT, url TEXT, cover TEXT, tags TEXT, author TEXT, likes INTEGER DEFAULT 0, created_at INTEGER)");
    $db->exec("CREATE TABLE IF NOT EXISTS comments (id TEXT PRIMARY KEY, video_id TEXT, text TEXT, author TEXT, is_featured INTEGER DEFAULT 0, created_at INTEGER)");
    $db->exec("CREATE TABLE IF NOT EXISTS announcements (id TEXT PRIMARY KEY, text TEXT, active INTEGER DEFAULT 1, updated_at INTEGER)");
    $db->exec("CREATE TABLE IF NOT EXISTS users (username TEXT PRIMARY KEY, avatar TEXT)");
} catch (Exception $e) {
    die(json_encode(['success' => false, 'error' => "數據庫連接失敗: " . $e->getMessage()]));
}

$admins = [
    'NekoBenson' => 'ddm20110116',
    'Pony9163' => '12345678'
];

function getUploadErrorMessage($code) {
    switch ($code) {
        case UPLOAD_ERR_INI_SIZE: return "文件太大！超過了伺服器 php.ini 中 upload_max_filesize (" . ini_get('upload_max_filesize') . ") 的限制。請修改 php.ini。";
        case UPLOAD_ERR_FORM_SIZE: return "文件超過了 HTML 表單定義的限制。";
        case UPLOAD_ERR_PARTIAL: return "網路中斷，文件只有部分被上傳。";
        case UPLOAD_ERR_NO_FILE: return "沒有接收到任何文件數據。";
        case UPLOAD_ERR_NO_TMP_DIR: return "伺服器錯誤：找不到臨時文件夾 (tmp_dir)。";
        case UPLOAD_ERR_CANT_WRITE: return "伺服器錯誤：磁碟寫入失敗，請檢查 uploads 文件夾及其父目錄的 0777 權限。";
        case UPLOAD_ERR_EXTENSION: return "伺服器錯誤：文件上傳被某個 PHP 擴展攔截。";
        default: return "未知上傳錯誤 (錯誤碼: $code)。";
    }
}

function getAllData($db) {
    $videos = $db->query("SELECT * FROM videos ORDER BY created_at DESC")->fetchAll(PDO::FETCH_ASSOC);
    foreach($videos as &$v) { 
        $v['tags'] = json_decode($v['tags'] ?: '[]'); 
    }
    $comments = $db->query("SELECT * FROM comments ORDER BY created_at DESC")->fetchAll(PDO::FETCH_ASSOC);
    foreach($comments as &$c) { 
        $c['isFeatured'] = (bool)$c['is_featured']; 
        $c['videoId'] = $c['video_id']; 
    }
    $announcements = $db->query("SELECT * FROM announcements")->fetchAll(PDO::FETCH_ASSOC);
    foreach($announcements as &$a) { $a['active'] = (bool)$a['active']; }
    $users = $db->query("SELECT username, avatar FROM users")->fetchAll(PDO::FETCH_ASSOC);
    $userMap = [];
    foreach($users as $u) { $userMap[$u['username']] = $u['avatar']; }

    return [
        'videos' => $videos,
        'comments' => $comments,
        'announcements' => $announcements,
        'userMap' => $userMap,
        'server_info' => [
            'upload_max' => ini_get('upload_max_filesize'),
            'post_max' => ini_get('post_max_size'),
            'php_version' => phpversion()
        ]
    ];
}

if (isset($_GET['api'])) {
    header('Content-Type: application/json');
    $action = $_GET['api'];
    
    // 【極限診斷】檢查是否因為影片體積過大導致 PHP 丟棄了所有 POST 數據
    if ($_SERVER['REQUEST_METHOD'] === 'POST' && empty($_POST) && empty($_FILES) && $_SERVER['CONTENT_LENGTH'] > 0) {
        echo json_encode(['success' => false, 'error' => '您上傳的影片體積超出了伺服器極限！PHP 丟棄了所有數據。請修改 php.ini 中的 post_max_size (當前為 ' . ini_get('post_max_size') . ')']);
        exit;
    }

    $input = json_decode(file_get_contents('php://input'), true) ?: $_POST;
    $response = ['success' => false];
    $currentUser = $_SESSION['user'] ?? null;

    try {
        if ($action === 'init') {
            $response = ['success' => true, 'is_php_running' => true, 'user' => $currentUser] + getAllData($db);
        }
        elseif ($action === 'login') {
            $username = $input['username'] ?? '';
            $password = $input['password'] ?? '';
            $isAdmin = (isset($admins[$username]) && $admins[$username] === $password);
            if (isset($admins[$username]) && $admins[$username] !== $password) throw new Exception("管理員密碼錯誤");

            $stmt = $db->prepare("SELECT avatar FROM users WHERE username = ?");
            $stmt->execute([$username]);
            $userRow = $stmt->fetch(PDO::FETCH_ASSOC);
            $avatar = $userRow ? $userRow['avatar'] : null;

            $_SESSION['user'] = ['username' => $username, 'isAdmin' => $isAdmin, 'avatar' => $avatar];
            $response = ['success' => true, 'user' => $_SESSION['user']] + getAllData($db);
        }
        elseif ($action === 'logout') {
            session_destroy();
            $response = ['success' => true];
        }
        elseif ($action === 'update_avatar' && $currentUser) {
            if (isset($_FILES['avatarFile'])) {
                if ($_FILES['avatarFile']['error'] !== UPLOAD_ERR_OK) {
                     throw new Exception("頭像上傳失敗: " . getUploadErrorMessage($_FILES['avatarFile']['error']));
                }
                $ext = pathinfo($_FILES['avatarFile']['name'], PATHINFO_EXTENSION);
                $filename = 'usr_' . time() . '_' . rand(1000, 9999) . '.' . $ext;
                $target = $upload_dir . '/avatars/' . $filename;
                if (move_uploaded_file($_FILES['avatarFile']['tmp_name'], $target)) {
                    $avatarUrl = 'uploads/avatars/' . $filename;
                    $db->prepare("INSERT OR REPLACE INTO users (username, avatar) VALUES (?, ?)")->execute([$currentUser['username'], $avatarUrl]);
                    $_SESSION['user']['avatar'] = $avatarUrl;
                    $response = ['success' => true, 'user' => $_SESSION['user']] + getAllData($db);
                } else {
                    throw new Exception("伺服器無法保存頭像，權限不足 (move_uploaded_file 失敗)。");
                }
            } else {
                 throw new Exception("未收到頭像數據。");
            }
        }
        elseif ($action === 'add_video' && $currentUser) {
            $mediaUrl = ''; $coverUrl = '';
            
            // 檢查伺服器是否開啟了文件上傳功能
            if (!ini_get('file_uploads')) {
                throw new Exception("嚴重錯誤：伺服器 php.ini 中關閉了 file_uploads，完全禁止上傳文件！請聯絡伺服器管理員。");
            }

            // 檢查 $_FILES 陣列是否包含 mediaFile
            if (!isset($_FILES['mediaFile'])) {
                $diag = "後端完全沒有收到 mediaFile 數據！\n";
                $diag .= "可能是由於：\n1. 文件過大被伺服器直接丟棄 (檢查 php.ini 的 upload_max_filesize)\n";
                $diag .= "2. 網路中斷\n";
                $diag .= "當前 PHP 限制: post_max_size = " . ini_get('post_max_size') . ", upload_max_filesize = " . ini_get('upload_max_filesize');
                throw new Exception($diag);
            }

            // 檢查 PHP 上傳錯誤碼
            if ($_FILES['mediaFile']['error'] !== UPLOAD_ERR_OK) {
                throw new Exception("上傳被 PHP 引擎中斷: \n" . getUploadErrorMessage($_FILES['mediaFile']['error']));
            }

            $ext = strtolower(pathinfo($_FILES['mediaFile']['name'], PATHINFO_EXTENSION));
            $filename = 'med_' . time() . '_' . rand(1000, 9999) . '.' . $ext;
            $dest = $upload_dir . '/media/' . $filename;
            
            // 執行文件移動，如果失敗給出詳細環境資訊
            if (move_uploaded_file($_FILES['mediaFile']['tmp_name'], $dest)) {
                $mediaUrl = 'uploads/media/' . $filename;
            } else {
                $err = "核心錯誤：move_uploaded_file() 失敗，文件無法從臨時區移動到正式目錄！\n";
                $err .= "1. 檢查目錄: " . $upload_dir . "/media\n";
                $err .= "2. 目錄存在嗎？" . (is_dir($upload_dir . '/media') ? "是" : "否") . "\n";
                $err .= "3. 目錄可寫嗎？" . (is_writable($upload_dir . '/media') ? "是" : "否 (請設置 chmod 0777)") . "\n";
                throw new Exception($err);
            }
            
            if (isset($_FILES['coverFile']) && $_FILES['coverFile']['error'] === UPLOAD_ERR_OK) {
                $ext = strtolower(pathinfo($_FILES['coverFile']['name'], PATHINFO_EXTENSION));
                $filename = 'cov_' . time() . '_' . rand(1000, 9999) . '.' . $ext;
                if (move_uploaded_file($_FILES['coverFile']['tmp_name'], $upload_dir . '/covers/' . $filename)) {
                    $coverUrl = 'uploads/covers/' . $filename;
                }
            }

            $tags = isset($input['tags']) ? json_decode($input['tags'], true) : [];
            $stmt = $db->prepare("INSERT INTO videos (id, title, url, cover, tags, author, created_at) VALUES (?, ?, ?, ?, ?, ?, ?)");
            $id = 'vid_' . time() . rand(100,999);
            $stmt->execute([$id, $input['title'] ?: '無題', $mediaUrl, $coverUrl, json_encode($tags), $currentUser['username'], time() * 1000]);
            $response = ['success' => true] + getAllData($db);
        }
        elseif ($action === 'delete_video' && $currentUser) {
            $stmt = $db->prepare("SELECT author, url, cover FROM videos WHERE id = ?");
            $stmt->execute([$input['id']]);
            $video = $stmt->fetch(PDO::FETCH_ASSOC);
            
            if (!$video) {
                throw new Exception("找不到該內容或已被刪除。");
            }
            
            if ($currentUser['isAdmin'] || $video['author'] === $currentUser['username']) {
                $db->prepare("DELETE FROM videos WHERE id = ?")->execute([$input['id']]);
                // 同時清理評論
                $db->prepare("DELETE FROM comments WHERE video_id = ?")->execute([$input['id']]);
                // 物理刪除
                if ($video['url'] && strpos($video['url'], 'uploads/') === 0) @unlink(__DIR__ . '/' . $video['url']);
                if ($video['cover'] && strpos($video['cover'], 'uploads/') === 0) @unlink(__DIR__ . '/' . $video['cover']);
                
                $response = ['success' => true] + getAllData($db);
            } else {
                throw new Exception("權限不足，您只能刪除自己的作品！");
            }
        }
        elseif ($action === 'like_video') {
            $db->prepare("UPDATE videos SET likes = likes + 1 WHERE id = ?")->execute([$input['id']]);
            $response = ['success' => true] + getAllData($db);
        }
        elseif ($action === 'add_comment' && $currentUser) {
            $stmt = $db->prepare("INSERT INTO comments (id, video_id, text, author, created_at) VALUES (?, ?, ?, ?, ?)");
            $id = 'cmt_' . time() . rand(100,999);
            $stmt->execute([$id, $input['videoId'], $input['text'], $currentUser['username'], time() * 1000]);
            $response = ['success' => true] + getAllData($db);
        }
    } catch (Exception $e) { $response['error'] = $e->getMessage(); }
    echo json_encode($response); exit;
}
?>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>PonyHub - 圖文影音分享平台</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
      tailwind.config = {
        darkMode: 'class',
        theme: { 
          extend: { 
            fontFamily: { sans: ['Inter', 'sans-serif', 'Noto Sans SC'] },
            colors: {
              primary: {
                50: 'rgb(var(--primary-50) / <alpha-value>)',
                100: 'rgb(var(--primary-100) / <alpha-value>)',
                200: 'rgb(var(--primary-200) / <alpha-value>)',
                300: 'rgb(var(--primary-300) / <alpha-value>)',
                400: 'rgb(var(--primary-400) / <alpha-value>)',
                500: 'rgb(var(--primary-500) / <alpha-value>)',
                600: 'rgb(var(--primary-600) / <alpha-value>)',
                700: 'rgb(var(--primary-700) / <alpha-value>)',
                800: 'rgb(var(--primary-800) / <alpha-value>)',
                900: 'rgb(var(--primary-900) / <alpha-value>)',
              }
            }
          } 
        }
      }
    </script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <style>
      .scrollbar-hide::-webkit-scrollbar { display: none; }
      @keyframes fadeSlideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
      @keyframes scalePop { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }
      @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
      .anim-fade-slide-up { opacity: 0; animation: fadeSlideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
      .anim-scale-pop { animation: scalePop 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
      .anim-fade-in { animation: fadeIn 0.3s ease-out forwards; }
      .drawer-content { transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
      .drawer-overlay { transition: opacity 0.3s ease-out; }
    </style>
</head>
<body class="bg-gray-50 text-gray-900 transition-colors duration-300 overflow-x-hidden">
    <div id="root"></div>

    <script type="text/babel">
    const { useState, useEffect, useMemo, useRef } = React;

    const colorPalettes = {
      red: { 50: '254 242 242', 500: '239 68 68', 600: '220 38 38' },
      blue: { 50: '239 246 255', 500: '59 130 246', 600: '37 99 235' },
      purple: { 50: '250 245 255', 500: '168 85 247', 600: '147 51 234' },
      green: { 50: '240 253 244', 500: '34 197 94', 600: '22 163 74' }
    };

    const icons = {
      Play: ({className}) => <i className={`fas fa-play ${className}`}></i>,
      X: ({className}) => <i className={`fas fa-times ${className}`}></i>,
      Menu: ({className}) => <i className={`fas fa-bars ${className}`}></i>,
      Plus: ({className}) => <i className={`fas fa-plus ${className}`}></i>,
      Shield: ({className}) => <i className={`fas fa-shield-alt ${className}`}></i>,
      ThumbsUp: ({className}) => <i className={`fas fa-thumbs-up ${className}`}></i>,
      Sun: ({className}) => <i className={`fas fa-sun ${className}`}></i>,
      Moon: ({className}) => <i className={`fas fa-moon ${className}`}></i>,
      Palette: ({className}) => <i className={`fas fa-palette ${className}`}></i>,
      Camera: ({className}) => <i className={`fas fa-camera ${className}`}></i>,
      Trash: ({className}) => <i className={`fas fa-trash ${className}`}></i>,
      ChevronRight: ({className}) => <i className={`fas fa-chevron-right ${className}`}></i>,
      Info: ({className}) => <i className={`fas fa-info-circle ${className}`}></i>,
      AlertTriangle: ({className}) => <i className={`fas fa-exclamation-triangle ${className}`}></i>,
      Comment: ({className}) => <i className={`fas fa-comment-dots ${className}`}></i>
    };

    const api = async (action, payload = null, isFormData = false) => {
        const baseUrl = window.location.origin + window.location.pathname;
        let options = { method: payload ? 'POST' : 'GET' };
        if (payload) {
            if (isFormData) options.body = payload;
            else { 
                options.headers = { 'Content-Type': 'application/json' }; 
                options.body = JSON.stringify(payload); 
            }
        }
        try {
            const res = await fetch(`${baseUrl}?api=${action}`, options);
            if (!res.ok) {
                if (res.status === 405 || res.status === 404) {
                    throw new Error(`HTTP ${res.status}: 嚴重警告！您似乎在純靜態環境中運行此代碼，因此 PHP 腳本未執行！`);
                }
                throw new Error(`HTTP ${res.status} 伺服器內部錯誤`);
            }
            const text = await res.text();
            try { 
                return JSON.parse(text); 
            } catch(e) { 
                console.error("解析 JSON 失敗. 伺服器返回內容:", text);
                return {
                    success: false, 
                    error: "致命錯誤：伺服器返回了非 JSON 數據。\n這通常代表 PHP 代碼崩潰（如內存溢出）或您沒有在 PHP 伺服器中運行。\n\n伺服器返回片段:\n" + text.substring(0, 150)
                }; 
            }
        } catch (e) { 
            return { success: false, error: "網路或跨域請求失敗: " + e.message }; 
        }
    };

    const UserAvatar = ({ username, src, className = "" }) => (
        src ? <img src={src} className={`object-cover rounded-full ${className}`} alt={username} /> :
        <div className={`rounded-full flex items-center justify-center font-bold text-white bg-primary-600 ${className}`}>{username?.charAt(0).toUpperCase()}</div>
    );

    // 全局自定義 Toast 組件，替代 alert()
    function Toast({ message, type = 'info', onClose }) {
        useEffect(() => {
            const timer = setTimeout(onClose, 3000);
            return () => clearTimeout(timer);
        }, [onClose]);
        return (
            <div className={`fixed top-5 left-1/2 -translate-x-1/2 z-[3000] px-6 py-3 rounded-md shadow-lg anim-fade-slide-up flex items-center gap-3 text-white text-sm font-medium ${type === 'error' ? 'bg-red-600' : 'bg-gray-900'}`}>
                {type === 'error' ? <icons.AlertTriangle /> : <icons.Info />}
                <span>{message}</span>
            </div>
        );
    }

    // 全局自定義 Confirm 組件，替代 confirm()
    function ConfirmModal({ message, onConfirm, onCancel }) {
        return (
            <div className="fixed inset-0 z-[3000] flex items-center justify-center p-4 bg-black/60 backdrop-blur-sm anim-fade-in">
                <div className="bg-white dark:bg-[#1e1e1e] p-6 rounded-md max-w-sm w-full shadow-2xl anim-scale-pop border border-gray-100 dark:border-white/5">
                    <h3 className="font-bold text-lg mb-6 text-gray-900 dark:text-gray-100">{message}</h3>
                    <div className="flex justify-end gap-3">
                        <button onClick={onCancel} className="px-5 py-2.5 bg-gray-100 dark:bg-white/5 hover:bg-gray-200 dark:hover:bg-white/10 rounded-md font-medium text-sm transition-colors">取消</button>
                        <button onClick={onConfirm} className="px-5 py-2.5 bg-red-600 hover:bg-red-700 text-white rounded-md font-medium text-sm transition-colors shadow-md shadow-red-600/20">確認刪除</button>
                    </div>
                </div>
            </div>
        );
    }

    function App() {
      const [isReady, setIsReady] = useState(false);
      const [phpError, setPhpError] = useState(false);
      const [theme, setTheme] = useState('dark');
      const [themeColor, setThemeColor] = useState(() => localStorage.getItem('ph_themeColor') || 'red');
      const [appUser, setAppUser] = useState(null); 
      const [userMap, setUserMap] = useState({});
      const [videos, setVideos] = useState([]);
      const [comments, setComments] = useState([]);
      const [currentVideoId, setCurrentVideoId] = useState(null);
      const [showAuthModal, setShowAuthModal] = useState(false);
      const [showPublishModal, setShowPublishModal] = useState(false);
      const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
      const [showAgeWarning, setShowAgeWarning] = useState(() => !sessionStorage.getItem('ph_age_verified'));
      const [serverInfo, setServerInfo] = useState({});
      
      // 全局彈窗狀態
      const [toastMsg, setToastMsg] = useState(null); // { message: '', type: 'error' | 'info' }
      const [confirmDialog, setConfirmDialog] = useState(null); // { message: '', onConfirm: fn }

      useEffect(() => {
        api('init').then(data => {
            if (data.success && data.is_php_running) {
                setVideos(data.videos || []);
                setComments(data.comments || []);
                setUserMap(data.userMap || {});
                setAppUser(data.user);
                if(data.server_info) setServerInfo(data.server_info);
            } else {
                setPhpError(true);
            }
            setIsReady(true);
        });
      }, []);

      useEffect(() => {
        document.documentElement.classList.toggle('dark', theme === 'dark');
      }, [theme]);

      const updateState = (data) => {
          if(data.success) {
              if(data.videos) setVideos(data.videos);
              if(data.comments) setComments(data.comments);
              if(data.userMap) setUserMap(data.userMap);
              if(data.user) setAppUser(data.user);
          }
      };

      const currentMedia = useMemo(() => videos.find(v => v.id === currentVideoId), [videos, currentVideoId]);

      if (!isReady) return (
        <div className="h-screen flex items-center justify-center bg-[#121212]">
            <div className="flex flex-col items-center gap-4">
                <div className="w-10 h-10 border-4 border-primary-500 border-t-transparent rounded-full animate-spin"></div>
                <p className="text-gray-500 font-bold tracking-widest animate-pulse uppercase text-sm">PonyHub Loading</p>
            </div>
        </div>
      );

      const palette = colorPalettes[themeColor] || colorPalettes.red;

      return (
        <div style={{'--primary-50': palette[50], '--primary-500': palette[500], '--primary-600': palette[600]}} className="min-h-screen transition-colors duration-300 dark:bg-[#121212] dark:text-gray-100">
          
          {toastMsg && <Toast message={toastMsg.message} type={toastMsg.type} onClose={() => setToastMsg(null)} />}
          {confirmDialog && <ConfirmModal message={confirmDialog.message} onConfirm={() => { confirmDialog.onConfirm(); setConfirmDialog(null); }} onCancel={() => setConfirmDialog(null)} />}

          {phpError && (
              <div className="bg-red-600 text-white p-3 text-center text-sm font-bold z-[9999] relative shadow-md">
                  <icons.AlertTriangle className="text-xl mb-1 block mx-auto" />
                  嚴重警告：未檢測到 PHP 環境！如果您是在網頁右側的「預覽」視窗中查看，上傳和所有後端功能將【100% 報錯】。<br/>
                  請務必將此代碼保存為 index.php 並放入真實的伺服器環境 (如 XAMPP/寶塔/Nginx) 中運行！
              </div>
          )}

          {showAgeWarning && !phpError && (
            <div className="fixed inset-0 z-[2000] flex items-center justify-center p-4 bg-black/90 backdrop-blur-xl anim-fade-in">
               <div className="bg-white dark:bg-[#1e1e1e] p-6 md:p-8 rounded-md max-w-sm w-full text-center shadow-2xl anim-scale-pop border border-white/5">
                  <div className="w-16 h-16 bg-red-100 dark:bg-red-900/30 text-red-600 rounded-full flex items-center justify-center mx-auto mb-6 ring-4 ring-red-500/10"><icons.Shield className="text-3xl"/></div>
                  <h2 className="text-2xl font-bold mb-3 tracking-tight">內容分級警告</h2>
                  <p className="text-gray-500 dark:text-gray-400 mb-8 text-sm leading-relaxed px-1">本站包含成人內容與敏感視覺資訊。您必須年滿 18 歲才能進入。點擊進入即代表您承諾已符合法定年齡。</p>
                  <button onClick={() => { sessionStorage.setItem('ph_age_verified','1'); setShowAgeWarning(false); }} className="w-full py-3 bg-primary-600 text-white rounded-md font-bold shadow-md shadow-primary-600/20 active:scale-95 transition-all mb-3 hover:bg-primary-700">我已年滿 18 歲，進入本站</button>
                  <button onClick={() => window.location.href="https://google.com"} className="w-full py-2.5 text-gray-500 font-medium hover:text-gray-700 dark:hover:text-gray-300 transition-colors">離開本站</button>
               </div>
            </div>
          )}

          <header className="sticky top-0 z-[500] h-14 sm:h-16 bg-white/80 dark:bg-[#1e1e1e]/90 backdrop-blur-md border-b border-gray-200 dark:border-white/5 transition-all">
            <div className="max-w-7xl mx-auto px-4 h-full flex items-center justify-between">
               <div className="flex items-center gap-2">
                  <button onClick={() => setMobileMenuOpen(true)} className="p-2 -ml-2 rounded-md hover:bg-gray-100 dark:hover:bg-white/5 active:scale-95 transition-all flex items-center justify-center">
                    <icons.Menu className="text-xl"/>
                  </button>
                  <div className="flex items-center gap-2 cursor-pointer group" onClick={() => setCurrentVideoId(null)}>
                     <div className="w-7 h-7 sm:w-8 sm:h-8 bg-primary-600 rounded flex items-center justify-center text-white font-bold shadow-md shadow-primary-600/20 group-hover:scale-105 transition-transform text-sm sm:text-base">PH</div>
                     <span className="font-bold text-lg sm:text-xl hidden sm:block tracking-tight">PonyHub</span>
                  </div>
               </div>

               <div className="flex items-center gap-2 sm:gap-3">
                  <button onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')} className="p-2 rounded-md hover:bg-gray-100 dark:hover:bg-white/5 transition-colors">
                     {theme === 'dark' ? <icons.Sun className="text-yellow-400 drop-shadow-sm"/> : <icons.Moon className="text-gray-600"/>}
                  </button>
                  {appUser ? (
                    <div className="flex items-center gap-2 sm:gap-3">
                       <button onClick={() => setShowPublishModal(true)} className="hidden sm:flex items-center gap-1.5 bg-primary-600 text-white px-4 py-1.5 rounded-md text-sm font-medium shadow-md shadow-primary-600/20 active:scale-95 hover:bg-primary-700 transition-all"><icons.Plus/> 發布</button>
                       <div className="relative group cursor-pointer">
                          <div className="p-0.5 rounded-full ring-2 ring-transparent group-hover:ring-primary-500/30 transition-all">
                            <UserAvatar username={appUser.username} src={appUser.avatar} className="w-8 h-8 shadow-sm" />
                          </div>
                          <div className="absolute right-0 top-full mt-2 w-52 bg-white dark:bg-[#252525] rounded-md shadow-xl border border-gray-100 dark:border-white/5 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all p-2 scale-95 group-hover:scale-100 origin-top-right">
                             <div className="px-3 py-2.5 border-b border-gray-100 dark:border-white/5 mb-1 font-bold text-sm truncate">{appUser.username}</div>
                             <button onClick={() => { const f=document.createElement('input'); f.type='file'; f.accept='image/*'; f.onchange=async(e)=>{ const fd=new FormData(); fd.append('avatarFile',e.target.files[0]); const res=await api('update_avatar',fd,true); if(res.success) { updateState(res); setToastMsg({message:'頭像更換成功'}); } else { setToastMsg({message: res.error, type: 'error'}); } }; f.click(); }} className="w-full text-left px-3 py-2 text-sm rounded-md hover:bg-gray-50 dark:hover:bg-white/5 flex items-center gap-2.5 transition-colors"><icons.Camera className="text-gray-500 w-4"/> 更換個人頭像</button>
                             <button onClick={async() => { await api('logout'); setAppUser(null); setToastMsg({message:'已登出帳號'}); }} className="w-full text-left px-3 py-2 text-sm text-red-500 rounded-md hover:bg-red-50 dark:hover:bg-red-500/10 flex items-center gap-2.5 transition-colors font-medium mt-1"><i className="fas fa-sign-out-alt w-4"></i> 登出帳號</button>
                          </div>
                       </div>
                    </div>
                  ) : (
                    <button onClick={() => setShowAuthModal(true)} className="bg-primary-600 text-white px-5 py-1.5 rounded-md text-sm font-medium hover:bg-primary-700 active:scale-95 transition-all shadow-sm">登入</button>
                  )}
               </div>
            </div>
          </header>

          {mobileMenuOpen && (
             <div className="fixed inset-0 z-[1000] flex">
                <div className="absolute inset-0 bg-black/60 backdrop-blur-sm anim-fade-in drawer-overlay" onClick={() => setMobileMenuOpen(false)}></div>
                <div className="relative w-64 h-full bg-white dark:bg-[#1e1e1e] shadow-2xl p-5 flex flex-col drawer-content anim-fade-slide-up">
                   <div className="flex items-center justify-between mb-8">
                      <div className="flex items-center gap-2.5">
                        <div className="w-8 h-8 bg-primary-600 rounded flex items-center justify-center text-white font-bold">PH</div>
                        <span className="font-bold text-xl tracking-tight">PonyHub</span>
                      </div>
                      <button onClick={() => setMobileMenuOpen(false)} className="p-2 bg-gray-100 dark:bg-white/5 rounded-md"><icons.X/></button>
                   </div>
                   <nav className="flex-1 space-y-1.5 text-[14px]">
                      <button onClick={() => { setCurrentVideoId(null); setMobileMenuOpen(false); }} className={`w-full flex items-center justify-between px-4 py-3 rounded-md transition-all ${!currentVideoId ? 'bg-primary-600 text-white font-medium shadow-md shadow-primary-600/20' : 'hover:bg-gray-100 dark:hover:bg-white/5 font-medium'}`}>
                         <div className="flex items-center gap-3"><i className="fas fa-home w-4"></i> 瀏覽首頁</div>
                         {!currentVideoId && <icons.ChevronRight className="text-[10px]"/>}
                      </button>
                      {appUser && (
                        <button onClick={() => { setShowPublishModal(true); setMobileMenuOpen(false); }} className="w-full flex items-center gap-3 px-4 py-3 rounded-md hover:bg-gray-100 dark:hover:bg-white/5 font-medium transition-all"><icons.Plus className="w-4"/> 發布內容</button>
                      )}
                   </nav>
                   <div className="pt-6 border-t border-gray-100 dark:border-white/5">
                      <p className="text-[10px] font-bold text-gray-400 mb-4 uppercase tracking-widest px-1">主題顏色</p>
                      <div className="grid grid-cols-4 gap-2.5">
                         {Object.keys(colorPalettes).map(c => (
                           <button key={c} onClick={() => {setThemeColor(c); localStorage.setItem('ph_themeColor', c);}} className={`h-8 rounded-md transition-all ${themeColor === c ? 'ring-2 ring-primary-500/30 border-2 border-white dark:border-[#1e1e1e]' : 'scale-90 opacity-70 hover:opacity-100'}`} style={{backgroundColor: `rgb(${colorPalettes[c][500]})`}}></button>
                         ))}
                      </div>
                   </div>
                </div>
             </div>
          )}

          <main className="max-w-7xl mx-auto px-4 py-6 md:py-8">
             {currentVideoId && currentMedia ? (
               <MediaView media={currentMedia} userMap={userMap} videos={videos} comments={comments} appUser={appUser} onBack={() => setCurrentVideoId(null)} onSelect={setCurrentVideoId} updateState={updateState} setToastMsg={setToastMsg} setConfirmDialog={setConfirmDialog} />
             ) : (
               <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-x-5 gap-y-8 anim-fade-slide-up">
                  {videos.map((v, idx) => (
                    <div key={v.id} onClick={() => setCurrentVideoId(v.id)} className="group cursor-pointer space-y-3 transition-all active:scale-[0.98]" style={{animationDelay: `${idx*30}ms`}}>
                       <div className="aspect-video bg-gray-200 dark:bg-[#252525] rounded-md overflow-hidden relative shadow-sm group-hover:shadow-md transition-all border border-transparent dark:group-hover:border-white/5">
                          {v.cover ? <img src={v.cover} className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" alt={v.title} /> : <div className="w-full h-full flex items-center justify-center opacity-30"><i className="fas fa-play text-3xl"></i></div>}
                          <div className="absolute inset-0 bg-black/5 group-hover:bg-transparent transition-colors" />
                          <div className="absolute top-2 left-2 px-2 py-0.5 bg-black/60 backdrop-blur-md text-[10px] text-white font-semibold rounded uppercase tracking-wide">
                             {v.url.match(/\.(mp4|webm|mov|m4v)$/i) ? 'Video' : 'Image'}
                          </div>
                       </div>
                       <div className="flex gap-3 px-1">
                          <UserAvatar username={v.author} src={userMap[v.author]} className="w-9 h-9 shrink-0 shadow-sm" />
                          <div className="min-w-0 flex-1">
                             <h3 className="font-semibold text-sm line-clamp-2 leading-snug group-hover:text-primary-600 transition-colors">{v.title}</h3>
                             <div className="flex items-center gap-2 mt-1.5">
                                <p className="text-xs text-gray-500 truncate">{v.author}</p>
                                <span className="w-1 h-1 rounded-full bg-gray-300 dark:bg-gray-600"></span>
                                <p className="text-xs text-gray-500">{v.likes} 讚</p>
                             </div>
                          </div>
                       </div>
                    </div>
                  ))}
                  {videos.length === 0 && !phpError && (
                    <div className="col-span-full py-32 text-center opacity-40">
                        <i className="fas fa-folder-open text-5xl mb-4 block text-gray-400"></i>
                        <p className="text-lg font-medium">目前空空如也...</p>
                    </div>
                  )}
               </div>
             )}
          </main>

          {showAuthModal && <AuthModal onClose={() => setShowAuthModal(false)} onAuth={async(u,p)=>{ const res=await api('login',{username:u,password:p}); if(res.success){updateState(res);setShowAuthModal(false);setToastMsg({message:'登入成功！'});}else {setToastMsg({message: res.error, type:'error'});} }} />}
          {showPublishModal && <PublishModal onClose={() => setShowPublishModal(false)} serverInfo={serverInfo} setToastMsg={setToastMsg} onUpdate={(res)=>{updateState(res); setShowPublishModal(false);}} />}
        </div>
      );
    }

    function MediaView({ media, userMap, videos, comments, appUser, onBack, onSelect, updateState, setToastMsg, setConfirmDialog }) {
        const [text, setText] = useState('');
        const isVideo = useMemo(() => {
            if (!media.url) return false;
            return /\.(mp4|webm|mov|m4v)$/i.test(media.url);
        }, [media.url]);
        
        const related = useMemo(() => videos.filter(v => v.id !== media.id).slice(0, 10), [videos, media.id]);

        useEffect(() => { 
            window.scrollTo({top: 0, behavior: 'smooth'}); 
        }, [media.id]);

        const handleDelete = () => {
            setConfirmDialog({
                message: '確認要永久刪除這部作品嗎？',
                onConfirm: async () => {
                    const res = await api('delete_video', {id: media.id});
                    if (res.success) {
                        updateState(res);
                        setToastMsg({message: '作品已成功刪除'});
                        onBack();
                    } else {
                        setToastMsg({message: res.error || "刪除失敗", type: 'error'});
                    }
                }
            });
        };

        return (
          <div className="flex flex-col lg:flex-row gap-6 anim-fade-slide-up">
            {/* 左側：影片播放器 + 資訊 + (桌面端) 推薦內容 */}
            <div className="flex-[2] min-w-0 flex flex-col gap-6">
               {/* Player */}
               <div className="bg-black rounded-md overflow-hidden aspect-video shadow-md relative group">
                  {isVideo ? (
                    <video 
                        key={media.url} 
                        src={media.url} 
                        controls 
                        autoPlay 
                        className="w-full h-full object-contain" 
                        poster={media.cover}
                        playsInline
                        crossOrigin="anonymous"
                    />
                  ) : (
                    <img key={media.url} src={media.url} className="w-full h-full object-contain" alt={media.title} />
                  )}
                  <button onClick={onBack} className="absolute top-4 left-4 w-10 h-10 bg-black/50 backdrop-blur-md rounded-full flex items-center justify-center text-white opacity-0 group-hover:opacity-100 transition-all hover:scale-110 active:scale-95 z-10"><icons.X/></button>
               </div>

               {/* Info Box */}
               <div className="bg-white dark:bg-[#1e1e1e] rounded-md p-5 sm:p-6 shadow-sm border border-gray-100 dark:border-white/5">
                  <div className="flex items-start justify-between gap-4">
                    <h1 className="text-xl sm:text-2xl font-bold leading-snug flex-1">{media.title}</h1>
                    <div className="flex items-center gap-2">
                        <button onClick={async()=>{ const res=await api('like_video',{id:media.id}); updateState(res); }} className="flex items-center gap-2 px-4 py-2 bg-gray-50 dark:bg-white/5 hover:bg-primary-50 dark:hover:bg-primary-500/10 hover:text-primary-600 rounded-md font-semibold active:scale-95 transition-all group/like text-sm border border-transparent dark:border-white/5">
                           <icons.ThumbsUp className="text-gray-400 group-hover/like:text-primary-500" /> {media.likes}
                        </button>
                        {(appUser?.isAdmin || appUser?.username === media.author) && (
                           <button onClick={handleDelete} className="p-2.5 bg-red-50 dark:bg-red-500/10 text-red-500 rounded-md active:scale-95 transition-all hover:bg-red-100 dark:hover:bg-red-500/20" title="刪除內容"><icons.Trash/></button>
                        )}
                    </div>
                  </div>
                  
                  <div className="mt-5 flex items-center justify-between flex-wrap gap-4 pt-5 border-t border-gray-100 dark:border-white/5">
                     <div className="flex items-center gap-3">
                        <UserAvatar username={media.author} src={userMap[media.author]} className="w-10 h-10 ring-1 ring-gray-200 dark:ring-white/10" />
                        <div>
                           <p className="font-semibold text-[15px]">{media.author}</p>
                           <p className="text-[11px] text-gray-400 mt-0.5">{new Date(Number(media.created_at)).toLocaleDateString()} 發布</p>
                        </div>
                     </div>
                     {media.tags?.length > 0 && (
                        <div className="flex flex-wrap gap-2">
                           {media.tags.map(t => <span key={t} className="px-2.5 py-1 bg-gray-100 dark:bg-white/5 text-gray-600 dark:text-gray-300 text-xs rounded-md">#{t}</span>)}
                        </div>
                     )}
                  </div>
               </div>

               {/* Desktop: Related Videos placed on left side below Info */}
               <div className="hidden lg:block mt-2">
                  <h3 className="font-bold text-lg mb-4 px-1">為您推薦</h3>
                  <div className="grid grid-cols-2 gap-4">
                     {related.map(v => (
                       <div key={v.id} onClick={()=>onSelect(v.id)} className="flex gap-3 p-2 hover:bg-white dark:hover:bg-white/5 rounded-md cursor-pointer transition-all active:scale-[0.98] group">
                           <div className="w-32 aspect-video bg-gray-200 dark:bg-[#2c2c2c] rounded-md overflow-hidden shrink-0 relative border border-transparent dark:group-hover:border-white/5">
                              {v.cover ? <img src={v.cover} className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" alt={v.title} /> : <div className="w-full h-full flex items-center justify-center opacity-20"><icons.Play/></div>}
                           </div>
                           <div className="min-w-0 flex-1 py-0.5">
                              <h4 className="font-medium text-sm line-clamp-2 leading-snug group-hover:text-primary-600 transition-colors text-gray-800 dark:text-gray-200">{v.title}</h4>
                              <p className="text-xs text-gray-500 mt-1.5 truncate">{v.author}</p>
                           </div>
                       </div>
                     ))}
                  </div>
               </div>
            </div>

            {/* 右側：固定評論區 (大螢幕) */}
            <div className="w-full lg:w-[350px] flex flex-col gap-6 shrink-0">
               <div className="bg-white dark:bg-[#1e1e1e] rounded-md p-5 shadow-sm border border-gray-100 dark:border-white/5 flex flex-col lg:h-[calc(100vh-100px)] lg:sticky lg:top-[80px]">
                  <h3 className="font-bold text-base mb-4 flex items-center gap-2"><icons.Comment className="text-gray-400" /> 評論區 <span className="text-xs font-normal text-gray-500">({comments.filter(c=>c.videoId===media.id).length})</span></h3>
                  
                  {/* Input Box */}
                  <div className="flex gap-3 mb-5 shrink-0">
                     <UserAvatar username={appUser?.username} src={appUser?.avatar} className="w-8 h-8 shrink-0" />
                     <div className="flex-1 space-y-2">
                        <textarea value={text} onChange={e=>setText(e.target.value)} placeholder="分享看法..." className="w-full p-3 rounded-md bg-gray-50 dark:bg-[#252525] border border-transparent focus:border-primary-500/50 outline-none resize-none h-20 text-sm transition-all" />
                        <button onClick={async()=>{ if(!appUser)return setToastMsg({message: '請先登入', type: 'error'}); if(!text.trim())return; const res=await api('add_comment',{videoId:media.id,text}); if(res.success){updateState(res);setText(''); setToastMsg({message: '評論已發布'});} else setToastMsg({message: res.error, type: 'error'}); }} className="px-4 py-2 bg-primary-600 text-white rounded-md text-xs font-medium shadow-sm active:scale-95 transition-all ml-auto block hover:bg-primary-700">發表評論</button>
                     </div>
                  </div>

                  {/* Scrollable Comments List */}
                  <div className="flex-1 overflow-y-auto space-y-5 pr-1 scrollbar-hide">
                     {comments.filter(c=>c.videoId===media.id).map((c, idx) => (
                        <div key={c.id} className="flex gap-3 anim-fade-slide-up" style={{animationDelay: `${idx*30}ms`}}>
                           <UserAvatar username={c.author} src={userMap[c.author]} className="w-8 h-8 shrink-0" />
                           <div className="min-w-0 flex-1">
                              <p className="font-medium text-sm mb-1 text-gray-900 dark:text-gray-100">{c.author} <span className="text-[10px] text-gray-400 ml-1.5 font-normal">{new Date(Number(c.created_at)).toLocaleDateString()}</span></p>
                              <p className="text-[13px] text-gray-700 dark:text-gray-300 leading-relaxed break-words bg-gray-50 dark:bg-white/5 p-3 rounded-md rounded-tl-none">{c.text}</p>
                           </div>
                        </div>
                     ))}
                     {comments.filter(c=>c.videoId===media.id).length === 0 && (
                         <div className="text-center text-sm text-gray-400 py-10">目前還沒有評論，快來搶沙發！</div>
                     )}
                  </div>
               </div>

               {/* Mobile: Related Videos placed on right side but below comments naturally */}
               <div className="block lg:hidden space-y-4">
                  <h3 className="font-bold text-lg px-1">為您推薦</h3>
                  <div className="space-y-3">
                     {related.map(v => (
                       <div key={v.id} onClick={()=>onSelect(v.id)} className="flex gap-3 p-2 hover:bg-white dark:hover:bg-white/5 rounded-md cursor-pointer transition-all active:scale-[0.98] group">
                           <div className="w-32 aspect-video bg-gray-200 dark:bg-[#2c2c2c] rounded-md overflow-hidden shrink-0 relative">
                              {v.cover ? <img src={v.cover} className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" alt={v.title} /> : <div className="w-full h-full flex items-center justify-center opacity-20"><icons.Play/></div>}
                           </div>
                           <div className="min-w-0 flex-1 py-0.5">
                              <h4 className="font-medium text-sm line-clamp-2 leading-snug group-hover:text-primary-600 transition-colors text-gray-800 dark:text-gray-200">{v.title}</h4>
                              <p className="text-xs text-gray-500 mt-1.5 truncate">{v.author}</p>
                           </div>
                       </div>
                     ))}
                  </div>
               </div>
            </div>

          </div>
        );
    }

    function PublishModal({ onClose, onUpdate, serverInfo, setToastMsg }) {
        const [title, setTitle] = useState('');
        const [tags, setTags] = useState('');
        const [mediaFile, setMediaFile] = useState(null);
        const [coverFile, setCoverFile] = useState(null);
        const [loading, setLoading] = useState(false);

        const handleSave = async () => {
            if (!title || !mediaFile) return setToastMsg({message: '請填寫標題並選擇媒體文件', type: 'error'});
            setLoading(true);
            const fd = new FormData();
            fd.append('title', title);
            fd.append('tags', JSON.stringify(tags.split(',').map(s=>s.trim()).filter(s=>s)));
            fd.append('mediaFile', mediaFile);
            if(coverFile) fd.append('coverFile', coverFile);
            
            const res = await api('add_video', fd, true);
            if(res.success) {
                onUpdate(res);
                setToastMsg({message: '發布成功！'});
            } else {
                setToastMsg({message: "發布失敗: " + (res.error || "未知網路錯誤"), type: 'error'});
            }
            setLoading(false);
        };

        return (
          <div className="fixed inset-0 z-[1000] flex items-center justify-center p-4 bg-black/60 backdrop-blur-sm anim-fade-in">
             <div className="bg-white dark:bg-[#1e1e1e] rounded-md p-6 sm:p-8 max-w-lg w-full shadow-2xl anim-scale-pop border border-white/5">
                <h2 className="text-xl font-bold mb-2">發布內容</h2>
                {serverInfo && <p className="text-xs text-gray-500 mb-5">伺服器最大支持文件大小為 {serverInfo.post_max}。</p>}
                
                <div className="space-y-4">
                   <div className="space-y-1.5">
                      <p className="text-xs font-medium text-gray-500 ml-1">作品標題</p>
                      <input type="text" placeholder="輸入標題..." value={title} onChange={e=>setTitle(e.target.value)} className="w-full px-4 py-2.5 rounded-md bg-gray-50 dark:bg-[#252525] border border-transparent focus:border-primary-500/50 outline-none transition-all text-sm" />
                   </div>
                   <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                      <div className="space-y-1.5">
                         <p className="text-xs font-medium text-gray-500 ml-1">主媒體 (影片/圖片)</p>
                         <div className="relative h-20 bg-gray-50 dark:bg-[#252525] rounded-md border border-dashed border-gray-300 dark:border-white/10 flex items-center justify-center hover:border-primary-500/50 transition-colors cursor-pointer overflow-hidden group">
                            <span className="text-xs text-gray-500 group-hover:text-primary-500 p-2 text-center truncate w-full px-4">{mediaFile ? mediaFile.name : '點擊選擇文件'}</span>
                            <input type="file" accept="image/*,video/*" onChange={e=>setMediaFile(e.target.files[0])} className="absolute inset-0 opacity-0 cursor-pointer" />
                         </div>
                      </div>
                      <div className="space-y-1.5">
                         <p className="text-xs font-medium text-gray-500 ml-1">封面圖 (可選)</p>
                         <div className="relative h-20 bg-gray-50 dark:bg-[#252525] rounded-md border border-dashed border-gray-300 dark:border-white/10 flex items-center justify-center hover:border-primary-500/50 transition-colors cursor-pointer overflow-hidden group">
                            <span className="text-xs text-gray-500 group-hover:text-primary-500 p-2 text-center truncate w-full px-4">{coverFile ? coverFile.name : '設置封面'}</span>
                            <input type="file" accept="image/*" onChange={e=>setCoverFile(e.target.files[0])} className="absolute inset-0 opacity-0 cursor-pointer" />
                         </div>
                      </div>
                   </div>
                   <div className="space-y-1.5">
                      <p className="text-xs font-medium text-gray-500 ml-1">標籤 (用逗號隔開)</p>
                      <input type="text" placeholder="例如: 生活, 攝影, VLOG" value={tags} onChange={e=>setTags(e.target.value)} className="w-full px-4 py-2.5 rounded-md bg-gray-50 dark:bg-[#252525] border border-transparent focus:border-primary-500/50 outline-none transition-all text-sm" />
                   </div>
                   <div className="flex gap-3 pt-3">
                      <button onClick={onClose} className="flex-1 py-2.5 text-sm font-medium text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-white/5 rounded-md transition-all">取消</button>
                      <button onClick={handleSave} disabled={loading} className="flex-[2] py-2.5 bg-primary-600 text-white rounded-md text-sm font-medium shadow-md shadow-primary-600/20 active:scale-95 disabled:opacity-50 transition-all flex items-center justify-center gap-2 hover:bg-primary-700">
                        {loading && <div className="w-3.5 h-3.5 border-2 border-white/30 border-t-white rounded-full animate-spin"></div>}
                        {loading ? '上傳處理中...' : '確認發布'}
                      </button>
                   </div>
                </div>
             </div>
          </div>
        );
    }

    function AuthModal({ onClose, onAuth }) {
      const [u, setU] = useState(''); const [p, setP] = useState('');
      return (
        <div className="fixed inset-0 z-[1000] flex items-center justify-center p-4 bg-black/60 backdrop-blur-sm anim-fade-in">
          <div className="bg-white dark:bg-[#1e1e1e] rounded-md p-8 max-w-sm w-full shadow-2xl anim-scale-pop border border-white/5">
            <div className="w-12 h-12 bg-primary-600 rounded-md flex items-center justify-center text-white text-lg font-bold mx-auto mb-4 shadow-md shadow-primary-600/20">PH</div>
            <h2 className="text-xl font-bold text-center mb-6">登入 PonyHub</h2>
            <div className="space-y-3">
              <input type="text" placeholder="您的用戶名" value={u} onChange={e=>setU(e.target.value)} className="w-full px-4 py-2.5 rounded-md bg-gray-50 dark:bg-[#252525] border border-transparent focus:border-primary-500/50 outline-none transition-all text-sm" />
              <input type="password" placeholder="登入密碼" value={p} onChange={e=>setP(e.target.value)} className="w-full px-4 py-2.5 rounded-md bg-gray-50 dark:bg-[#252525] border border-transparent focus:border-primary-500/50 outline-none transition-all text-sm" />
              <button onClick={()=>onAuth(u,p)} className="w-full py-3 bg-primary-600 text-white rounded-md font-medium shadow-md shadow-primary-600/20 active:scale-95 transition-all mt-4 hover:bg-primary-700 text-sm">立即進入</button>
              <button onClick={onClose} className="w-full py-2 text-sm text-gray-500 hover:text-gray-700 dark:hover:text-gray-300">關閉</button>
            </div>
          </div>
        </div>
      );
    }

    const root = ReactDOM.createRoot(document.getElementById('root'));
    root.render(<App />);
    </script>
</body>
</html>