<?php
session_start();
if (!isset($_SESSION['user_id'])) {
    header('Location: login.php');
    exit;
}
require_once 'db/config.php';
// Note: The following PHP variables are placeholders and not currently used in the new design.
// They can be integrated later when making the dashboard dynamic.
/*
$pdo = db();
$total_candidates = $pdo->query("SELECT COUNT(*) FROM candidates")->fetchColumn();
$total_tasks = $pdo->query("SELECT COUNT(*) FROM tasks")->fetchColumn();
$completed_tasks = $pdo->query("SELECT COUNT(*) FROM tasks WHERE status = 'Completed'")->fetchColumn();
$completion_rate = ($total_tasks > 0) ? ($completed_tasks / $total_tasks) * 100 : 0;
$open_cases = 12;
*/
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dashboard - FinMox</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="https://unpkg.com/lucide@latest"></script>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
        * {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
        }
        body {
            background-color: #fafafa;
            -webkit-font-smoothing: antialiased;
        }
        .stat-card .percentage.positive { color: #22c55e; }
        .stat-card .percentage.negative { color: #ef4444; }
    </style>
</head>
<body class="bg-gray-100">
    <div class="flex h-screen bg-gray-200">
        <?php include '_sidebar.php'; ?>

        <!-- Main content -->
        <main class="flex-1 overflow-x-hidden overflow-y-auto bg-[#fafafa]">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 md:px-8 py-8">
                <!-- Header -->
                <div class="mb-8">
                    <h1 class="text-3xl font-bold text-gray-900">HR Dashboard</h1>
                    <p class="text-gray-600 mt-1">Overview of recruiting, onboarding, and HR operations</p>
                </div>

                <!-- Key Metrics -->
                <div class="mb-8">
                    <h2 class="text-xl font-semibold text-gray-900 mb-4">Key Metrics</h2>
                    <div class="grid grid-cols-2 md:grid-cols-4 gap-6">
                        <div class="stat-card bg-white p-6 rounded-xl shadow-sm border border-gray-200">
                            <p class="text-gray-500 text-sm">Active Candidates</p>
                            <div class="flex items-baseline space-x-2 mt-1">
                                <p class="text-3xl font-bold text-gray-900">47</p>
                                <p class="percentage positive text-sm font-semibold">+12%</p>
                            </div>
                        </div>
                        <div class="stat-card bg-white p-6 rounded-xl shadow-sm border border-gray-200">
                            <p class="text-gray-500 text-sm">Open Cases</p>
                            <div class="flex items-baseline space-x-2 mt-1">
                                <p class="text-3xl font-bold text-gray-900">23</p>
                                <p class="percentage negative text-sm font-semibold">-8%</p>
                            </div>
                        </div>
                        <div class="stat-card bg-white p-6 rounded-xl shadow-sm border border-gray-200">
                            <p class="text-gray-500 text-sm">Onboarding Tasks</p>
                            <div class="flex items-baseline space-x-2 mt-1">
                                <p class="text-3xl font-bold text-gray-900">156</p>
                                <p class="percentage positive text-sm font-semibold">+5%</p>
                            </div>
                        </div>
                        <div class="stat-card bg-white p-6 rounded-xl shadow-sm border border-gray-200">
                            <p class="text-gray-500 text-sm">Completion Rate</p>
                            <div class="flex items-baseline space-x-2 mt-1">
                                <p class="text-3xl font-bold text-gray-900">94%</p>
                                <p class="percentage positive text-sm font-semibold">+2%</p>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Main Grid -->
                <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
                    <!-- Hiring Funnel (Left Column) -->
                    <div class="lg:col-span-2">
                        <div class="bg-white p-6 rounded-xl shadow-sm border border-gray-200">
                            <h3 class="text-lg font-semibold text-gray-900 mb-4">Hiring Funnel</h3>
                            <div class="h-80">
                                <canvas id="hiringFunnelChart"></canvas>
                            </div>
                        </div>
                    </div>

                    <!-- Recent Activity (Right Column) -->
                    <div>
                        <div class="bg-white p-6 rounded-xl shadow-sm border border-gray-200">
                            <h3 class="text-lg font-semibold text-gray-900 mb-4">Recent Activity</h3>
                            <ul class="space-y-4">
                                <li class="flex items-center">
                                    <div class="p-2 bg-blue-100 rounded-full"><i data-lucide="user-plus" class="w-5 h-5 text-blue-600"></i></div>
                                    <div class="ml-3"><p class="text-sm text-gray-700">New candidate profile created</p><p class="text-xs text-gray-500">5 minutes ago</p></div>
                                </li>
                                <li class="flex items-center">
                                    <div class="p-2 bg-yellow-100 rounded-full"><i data-lucide="file-text" class="w-5 h-5 text-yellow-600"></i></div>
                                    <div class="ml-3"><p class="text-sm text-gray-700">Case updated</p><p class="text-xs text-gray-500">23 minutes ago</p></div>
                                </li>
                                <li class="flex items-center">
                                    <div class="p-2 bg-green-100 rounded-full"><i data-lucide="check-circle" class="w-5 h-5 text-green-600"></i></div>
                                    <div class="ml-3"><p class="text-sm text-gray-700">Onboarding task completed</p><p class="text-xs text-gray-500">1 hour ago</p></div>
                                </li>
                                <li class="flex items-center">
                                    <div class="p-2 bg-red-100 rounded-full"><i data-lucide="clock" class="w-5 h-5 text-red-600"></i></div>
                                    <div class="ml-3"><p class="text-sm text-gray-700">Deadline approaching</p><p class="text-xs text-gray-500">2 hours ago</p></div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>

                <!-- Open HR Cases -->
                <div class="mt-8">
                     <div class="bg-white p-6 rounded-xl shadow-sm border border-gray-200">
                        <h3 class="text-lg font-semibold text-gray-900 mb-4">Open HR Cases</h3>
                        <table class="w-full text-left">
                            <thead>
                                <tr>
                                    <th class="p-2 text-sm font-semibold text-gray-600">Case</th>
                                    <th class="p-2 text-sm font-semibold text-gray-600">Priority</th>
                                    <th class="p-2 text-sm font-semibold text-gray-600">Assignee</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr class="border-t border-gray-200">
                                    <td class="p-3 text-sm text-gray-800">Performance Review - Marcus Chen</td>
                                    <td class="p-3"><span class="px-2 py-1 text-xs font-semibold text-red-800 bg-red-100 rounded-full">High</span></td>
                                    <td class="p-3 text-sm text-gray-800">John Doe</td>
                                </tr>
                                <tr class="border-t border-gray-200">
                                    <td class="p-3 text-sm text-gray-800">Background Check - Sarah Johnson</td>
                                    <td class="p-3"><span class="px-2 py-1 text-xs font-semibold text-yellow-800 bg-yellow-100 rounded-full">Medium</span></td>
                                    <td class="p-3 text-sm text-gray-800">Jane Smith</td>
                                </tr>
                                <tr class="border-t border-gray-200">
                                    <td class="p-3 text-sm text-gray-800">Onboarding Checklist - Emily Davis</td>
                                    <td class="p-3"><span class="px-2 py-1 text-xs font-semibold text-green-800 bg-green-100 rounded-full">Low</span></td>
                                    <td class="p-3 text-sm text-gray-800">Alice Johnson</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>

            </div>
        </main>
    </div>
    <script>
        lucide.createIcons();

        const ctx = document.getElementById('hiringFunnelChart').getContext('2d');
        const hiringFunnelChart = new Chart(ctx, {
            type: 'bar',
            data: {
                labels: ['Applications', 'Screening', 'Interviews', 'Offers', 'Hires'],
                datasets: [{
                    label: 'Candidates',
                    data: [150, 100, 60, 30, 15],
                    backgroundColor: '#3b82f6',
                    borderRadius: 4,
                    barThickness: 30,
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        display: false
                    }
                },
                scales: {
                    y: {
                        beginAtZero: true,
                        grid: {
                            color: '#e5e7eb',
                            borderDash: [2, 4],
                        },
                        ticks: {
                            color: '#6b7280'
                        }
                    },
                    x: {
                        grid: {
                            display: false,
                        },
                        ticks: {
                            color: '#6b7280'
                        }
                    }
                }
            }
        });
    </script>
</body>
</html>
