<?php
// Premium Web Hosting - HTML, CSS, JS Only
session_start();

// Generate unique user ID if not exists
if (!isset($_COOKIE['user_id'])) {
    $user_id = 'user_' . uniqid() . '_' . time();
    setcookie('user_id', $user_id, time() + (86400 * 365), "/"); // 1 year
    $_COOKIE['user_id'] = $user_id;
} else {
    $user_id = $_COOKIE['user_id'];
}

// User's directory
$user_dir = 'sites/' . $user_id;

// Handle file upload with custom URL
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    
    // Single file upload
    if (isset($_FILES['html_file']) && !empty($_FILES['html_file']['name'])) {
        $file = $_FILES['html_file'];
        $custom_url = trim($_POST['custom_url']) ?: generateCustomUrl($file['name']);
        $site_password = trim($_POST['site_password']) ?: '';
        
        if ($file['error'] === UPLOAD_ERR_OK) {
            $file_name = $file['name'];
            $file_tmp = $file['tmp_name'];
            $file_ext = strtolower(pathinfo($file_name, PATHINFO_EXTENSION));
            
            // Allowed file types - ONLY HTML, CSS, JS, ZIP
            $allowed_types = ['html', 'htm', 'css', 'js', 'zip'];
            
            if (in_array($file_ext, $allowed_types)) {
                if (!is_dir($user_dir)) {
                    mkdir($user_dir, 0777, true);
                }
                
                // Clean custom URL
                $custom_url = cleanCustomUrl($custom_url);
                
                if ($file_ext === 'zip') {
                    // Handle ZIP file upload
                    $result = handleZipUpload($file_tmp, $custom_url, $user_id, $site_password);
                    if ($result['success']) {
                        $website_url = getWebsiteUrl($custom_url, $user_id);
                        $_SESSION['success'] = "ZIP file extracted successfully! " . $result['message'];
                        $_SESSION['file_url'] = $website_url;
                        $_SESSION['file_name'] = $file_name;
                    } else {
                        $_SESSION['error'] = $result['message'];
                    }
                } else {
                    // Handle single file upload
                    $file_path = $user_dir . '/' . $custom_url . '.' . $file_ext;
                    $meta_path = $user_dir . '/' . $custom_url . '.json';
                    
                    // Check if URL already exists
                    if (file_exists($file_path)) {
                        $_SESSION['error'] = "This URL is already taken. Please choose a different one.";
                    } else {
                        if (move_uploaded_file($file_tmp, $file_path)) {
                            // Save metadata (password, etc.)
                            $metadata = [
                                'password' => $site_password,
                                'created' => time(),
                                'filename' => $file_name,
                                'original_name' => $custom_url
                            ];
                            file_put_contents($meta_path, json_encode($metadata));
                            
                            $website_url = getWebsiteUrl($custom_url, $user_id);
                            $_SESSION['success'] = "File uploaded successfully!";
                            $_SESSION['file_url'] = $website_url;
                            $_SESSION['file_name'] = $file_name;
                        } else {
                            $_SESSION['error'] = "Error uploading file. Check folder permissions.";
                        }
                    }
                }
            } else {
                $_SESSION['error'] = "Only HTML, CSS, JavaScript, and ZIP files are allowed.";
            }
        } else {
            $_SESSION['error'] = "File upload error. Please try again. Error code: " . $file['error'];
        }
    }
    
    // Code editor upload
    elseif (isset($_POST['html_code'])) {
        $html_code = $_POST['html_code'];
        $custom_url = trim($_POST['code_custom_url']) ?: generateCustomUrl('my-website');
        $site_password = trim($_POST['code_site_password']) ?: '';
        
        if (!empty($html_code)) {
            if (!is_dir($user_dir)) {
                mkdir($user_dir, 0777, true);
            }
            
            $custom_url = cleanCustomUrl($custom_url);
            $file_path = $user_dir . '/' . $custom_url . '.html';
            $meta_path = $user_dir . '/' . $custom_url . '.json';
            
            // Check if URL already exists
            if (file_exists($file_path)) {
                $_SESSION['error'] = "This URL is already taken. Please choose a different one.";
            } else {
                if (file_put_contents($file_path, $html_code)) {
                    // Save metadata
                    $metadata = [
                        'password' => $site_password,
                        'created' => time(),
                        'filename' => $custom_url . '.html',
                        'original_name' => $custom_url
                    ];
                    file_put_contents($meta_path, json_encode($metadata));
                    
                    $website_url = getWebsiteUrl($custom_url, $user_id);
                    $_SESSION['success'] = "Website created successfully!";
                    $_SESSION['file_url'] = $website_url;
                    $_SESSION['file_name'] = $custom_url . '.html';
                } else {
                    $_SESSION['error'] = "Error creating file. Check folder permissions.";
                }
            }
        } else {
            $_SESSION['error'] = "Please enter HTML code.";
        }
    }
    
    // Handle site deletion
    elseif (isset($_POST['delete_site'])) {
        $site_to_delete = $_POST['delete_site'];
        deleteSite($site_to_delete, $user_id);
        $_SESSION['success'] = "Site deleted successfully!";
    }
    
    // Handle site renaming
    elseif (isset($_POST['rename_site'])) {
        $old_name = $_POST['old_name'];
        $new_name = cleanCustomUrl($_POST['new_name']);
        
        if (renameSite($old_name, $new_name, $user_id)) {
            $_SESSION['success'] = "Site renamed successfully!";
        } else {
            $_SESSION['error'] = "Error renaming site. Name might be taken.";
        }
    }
    
    // Handle password update
    elseif (isset($_POST['update_password'])) {
        $site_name = $_POST['site_name'];
        $new_password = $_POST['new_password'];
        
        if (updateSitePassword($site_name, $new_password, $user_id)) {
            $_SESSION['success'] = "Password updated successfully!";
        } else {
            $_SESSION['error'] = "Error updating password.";
        }
    }
    
    header("Location: index.php");
    exit;
}

