import React from 'react';
import { createPortal } from 'react-dom';
import { Link } from 'react-router-dom';
import AppearanceToggleDropdown from '@/components/appearance-dropdown';
import {
  User,
  Heart,
  Users,
  PartyPopper,
  Camera,
  Bell,
  ArrowUpRight,
  Clock,
  MessageSquare,
  Sparkles,
  LifeBuoy,
  UploadCloud,
  AlertCircle,
  Check,
  X,
  RefreshCw,
} from 'lucide-react';
import { useEventData } from '../hooks/useEventData';
import { useOptionalEventStats } from '../context/EventStatsContext';
import { SettingsSheet } from './settings-sheet';
import { useTranslation, type TranslateFn } from '../i18n/useTranslation';
import { DEFAULT_EVENT_BRANDING, useOptionalEventBranding } from '../context/EventBrandingContext';
import { useOptionalNotificationCenter, type NotificationCenterValue } from '../context/NotificationCenterContext';
import { usePushSubscription } from '../hooks/usePushSubscription';
import { getContrastingTextColor, relativeLuminance, hexToRgb } from '../lib/color';
import { isTaskModeEnabled } from '../lib/engagement';

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

type LogoSize = 's' | 'm' | 'l';

const LOGO_SIZE_CLASSES: Record<LogoSize, { container: string; image: string; emoji: string; icon: string; initials: string }> = {
  s: { container: 'h-8 w-8', image: 'h-7 w-7', emoji: 'text-lg', icon: 'h-4 w-4', initials: 'text-[11px]' },
  m: { container: 'h-10 w-10', image: 'h-9 w-9', emoji: 'text-xl', icon: 'h-5 w-5', initials: 'text-sm' },
  l: { container: 'h-12 w-12', image: 'h-11 w-11', emoji: 'text-2xl', icon: 'h-6 w-6', initials: 'text-base' },
};

function getLogoClasses(size?: LogoSize) {
  return LOGO_SIZE_CLASSES[size ?? 'm'];
}

