import React, { useState, useEffect } from 'react';
import axios from 'axios';
import Sidebar from '../components/Sidebar';

const Dashboard = () => {
    const [stats, setStats] = useState({
        totalEmployees: 0,
        totalDepartments: 0,
        projectedPayroll: 0
    });

    useEffect(() => {
        // Fetch raw employee context to compile basic dashboard metric aggregates
        axios.get('http://localhost:5000/api/hr/employees')
            .then(res => {
                const employees = res.data;
                const uniqueDepts = [...new Set(employees.map(e => e.departmentnumber))].filter(Boolean);
                const totalSalary = employees.reduce((acc, curr) => acc + (Number(curr.netsalary) || 0), 0);

                setStats({
                    totalEmployees: employees.length,
                    totalDepartments: uniqueDepts.length,
                    projectedPayroll: totalSalary
                });
            })
            .catch(err => console.error("Error loading dashboard metrics:", err));
    }, []);

    return (
        <div className="flex bg-slate-50 min-h-screen">
            {/* Left Hand Navigation Panel */}
            <Sidebar />

            {/* Main Application Interface Pane */}
            <main className="flex-1 p-8">
                <div className="mb-8">
                    <h1 className="text-3xl font-bold text-slate-800">SmartPark Management Hub</h1>
                    <p className="text-slate-500 mt-1">Rubavu District Operations & Payroll Overview</p>
                </div>

                {/* Statistical Overview Metric Aggregations */}
                <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
                    {/* Metric Card 1 */}
                    <div className="bg-white p-6 rounded-xl shadow-sm border border-slate-100 flex items-center space-x-4">
                        <div className="p-3 bg-blue-100 text-blue-600 rounded-lg text-2xl">👥</div>
                        <div>
                            <p className="text-sm text-slate-400 font-medium uppercase tracking-wider">Total Staff</p>
                            <h3 className="text-2xl font-bold text-slate-800">{stats.totalEmployees}</h3>
                        </div>
                    </div>

                    {/* Metric Card 2 */}
                    <div className="bg-white p-6 rounded-xl shadow-sm border border-slate-100 flex items-center space-x-4">
                        <div className="p-3 bg-purple-100 text-purple-600 rounded-lg text-2xl">🏢</div>
                        <div>
                            <p className="text-sm text-slate-400 font-medium uppercase tracking-wider">Active Departments</p>
                            <h3 className="text-2xl font-bold text-slate-800">{stats.totalDepartments}</h3>
                        </div>
                    </div>

                    {/* Metric Card 3 */}
                    <div className="bg-white p-6 rounded-xl shadow-sm border border-slate-100 flex items-center space-x-4">
                        <div className="p-3 bg-emerald-100 text-emerald-600 rounded-lg text-2xl">🇷🇼</div>
                        <div>
                            <p className="text-sm text-slate-400 font-medium uppercase tracking-wider">Est. Monthly Net Payout</p>
                            <h3 className="text-2xl font-bold text-emerald-600">{stats.projectedPayroll.toLocaleString()} RWF</h3>
                        </div>
                    </div>
                </div>

                {/* Informational Core Section blocks */}
                <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
                    <div className="bg-white p-6 rounded-xl shadow-sm border border-slate-100">
                        <h2 className="text-lg font-bold text-slate-800 mb-3">System Tasks</h2>
                        <div className="space-y-3">
                            <div className="p-3 bg-slate-50 rounded-lg border text-sm text-slate-600 flex justify-between items-center">
                                <span>Digitalize physical payroll spreadsheets</span>
                                <span className="text-xs bg-amber-100 text-amber-800 px-2 py-0.5 rounded font-medium">Pending</span>
                            </div>
                            <div className="p-3 bg-slate-50 rounded-lg border text-sm text-slate-600 flex justify-between items-center">
                                <span>Verify database backup status</span>
                                <span className="text-xs bg-emerald-100 text-emerald-800 px-2 py-0.5 rounded font-medium">Completed</span>
                            </div>
                        </div>
                    </div>

                    <div className="bg-white p-6 rounded-xl shadow-sm border border-slate-100 flex flex-col justify-between">
                        <div>
                            <h2 className="text-lg font-bold text-slate-800 mb-2">Quick Shortcuts</h2>
                            <p className="text-sm text-slate-500 mb-4">Jump directly to financial workflows to run payroll or print invoice statements.</p>
                        </div>
                        <a href="/payroll" className="w-full bg-slate-800 hover:bg-slate-900 text-white text-center py-2.5 rounded-lg transition font-medium block">
                            Go To Payroll Control View
                        </a>
                    </div>
                </div>
            </main>
        </div>
    );
};

export default Dashboard;