"use client";

import { useRouter } from "next/navigation";
import { useAuth } from "../auth-context";
import { sharedStyles } from "../styles/shared";
import constants from "../../../shared/constants.json";
import { LanguageSelector } from "./LanguageSelector";
import { useTranslation } from "../hooks/useTranslation";

const { ADMIN, REGULAR } = constants.roles;

type PageId =
  | "profile"
  | "invites"
  | "exchange"
  | "trades"
  | "admin-invites"
  | "admin-availability"
  | "admin-trades"
  | "admin-price-history"
  | "admin-pricing";

interface HeaderProps {
  currentPage: PageId;
}

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

const REGULAR_NAV_ITEMS: NavItem[] = [
  { id: "exchange", labelKey: "exchange", href: "/exchange", regularOnly: true },
  { id: "trades", labelKey: "myTrades", href: "/trades", regularOnly: true },
  { id: "invites", labelKey: "myInvites", href: "/invites", regularOnly: true },
  { id: "profile", labelKey: "myProfile", href: "/profile", regularOnly: true },
];

const ADMIN_NAV_ITEMS: NavItem[] = [
  { id: "admin-trades", labelKey: "trades", href: "/admin/trades", adminOnly: true },
  {
    id: "admin-availability",
    labelKey: "availability",
    href: "/admin/availability",
    adminOnly: true,
  },
  { id: "admin-invites", labelKey: "invites", href: "/admin/invites", adminOnly: true },
  { id: "admin-price-history", labelKey: "prices", href: "/admin/price-history", adminOnly: true },
  { id: "admin-pricing", labelKey: "pricing", href: "/admin/pricing", adminOnly: true },
];

export function Header({ currentPage }: HeaderProps) {
  const { user, logout, hasRole } = useAuth();
  const router = useRouter();
  const t = useTranslation("navigation");
  const isRegularUser = hasRole(REGULAR);
  const isAdminUser = hasRole(ADMIN);

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

  if (!user) return null;

  // Build nav items based on user role
  // Admin users see admin nav items, regular users see regular nav items
  const navItems = isAdminUser ? ADMIN_NAV_ITEMS : REGULAR_NAV_ITEMS;
  const visibleItems = navItems.filter(
    (item) => (!item.regularOnly || isRegularUser) && (!item.adminOnly || isAdminUser)
  );

  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}>{t(item.labelKey)}</span>
            ) : (
              <a href={item.href} style={sharedStyles.navLink}>
                {t(item.labelKey)}
              </a>
            )}
          </span>
        ))}
      </div>
      <div style={sharedStyles.userInfo}>
        <LanguageSelector />
        <span style={sharedStyles.userEmail}>{user.email}</span>
        <button onClick={handleLogout} style={sharedStyles.logoutBtn}>
          {t("signOut")}
        </button>
      </div>
    </div>
  );
}