import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./globals.css";
import Link from "next/link";
import { LayoutDashboard, Users, Image as ImageIcon } from "lucide-react";

const inter = Inter({ subsets: ["latin"] });

export const metadata: Metadata = {
  title: "Bully IA Dashboard",
  description: "Visualisation des données d'analyse de cibles",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="fr" className="dark">
      <body className={`${inter.className} bg-slate-950 text-slate-50 min-h-screen flex`}>
        {/* Sidebar */}
        <aside className="w-64 border-r border-slate-800 bg-slate-900/50 p-6 flex flex-col gap-8">
          <div className="flex items-center gap-3 px-2">
            <div className="w-8 h-8 bg-indigo-600 rounded-lg flex items-center justify-center font-bold">B</div>
            <h1 className="text-xl font-bold tracking-tight">Bully IA</h1>
          </div>
          
          <nav className="flex flex-col gap-2">
            <Link 
              href="/" 
              className="flex items-center gap-3 px-3 py-2 rounded-lg hover:bg-slate-800 transition-colors text-slate-300 hover:text-white"
            >
              <LayoutDashboard size={20} />
              Tableau de bord
            </Link>
            <Link 
              href="/contributors" 
              className="flex items-center gap-3 px-3 py-2 rounded-lg hover:bg-slate-800 transition-colors text-slate-300 hover:text-white"
            >
              <Users size={20} />
              Contributeurs
            </Link>
          </nav>

          <div className="mt-auto pt-6 border-t border-slate-800">
            <p className="text-xs text-slate-500 px-2">v1.0.0 Alpha</p>
          </div>
        </aside>

        {/* Main Content */}
        <main className="flex-1 flex flex-col">
          <header className="h-16 border-b border-slate-800 flex items-center px-8 bg-slate-900/20">
            <div className="flex items-center gap-2 text-sm text-slate-400">
              <span>Admin</span>
              <span>/</span>
              <span className="text-slate-200">Dashboard</span>
            </div>
          </header>
          <div className="flex-1 p-8 overflow-auto">
            {children}
          </div>
        </main>
      </body>
    </html>
  );
}
