<?php
session_start();
require_once 'db/config.php';

// 1. Check for a valid user session
if (!isset($_SESSION['user_id'])) {
    header('Location: login.php');
    exit;
}

// 2. Fetch user data from the database
$pdo = db();
$stmt = $pdo->prepare("SELECT * FROM users WHERE id = ?");
$stmt->execute([$_SESSION['user_id']]);
$user = $stmt->fetch();

if (!$user) {
    // If user not found, destroy session and redirect
    session_destroy();
    header('Location: login.php');
    exit;
}

// Create initials from the username
$initials = '';
$parts = explode(' ', $user['username']);
foreach ($parts as $part) {
    $initials .= strtoupper(substr($part, 0, 1));
}

// 3. Task data remains static for now, but will be moved to database later.
$tasks = [
    [
        'name' => 'Complete Tax Forms (W-4)',
        'description' => 'Download, fill out, and upload your W-4 tax withholding form',
        'due_date' => '12/9/2024',
        'details' => 'Please upload a completed and signed W-4 form (PDF format preferred)',
        'status' => 'pending',
        'type' => 'upload'
    ],
    [
        'name' => 'Upload Profile Photo',
        'description' => 'Upload a professional headshot for your company profile',
        'due_date' => '12/11/2024',
        'details' => 'JPG or PNG, minimum 400x400 pixels',
        'status' => 'pending',
        'type' => 'upload'
    ],
    [
        'name' => 'Review Employee Handbook',
        'description' => 'Read through the company policies and employee handbook',
        'due_date' => '12/10/2024',
        'status' => 'pending',
        'type' => 'action'
    ],
    [
        'name' => 'Set Up Direct Deposit',
        'description' => 'Provide your bank account information for payroll',
        'due_date' => '12/9/2024',
        'details' => 'Upload a voided check or bank letter with account details',
        'status' => 'pending',
        'type' => 'upload'
    ],
    [
        'name' => 'Complete I-9 Form',
        'completed_date' => '12/7/2024',
        'status' => 'completed'
    ],
    [
        'name' => 'Sign Offer Letter',
        'completed_date' => '12/6/2024',
        'status' => 'completed'
    ]
];

$pending_tasks = array_filter($tasks, fn($t) => $t['status'] === 'pending');
$completed_tasks = array_filter($tasks, fn($t) => $t['status'] === 'completed');
$total_tasks = count($tasks);
$completed_count = count($completed_tasks);
$progress_percent = $total_tasks > 0 ? ($completed_count / $total_tasks) * 100 : 0;

// For display purposes, placeholder data for manager and start date
$display_manager = 'Sarah Johnson';
$display_start_date = '12/14/2024';

?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Employee View - FinMox</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/lucide-icons@latest/dist/lucide.min.css" rel="stylesheet">
    <script src="https://unpkg.com/lucide@latest" defer></script>
    <style>
        .progress-bar {
            transition: width 0.5s ease-in-out;
        }
    </style>
