package components

import (
	"context"
)

templ Home(ctx context.Context) {
	@LayoutWithContext("Home", ctx) {
		<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
			<div class="text-center">
				<h1 class="text-4xl font-bold text-secondary-900 dark:text-secondary-100 mb-4">
					<i class="fas fa-exchange-alt text-primary-600 dark:text-primary-400 mr-3"></i>
					Welcome to GoMFT
				</h1>
				<p class="text-xl text-secondary-600 dark:text-secondary-300 mb-12">A modern managed file transfer solution</p>
				
				if isLoggedIn(ctx) {
					<div class="space-y-8">
						<!-- Feature Cards -->
						<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
							<div class="card hover:shadow-lg transition-shadow duration-300">
								<div class="p-6">
									<div class="rounded-full bg-primary-100 dark:bg-primary-900 p-4 w-16 h-16 flex items-center justify-center mb-4 mx-auto">
										<i class="fas fa-cogs text-primary-600 dark:text-primary-300 text-2xl"></i>
									</div>
									<h2 class="text-2xl font-semibold text-secondary-900 dark:text-secondary-100 mb-4 text-center">Transfer Configs</h2>
									<p class="text-secondary-600 dark:text-secondary-400 mb-6 text-center">Set up and manage file transfer configurations with ease.</p>
									<div class="flex justify-center">
										<a href="/configs" class="btn-primary inline-flex items-center">
											<span>View Configs</span>
											<i class="fas fa-arrow-right ml-2"></i>
										</a>
									</div>
								</div>
							</div>
							
							<div class="card hover:shadow-lg transition-shadow duration-300">
								<div class="p-6">
									<div class="rounded-full bg-blue-100 dark:bg-blue-900 p-4 w-16 h-16 flex items-center justify-center mb-4 mx-auto">
										<i class="fas fa-calendar-alt text-blue-600 dark:text-blue-300 text-2xl"></i>
									</div>
									<h2 class="text-2xl font-semibold text-secondary-900 dark:text-secondary-100 mb-4 text-center">Schedule Jobs</h2>
									<p class="text-secondary-600 dark:text-secondary-400 mb-6 text-center">Create and monitor automated file transfer jobs.</p>
									<div class="flex justify-center">
										<a href="/jobs" class="btn-primary inline-flex items-center">
											<span>View Jobs</span>
											<i class="fas fa-arrow-right ml-2"></i>
										</a>
									</div>
								</div>
							</div>
							
							<div class="card hover:shadow-lg transition-shadow duration-300">
								<div class="p-6">
									<div class="rounded-full bg-green-100 dark:bg-green-900 p-4 w-16 h-16 flex items-center justify-center mb-4 mx-auto">
										<i class="fas fa-history text-green-600 dark:text-green-300 text-2xl"></i>
									</div>
									<h2 class="text-2xl font-semibold text-secondary-900 dark:text-secondary-100 mb-4 text-center">Track History</h2>
									<p class="text-secondary-600 dark:text-secondary-400 mb-6 text-center">View detailed history of all file transfer operations.</p>
									<div class="flex justify-center">
										<a href="/history" class="btn-primary inline-flex items-center">
											<span>View History</span>
											<i class="fas fa-arrow-right ml-2"></i>
										</a>
									</div>
								</div>
							</div>
						</div>
						
						<!-- Quick Access Section -->
						<div class="mt-12">
							<h2 class="text-2xl font-bold text-secondary-900 dark:text-secondary-100 mb-6">
								<i class="fas fa-bolt text-primary-600 dark:text-primary-400 mr-2"></i>
								Quick Access
							</h2>
							<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
								<a href="/dashboard" class="card p-4 hover:bg-secondary-50 dark:hover:bg-secondary-800 flex items-center transition-colors">
									<i class="fas fa-tachometer-alt text-primary-600 dark:text-primary-400 text-xl mr-3"></i>
									<span class="text-secondary-900 dark:text-secondary-100">Dashboard</span>
								</a>
								<a href="/configs/new" class="card p-4 hover:bg-secondary-50 dark:hover:bg-secondary-800 flex items-center transition-colors">
									<i class="fas fa-plus-circle text-primary-600 dark:text-primary-400 text-xl mr-3"></i>
									<span class="text-secondary-900 dark:text-secondary-100">New Config</span>
								</a>
								<a href="/jobs/new" class="card p-4 hover:bg-secondary-50 dark:hover:bg-secondary-800 flex items-center transition-colors">
									<i class="fas fa-play-circle text-primary-600 dark:text-primary-400 text-xl mr-3"></i>
									<span class="text-secondary-900 dark:text-secondary-100">New Job</span>
								</a>
								<a href="/profile" class="card p-4 hover:bg-secondary-50 dark:hover:bg-secondary-800 flex items-center transition-colors">
									<i class="fas fa-user-circle text-primary-600 dark:text-primary-400 text-xl mr-3"></i>
									<span class="text-secondary-900 dark:text-secondary-100">Profile</span>
								</a>
							</div>
						</div>
					</div>
				} else {
					<div class="max-w-md mx-auto card p-8 hover:shadow-lg transition-shadow duration-300">
						<div class="rounded-full bg-primary-100 dark:bg-primary-900 p-4 w-20 h-20 flex items-center justify-center mb-6 mx-auto">
							<i class="fas fa-sign-in-alt text-primary-600 dark:text-primary-300 text-3xl"></i>
						</div>
						<h2 class="text-2xl font-semibold text-secondary-900 dark:text-secondary-100 mb-4">Get Started</h2>
						<p class="text-secondary-600 dark:text-secondary-400 mb-6">Log in to access the file transfer management system.</p>
						<a href="/login" class="btn-primary inline-flex items-center px-8 py-3">
							<i class="fas fa-lock mr-2"></i>
							<span>Log In</span>
						</a>
						
						<!-- Features Preview -->
						<div class="mt-12 pt-8 border-t border-secondary-200 dark:border-secondary-700">
							<h3 class="text-lg font-medium text-secondary-900 dark:text-secondary-100 mb-4">Key Features</h3>
							<ul class="space-y-3 text-left">
								<li class="flex items-start">
									<i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
									<span class="text-secondary-600 dark:text-secondary-400">Secure file transfers with encryption</span>
								</li>
								<li class="flex items-start">
									<i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
									<span class="text-secondary-600 dark:text-secondary-400">Automated scheduling and monitoring</span>
								</li>
								<li class="flex items-start">
									<i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
									<span class="text-secondary-600 dark:text-secondary-400">Comprehensive transfer history tracking</span>
								</li>
								<li class="flex items-start">
									<i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
									<span class="text-secondary-600 dark:text-secondary-400">User-friendly interface with dark mode support</span>
								</li>
							</ul>
						</div>
					</div>
				}
			</div>
		</div>
	}
}