import Image from "next/image";
import Link from "next/link";
import { publicLogoutAction } from "@/lib/actions";
import { getSession } from "@/lib/auth";
import { prisma } from "@/lib/prisma";

const navItems = [
  { href: "/", label: "Home" },
  { href: "/videos", label: "Videos" },
  { href: "/gallery", label: "Gallery" },
  { href: "/articles", label: "Blog" },
  { href: "/about", label: "About" },
  { href: "/contact", label: "Contact" }
];

export async function SiteHeader() {
  const [setting, session] = await Promise.all([
    prisma.siteSetting.findUnique({ where: { key: "site" } }),
    getSession()
  ]);

  return (
    <div className="container site-header-wrap">
      <header className="site-nav">
        <Link className="logo" href="/">
          <div className="logo-icon">
            {setting?.logoUrl ? <Image alt="Just Chill Nepal logo" fill sizes="60px" src={setting.logoUrl} unoptimized /> : "J"}
          </div>
          <div className="logo-text">
            <h1>JUST CHILL NEPAL</h1>
            <p>Nepal Media Platform</p>
          </div>
        </Link>
        <nav className="nav-links" aria-label="Main navigation">
          {navItems.map((item) => (
            <Link className="nav-link" href={item.href} key={item.href}>{item.label}</Link>
          ))}
          {session ? (
            <>
              <Link className="nav-link" href={session.role === "USER" ? "/dashboard" : "/admin"}>{session.role === "USER" ? "Dashboard" : "Admin"}</Link>
              <form action={publicLogoutAction}>
                <button className="nav-link" type="submit">Logout</button>
              </form>
            </>
          ) : (
            <Link className="nav-link" href="/login">Login</Link>
          )}
        </nav>
        <details className="mobile-nav-menu">
          <summary aria-label="Open navigation menu">
            <span></span>
            <span></span>
            <span></span>
          </summary>
          <nav aria-label="Mobile navigation">
            {navItems.map((item) => (
              <Link className="nav-link" href={item.href} key={item.href}>{item.label}</Link>
            ))}
            {session ? (
              <>
                <Link className="nav-link" href={session.role === "USER" ? "/dashboard" : "/admin"}>{session.role === "USER" ? "Dashboard" : "Admin"}</Link>
                <form action={publicLogoutAction}>
                  <button className="nav-link" type="submit">Logout</button>
                </form>
              </>
            ) : (
              <Link className="nav-link" href="/login">Login</Link>
            )}
          </nav>
        </details>
      </header>
    </div>
  );
}