"use client";

import React from 'react';
import { Package, FileText, Users, MessageSquare, Image as ImageIcon, Settings } from 'lucide-react';

export default function AdminDashboardPage() {
  const stats = [
    { title: 'Produits', count: 12, icon: Package, color: 'text-blue-500', bg: 'bg-blue-50' },
    { title: 'Articles de Blog', count: 5, icon: FileText, color: 'text-emerald-500', bg: 'bg-emerald-50' },
    { title: 'Clients Confiance', count: 8, icon: Users, color: 'text-amber-500', bg: 'bg-amber-50' },
    { title: 'Témoignages', count: 3, icon: MessageSquare, color: 'text-purple-500', bg: 'bg-purple-50' },
  ];

  return (
    <div className="space-y-8 animate-in fade-in duration-300">
      <div>
        <h1 className="text-3xl font-black text-gray-900 tracking-tight">Tableau de Bord</h1>
        <p className="text-gray-500 mt-2 font-medium">Bienvenue dans l'espace d'administration K-Creation.</p>
      </div>

      {/* Stats Cards */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
        {stats.map((stat, idx) => (
          <div key={idx} className="bg-white p-6 rounded-2xl shadow-sm border border-gray-100 flex items-center gap-4 hover:shadow-md transition-shadow">
            <div className={`w-14 h-14 rounded-xl flex items-center justify-center ${stat.bg} ${stat.color}`}>
              <stat.icon className="w-7 h-7" />
            </div>
            <div>
              <p className="text-gray-500 text-sm font-bold">{stat.title}</p>
              <h3 className="text-2xl font-black text-gray-900">{stat.count}</h3>
            </div>
          </div>
        ))}
      </div>

      {/* Quick Actions */}
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
        <div className="bg-white rounded-2xl shadow-sm border border-gray-100 p-8">
          <h2 className="text-xl font-black text-gray-900 mb-6">Actions Rapides</h2>
          <div className="space-y-4">
            <a href="/fr/admin/products" className="flex items-center justify-between p-4 rounded-xl border border-gray-100 hover:border-[#dc2626] hover:bg-red-50 transition-colors group">
              <div className="flex items-center gap-3">
                <div className="p-2 bg-gray-50 rounded-lg group-hover:bg-white transition-colors">
                  <Package className="w-5 h-5 text-gray-600 group-hover:text-[#dc2626]" />
                </div>
                <span className="font-bold text-gray-700 group-hover:text-[#dc2626]">Ajouter un produit</span>
              </div>
              <span className="text-gray-400 group-hover:text-[#dc2626]">&rarr;</span>
            </a>
            
            <a href="/fr/admin/carousel" className="flex items-center justify-between p-4 rounded-xl border border-gray-100 hover:border-[#dc2626] hover:bg-red-50 transition-colors group">
              <div className="flex items-center gap-3">
                <div className="p-2 bg-gray-50 rounded-lg group-hover:bg-white transition-colors">
                  <ImageIcon className="w-5 h-5 text-gray-600 group-hover:text-[#dc2626]" />
                </div>
                <span className="font-bold text-gray-700 group-hover:text-[#dc2626]">Modifier le carrousel</span>
              </div>
              <span className="text-gray-400 group-hover:text-[#dc2626]">&rarr;</span>
            </a>

            <a href="/fr/admin/blogs" className="flex items-center justify-between p-4 rounded-xl border border-gray-100 hover:border-[#dc2626] hover:bg-red-50 transition-colors group">
              <div className="flex items-center gap-3">
                <div className="p-2 bg-gray-50 rounded-lg group-hover:bg-white transition-colors">
                  <FileText className="w-5 h-5 text-gray-600 group-hover:text-[#dc2626]" />
                </div>
                <span className="font-bold text-gray-700 group-hover:text-[#dc2626]">Publier un article</span>
              </div>
              <span className="text-gray-400 group-hover:text-[#dc2626]">&rarr;</span>
            </a>
          </div>
        </div>

        <div className="bg-[#111111] rounded-2xl shadow-xl p-8 relative overflow-hidden">
          <div className="absolute top-0 right-0 w-64 h-64 bg-[#dc2626] opacity-10 blur-[80px] rounded-full mix-blend-screen pointer-events-none"></div>
          <h2 className="text-xl font-black text-white mb-6">Paramètres du Site</h2>
          <div className="space-y-4 relative z-10">
            <p className="text-gray-400 text-sm leading-relaxed mb-6">
              Gérez les informations globales de votre site web, y compris les logos des clients, les témoignages, et les informations de contact affichées dans le pied de page.
            </p>
            <a href="/fr/admin/footer" className="inline-flex items-center gap-2 bg-[#dc2626] hover:bg-red-700 text-white font-bold py-3 px-6 rounded-xl transition-colors">
              <Settings className="w-5 h-5" />
              Gérer le pied de page
            </a>
          </div>
        </div>
      </div>
    </div>
  );
}
