import { useAuth } from "@/_core/hooks/useAuth";
import { Link, useLocation } from "wouter";

const adminNav = [
  { label: "Dashboard", path: "/admin", icon: "📊" },
  { label: "Séries/Programas", path: "/admin/series", icon: "◈" },
  { label: "Episódios", path: "/admin/episodios", icon: "♪" },
  { label: "Apresentadores", path: "/admin/apresentadores", icon: "✦" },
  { label: "Vinhetas", path: "/admin/vinhetas", icon: "◉" },
];

export default function AdminLayout({ children }: { children: React.ReactNode }) {
  const [location, navigate] = useLocation();
  const { user, loading } = useAuth({ redirectOnUnauthenticated: true });

  if (loading) {
    return (
      <div className="min-h-screen flex items-center justify-center bg-sof-borgonha text-sof-text-3">
        Carregando...
      </div>
    );
  }

  if (user && user.role !== "admin") {
    return (
      <div className="min-h-screen flex flex-col items-center justify-center bg-sof-borgonha text-sof-text-2 gap-4">
        <p className="text-lg font-bold">Acesso restrito</p>
        <p className="text-sm text-sof-text-3">Esta área é exclusiva para administradores.</p>
        <button
          onClick={() => navigate("/")}
          className="bg-sof-borgonha text-white px-6 py-2 rounded-lg font-bold"
        >
          Voltar ao início
        </button>
      </div>
    );
  }

  return (
    <div className="flex min-h-screen bg-sof-borgonha text-sof-text">
      {/* Admin Sidebar */}
      <aside className="w-64 bg-sof-borgonha text-white fixed h-full shadow-xl overflow-y-auto">
        <div className="p-6 border-b border-white/10">
          <h1 className="text-xl font-bold font-display text-sof-gold">SOF Admin</h1>
          <p className="text-[10px] uppercase tracking-widest text-white/50">Painel de Controle</p>
        </div>
        <nav className="p-4 space-y-2">
          {adminNav.map(item => (
            <Link key={item.path} href={item.path}>
              <div
                className={`flex items-center gap-3 p-3 rounded-lg cursor-pointer transition-all ${
                  location === item.path ? "bg-sof-gold text-sof-borgonha font-bold" : "hover:bg-white/10"
                }`}
              >
                <span>{item.icon}</span>
                <span>{item.label}</span>
              </div>
            </Link>
          ))}
          <div className="pt-8">
            <Link href="/">
              <div className="flex items-center gap-3 p-3 rounded-lg cursor-pointer hover:bg-white/10 text-white/70">
                <span>⬅</span>
                <span>Voltar ao Site</span>
              </div>
            </Link>
          </div>
        </nav>
      </aside>

      {/* Main Content */}
      <main className="ml-64 flex-1 p-8">
        <header className="flex justify-between items-center mb-8 bg-sof-borgonha-light p-6 rounded-xl shadow-sm border border-sof-border">
          <div>
            <h2 className="text-2xl font-bold text-sof-text">
              {adminNav.find(n => n.path === location)?.label || "Administração"}
            </h2>
            <p className="text-sm text-sof-text-3">Gerencie o conteúdo da plataforma SpotOnFide</p>
          </div>
          <div className="flex items-center gap-4">
            <div className="text-right">
              <p className="text-sm font-bold">{user?.name}</p>
              <p className="text-xs text-sof-text-3">{user?.email}</p>
            </div>
            <div className="w-10 h-10 bg-sof-gold rounded-full flex items-center justify-center text-sof-borgonha font-bold">
              {user?.name?.slice(0, 2).toUpperCase()}
            </div>
          </div>
        </header>
        <div className="bg-sof-borgonha-light rounded-xl shadow-sm border border-sof-border p-8 min-h-[600px]">
          {children}
        </div>
      </main>
    </div>
  );
}
