"use client";

import { signOut, useSession } from "next-auth/react";
import Link from "next/link";
import { usePathname, useRouter } from "next/navigation";
import { useEffect, type ReactNode } from "react";
import {
  LayoutDashboard,
  FolderOpen,
  Users,
  MessageSquare,
  Star,
  LogOut,
  Shield,
  Settings as SettingsIcon,
} from "lucide-react";
import Image from "next/image";

const NAV = [
  { href: "/admin", label: "Dashboard", icon: LayoutDashboard, exact: true },
  { href: "/admin/portfolyo", label: "Portfolyo", icon: FolderOpen },
  { href: "/admin/takim", label: "Takım", icon: Users },
  { href: "/admin/yorumlar", label: "Yorumlar", icon: MessageSquare },
  { href: "/admin/referanslar", label: "Referanslar", icon: Star },
  { href: "/admin/ayarlar", label: "Ayarlar", icon: SettingsIcon },
];

export default function AdminShell({ children }: { children: ReactNode }) {
  const { data: session, status } = useSession();
  const pathname = usePathname();
  const router = useRouter();

  const isLoginRoute = pathname === "/admin/login";

  useEffect(() => {
    if (!isLoginRoute && status === "unauthenticated") {
      router.push("/admin/login");
    }
  }, [status, router, isLoginRoute]);

  if (isLoginRoute) {
    return <>{children}</>;
  }

  if (status === "loading") {
    return (
      <div className="min-h-[80vh] flex items-center justify-center text-brand-300">
        Yükleniyor...
      </div>
    );
  }

  if (!session) return null;

  return (
    <div className="min-h-screen flex flex-col lg:flex-row">
      <aside className="w-full lg:w-64 lg:min-h-screen bg-[#070b14]/95 backdrop-blur-md border-b lg:border-b-0 lg:border-r border-brand-700/30 flex flex-col">
        <div className="p-5 border-b border-brand-700/30">
          <Link href="/" className="flex items-center gap-3">
            <div className="relative w-9 h-9">
              <Image
                src="/logo.png"
                alt="Source Setups"
                fill
                className="object-contain"
              />
            </div>
            <div>
              <div
                className="text-sm font-bold leading-tight"
                style={{ color: "#7c92ae" }}
              >
                Source Setups
              </div>
              <div className="text-[10px] text-brand-400 inline-flex items-center gap-1">
                <Shield className="w-3 h-3" /> Yönetim Paneli
              </div>
            </div>
          </Link>
        </div>

        <nav className="flex-1 p-3 space-y-1">
          {NAV.map((item) => {
            const active = item.exact
              ? pathname === item.href
              : pathname?.startsWith(item.href);
            const Icon = item.icon;
            return (
              <Link
                key={item.href}
                href={item.href}
                className={`flex items-center gap-3 px-3 py-2 rounded-lg text-sm transition ${
                  active
                    ? "bg-brand-700/40 text-white"
                    : "text-brand-300 hover:bg-brand-700/20 hover:text-white"
                }`}
              >
                <Icon className="w-4 h-4" />
                {item.label}
              </Link>
            );
          })}
        </nav>

        <div className="p-3 border-t border-brand-700/30">
          <div className="px-3 py-2 mb-2 text-xs text-brand-400">
            Giriş: <span className="text-brand-200">{session.user?.name}</span>
          </div>
          <button
            onClick={() => signOut({ callbackUrl: "/" })}
            className="w-full flex items-center gap-3 px-3 py-2 rounded-lg text-sm text-red-300 hover:bg-red-500/10 transition"
          >
            <LogOut className="w-4 h-4" />
            Çıkış Yap
          </button>
        </div>
      </aside>

      <main className="flex-1 min-w-0">
        <div className="p-6 lg:p-10 max-w-6xl mx-auto">{children}</div>
      </main>
    </div>
  );
}