// Handle ZIP file upload and extraction
function handleZipUpload($zip_tmp, $custom_url, $user_id, $password) {
    if (!class_exists('ZipArchive')) {
        return ['success' => false, 'message' => 'ZIP extraction not supported on this server.'];
    }
    
    $zip = new ZipArchive();
    $result = ['success' => false, 'message' => ''];
    
    if ($zip->open($zip_tmp) === TRUE) {
        $extract_path = 'sites/' . $user_id . '/' . $custom_url;
        
        // Create directory for extracted files
        if (!is_dir($extract_path)) {
            mkdir($extract_path, 0777, true);
        }
        
        $allowed_extensions = ['html', 'htm', 'css', 'js', 'txt'];
        $has_html = false;
        $extracted_files = [];
        
        // Extract allowed files only
        for ($i = 0; $i < $zip->numFiles; $i++) {
            $filename = $zip->getNameIndex($i);
            $file_ext = strtolower(pathinfo($filename, PATHINFO_EXTENSION));
            
            // Skip directories and non-allowed files
            if (substr($filename, -1) === '/' || !in_array($file_ext, $allowed_extensions)) {
                continue;
            }
            
            // Extract file
            $file_content = $zip->getFromIndex($i);
            $safe_filename = basename($filename);
            
            if ($file_content !== false) {
                file_put_contents($extract_path . '/' . $safe_filename, $file_content);
                $extracted_files[] = $safe_filename;
                
                if ($file_ext === 'html' || $file_ext === 'htm') {
                    $has_html = true;
                }
            }
        }
        
        $zip->close();
        
        if ($has_html) {
            // Save metadata for ZIP site
            $meta_path = 'sites/' . $user_id . '/' . $custom_url . '.json';
            $metadata = [
                'password' => $password,
                'created' => time(),
                'filename' => $custom_url,
                'original_name' => $custom_url,
                'is_zip' => true,
                'files' => $extracted_files
            ];
            file_put_contents($meta_path, json_encode($metadata));
            
            $result['success'] = true;
            $result['message'] = count($extracted_files) . " files extracted successfully.";
        } else {
            // Clean up if no HTML file found
            array_map('unlink', glob("$extract_path/*"));
            rmdir($extract_path);
            $result['message'] = "ZIP file must contain at least one HTML file.";
        }
    } else {
        $result['message'] = "Failed to open ZIP file.";
    }
    
    return $result;
}

// Generate custom URL from filename
function generateCustomUrl($filename) {
    $name = pathinfo($filename, PATHINFO_FILENAME);
    $name = preg_replace('/[^a-z0-9]/', '-', strtolower($name));
    $name = preg_replace('/-+/', '-', $name);
    $name = trim($name, '-');
    return $name ?: 'my-site';
}

// Clean custom URL
function cleanCustomUrl($url) {
    $url = preg_replace('/[^a-z0-9-]/', '', strtolower($url));
    $url = preg_replace('/-+/', '-', $url);
    $url = trim($url, '-');
    return $url ?: 'my-site';
}

// Get website full URL
function getWebsiteUrl($path, $user_id) {
    $protocol = isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off' ? 'https' : 'http';
    $host = $_SERVER['HTTP_HOST'];
    $base_url = $protocol . '://' . $host . dirname($_SERVER['PHP_SELF']);
    return rtrim($base_url, '/') . '/view.php?site=' . $path . '&user=' . $user_id;
}

// Delete site
function deleteSite($site_name, $user_id) {
    $base_path = 'sites/' . $user_id . '/';
    
    // Check if it's a ZIP site (directory)
    $dir_path = $base_path . $site_name;
    if (is_dir($dir_path)) {
        // Delete all files in directory
        array_map('unlink', glob("$dir_path/*.*"));
        rmdir($dir_path);
        
        // Delete metadata
        $meta_file = $base_path . $site_name . '.json';
        if (file_exists($meta_file)) {
            unlink($meta_file);
        }
    } else {
        // Delete single file with all extensions
        $extensions = ['html', 'htm', 'css', 'js', 'json'];
        foreach ($extensions as $ext) {
            $file_path = $base_path . $site_name . '.' . $ext;
            if (file_exists($file_path)) {
                unlink($file_path);
            }
        }
    }
    
    return true;
}

// Rename site
function renameSite($old_name, $new_name, $user_id) {
    $base_path = 'sites/' . $user_id . '/';
    
    // Check if new name already exists
    $new_meta = $base_path . $new_name . '.json';
    if (file_exists($new_meta)) {
        return false;
    }
    
    // Check if it's a ZIP site
    $old_dir = $base_path . $old_name;
    if (is_dir($old_dir)) {
        $new_dir = $base_path . $new_name;
        if (!rename($old_dir, $new_dir)) {
            return false;
        }
        
        // Rename metadata file
        $old_meta = $base_path . $old_name . '.json';
        if (file_exists($old_meta)) {
            rename($old_meta, $new_meta);
            
            // Update metadata
            $metadata = json_decode(file_get_contents($new_meta), true);
            $metadata['filename'] = $new_name;
            $metadata['original_name'] = $new_name;
            file_put_contents($new_meta, json_encode($metadata));
        }
    } else {
        // Rename single file
        $extensions = ['html', 'htm', 'css', 'js'];
        $renamed = false;
        
        foreach ($extensions as $ext) {
            $old_file = $base_path . $old_name . '.' . $ext;
            if (file_exists($old_file)) {
                $new_file = $base_path . $new_name . '.' . $ext;
                if (!rename($old_file, $new_file)) {
                    return false;
                }
                $renamed = true;
                break;
            }
        }
        
        if ($renamed) {
            // Rename metadata
            $old_meta = $base_path . $old_name . '.json';
            $new_meta = $base_path . $new_name . '.json';
            if (file_exists($old_meta)) {
                rename($old_meta, $new_meta);
                
                // Update metadata
                $metadata = json_decode(file_get_contents($new_meta), true);
                $metadata['filename'] = $new_name . '.' . pathinfo($new_file, PATHINFO_EXTENSION);
                $metadata['original_name'] = $new_name;
                file_put_contents($new_meta, json_encode($metadata));
            }
        }
    }
    
    return true;
}

