import {
  Content,
  Header,
  HeaderGlobalAction,
  HeaderGlobalBar,
  HeaderMenuItem,
  HeaderName,
  HeaderNavigation,
  SkipToContent,
} from "@carbon/react";
import { Asleep, Light } from "@carbon/icons-react";
import type { ReactNode } from "react";

export type AppView = "new" | "invoices" | "clients" | "settings";

const NAV: { id: AppView; label: string }[] = [
  { id: "new", label: "New invoice" },
  { id: "invoices", label: "Invoices" },
  { id: "clients", label: "Clients" },
  { id: "settings", label: "Settings" },
];

interface AppShellProps {
  view: AppView;
  onNavigate: (view: AppView) => void;
  theme: string;
  onToggleTheme: () => void;
  children: ReactNode;
}

export function AppShell({ view, onNavigate, theme, onToggleTheme, children }: AppShellProps) {
  // The Carbon header background follows the theme: light on g10, dark on g100.
  // The "dark" wordmark has dark text for light surfaces; "light" has white text for dark ones.
  const wordmark =
    theme === "g100" ? "/brand/bongbetic-wordmark-dark.png" : "/brand/bongbetic-wordmark-light.png";

  return (
    <>
      <Header aria-label="Voiced">
        <SkipToContent />
        <HeaderName href="#" prefix="">
          <span className="voiced-brand">
            <img className="voiced-brand__logo" src={wordmark} alt="Bongbetic" />
            <span className="voiced-brand__divider" aria-hidden="true" />
            <span className="voiced-brand__product">Voiced</span>
          </span>
        </HeaderName>
        <HeaderNavigation aria-label="Voiced navigation">
          {NAV.map((item) => (
            <HeaderMenuItem
              key={item.id}
              isCurrentPage={view === item.id}
              onClick={(event) => {
                event.preventDefault();
                onNavigate(item.id);
              }}
            >
              {item.label}
            </HeaderMenuItem>
          ))}
        </HeaderNavigation>
        <HeaderGlobalBar>
          <HeaderGlobalAction aria-label="Toggle colour theme" onClick={onToggleTheme}>
            {theme === "g100" ? <Light size={20} /> : <Asleep size={20} />}
          </HeaderGlobalAction>
        </HeaderGlobalBar>
      </Header>
      <Content id="main-content">{children}</Content>
    </>
  );
}