</head>
<body class="bg-gray-50">
    <div class="min-h-screen">
        <header class="bg-white border-b border-gray-200">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                <div class="flex justify-between items-center h-16">
                    <div class="flex items-center space-x-4">
                        <div class="flex-shrink-0">
                            <div class="w-10 h-10 bg-blue-600 text-white flex items-center justify-center rounded-full font-bold">
                                <?php echo htmlspecialchars($initials); ?>
                            </div>
                        </div>
                        <div>
                            <p class="text-lg font-medium text-gray-900">Welcome, <?php echo htmlspecialchars($user['username']); ?>!</p>
                            <p class="text-sm text-gray-500">New Employee</p>
                        </div>
                    </div>
                    <a href="logout.php" class="text-sm font-medium text-gray-600 hover:text-gray-900">Logout</a>
                </div>
            </div>
        </header>

        <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
            <div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-8">
                
                <!-- Main Content -->
                <div class="md:col-span-2 lg:col-span-3 space-y-8">
                    <div>
                        <h2 class="text-2xl font-bold text-gray-900 mb-4">Your Tasks</h2>
                        <div class="bg-white border border-gray-200 rounded-lg shadow-sm">
                            <ul class="divide-y divide-gray-200">
                                <?php foreach ($pending_tasks as $task): ?>
                                <li class="p-6">
                                    <div class="flex justify-between items-start">
                                        <div>
                                            <h3 class="text-lg font-semibold text-gray-800"><?php echo htmlspecialchars($task['name']); ?></h3>
                                            <p class="text-sm text-gray-600 mt-1"><?php echo htmlspecialchars($task['description']); ?></p>
                                            <p class="text-xs text-gray-400 mt-2">Due: <?php echo htmlspecialchars($task['due_date']); ?></p>
                                        </div>
                                        <div class="text-right">
                                            <?php if ($task['type'] === 'upload'): ?>
                                                <button class="inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">Choose File</button>
                                            <?php else: ?>
                                                <button class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700">Mark Complete</button>
                                            <?php endif; ?>
                                        </div>
                                    </div>
                                    <?php if (isset($task['details'])): ?>
                                    <p class="text-sm text-gray-500 mt-3 bg-gray-50 p-3 rounded-md"><?php echo htmlspecialchars($task['details']); ?></p>
                                    <?php endif; ?>
                                </li>
                                <?php endforeach; ?>
                            </ul>
                        </div>
                    </div>

                    <div>
                        <h2 class="text-2xl font-bold text-gray-900 mb-4">Completed Tasks</h2>
                        <div class="bg-white border border-gray-200 rounded-lg shadow-sm">
                            <ul class="divide-y divide-gray-200">
                                <?php foreach ($completed_tasks as $task): ?>
                                <li class="p-6 flex justify-between items-center">
                                    <h3 class="text-lg font-medium text-gray-500 line-through"><?php echo htmlspecialchars($task['name']); ?></h3>
                                    <p class="text-sm text-gray-400">Completed on <?php echo htmlspecialchars($task['completed_date']); ?></p>
                                </li>
                                <?php endforeach; ?>
                            </ul>
                        </div>
                    </div>
                </div>

                <!-- Right Sidebar -->
                <div class="space-y-8">
                    <div class="bg-white p-6 rounded-lg border border-gray-200 shadow-sm">
                        <h3 class="text-lg font-semibold text-gray-900 mb-4">Onboarding Progress</h3>
                        <p class="text-gray-600"><?php echo $completed_count; ?> of <?php echo $total_tasks; ?> tasks completed</p>
                        <div class="w-full bg-gray-200 rounded-full h-2.5 mt-2">
                            <div class="bg-blue-600 h-2.5 rounded-full progress-bar" style="width: <?php echo round($progress_percent); ?>%"></div>
                        </div>
                        <p class="text-right text-sm text-gray-500 mt-1"><?php echo round($progress_percent); ?>%</p>
                    </div>

                    <div class="bg-white p-6 rounded-lg border border-gray-200 shadow-sm">
                        <h3 class="text-lg font-semibold text-gray-900 mb-4">Need Help?</h3>
                        <div class="space-y-3">
                            <p class="flex items-center text-sm text-gray-700"><i data-lucide="mail" class="w-4 h-4 mr-2 text-gray-400"></i> hr@company.com</p>
                            <p class="flex items-center text-sm text-gray-700"><i data-lucide="phone" class="w-4 h-4 mr-2 text-gray-400"></i> (555) 123-4567</p>
                            <button class="w-full mt-2 inline-flex items-center justify-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">Contact HR Team</button>
                        </div>
                    </div>
                    
                    <div class="bg-gray-100 p-4 rounded-lg border border-gray-200 text-sm text-gray-600">
                        <p><strong>Questions?</strong> Reach out to your manager <span class="font-semibold text-gray-800"><?php echo htmlspecialchars($display_manager); ?></span> or contact HR.</p>
                        <p class="mt-2"><strong>Start Date:</strong> <?php echo htmlspecialchars($display_start_date); ?></p>
                    </div>
                </div>
            </div>
        </main>
    </div>
    <script>
        lucide.createIcons();
    </script>
</body>
</html>