'use client';

import { useEffect, useState } from 'react';
import api from '@/utils/api';
import { motion } from 'framer-motion';
import { Users, Folder, Mail, FileText } from 'lucide-react';

export default function AdminDashboard() {
    const [stats, setStats] = useState<any>(null);

    useEffect(() => {
        const fetchStats = async () => {
            try {
                const { data } = await api.get('/dashboard/stats');
                setStats(data);
            } catch (err) {
                console.error(err);
            }
        };
        fetchStats();
    }, []);

    const cards = [
        { name: 'Total Projects', value: stats?.projects || 0, icon: Folder, color: 'text-blue-400' },
        { name: 'Blog Posts', value: stats?.blogs || 0, icon: FileText, color: 'text-purple-400' },
        { name: 'Messages', value: stats?.messages?.total || 0, icon: Mail, color: 'text-pink-400' },
        { name: 'Unread', value: stats?.messages?.unread || 0, icon: Mail, color: 'text-orange-400' },
    ];

    return (
        <div>
            <h1 className="text-3xl font-bold mb-2">Dashboard</h1>
            <p className="text-white/40 mb-10">Welcome back, Sayed. Here is what is happening with your portfolio.</p>

            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-12">
                {cards.map((card, i) => (
                    <motion.div
                        key={i}
                        initial={{ opacity: 0, scale: 0.9 }}
                        animate={{ opacity: 1, scale: 1 }}
                        transition={{ delay: i * 0.1 }}
                        className="glass p-8 rounded-2xl border-white/5"
                    >
                        <div className="flex justify-between items-start mb-4">
                            <div className={`p-3 rounded-lg bg-white/5 ${card.color}`}>
                                <card.icon size={24} />
                            </div>
                        </div>
                        <div className="text-3xl font-black mb-1">{card.value}</div>
                        <div className="text-xs uppercase tracking-widest text-white/30 font-bold">{card.name}</div>
                    </motion.div>
                ))}
            </div>

            <div className="grid lg:grid-cols-2 gap-8">
                <div className="glass p-8 rounded-3xl border-white/5 min-h-[400px]">
                    <h2 className="text-xl font-bold mb-6">Recent Activity</h2>
                    <div className="text-white/20 text-center py-20 italic">No recent activity detected.</div>
                </div>
                <div className="glass p-8 rounded-3xl border-white/5 min-h-[400px]">
                    <h2 className="text-xl font-bold mb-6">System Status</h2>
                    <div className="space-y-6">
                        <div className="flex justify-between items-center text-sm">
                            <span className="text-white/40">Database Status</span>
                            <span className="text-green-500 font-bold uppercase tracking-tighter">Online</span>
                        </div>
                        <div className="flex justify-between items-center text-sm">
                            <span className="text-white/40">Storage usage</span>
                            <span className="text-blue-400 font-bold">12%</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
}