// Update site password
function updateSitePassword($site_name, $new_password, $user_id) {
    $meta_path = 'sites/' . $user_id . '/' . $site_name . '.json';
    
    if (file_exists($meta_path)) {
        $metadata = json_decode(file_get_contents($meta_path), true);
        $metadata['password'] = $new_password;
        file_put_contents($meta_path, json_encode($metadata));
        return true;
    }
    
    return false;
}

// Get list of uploaded sites for current user
$uploaded_sites = [];
$total_size = 0;

if (is_dir($user_dir)) {
    $files = scandir($user_dir);
    foreach ($files as $file) {
        if ($file !== '.' && $file !== '..' && !str_ends_with($file, '.json')) {
            $file_path = $user_dir . '/' . $file;
            
            if (is_dir($file_path)) {
                // Handle directory (ZIP extracted sites)
                $html_files = glob($file_path . '/*.{html,htm}', GLOB_BRACE);
                if (!empty($html_files)) {
                    $site_name = $file;
                    $meta_path = $user_dir . '/' . $site_name . '.json';
                    $metadata = file_exists($meta_path) ? json_decode(file_get_contents($meta_path), true) : [];
                    
                    $uploaded_sites[] = [
                        'name' => $site_name,
                        'filename' => $file,
                        'url' => getWebsiteUrl($site_name, $user_id),
                        'time' => filemtime($file_path),
                        'size' => getDirectorySize($file_path),
                        'type' => 'zip',
                        'is_dir' => true,
                        'has_password' => !empty($metadata['password']),
                        'metadata' => $metadata
                    ];
                    
                    $total_size += getDirectorySize($file_path);
                }
            } else {
                // Handle single files
                $file_ext = strtolower(pathinfo($file, PATHINFO_EXTENSION));
                
                // Only show allowed file types
                if (in_array($file_ext, ['html', 'htm', 'css', 'js'])) {
                    $site_name = pathinfo($file, PATHINFO_FILENAME);
                    $meta_path = $user_dir . '/' . $site_name . '.json';
                    $metadata = file_exists($meta_path) ? json_decode(file_get_contents($meta_path), true) : [];
                    
                    $uploaded_sites[] = [
                        'name' => $site_name,
                        'filename' => $file,
                        'url' => getWebsiteUrl($site_name, $user_id),
                        'time' => filemtime($file_path),
                        'size' => filesize($file_path),
                        'type' => $file_ext,
                        'is_dir' => false,
                        'has_password' => !empty($metadata['password']),
                        'metadata' => $metadata
                    ];
                    
                    $total_size += filesize($file_path);
                }
            }
        }
    }
    
    // Sort by newest first
    usort($uploaded_sites, function($a, $b) {
        return $b['time'] - $a['time'];
    });
}

// Get directory size recursively
function getDirectorySize($path) {
    $total_size = 0;
    $files = scandir($path);
    
    foreach ($files as $file) {
        if ($file !== '.' && $file !== '..') {
            $file_path = $path . '/' . $file;
            if (is_file($file_path)) {
                $total_size += filesize($file_path);
            } elseif (is_dir($file_path)) {
                $total_size += getDirectorySize($file_path);
            }
        }
    }
    
    return $total_size;
}

