fotospiel-app/resources/js/guest/components/Header.tsx

import React from 'react';
import AppearanceToggleDropdown from '@/components/appearance-dropdown';
import { User, Heart, Users, PartyPopper, Camera } from 'lucide-react';
import { useEventData } from '../hooks/useEventData';
import { useOptionalEventStats } from '../context/EventStatsContext';
import { useOptionalGuestIdentity } from '../context/GuestIdentityContext';
import { SettingsSheet } from './settings-sheet';
import { useTranslation } from '../i18n/useTranslation';
import { DEFAULT_EVENT_BRANDING, useOptionalEventBranding } from '../context/EventBrandingContext';

const EVENT_ICON_COMPONENTS: Record<string, React.ComponentType<{ className?: string }>> = {
  heart: Heart,
  guests: Users,
  party: PartyPopper,
  camera: Camera,
};

function isLikelyEmoji(value: string): boolean {
  if (!value) {
    return false;
  }
  const characters = Array.from(value.trim());
  if (characters.length === 0 || characters.length > 2) {
    return false;
  }
  return characters.some((char) => {
    const codePoint = char.codePointAt(0) ?? 0;
    return codePoint > 0x2600;
  });
}

function getInitials(name: string): string {
  const words = name.split(' ').filter(Boolean);
  if (words.length >= 2) {
    return `${words[0][0]}${words[1][0]}`.toUpperCase();
  }
  return name.substring(0, 2).toUpperCase();
}

function renderEventAvatar(name: string, icon: unknown, accentColor: string, textColor: string) {
  if (typeof icon === 'string') {
    const trimmed = icon.trim();
    if (trimmed) {
      const normalized = trimmed.toLowerCase();
      const IconComponent = EVENT_ICON_COMPONENTS[normalized];
      if (IconComponent) {
        return (
          <div
            className="flex h-10 w-10 items-center justify-center rounded-full shadow-sm"
            style={{ backgroundColor: accentColor, color: textColor }}
          >
            <IconComponent className="h-5 w-5" aria-hidden />
          </div>
        );
      }

      if (isLikelyEmoji(trimmed)) {
        return (
          <div
            className="flex h-10 w-10 items-center justify-center rounded-full text-xl shadow-sm"
            style={{ backgroundColor: accentColor, color: textColor }}
          >
            <span aria-hidden>{trimmed}</span>
            <span className="sr-only">{name}</span>
          </div>
        );
      }
    }
  }

  return (
    <div
      className="flex h-10 w-10 items-center justify-center rounded-full font-semibold text-sm shadow-sm"
      style={{ backgroundColor: accentColor, color: textColor }}
    >
      {getInitials(name)}
    </div>
  );
}

export default function Header({ eventToken, title = '' }: { eventToken?: string; title?: string }) {
  const statsContext = useOptionalEventStats();
  const identity = useOptionalGuestIdentity();
  const { t } = useTranslation();
  const brandingContext = useOptionalEventBranding();
  const branding = brandingContext?.branding ?? DEFAULT_EVENT_BRANDING;
  const primaryForeground = '#ffffff';
  const { event, status } = useEventData();

  if (!eventToken) {
    const guestName = identity?.name && identity?.hydrated ? identity.name : null;
    return (
      <div
        className="sticky top-0 z-20 flex items-center justify-between border-b bg-white/70 px-4 py-2 backdrop-blur dark:bg-black/40"
        style={branding.fontFamily ? { fontFamily: branding.fontFamily } : undefined}
      >
        <div className="flex flex-col">
          <div className="font-semibold">{title}</div>
          {guestName && (
            <span className="text-xs text-muted-foreground">
              {`${t('common.hi')} ${guestName}`}
            </span>
          )}
        </div>
        <div className="flex items-center gap-2">
          <AppearanceToggleDropdown />
          <SettingsSheet />
        </div>
      </div>
    );
  }

  const guestName =
    identity && identity.eventKey === eventToken && identity.hydrated && identity.name ? identity.name : null;

  const headerStyle: React.CSSProperties = {
    background: `linear-gradient(135deg, ${branding.primaryColor}, ${branding.secondaryColor})`,
    color: primaryForeground,
    fontFamily: branding.fontFamily ?? undefined,
  };

  const accentColor = branding.secondaryColor;

  if (status === 'loading') {
    return (
      <div className="sticky top-0 z-20 flex items-center justify-between border-b border-white/10 px-4 py-2 text-white shadow-sm backdrop-blur" style={headerStyle}>
        <div className="font-semibold" style={branding.fontFamily ? { fontFamily: branding.fontFamily } : undefined}>{t('header.loading')}</div>
        <div className="flex items-center gap-2">
          <AppearanceToggleDropdown />
          <SettingsSheet />
        </div>
      </div>
    );
  }

  if (status !== 'ready' || !event) {
    return null;
  }

  const stats =
    statsContext && statsContext.eventKey === eventToken ? statsContext : undefined;

  return (
    <div
      className="sticky top-0 z-20 flex items-center justify-between border-b border-white/10 px-4 py-3 text-white shadow-sm backdrop-blur"
      style={headerStyle}
    >
      <div className="flex items-center gap-3">
        {renderEventAvatar(event.name, event.type?.icon, accentColor, primaryForeground)}
        <div className="flex flex-col" style={branding.fontFamily ? { fontFamily: branding.fontFamily } : undefined}>
          <div className="font-semibold text-base">{event.name}</div>
          {guestName && (
            <span className="text-xs text-white/80">
              {`${t('common.hi')} ${guestName}`}
            </span>
          )}
          <div className="flex items-center gap-2 text-xs text-white/70">
            {stats && (
              <>
                <span className="flex items-center gap-1">
                  <User className="h-3 w-3" />
                  <span>{`${stats.onlineGuests} ${t('header.stats.online')}`}</span>
                </span>
                <span className="text-muted-foreground">|</span>
                <span className="flex items-center gap-1">
                  <span className="font-medium">{stats.tasksSolved}</span>{' '}
                  {t('header.stats.tasksSolved')}
                </span>
              </>
            )}
          </div>
        </div>
      </div>
      <div className="flex items-center gap-2">
        <AppearanceToggleDropdown />
        <SettingsSheet />
      </div>
    </div>
  );
}

export {}