import { Head, usePage } from '@inertiajs/react';
import AppLayout from '@/Layouts/AppLayout';
import { Users, Building2, Clock, FileText, TrendingUp } from 'lucide-react';

interface Props {
    stats: {
        total_staff: number;
        total_companies: number;
        pending_changes: number;
        applications: number;
    };
}

interface AuthUser {
    name: string;
    role: string;
}

interface PageProps {
    auth: { user: AuthUser | null };
    [key: string]: unknown;
}

const statCards = [
    {
        key: 'total_staff' as const,
        label: 'Total Staff',
        icon: Users,
        color: 'text-blue-600',
        bg: 'bg-blue-50',
        border: 'border-blue-100',
    },
    {
        key: 'total_companies' as const,
        label: 'Companies',
        icon: Building2,
        color: 'text-emerald-600',
        bg: 'bg-emerald-50',
        border: 'border-emerald-100',
    },
    {
        key: 'pending_changes' as const,
        label: 'Pending Changes',
        icon: Clock,
        color: 'text-amber-600',
        bg: 'bg-amber-50',
        border: 'border-amber-100',
    },
    {
        key: 'applications' as const,
        label: 'Applications',
        icon: FileText,
        color: 'text-violet-600',
        bg: 'bg-violet-50',
        border: 'border-violet-100',
    },
];

export default function Dashboard({ stats }: Props) {
    const { auth } = usePage<PageProps>().props;
    const user = auth?.user;

    return (
        <AppLayout title="Dashboard">
            <Head title="Dashboard" />

            <div className="space-y-6">
                {/* Welcome banner */}
                <div className="overflow-hidden rounded-xl bg-gradient-to-r from-blue-600 to-blue-700 px-6 py-5 text-white shadow-sm">
                    <div className="flex items-center gap-3">
                        <TrendingUp className="h-8 w-8 opacity-80" />
                        <div>
                            <p className="text-lg font-semibold">
                                Welcome back{user?.name ? `, ${user.name.split(' ')[0]}` : ''}!
                            </p>
                            <p className="mt-0.5 text-sm text-blue-100 capitalize">
                                {user?.role?.replace('_', ' ')} &mdash; HR Staff Management Portal
                            </p>
                        </div>
                    </div>
                </div>

                {/* Stats grid */}
                <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
                    {statCards.map((card) => (
                        <div
                            key={card.key}
                            className={`rounded-xl border ${card.border} bg-white p-5 shadow-sm`}
                        >
                            <div className="flex items-start justify-between">
                                <div>
                                    <p className="text-xs font-medium uppercase tracking-wide text-gray-500">
                                        {card.label}
                                    </p>
                                    <p className="mt-2 text-3xl font-bold text-gray-900">
                                        {stats[card.key].toLocaleString()}
                                    </p>
                                </div>
                                <div
                                    className={`${card.bg} rounded-xl p-2.5`}
                                >
                                    <card.icon
                                        className={`h-5 w-5 ${card.color}`}
                                    />
                                </div>
                            </div>
                        </div>
                    ))}
                </div>

                {/* Getting started */}
                <div className="rounded-xl border border-gray-200 bg-white p-6 shadow-sm">
                    <h2 className="mb-1 text-sm font-semibold text-gray-900">
                        Getting Started
                    </h2>
                    <p className="text-sm text-gray-500">
                        Use the sidebar to navigate between sections. Staff
                        records, applications, leave allocation, announcements,
                        and more will be available as each module is built out.
                    </p>
                </div>
            </div>
        </AppLayout>
    );
}