// Convert bytes to human readable format
function formatSize($bytes) {
    if ($bytes == 0) return '0 B';
    $units = ['B', 'KB', 'MB', 'GB'];
    $bytes = max($bytes, 0);
    $pow = floor(($bytes ? log($bytes) : 0) / log(1024));
    $pow = min($pow, count($units) - 1);
    $bytes /= pow(1024, $pow);
    return round($bytes, 2) . ' ' . $units[$pow];
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>TF DEV | FREE HOSTING</title>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@500;700;900&family=Inter:wght@400;600&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        /* --- THEME SYSTEM --- */
        :root { 
            --primary-color: #00ffff;
            --primary-hover: #00cccc;
            --gradient-1: #00ffff;
            --gradient-2: #ff00ff;
            --bg-main: #0a0a0c; 
            --card-bg: #141417;
            --border-color: #27272a;
            --text-main: #ffffff;
            --text-muted: #a1a1aa;
            --success: #10b981;
            --error: #ef4444;
            --input-bg: #09090b;
            --bg-gradient-start: #1e1e24;
        }

        body.light-theme {
            --primary-color: #0066ff;
            --primary-hover: #0052cc;
            --gradient-1: #0066ff;
            --gradient-2: #cc00ff;
            --bg-main: #f4f4f5; 
            --card-bg: #ffffff;
            --border-color: #e4e4e7;
            --text-main: #09090b;
            --text-muted: #52525b;
            --input-bg: #f4f4f5;
            --bg-gradient-start: #ffffff;
        }

        * { margin: 0; padding: 0; box-sizing: border-box; }
        
        body {
            background-color: var(--bg-main);
            color: var(--text-main); 
            font-family: 'Inter', sans-serif;
            min-height: 100vh; 
            display: flex; 
            flex-direction: column;
            align-items: center;
            overflow-x: hidden;
            background-image: radial-gradient(circle at 50% 0%, var(--bg-gradient-start) 0%, var(--bg-main) 60%);
            transition: background-color 0.4s, color 0.4s;
            padding-bottom: 80px;
        }

        /* --- Theme Toggle Button --- */
        .theme-toggle-btn {
            position: fixed; top: 20px; left: 20px; z-index: 998;
            width: 45px; height: 45px; border-radius: 50%;
            background: var(--card-bg); border: 1px solid var(--border-color);
            color: var(--text-main); font-size: 1.2rem;
            display: flex; justify-content: center; align-items: center;
            cursor: pointer; transition: 0.3s; box-shadow: 0 4px 12px rgba(0,0,0,0.2);
        }
        .theme-toggle-btn:hover { transform: scale(1.1); border-color: var(--primary-color); color: var(--primary-color); }

        /* --- Toast Notifications --- */
        .toast-container { position: fixed; top: 20px; right: 20px; z-index: 9999; display: flex; flex-direction: column; gap: 10px; }
        .toast {
            background: var(--card-bg); border: 1px solid var(--border-color);
            border-left: 5px solid var(--primary-color); border-radius: 8px; padding: 16px 20px;
            font-family: 'Poppins', sans-serif; font-size: 0.95rem; font-weight: 600;
            color: var(--text-main); box-shadow: 0 10px 25px rgba(0,0,0,0.2);
            transform: translateX(120%); transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            display: flex; align-items: center; gap: 12px;
        }
        .toast.show { transform: translateX(0); }
        .toast.success { border-left-color: var(--success); }
        .toast.error { border-left-color: var(--error); }

        /* --- Intro Animation (Splash Screen) --- */
        #splash-screen {
            position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
            background: var(--bg-main); z-index: 10000;
            display: flex; flex-direction: column; justify-content: center; align-items: center;
            opacity: 1; transition: opacity 0.5s ease-out;
        }
        #splash-screen.fade-out { opacity: 0; pointer-events: none; }
        .splash-logo {
            font-size: 80px; color: var(--text-main); margin-bottom: 15px;
            background: linear-gradient(45deg, var(--gradient-1), var(--gradient-2));
            -webkit-background-clip: text; -webkit-text-fill-color: transparent;
            animation: popIn 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
        }
        .splash-text {
            font-family: 'Poppins', sans-serif; font-size: 2.5rem; font-weight: 900;
            color: var(--text-main); letter-spacing: 1px;
            opacity: 0; transform: translateY(20px);
            animation: slideUpFade 0.6s ease forwards 0.3s;
        }

        @keyframes popIn { 0% { transform: scale(0.5); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
        @keyframes slideUpFade { to { opacity: 1; transform: translateY(0); } }

        /* --- Main Branding --- */
        .brand-header { margin-top: 80px; margin-bottom: 30px; text-align: center; width: 100%; }
        .brand-header h1 {
            font-family: 'Poppins', sans-serif; font-size: 2.5rem; font-weight: 900;
            letter-spacing: -1px; color: var(--text-main); transition: 0.4s;
        }
        .brand-header h1 span { 
            background: linear-gradient(45deg, var(--gradient-1), var(--gradient-2));
            -webkit-background-clip: text; -webkit-text-fill-color: transparent; 
        }
        .brand-header p { font-family: 'Inter', sans-serif; font-size: 0.95rem; font-weight: 600; color: var(--text-muted); margin-top: 5px; letter-spacing: 2px; }
        
        .domain-example {
            background: var(--input-bg);
            padding: 10px 20px;
            border-radius: 8px;
            margin: 15px auto;
            font-family: monospace;
            color: var(--primary-color);
            font-size: 0.85rem;
            border: 1px solid var(--border-color);
            display: inline-block;
        }

        /* --- Grid Layout for Hosting --- */
        .main-container {
            width: 95%; max-width: 1100px;
            display: grid;
            grid-template-columns: 1fr;
            gap: 25px;
        }
        @media (min-width: 850px) {
            .main-container { grid-template-columns: 1fr 1fr; }
        }

        /* --- Main Pro Card --- */
        .pro-card {
            background: var(--card-bg); border: 1px solid var(--border-color);
            border-radius: 24px; padding: 30px; width: 100%;
            box-shadow: 0 20px 40px rgba(0,0,0,0.15);
            position: relative; transition: 0.4s;
        }

        .card-title {
            font-family: 'Poppins', sans-serif; font-size: 1.4rem; font-weight: 700;
            color: var(--text-main); margin-bottom: 20px;
            display: flex; align-items: center; justify-content: center; gap: 12px;
        }
        .card-title i { 
            font-size: 1.6rem; 
            background: linear-gradient(45deg, var(--gradient-1), var(--gradient-2));
            -webkit-background-clip: text; -webkit-text-fill-color: transparent; 
        }

        /* --- Tabs --- */
        .tabs {
            display: flex; background: var(--input-bg); border-radius: 12px;
            padding: 5px; margin-bottom: 25px; border: 1px solid var(--border-color);
        }
        .tab {
            flex: 1; padding: 10px; cursor: pointer; text-align: center;
            color: var(--text-muted); font-size: 0.85rem; font-weight: 600; font-family: 'Inter';
            border-radius: 8px; transition: 0.3s;
        }
        .tab.active { background: var(--card-bg); color: var(--primary-color); box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
        .tab-content { display: none; }
        .tab-content.active { display: block; animation: slideUpFade 0.4s ease forwards; }

        /* --- Input Fields --- */
        label { display: block; margin-bottom: 8px; font-weight: 600; color: var(--text-muted); font-size: 0.85rem; }
        .input-group { position: relative; margin-bottom: 20px; }
        .input-group i { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: var(--text-muted); font-size: 1.1rem; transition: 0.3s; }
        
        input[type="text"], input[type="password"], textarea {
            width: 100%; padding: 15px 15px 15px 45px; 
            background: var(--input-bg); border: 2px solid var(--border-color); 
            border-radius: 12px; color: var(--text-main); font-size: 1rem; font-family: 'Inter', sans-serif; font-weight: 500;
            outline: none; transition: 0.3s;
        }
        input:focus, textarea:focus { border-color: var(--primary-color); }
        input:focus + i { color: var(--primary-color); }
        
        textarea { padding: 15px; min-height: 200px; resize: vertical; font-family: monospace; }
        
        .password-input-group { display: flex; gap: 10px; align-items: center; }
        .password-input-group .input-wrapper { position: relative; flex: 1; }
        .password-input-group .input-wrapper input { padding-left: 45px; }
        .password-toggle {
            background: var(--input-bg); border: 2px solid var(--border-color);
            color: var(--text-muted); cursor: pointer; border-radius: 12px;
            padding: 0 15px; height: 50px; transition: 0.3s;
        }
        .password-toggle:hover { color: var(--primary-color); border-color: var(--primary-color); }

        .file-input {
            padding: 30px; border: 2px dashed var(--border-color); border-radius: 12px;
            text-align: center; cursor: pointer; transition: 0.3s; background: var(--input-bg);
            margin-bottom: 20px;
        }
        .file-input:hover { border-color: var(--primary-color); background: rgba(0, 255, 255, 0.05); }
        .file-input i { font-size: 2rem; color: var(--primary-color); margin-bottom: 10px; }
        .file-input p { font-weight: 600; color: var(--text-main); margin-bottom: 5px; }
        .file-input small { color: var(--text-muted); font-size: 0.8rem; }

        /* --- Buttons --- */
        .btn-core {
            width: 100%; padding: 16px; border: none; border-radius: 12px;
            background: linear-gradient(45deg, var(--gradient-1), var(--gradient-2)); 
            color: #fff; font-size: 1.1rem; font-weight: 700;
            font-family: 'Poppins', sans-serif; cursor: pointer; transition: 0.3s;
            display: flex; justify-content: center; align-items: center; gap: 10px;
        }
        .btn-core:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0, 255, 255, 0.3); }
        
        .btn-secondary {
            background: var(--input-bg); border: 1px solid var(--border-color); color: var(--text-main);
            padding: 8px 15px; font-size: 0.85rem; font-family: 'Inter'; font-weight: 600;
            border-radius: 8px; cursor: pointer; transition: 0.3s;
            display: inline-flex; align-items: center; gap: 6px; justify-content: center;
        }
        .btn-secondary:hover { border-color: var(--primary-color); color: var(--primary-color); }
        .btn-danger { color: #ef4444; } .btn-danger:hover { border-color: #ef4444; color: #ef4444; }

        /* --- Sites List & Stats --- */
        .stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-top: 25px; }
        .stat-box { background: var(--input-bg); border: 1px solid var(--border-color); border-radius: 12px; padding: 15px; text-align: center; }
        .stat-box h3 { font-size: 1.5rem; color: var(--primary-color); font-family: 'Poppins'; }
        .stat-box p { font-size: 0.8rem; color: var(--text-muted); font-weight: 600; }

        .site-list { display: flex; flex-direction: column; gap: 12px; max-height: 500px; overflow-y: auto; padding-right: 5px; }
        .site-item { 
            background: var(--input-bg); padding: 16px; border-radius: 12px; 
            border: 1px solid var(--border-color); transition: 0.3s;
        }
        .site-item:hover { border-color: var(--primary-color); }
        .site-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
        .site-name { font-family: 'Poppins'; font-weight: 700; font-size: 1rem; color: var(--text-main); word-break: break-all; }
        .badge { background: rgba(0,255,255,0.1); color: var(--primary-color); padding: 3px 8px; border-radius: 20px; font-size: 0.7rem; margin-left: 8px; }
        .badge-lock { background: rgba(239, 68, 68, 0.1); color: var(--error); }
        .site-meta { font-size: 0.8rem; color: var(--text-muted); display: flex; gap: 15px; margin-bottom: 12px; }
        .site-meta i { color: var(--primary-color); }
        .site-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
        .site-actions-row2 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-top: 8px; }

        .preview-iframe { width: 100%; height: 300px; border: 2px solid var(--border-color); border-radius: 12px; background: #fff; margin-top: 15px; }

        /* --- Modals --- */
        .modal {
            display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
            background: rgba(0, 0, 0, 0.8); backdrop-filter: blur(5px); z-index: 10000;
            align-items: center; justify-content: center; padding: 20px;
        }
        .modal-content {
            background: var(--card-bg); padding: 30px; border-radius: 24px;
            max-width: 400px; width: 100%; border: 1px solid var(--border-color);
            box-shadow: 0 20px 50px rgba(0,0,0,0.5); animation: popIn 0.3s ease-out;
        }
        .modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
        .modal-header h3 { font-family: 'Poppins'; color: var(--text-main); }
        .close-modal { background: none; border: none; color: var(--text-muted); font-size: 1.5rem; cursor: pointer; transition: 0.3s; }
        .close-modal:hover { color: var(--error); }
        .modal-actions { display: flex; gap: 10px; margin-top: 20px; }
        .modal-actions button { flex: 1; }

        /* --- Animated WhatsApp Float Button --- */
        .whatsapp-float {
            position: fixed; width: 60px; height: 60px; bottom: 30px; right: 30px;
            background-color: #25d366; color: #FFF; border-radius: 50px; text-align: center;
            font-size: 35px; z-index: 1000; display: flex; align-items: center; justify-content: center;
            text-decoration: none; box-shadow: 2px 2px 15px rgba(37, 211, 102, 0.4);
            animation: pulse-wa 2s infinite; transition: transform 0.3s;
        }
        .whatsapp-float:hover { transform: scale(1.1); animation: none; }

        @keyframes pulse-wa {
            0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7); }
            70% { box-shadow: 0 0 0 15px rgba(37, 211, 102, 0); }
            100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
        }

        footer { margin-top: 40px; font-family: 'Inter', sans-serif; font-size: 0.9rem; font-weight: 500; color: var(--text-muted); text-align: center; }
        footer b { color: var(--text-main); font-weight: 700; }
        
        /* Scrollbar */
        ::-webkit-scrollbar { width: 8px; }
        ::-webkit-scrollbar-track { background: var(--bg-main); }
        ::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 4px; }
        ::-webkit-scrollbar-thumb:hover { background: var(--primary-color); }
    </style>