const NOTIFICATION_ICON_MAP: Record<string, React.ComponentType<{ className?: string }>> = {
  broadcast: MessageSquare,
  feedback_request: MessageSquare,
  achievement_major: Sparkles,
  support_tip: LifeBuoy,
  upload_alert: UploadCloud,
  photo_activity: 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 toRgba(value: string, alpha: number): string {
  const rgb = hexToRgb(value);
  if (!rgb) {
    return `rgba(255, 255, 255, ${alpha})`;
  }
  return `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${alpha})`;
}

function EventAvatar({
  name,
  icon,
  accentColor,
  textColor,
  logo,
}: {
  name: string;
  icon: unknown;
  accentColor: string;
  textColor: string;
  logo?: { mode: 'emoticon' | 'upload'; value: string | null; size?: LogoSize };
}) {
  const logoValue = logo?.mode === 'upload' ? (logo.value?.trim() || null) : null;
  const [logoFailed, setLogoFailed] = React.useState(false);

  React.useEffect(() => {
    setLogoFailed(false);
  }, [logoValue]);

  const sizes = getLogoClasses(logo?.size);
  if (logo?.mode === 'upload' && logoValue && !logoFailed) {
    return (
      <div className={`flex items-center justify-center rounded-full bg-white shadow-sm ${sizes.container}`}>
        <img
          src={logoValue}
          alt={name}
          className={`rounded-full object-contain ${sizes.image}`}
          onError={() => setLogoFailed(true)}
        />
      </div>
    );
  }
  if (logo?.mode === 'emoticon' && logo.value && isLikelyEmoji(logo.value)) {
    return (
      <div
        className={`flex items-center justify-center rounded-full shadow-sm ${sizes.container} ${sizes.emoji}`}
        style={{ backgroundColor: accentColor, color: textColor }}
      >
        <span aria-hidden>{logo.value}</span>
        <span className="sr-only">{name}</span>
      </div>
    );
  }

  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 items-center justify-center rounded-full shadow-sm ${sizes.container}`}
              style={{ backgroundColor: accentColor, color: textColor }}
            >
              <IconComponent className={sizes.icon} aria-hidden />
            </div>
          );
        }

      if (isLikelyEmoji(trimmed)) {
        return (
          <div
            className={`flex items-center justify-center rounded-full shadow-sm ${sizes.container} ${sizes.emoji}`}
            style={{ backgroundColor: accentColor, color: textColor }}
          >
            <span aria-hidden>{trimmed}</span>
            <span className="sr-only">{name}</span>
          </div>
        );
      }
    }
  }

  return (
    <div
      className={`flex items-center justify-center rounded-full font-semibold shadow-sm ${sizes.container} ${sizes.initials}`}
      style={{ backgroundColor: accentColor, color: textColor }}
    >
      {getInitials(name)}
    </div>
  );
}

export default function Header({ eventToken, title = '' }: { eventToken?: string; title?: string }) {
  const statsContext = useOptionalEventStats();
  const { t } = useTranslation();
  const brandingContext = useOptionalEventBranding();
  const branding = brandingContext?.branding ?? DEFAULT_EVENT_BRANDING;
  const headerTextColor = React.useMemo(() => {
    const primaryLum = relativeLuminance(branding.primaryColor);
    const secondaryLum = relativeLuminance(branding.secondaryColor);
    const avgLum = (primaryLum + secondaryLum) / 2;

    if (avgLum > 0.55) {
      return getContrastingTextColor(branding.primaryColor, '#0f172a', '#ffffff');
    }

    return '#ffffff';
  }, [branding.primaryColor, branding.secondaryColor]);
  const { event, status } = useEventData();
  const notificationCenter = useOptionalNotificationCenter();
  const [notificationsOpen, setNotificationsOpen] = React.useState(false);
  const tasksEnabled = isTaskModeEnabled(event);
  const panelRef = React.useRef<HTMLDivElement | null>(null);
  const notificationButtonRef = React.useRef<HTMLButtonElement | null>(null);
  React.useEffect(() => {
    if (!notificationsOpen) {
      return;
    }
    const handler = (event: MouseEvent) => {
      if (notificationButtonRef.current?.contains(event.target as Node)) {
        return;
      }
      if (!panelRef.current) return;
      if (panelRef.current.contains(event.target as Node)) return;
      setNotificationsOpen(false);
    };
    document.addEventListener('mousedown', handler);
    return () => document.removeEventListener('mousedown', handler);
  }, [notificationsOpen]);

  const headerFont = branding.typography?.heading ?? branding.fontFamily ?? undefined;
  const bodyFont = branding.typography?.body ?? branding.fontFamily ?? undefined;
  const logoPosition = branding.logo?.position ?? 'left';
  const headerStyle: React.CSSProperties = {
    background: `linear-gradient(135deg, ${branding.primaryColor}, ${branding.secondaryColor})`,
    color: headerTextColor,
    fontFamily: headerFont,
  };
  const headerGlowPrimary = toRgba(branding.primaryColor, 0.35);
  const headerGlowSecondary = toRgba(branding.secondaryColor, 0.35);
  const headerShimmer = `linear-gradient(120deg, ${toRgba(branding.primaryColor, 0.28)}, transparent 45%, ${toRgba(branding.secondaryColor, 0.32)})`;
  const headerHairline = `linear-gradient(90deg, transparent, ${toRgba(headerTextColor, 0.4)}, transparent)`;

  if (!eventToken) {
    return (
      <div
        className="guest-header sticky top-0 z-30 relative overflow-hidden border-b border-white/20 bg-white/70 px-4 py-2 shadow-[0_14px_40px_-30px_rgba(15,23,42,0.6)] backdrop-blur-2xl dark:border-white/10 dark:bg-black/40"
        style={branding.fontFamily ? { fontFamily: branding.fontFamily } : undefined}
      >
        <div className="pointer-events-none absolute inset-0 opacity-70 guest-aurora-soft" style={{ backgroundImage: headerShimmer }} aria-hidden />
        <div className="pointer-events-none absolute -top-8 right-0 h-24 w-24 rounded-full bg-white/60 blur-3xl dark:bg-white/10" aria-hidden />
        <div className="pointer-events-none absolute inset-x-0 bottom-0 h-px bg-gradient-to-r from-transparent via-white/40 to-transparent dark:via-white/15" aria-hidden />
        <div className="relative z-10 flex w-full items-center gap-3 flex-nowrap">
          <div className="flex min-w-0 flex-col">
            <div className="font-semibold">{title}</div>
          </div>
          <div className="ml-auto flex items-center justify-end gap-2">
            <AppearanceToggleDropdown />
            <SettingsSheet />
          </div>
        </div>
      </div>
    );
  }

  const accentColor = branding.secondaryColor;

  if (status === 'loading') {
    return (
      <div className="guest-header sticky top-0 z-30 relative overflow-hidden border-b border-white/20 px-4 py-2 shadow-[0_18px_45px_-30px_rgba(15,23,42,0.65)] backdrop-blur-2xl" style={headerStyle}>
        <div className="pointer-events-none absolute inset-0 opacity-70 guest-aurora" style={{ backgroundImage: headerShimmer }} aria-hidden />
        <div className="pointer-events-none absolute -top-10 right-[-32px] h-28 w-28 rounded-full blur-3xl" style={{ background: headerGlowSecondary }} aria-hidden />
        <div className="pointer-events-none absolute -bottom-8 left-1/3 h-20 w-40 -translate-x-1/2 rounded-full blur-3xl" style={{ background: headerGlowPrimary }} aria-hidden />
        <div className="pointer-events-none absolute inset-x-0 bottom-0 h-px" style={{ background: headerHairline }} aria-hidden />
        <div className="relative z-10 flex w-full items-center gap-3 flex-nowrap">
          <div className="font-semibold" style={branding.fontFamily ? { fontFamily: branding.fontFamily } : undefined}>{t('header.loading')}</div>
          <div className="ml-auto flex items-center justify-end gap-2">
            <AppearanceToggleDropdown />
            <SettingsSheet />
          </div>
        </div>
      </div>
    );
  }

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

  const stats =
    statsContext && statsContext.eventKey === eventToken ? statsContext : undefined;
  return (
    <div
      className="guest-header sticky top-0 z-30 relative flex flex-nowrap items-center gap-3 overflow-hidden border-b border-white/20 px-4 py-2 shadow-[0_18px_45px_-30px_rgba(15,23,42,0.65)] backdrop-blur-2xl"
      style={headerStyle}
    >
      <div className="pointer-events-none absolute inset-0 opacity-70 guest-aurora" style={{ backgroundImage: headerShimmer }} aria-hidden />
      <div className="pointer-events-none absolute -top-12 right-[-40px] h-32 w-32 rounded-full blur-3xl" style={{ background: headerGlowSecondary }} aria-hidden />
      <div className="pointer-events-none absolute -bottom-10 left-1/3 h-24 w-44 -translate-x-1/2 rounded-full blur-3xl" style={{ background: headerGlowPrimary }} aria-hidden />
      <div className="pointer-events-none absolute inset-x-0 bottom-0 h-px" style={{ background: headerHairline }} aria-hidden />
      <div
        className={
          `relative z-10 flex min-w-0 flex-1 ${logoPosition === 'center'
            ? 'flex-col items-center gap-1 text-center'
            : logoPosition === 'right'
              ? 'flex-row-reverse items-center gap-3'
              : 'items-center gap-3'}`
        }
      >
        <EventAvatar
          name={event.name}
          icon={event.type?.icon}
          accentColor={accentColor}
          textColor={headerTextColor}
          logo={branding.logo}
        />
        <div
          className={`flex flex-col${logoPosition === 'center' ? ' items-center text-center' : ''}`}
          style={headerFont ? { fontFamily: headerFont } : undefined}
        >
          <div className="truncate text-base font-semibold sm:text-lg">{event.name}</div>
          <div className="flex items-center gap-2 text-xs opacity-70" style={bodyFont ? { fontFamily: bodyFont } : undefined}>
            {stats && tasksEnabled && (
              <>
                <span className="flex items-center gap-1">
                  <User className="h-3 w-3" />
                  <span>{`${stats.onlineGuests} ${t('header.stats.online')}`}</span>
                </span>
                <span className="opacity-50">|</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="relative z-10 ml-auto flex shrink-0 items-center justify-end gap-2">
        {notificationCenter && eventToken && (
          <NotificationButton
            eventToken={eventToken}
            center={notificationCenter}
            open={notificationsOpen}
            onToggle={() => setNotificationsOpen((prev) => !prev)}
            panelRef={panelRef}
            buttonRef={notificationButtonRef}
            t={t}
          />
        )}
        <AppearanceToggleDropdown />
        <SettingsSheet />
      </div>
    </div>
  );
}

type NotificationButtonProps = {
  center: NotificationCenterValue;
  eventToken: string;
  open: boolean;
  onToggle: () => void;
  panelRef: React.RefObject<HTMLDivElement | null>;
  buttonRef: React.RefObject<HTMLButtonElement | null>;
  t: TranslateFn;
};

type PushState = ReturnType<typeof usePushSubscription>;

function NotificationButton({ center, eventToken, open, onToggle, panelRef, buttonRef, t }: NotificationButtonProps) {
  const badgeCount = center.unreadCount;
  const [activeTab, setActiveTab] = React.useState<'unread' | 'all' | 'uploads'>(center.unreadCount > 0 ? 'unread' : 'all');
  const [scopeFilter, setScopeFilter] = React.useState<'all' | 'tips' | 'general'>('all');
  const pushState = usePushSubscription(eventToken);

  React.useEffect(() => {
    if (!open) {
      setActiveTab(center.unreadCount > 0 ? 'unread' : 'all');
    }
  }, [open, center.unreadCount]);

  const uploadNotifications = React.useMemo(
    () => center.notifications.filter((item) => item.type === 'upload_alert'),
    [center.notifications]
  );
  const unreadNotifications = React.useMemo(
    () => center.notifications.filter((item) => item.status === 'new'),
    [center.notifications]
  );

  const filteredNotifications = React.useMemo(() => {
    let base: typeof center.notifications = [];
    switch (activeTab) {
      case 'unread':
        base = unreadNotifications;
        break;
      case 'uploads':
        base = uploadNotifications;
        break;
      default:
        base = center.notifications;
    }
    return base;
  }, [activeTab, center.notifications, unreadNotifications, uploadNotifications]);

  const scopedNotifications = React.useMemo(() => {
    if (activeTab === 'uploads' || scopeFilter === 'all') {
      return filteredNotifications;
    }
    return filteredNotifications.filter((item) => {
      if (scopeFilter === 'tips') {
        return item.type === 'support_tip' || item.type === 'achievement_major';
      }
      return item.type === 'broadcast' || item.type === 'feedback_request';
    });
  }, [filteredNotifications, scopeFilter]);

  return (
    <div className="relative z-50">
      <button
        ref={buttonRef}
        type="button"
        onClick={onToggle}
        className="relative rounded-full bg-white/15 p-2 text-current transition hover:bg-white/30"
        aria-label={open ? t('header.notifications.close', 'Benachrichtigungen schließen') : t('header.notifications.open', 'Benachrichtigungen anzeigen')}
      >
        <Bell className="h-5 w-5" aria-hidden />
        {badgeCount > 0 && (
          <span className="absolute -right-1 -top-1 min-h-[18px] min-w-[18px] rounded-full bg-pink-500 px-1.5 text-[11px] font-semibold leading-[18px] text-white shadow-lg">
            {badgeCount > 9 ? '9+' : badgeCount}
          </span>
        )}
      </button>
      {open && createPortal(
        <div
          ref={panelRef}
          className="fixed right-4 top-16 z-[2147483000] w-80 rounded-2xl border border-white/30 bg-white/95 p-4 text-slate-900 shadow-2xl"
        >
          <div className="flex items-start justify-between gap-3">
            <div>
              <p className="text-sm font-semibold text-slate-900">{t('header.notifications.title', 'Updates')}</p>
              <p className="text-xs text-slate-500">
                {center.unreadCount > 0
                  ? t('header.notifications.unread', { defaultValue: '{count} neu', count: center.unreadCount })
                  : t('header.notifications.allRead', 'Alles gelesen')}
              </p>
            </div>
            <button
              type="button"
              onClick={() => center.refresh()}
              disabled={center.loading}
              className="flex items-center gap-1 rounded-full border border-slate-200 px-2 py-1 text-xs font-semibold text-slate-600 transition hover:border-pink-300 disabled:cursor-not-allowed"
            >
              <RefreshCw className={`h-3.5 w-3.5 ${center.loading ? 'animate-spin' : ''}`} aria-hidden />
              {t('header.notifications.refresh', 'Aktualisieren')}
            </button>
          </div>
          <NotificationTabs
            tabs={[
              { key: 'unread', label: t('header.notifications.tabUnread', 'Nachrichten'), badge: unreadNotifications.length },
              { key: 'uploads', label: t('header.notifications.tabUploads', 'Uploads'), badge: uploadNotifications.length },
              { key: 'all', label: t('header.notifications.tabAll', 'Alle Updates'), badge: center.notifications.length },
            ]}
            activeTab={activeTab}
            onTabChange={(next) => setActiveTab(next as typeof activeTab)}
          />
          {activeTab !== 'uploads' && (
            <div className="mt-3">
              <div className="flex gap-2 overflow-x-auto text-xs whitespace-nowrap pb-1">
                {(
                  [
                    { key: 'all', label: t('header.notifications.scope.all', 'Alle') },
                    { key: 'tips', label: t('header.notifications.scope.tips', 'Tipps & Achievements') },
                    { key: 'general', label: t('header.notifications.scope.general', 'Allgemein') },
                  ] as const
                ).map((option) => (
                  <button
                    key={option.key}
                    type="button"
                    onClick={() => {
                      setScopeFilter(option.key);
                      center.setFilters({ scope: option.key });
                    }}
                    className={`rounded-full border px-3 py-1 font-semibold transition ${
                      scopeFilter === option.key
                        ? 'border-pink-200 bg-pink-50 text-pink-700'
                        : 'border-slate-200 bg-white text-slate-600 hover:border-pink-200 hover:text-pink-700'
                    }`}
                  >
                    {option.label}
                  </button>
                ))}
              </div>
            </div>
          )}
          {activeTab === 'uploads' && (center.pendingCount > 0 || center.queueCount > 0) && (
            <div className="mt-3 space-y-2">
              {center.pendingCount > 0 && (
                <div className="flex items-center justify-between rounded-xl bg-amber-50/90 px-3 py-2 text-xs text-amber-900">
                  <div className="flex items-center gap-2">
                    <Clock className="h-4 w-4 text-amber-500" aria-hidden />
                    <span>{t('header.notifications.pendingLabel', 'Uploads in Prüfung')}</span>
                    <span className="font-semibold text-amber-900">{center.pendingCount}</span>
                  </div>
                  <Link
                    to={`/e/${encodeURIComponent(eventToken)}/queue`}
                    className="inline-flex items-center gap-1 font-semibold text-amber-700"
                    onClick={() => {
                      if (center.unreadCount > 0) {
                        void center.refresh();
                      }
                    }}
                  >
                    {t('header.notifications.pendingCta', 'Details')}
                    <ArrowUpRight className="h-4 w-4" aria-hidden />
                  </Link>
                </div>
              )}
              {center.queueCount > 0 && (
                <div className="flex items-center justify-between rounded-xl bg-slate-50/90 px-3 py-2 text-xs text-slate-600">
                  <div className="flex items-center gap-2">
                    <UploadCloud className="h-4 w-4 text-slate-400" aria-hidden />
                    <span>{t('header.notifications.queueLabel', 'Upload-Warteschlange (offline)')}</span>
                    <span className="font-semibold text-slate-900">{center.queueCount}</span>
                  </div>
                </div>
              )}
            </div>
          )}
          <div className="mt-3 max-h-80 space-y-2 overflow-y-auto pr-1">
            {center.loading ? (
              <NotificationSkeleton />
            ) : scopedNotifications.length === 0 ? (
              <NotificationEmptyState
                t={t}
                message={
                  activeTab === 'unread'
                    ? t('header.notifications.emptyUnread', 'Du bist auf dem neuesten Stand!')
                    : activeTab === 'uploads'
                      ? t('header.notifications.emptyStatus', 'Keine Upload-Hinweise oder Wartungen aktiv.')
                      : undefined
                }
              />
            ) : (
              scopedNotifications.map((item) => (
                <NotificationListItem
                  key={item.id}
                  item={item}
                  onMarkRead={() => center.markAsRead(item.id)}
                  onDismiss={() => center.dismiss(item.id)}
                  t={t}
                />
              ))
            )}
          </div>
          <NotificationStatusBar
            lastFetchedAt={center.lastFetchedAt}
            isOffline={center.isOffline}
            push={pushState}
            t={t}
          />
        </div>,
        (typeof document !== 'undefined' ? document.body : null) as any
      )}
    </div>
  );
}

function NotificationListItem({
  item,
  onMarkRead,
  onDismiss,
  t,
}: {
  item: NotificationCenterValue['notifications'][number];
  onMarkRead: () => void;
  onDismiss: () => void;
  t: TranslateFn;
}) {
  const IconComponent = NOTIFICATION_ICON_MAP[item.type] ?? Bell;
  const isNew = item.status === 'new';
  const createdLabel = item.createdAt ? formatRelativeTime(item.createdAt) : '';

  return (
    <div
      className={`rounded-2xl border px-3 py-2.5 transition ${isNew ? 'border-pink-200 bg-pink-50/70' : 'border-slate-200 bg-white/90'}`}
      onClick={() => {
        if (isNew) {
          onMarkRead();
        }
      }}
    >
      <div className="flex items-start gap-3">
        <div className={`rounded-full p-1.5 ${isNew ? 'bg-white text-pink-600' : 'bg-slate-100 text-slate-500'}`}>
          <IconComponent className="h-4 w-4" aria-hidden />
        </div>
        <div className="flex-1 space-y-1">
          <div className="flex items-start justify-between gap-2">
            <div>
              <p className="text-sm font-semibold text-slate-900">{item.title}</p>
              {item.body && <p className="text-xs text-slate-600">{item.body}</p>}
            </div>
            <button
              type="button"
              onClick={(event) => {
                event.stopPropagation();
                onDismiss();
              }}
              className="rounded-full p-1 text-slate-400 transition hover:text-slate-700"
              aria-label={t('header.notifications.dismiss', 'Ausblenden')}
            >
              <X className="h-3.5 w-3.5" aria-hidden />
            </button>
          </div>
          <div className="flex items-center gap-2 text-[11px] text-slate-400">
            {createdLabel && <span>{createdLabel}</span>}
            {isNew && (
              <span className="inline-flex items-center gap-1 rounded-full bg-pink-100 px-1.5 py-0.5 text-[10px] font-semibold text-pink-600">
                <Sparkles className="h-3 w-3" aria-hidden />
                {t('header.notifications.badge.new', 'Neu')}
              </span>
            )}
          </div>
          {item.cta && (
            <NotificationCta cta={item.cta} onFollow={onMarkRead} />
          )}
          {!isNew && item.status !== 'dismissed' && (
            <button
              type="button"
              onClick={(event) => {
                event.stopPropagation();
                onMarkRead();
              }}
              className="inline-flex items-center gap-1 text-[11px] font-semibold text-pink-600"
            >
              <Check className="h-3 w-3" aria-hidden />
              {t('header.notifications.markRead', 'Als gelesen markieren')}
            </button>
          )}
        </div>
      </div>
    </div>
  );
}

function NotificationCta({ cta, onFollow }: { cta: { label?: string; href?: string }; onFollow: () => void }) {
  const href = cta.href ?? '#';
  const label = cta.label ?? '';
  const isInternal = /^\//.test(href);
  const content = (
    <span className="inline-flex items-center gap-1">
      {label}
      <ArrowUpRight className="h-3.5 w-3.5" aria-hidden />
    </span>
  );

  if (isInternal) {
    return (
      <Link
        to={href}
        className="inline-flex items-center gap-1 text-sm font-semibold text-pink-600"
        onClick={onFollow}
      >
        {content}
      </Link>
    );
  }

  return (
    <a
      href={href}
      target="_blank"
      rel="noopener noreferrer"
      className="inline-flex items-center gap-1 text-sm font-semibold text-pink-600"
      onClick={onFollow}
    >
      {content}
    </a>
  );
}

function NotificationEmptyState({ t, message }: { t: TranslateFn; message?: string }) {
  return (
    <div className="rounded-2xl border border-dashed border-slate-200 bg-white/70 p-4 text-center text-sm text-slate-500">
      <AlertCircle className="mx-auto mb-2 h-5 w-5 text-slate-400" aria-hidden />
      <p>{message ?? t('header.notifications.empty', 'Gerade gibt es keine neuen Hinweise.')}</p>
    </div>
  );
}

function NotificationSkeleton() {
  return (
    <div className="space-y-2">
      {[0, 1, 2].map((index) => (
        <div key={index} className="animate-pulse rounded-2xl border border-slate-200 bg-slate-100/60 p-3">
          <div className="flex items-center gap-3">
            <div className="h-8 w-8 rounded-full bg-slate-200" />
            <div className="flex-1 space-y-2">
              <div className="h-3 w-3/4 rounded bg-slate-200" />
              <div className="h-3 w-1/2 rounded bg-slate-200" />
            </div>
          </div>
        </div>
      ))}
    </div>
  );
}

function formatRelativeTime(value: string): string {
  const date = new Date(value);
  if (Number.isNaN(date.getTime())) {
    return '';
  }

  const diffMs = Date.now() - date.getTime();
  const diffMinutes = Math.max(0, Math.round(diffMs / 60000));

  if (diffMinutes < 1) {
    return 'Gerade eben';
  }

  if (diffMinutes < 60) {
    return `${diffMinutes} min`;
  }

  const diffHours = Math.round(diffMinutes / 60);
  if (diffHours < 24) {
    return `${diffHours} h`;
  }

  const diffDays = Math.round(diffHours / 24);
  return `${diffDays} d`;
}

function NotificationTabs({
  tabs,
  activeTab,
  onTabChange,
}: {
  tabs: Array<{ key: string; label: string; badge?: number }>;
  activeTab: string;
  onTabChange: (key: string) => void;
}) {
  return (
    <div className="mt-3 flex gap-2 rounded-full bg-slate-100/80 p-1 text-xs font-semibold text-slate-600">
      {tabs.map((tab) => (
        <button
          key={tab.key}
          type="button"
          className={`flex flex-1 items-center justify-center gap-1 rounded-full px-3 py-1 transition ${
            activeTab === tab.key ? 'bg-white text-pink-600 shadow' : 'text-slate-500'
          }`}
          onClick={() => onTabChange(tab.key)}
        >
          {tab.label}
          {typeof tab.badge === 'number' && tab.badge > 0 && (
            <span className="rounded-full bg-pink-100 px-2 text-[11px] text-pink-600">{tab.badge}</span>
          )}
        </button>
      ))}
    </div>
  );
}

function NotificationStatusBar({
  lastFetchedAt,
  isOffline,
  push,
  t,
}: {
  lastFetchedAt: Date | null;
  isOffline: boolean;
  push: PushState;
  t: TranslateFn;
}) {
  const label = lastFetchedAt ? formatRelativeTime(lastFetchedAt.toISOString()) : t('header.notifications.never', 'Noch keine Aktualisierung');
  const pushDescription = React.useMemo(() => {
    if (!push.supported) {
      return t('header.notifications.pushUnsupported', 'Push wird nicht unterstützt');
    }
    if (push.permission === 'denied') {
      return t('header.notifications.pushDenied', 'Browser blockiert Benachrichtigungen');
    }
    if (push.subscribed) {
      return t('header.notifications.pushActive', 'Push aktiv');
    }
    return t('header.notifications.pushInactive', 'Push deaktiviert');
  }, [push.permission, push.subscribed, push.supported, t]);

  const buttonLabel = push.subscribed
    ? t('header.notifications.pushDisable', 'Deaktivieren')
    : t('header.notifications.pushEnable', 'Aktivieren');

  const pushButtonDisabled = push.loading || !push.supported || push.permission === 'denied';

  return (
    <div className="mt-4 space-y-2 border-t border-slate-200 pt-3 text-[11px] text-slate-500">
      <div className="flex items-center justify-between">
        <span>
          {t('header.notifications.lastSync', 'Zuletzt aktualisiert')}: {label}
        </span>
        {isOffline && (
          <span className="inline-flex items-center gap-1 rounded-full bg-amber-100 px-2 py-0.5 font-semibold text-amber-700">
            <AlertCircle className="h-3 w-3" aria-hidden />
            {t('header.notifications.offline', 'Offline')}
          </span>
        )}
      </div>
      <div className="flex items-center justify-between gap-2 rounded-full bg-slate-100/80 px-3 py-1 text-[11px] font-semibold text-slate-600">
        <div className="flex items-center gap-1">
          <Bell className="h-3.5 w-3.5" aria-hidden />
          <span>{pushDescription}</span>
        </div>
        <button
          type="button"
          onClick={() => (push.subscribed ? push.disable() : push.enable())}
          disabled={pushButtonDisabled}
          className="rounded-full bg-white/80 px-3 py-0.5 text-[11px] font-semibold text-pink-600 shadow disabled:cursor-not-allowed disabled:opacity-60"
        >
          {push.loading ? t('header.notifications.pushLoading', '…') : buttonLabel}
        </button>
      </div>
      {push.error && (
        <p className="text-[11px] font-semibold text-rose-600">
          {push.error}
        </p>
      )}
    </div>
  );
}