import { localizedModePath, type Locale } from '@/lib/localization/config';
import type { ShellMessages } from '@/lib/localization/messages';
import type { ThemePreference } from '@/lib/theme/config';
import { ActionLink } from '@/components/actions/ActionLink';
import { accountCreateUrl } from '@/lib/account-urls';
import { BrandLink } from './BrandLink';
import { HeaderNavigation } from './HeaderNavigation';
import { LocalePill } from './LocalePill';
import { MobileNavigation } from './MobileNavigation';
import styles from './SiteHeader.module.css';
import { ThemePill } from './ThemePill';

function signInUrl(locale: Locale, mode: ThemePreference): string {
  return localizedModePath('sign-in', locale, mode);
}

interface SiteHeaderProps {
  locale: Locale;
  messages: ShellMessages;
  themePreference: ThemePreference;
}

export function SiteHeader({ locale, messages, themePreference }: SiteHeaderProps) {
  return (
    <header className={styles.header}>
      <div className={styles.inner}>
        <BrandLink locale={locale} mode={themePreference} label={messages.brandLabel} />

        <div className={styles.desktopNavigation}>
          <HeaderNavigation
            locale={locale}
            mode={themePreference}
            label={messages.header.navigationLabel}
            labels={messages.header.nav}
          />
        </div>

        <div
          className={styles.desktopControls}
          role="group"
          aria-label={messages.header.controlsLabel}
        >
          <LocalePill locale={locale} />
          <ThemePill initialPreference={themePreference} />
          <ActionLink href={signInUrl(locale, themePreference)} variant="button-primary">
            {messages.header.login}
          </ActionLink>
          <ActionLink href={accountCreateUrl(locale)} variant="button-conversion">
            {messages.header.demo}
          </ActionLink>
        </div>

        <div className={styles.mobileActions}>
          <ActionLink
            href={accountCreateUrl(locale)}
            variant="button-conversion"
            className={styles.mobileDemoTrigger}
          >
            {messages.header.demo}
          </ActionLink>
          <MobileNavigation
            locale={locale}
            messages={messages}
            themePreference={themePreference}
          />
        </div>
      </div>
    </header>
  );
}
