import React from 'react';
import { Head, Link } from '@inertiajs/react';
import EmployerMobileLayout from './Layouts/EmployerMobileLayout';
import {
    Bookmark,
    MessageSquare,
    Calendar,
    CreditCard,
    ArrowRight,
    TrendingUp,
    Users
} from 'lucide-react';

export default function EmployerHome() {
    const stats = [
        { label: 'Shortlisted', value: 4, icon: Bookmark, color: 'bg-blue-50 text-blue-600' },
        { label: 'Messages Sent', value: 18, icon: MessageSquare, color: 'bg-emerald-50 text-emerald-600' },
        { label: 'Days Remaining', value: 24, icon: Calendar, color: 'bg-amber-50 text-amber-500' },
        { label: 'Total Hires', value: 12, icon: Users, color: 'bg-indigo-50 text-indigo-600' },
    ];

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

            <div className="p-6 space-y-8">
                {/* Welcome Section */}
                <div className="space-y-1">
                    <h1 className="text-2xl font-bold tracking-tight text-slate-900">Dashboard</h1>
                    <p className="text-sm text-slate-500 font-medium">Welcome back, John Doe</p>
                </div>

                {/* Plan Status Card */}
                <div className="bg-[#141B34] rounded-[32px] p-8 text-white relative overflow-hidden shadow-2xl">
                    <div className="absolute top-0 right-0 w-32 h-32 bg-white/10 rounded-full -mr-16 -mt-16 blur-2xl" />
                    <div className="space-y-6 relative z-10">
                        <div className="inline-flex items-center space-x-2 bg-white/10 px-3 py-1.5 rounded-full border border-white/10 text-[10px] font-bold uppercase tracking-widest">
                            <div className="w-1.5 h-1.5 bg-emerald-400 rounded-full" />
                            <span>Premium Employer Pass</span>
                        </div>
                        <div className="space-y-1">
                            <h2 className="text-3xl font-bold">24 Days</h2>
                            <p className="text-slate-400 text-xs font-medium uppercase tracking-widest">Remaining in your plan</p>
                        </div>
                        <Link href="/mobile/employer/subscription" className="w-full h-14 bg-white text-[#141B34] rounded-2xl font-bold flex items-center justify-center space-x-2 shadow-xl active:scale-[0.98] transition-all text-xs uppercase tracking-widest">
                            <span>Upgrade Plan</span>
                            <ArrowRight className="w-4 h-4" />
                        </Link>
                    </div>
                </div>

                {/* Stats Stacked */}
                <div className="space-y-4">
                    <h3 className="text-[10px] font-bold text-slate-400 uppercase tracking-widest ml-1">Key Statistics</h3>
                    <div className="space-y-3">
                        {stats.map((stat, i) => (
                            <div key={i} className="bg-white p-5 rounded-2xl border border-slate-100 shadow-sm flex items-center justify-between">
                                <div className="flex items-center space-x-4">
                                    <div className={`w-12 h-12 rounded-xl flex items-center justify-center ${stat.color}`}>
                                        <stat.icon className="w-6 h-6" />
                                    </div>
                                    <div className="space-y-0.5">
                                        <div className="text-[10px] font-bold text-slate-400 uppercase tracking-widest">{stat.label}</div>
                                        <div className="text-xl font-bold text-slate-900">{stat.value}</div>
                                    </div>
                                </div>
                                <TrendingUp className="w-5 h-5 text-emerald-500 opacity-20" />
                            </div>
                        ))}
                    </div>
                </div>

                {/* Placeholder for Analytics Chart (Full Width) */}
                <div className="space-y-4 pb-10">
                    <h3 className="text-[10px] font-bold text-slate-400 uppercase tracking-widest ml-1">Recruitment Analytics</h3>
                    <div className="bg-white p-6 rounded-3xl border border-slate-100 shadow-sm h-64 flex flex-col items-center justify-center text-center space-y-4">
                        <div className="w-16 h-16 bg-slate-50 rounded-full flex items-center justify-center text-slate-200">
                            <TrendingUp className="w-8 h-8" />
                        </div>
                        <div className="space-y-1">
                            <p className="text-sm font-bold text-slate-900">Activity Chart</p>
                            <p className="text-xs text-slate-400 font-medium">Visualizing your hiring trends over 30 days</p>
                        </div>
                    </div>
                </div>
            </div>
        </EmployerMobileLayout>
    );
}