</head>
<body>

    <button class="theme-toggle-btn" id="themeToggle" onclick="toggleTheme()" title="Toggle Light/Dark Mode">
        <i class="fa-solid fa-moon" id="themeIcon"></i>
    </button>

    <div class="toast-container" id="toastBox"></div>

    <div id="splash-screen">
        <i class="fas fa-server splash-logo"></i>
        <h1 class="splash-text">TF HOSTING</h1>
    </div>

    <div class="modal" id="editModal">
        <div class="modal-content">
            <div class="modal-header">
                <h3>Edit Site Name</h3>
                <button class="close-modal" onclick="closeModal('editModal')">&times;</button>
            </div>
            <form method="POST">
                <input type="hidden" id="editSiteName" name="old_name">
                <div class="input-group">
                    <i class="fas fa-pen"></i>
                    <input type="text" id="newSiteName" name="new_name" placeholder="New Name" required>
                </div>
                <div class="modal-actions">
                    <button type="button" class="btn-secondary" onclick="closeModal('editModal')">Cancel</button>
                    <button type="submit" name="rename_site" class="btn-core" style="padding: 12px; font-size: 1rem;">Save</button>
                </div>
            </form>
        </div>
    </div>

    <div class="modal" id="passwordModal">
        <div class="modal-content">
            <div class="modal-header">
                <h3>Set Password</h3>
                <button class="close-modal" onclick="closeModal('passwordModal')">&times;</button>
            </div>
            <form method="POST">
                <input type="hidden" id="passwordSiteName" name="site_name">
                <label>Leave empty to remove password</label>
                <div class="password-input-group" style="margin-bottom: 20px;">
                    <div class="input-wrapper">
                        <i class="fas fa-lock" style="position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: var(--text-muted); z-index: 2;"></i>
                        <input type="password" id="sitePassword" name="new_password" placeholder="New Password">
                    </div>
                    <button type="button" class="password-toggle" onclick="togglePassword('sitePassword')">
                        <i class="fas fa-eye"></i>
                    </button>
                </div>
                <div class="modal-actions">
                    <button type="button" class="btn-secondary" onclick="closeModal('passwordModal')">Cancel</button>
                    <button type="submit" name="update_password" class="btn-core" style="padding: 12px; font-size: 1rem;">Update</button>
                </div>
            </form>
        </div>
    </div>

    <div class="brand-header">
        <h1>TF DEV <span>HOSTING</span></h1>
        <p>PREMIUM FREE SYSTEM</p>
        <div class="domain-example">
            ID: <?php echo substr($user_id, 0, 15); ?>...
        </div>
    </div>

    <div class="main-container">
        <div class="pro-card">
            <div class="card-title">
                <i class="fas fa-cloud-upload-alt"></i>
                Deploy Project
            </div>
            
            <div class="tabs">
                <div class="tab active" onclick="switchTab('single-tab')">Upload File</div>
                <div class="tab" onclick="switchTab('code-tab')">Code Editor</div>
                <div class="tab" onclick="switchTab('preview-tab')">Preview</div>
            </div>
            
            <div class="tab-content active" id="single-tab">
                <form method="POST" enctype="multipart/form-data">
                    <label>Custom URL Path</label>
                    <div class="input-group">
                        <i class="fas fa-link"></i>
                        <input type="text" name="custom_url" placeholder="my-awesome-site" id="single-url" required>
                    </div>
                    
                    <label>Password Protection (Optional)</label>
                    <div class="password-input-group" style="margin-bottom: 20px;">
                        <div class="input-wrapper">
                            <i class="fas fa-lock" style="position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: var(--text-muted); z-index: 2;"></i>
                            <input type="password" name="site_password" id="up-pass" placeholder="Leave empty for public">
                        </div>
                        <button type="button" class="password-toggle" onclick="togglePassword('up-pass')">
                            <i class="fas fa-eye"></i>
                        </button>
                    </div>
                    
                    <div class="file-input" onclick="document.getElementById('html_file').click()">
                        <i class="fas fa-file-code"></i>
                        <p>Click to Select File</p>
                        <small>HTML, CSS, JS, ZIP supported</small>
                    </div>
                    <input type="file" id="html_file" name="html_file" accept=".html,.htm,.css,.js,.zip" style="display: none;" required>
                    <div id="file-name" style="text-align: center; margin-bottom: 15px; color: var(--primary-color); font-weight: 600; font-size: 0.9rem;"></div>
                    
                    <button type="submit" class="btn-core">
                        <i class="fas fa-rocket"></i> Deploy Now
                    </button>
                </form>
            </div>
            
            <div class="tab-content" id="code-tab">
                <form method="POST">
                    <label>Custom URL Path</label>
                    <div class="input-group">
                        <i class="fas fa-link"></i>
                        <input type="text" name="code_custom_url" placeholder="my-website" id="code-url" required>
                    </div>
                    
                    <label>Password Protection (Optional)</label>
                    <div class="password-input-group" style="margin-bottom: 20px;">
                        <div class="input-wrapper">
                            <i class="fas fa-lock" style="position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: var(--text-muted); z-index: 2;"></i>
                            <input type="password" name="code_site_password" id="code-pass" placeholder="Leave empty for public">
                        </div>
                        <button type="button" class="password-toggle" onclick="togglePassword('code-pass')">
                            <i class="fas fa-eye"></i>
                        </button>
                    </div>
                    
                    <label>HTML Code</label>
                    <textarea name="html_code" id="code-editor" placeholder="<html>...</html>" required oninput="updatePreview()"></textarea>
                    
                    <button type="submit" class="btn-core" style="margin-top: 20px;">
                        <i class="fas fa-bolt"></i> Create & Host
                    </button>
                </form>
            </div>
            
            <div class="tab-content" id="preview-tab">
                <label>Live Editor Preview</label>
                <iframe class="preview-iframe" id="live-preview"></iframe>
            </div>

            <div class="stats-grid">
                <div class="stat-box">
                    <h3><?php echo count($uploaded_sites); ?></h3>
                    <p>Total Sites</p>
                </div>
                <div class="stat-box">
                    <h3><?php echo formatSize($total_size); ?></h3>
                    <p>Storage Used</p>
                </div>
            </div>
        </div>

        <div class="pro-card">
            <div class="card-title">
                <i class="fas fa-server"></i>
                Your Hosted Projects
            </div>
            
            <div class="site-list">
                <?php if (!empty($uploaded_sites)): ?>
                    <?php foreach($uploaded_sites as $site): ?>
                        <div class="site-item">
                            <div class="site-header">
                                <div class="site-name">
                                    <?php echo $site['name']; ?>
                                    <?php if ($site['has_password']): ?>
                                        <span class="badge badge-lock"><i class="fas fa-lock" style="font-size:0.6rem;"></i></span>
                                    <?php endif; ?>
                                    <?php if ($site['is_dir']): ?>
                                        <span class="badge">ZIP</span>
                                    <?php endif; ?>
                                </div>
                            </div>
                            
                            <div class="site-meta">
                                <span><i class="fas fa-hdd"></i> <?php echo formatSize($site['size']); ?></span>
                                <span><i class="fas fa-clock"></i> <?php echo date('M j', $site['time']); ?></span>
                                <span style="text-transform: uppercase;"><i class="fas fa-code"></i> <?php echo $site['type']; ?></span>
                            </div>
                            
                            <div class="site-actions">
                                <a href="<?php echo $site['url']; ?>" target="_blank" class="btn-secondary" style="text-decoration:none;">
                                    <i class="fas fa-external-link-alt"></i> Open
                                </a>
                                <button onclick="copyToClipboard('<?php echo $site['url']; ?>')" class="btn-secondary">
                                    <i class="fas fa-copy"></i> Copy Link
                                </button>
                            </div>
                            <div class="site-actions-row2">
                                <button onclick="openEditModal('<?php echo $site['name']; ?>')" class="btn-secondary">
                                    <i class="fas fa-pen"></i> Rename
                                </button>
                                <button onclick="openPasswordModal('<?php echo $site['name']; ?>')" class="btn-secondary">
                                    <i class="fas fa-key"></i> Pass
                                </button>
                                <form method="POST" style="margin:0;">
                                    <input type="hidden" name="delete_site" value="<?php echo $site['name']; ?>">
                                    <button type="submit" class="btn-secondary btn-danger" style="width:100%;" onclick="return confirm('Are you sure you want to delete this project?')">
                                        <i class="fas fa-trash"></i> Delete
                                    </button>
                                </form>
                            </div>
                        </div>
                    <?php endforeach; ?>
                <?php else: ?>
                    <div style="text-align: center; padding: 40px 20px; color: var(--text-muted);">
                        <i class="fas fa-folder-open" style="font-size: 3rem; margin-bottom: 15px; opacity: 0.5;"></i>
                        <h3 style="font-family: 'Poppins'; color: var(--text-main); margin-bottom: 5px;">No Projects Yet</h3>
                        <p style="font-size: 0.9rem;">Upload your first HTML/ZIP file to see it here.</p>
                    </div>
                <?php endif; ?>
            </div>
        </div>
    </div>

    <footer>Coded by <b>TF DEV</b></footer>

    <a href="https://wa.me/923017807507" class="whatsapp-float" target="_blank" title="Contact Developer on WhatsApp">
        <i class="fa-brands fa-whatsapp"></i>
    </a>

    <script>
        // --- Theme Management ---
        function toggleTheme() {
            const body = document.body;
            const icon = document.getElementById('themeIcon');
            body.classList.toggle('light-theme');
            
            if(body.classList.contains('light-theme')) {
                icon.classList.remove('fa-moon');
                icon.classList.add('fa-sun');
                localStorage.setItem('tf_host_theme', 'light');
            } else {
                icon.classList.remove('fa-sun');
                icon.classList.add('fa-moon');
                localStorage.setItem('tf_host_theme', 'dark');
            }
        }

        function loadTheme() {
            const savedTheme = localStorage.getItem('tf_host_theme');
            const icon = document.getElementById('themeIcon');
            if (savedTheme === 'light') {
                document.body.classList.add('light-theme');
                icon.classList.remove('fa-moon');
                icon.classList.add('fa-sun');
            }
        }
        loadTheme();

        // --- Core Functions & Notifications ---
        function showToast(msg, type = 'success') {
            const toastBox = document.getElementById('toastBox');
            const toast = document.createElement('div');
            toast.className = `toast ${type} show`;
            toast.innerHTML = type === 'success' ? `<i class="fa-solid fa-circle-check" style="color:var(--success); font-size: 1.2rem;"></i> ${msg}` : `<i class="fa-solid fa-circle-exclamation" style="color:var(--error); font-size: 1.2rem;"></i> ${msg}`;
            toastBox.appendChild(toast);
            setTimeout(() => { toast.classList.remove('show'); setTimeout(() => toast.remove(), 400); }, 3000);
        }

        window.addEventListener('load', () => {
            setTimeout(() => {
                document.getElementById('splash-screen').classList.add('fade-out');
            }, 1500); 

            // Trigger PHP Session Notifications
            <?php if (isset($_SESSION['success'])): ?>
                setTimeout(() => showToast("<?php echo $_SESSION['success']; ?>", "success"), 1800);
                <?php unset($_SESSION['success']); ?>
            <?php endif; ?>
            
            <?php if (isset($_SESSION['error'])): ?>
                setTimeout(() => showToast("<?php echo $_SESSION['error']; ?>", "error"), 1800);
                <?php unset($_SESSION['error']); ?>
            <?php endif; ?>
        });

        // --- Tabs ---
        function switchTab(tabId) {
            document.querySelectorAll('.tab-content').forEach(tab => tab.classList.remove('active'));
            document.querySelectorAll('.tab').forEach(tab => tab.classList.remove('active'));
            document.getElementById(tabId).classList.add('active');
            event.target.classList.add('active');
            if (tabId === 'preview-tab') updatePreview();
        }

        // --- File Input Handler ---
        document.getElementById('html_file').addEventListener('change', function(e) {
            const fileName = document.getElementById('file-name');
            if (this.files.length > 0) {
                const file = this.files[0];
                const fileExt = file.name.split('.').pop().toLowerCase();
                const allowedExt = ['html', 'htm', 'css', 'js', 'zip'];
                
                if (!allowedExt.includes(fileExt)) {
                    fileName.innerHTML = '<span style="color: var(--error);"><i class="fas fa-exclamation-triangle"></i> Invalid file type</span>';
                    this.value = ''; return;
                }
                fileName.innerHTML = `<i class="fas fa-check-circle"></i> ${file.name}`;
                
                // Auto-fill URL from filename
                const filename = file.name.replace(/\.[^/.]+$/, "");
                document.getElementById('single-url').value = filename.toLowerCase().replace(/[^a-z0-9]/g, '-');
            } else {
                fileName.innerHTML = '';
            }
        });

        // --- Utilities ---
        function copyToClipboard(text) {
            navigator.clipboard.writeText(text).then(() => {
                showToast('URL Copied successfully!');
            }).catch(err => {
                showToast('Failed to copy', 'error');
            });
        }

        function togglePassword(inputId) {
            const input = document.getElementById(inputId);
            input.type = input.type === 'password' ? 'text' : 'password';
        }

        // --- Modals ---
        function openEditModal(siteName) {
            document.getElementById('editSiteName').value = siteName;
            document.getElementById('newSiteName').value = siteName;
            document.getElementById('editModal').style.display = 'flex';
        }

        function openPasswordModal(siteName) {
            document.getElementById('passwordSiteName').value = siteName;
            document.getElementById('passwordModal').style.display = 'flex';
        }

        function closeModal(modalId) {
            document.getElementById(modalId).style.display = 'none';
        }

        // Close modal on outside click
        window.onclick = function(event) {
            if (event.target.className === 'modal') {
                event.target.style.display = 'none';
            }
        }

        // --- Live Preview ---
        function updatePreview() {
            const code = document.getElementById('code-editor').value;
            const preview = document.getElementById('live-preview');
            const previewDoc = preview.contentDocument || preview.contentWindow.document;
            previewDoc.open();
            previewDoc.write(code || '<body style="font-family:sans-serif;text-align:center;padding:20px;color:#666;">Preview will appear here</body>');
            previewDoc.close();
        }

        // Initialize empty code editor
        document.addEventListener('DOMContentLoaded', function() {
            const codeEditor = document.getElementById('code-editor');
            if (codeEditor && !codeEditor.value) {
                codeEditor.value = `<!DOCTYPE html>\n<html>\n<head>\n<style>\n body { font-family: Arial; text-align: center; margin-top: 50px; }\n</style>\n</head>\n<body>\n <h2>My Premium Site</h2>\n</body>\n</html>`;
            }
        });

        // Form URL sanitization on submit
        document.querySelectorAll('form').forEach(form => {
            form.addEventListener('submit', function(e) {
                const urlInput = this.querySelector('input[name*="custom_url"], input[name="new_name"]');
                if (urlInput) {
                    let url = urlInput.value.trim().toLowerCase();
                    url = url.replace(/[^a-z0-9-]/g, '-').replace(/-+/g, '-').replace(/^-|-$/g, '');
                    urlInput.value = url || 'my-site';
                }
                // Button loading state
                const btn = this.querySelector('button[type="submit"]');
                if(btn && !btn.classList.contains('btn-danger')) {
                    btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Processing...';
                }
            });
        });
    </script>
</body>
</html>