"use client";

import { useRouter } from "next/navigation";
import { useAuth } from "../auth-context";
import { sharedStyles } from "../styles/shared";

type PageId = "counter" | "sum" | "profile" | "invites" | "audit" | "admin-invites";

interface HeaderProps {
  currentPage: PageId;
}

interface NavItem {
  id: PageId;
  label: string;
  href: string;
  regularOnly?: boolean;
  adminOnly?: boolean;
}

const REGULAR_NAV_ITEMS: NavItem[] = [
  { id: "counter", label: "Counter", href: "/" },
  { id: "sum", label: "Sum", href: "/sum" },
  { id: "invites", label: "My Invites", href: "/invites", regularOnly: true },
  { id: "profile", label: "My Profile", href: "/profile", regularOnly: true },
];

const ADMIN_NAV_ITEMS: NavItem[] = [
  { id: "audit", label: "Audit", href: "/audit", adminOnly: true },
  { id: "admin-invites", label: "Invites", href: "/admin/invites", adminOnly: true },
];

export function Header({ currentPage }: HeaderProps) {
  const { user, logout, hasRole } = useAuth();
  const router = useRouter();
  const isRegularUser = hasRole("regular");
  const isAdminUser = hasRole("admin");

  const handleLogout = async () => {
    await logout();
    router.push("/login");
  };

  if (!user) return null;

  // For admin pages, show admin navigation
  if (isAdminUser && (currentPage === "audit" || currentPage === "admin-invites")) {
    return (
      <div style={sharedStyles.header}>
        <div style={sharedStyles.nav}>
          {ADMIN_NAV_ITEMS.map((item, index) => (
            <span key={item.id}>
              {index > 0 && <span style={sharedStyles.navDivider}>•</span>}
              {item.id === currentPage ? (
                <span style={sharedStyles.navCurrent}>{item.label}</span>
              ) : (
                <a href={item.href} style={sharedStyles.navLink}>
                  {item.label}
                </a>
              )}
            </span>
          ))}
        </div>
        <div style={sharedStyles.userInfo}>
          <span style={sharedStyles.userEmail}>{user.email}</span>
          <button onClick={handleLogout} style={sharedStyles.logoutBtn}>
            Sign out
          </button>
        </div>
      </div>
    );
  }

  // For regular pages, build nav with links
  const visibleItems = REGULAR_NAV_ITEMS.filter(
    (item) => !item.regularOnly || isRegularUser
  );

  return (
    <div style={sharedStyles.header}>
      <div style={sharedStyles.nav}>
        {visibleItems.map((item, index) => (
          <span key={item.id}>
            {index > 0 && <span style={sharedStyles.navDivider}>•</span>}
            {item.id === currentPage ? (
              <span style={sharedStyles.navCurrent}>{item.label}</span>
            ) : (
              <a href={item.href} style={sharedStyles.navLink}>
                {item.label}
              </a>
            )}
          </span>
        ))}
      </div>
      <div style={sharedStyles.userInfo}>
        <span style={sharedStyles.userEmail}>{user.email}</span>
        <button onClick={handleLogout} style={sharedStyles.logoutBtn}>
          Sign out
        </button>
      </div>
    </div>
  );
}