import type { Locale } from '@/lib/localization/config';
import type { ShellMessages } from '@/lib/localization/messages';
import type { ThemePreference } from '@/lib/theme/config';
import { DemoTrigger } from '@/components/integrations/DemoTrigger';
import { BrandLink } from './BrandLink';
import { DisabledAction } from './DisabledAction';
import { HeaderNavigation } from './HeaderNavigation';
import { LocaleSelector } from './LocaleSelector';
import { MobileNavigation } from './MobileNavigation';
import styles from './SiteHeader.module.css';
import { ThemeSelector } from './ThemeSelector';

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

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

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

        <div
          className={styles.desktopControls}
          role="group"
          aria-label={messages.header.controlsLabel}
        >
          <LocaleSelector
            currentLocale={locale}
            label={messages.controls.language}
            localeNames={messages.controls.localeNames}
            compact
          />
          <ThemeSelector
            initialPreference={themePreference}
            label={messages.controls.theme}
            statusTemplate={messages.controls.themeStatus}
            optionLabels={messages.controls.themes}
            compact
          />
          <DisabledAction label={messages.header.login} reason={messages.header.loginUnavailable} />
          <DemoTrigger
            label={messages.header.demo}
            source="header"
            size="small"
            disabledReason={demoEnabled ? undefined : messages.header.demoUnavailable}
          />
        </div>

        <div className={styles.mobileActions}>
          <DemoTrigger
            label={messages.header.demo}
            source="mobile-header"
            size="small"
            className={styles.mobileDemoTrigger}
            disabledReason={demoEnabled ? undefined : messages.header.demoUnavailable}
          />
          <MobileNavigation
            locale={locale}
            messages={messages}
            themePreference={themePreference}
            demoEnabled={demoEnabled}
          />
        </div>
      </div>
    </header>
  );
}
