fotospiel-app/resources/js/admin/DevTenantSwitcher.tsx

import React from 'react';
import { Loader2, PanelLeftClose, PanelRightOpen } from 'lucide-react';
import { XStack, YStack } from '@tamagui/stacks';
import { SizableText as Text } from '@tamagui/text';
import { Button } from '@tamagui/button';
import { useThemeName } from '@tamagui/core';
import { BOTTOM_NAV_HEIGHT, BOTTOM_NAV_PADDING } from './mobile/components/BottomNav';

const DEV_TENANT_KEYS = [
  { key: 'cust-standard-empty', label: 'Endkunde – Starter (kein Event)' },
  { key: 'cust-starter-wedding', label: 'Endkunde – Classic (Hochzeit)' },
  { key: 'reseller-s-active', label: 'Reseller S – 3 aktive Events' },
  { key: 'reseller-s-full', label: 'Reseller S – voll belegt (5/5)' },
] as const;

declare global {
  interface Window {
    fotospielDemoAuth?: {
      clients: Record<string, string>;
      loginAs: (tenantKey: string) => Promise<void>;
    };
  }
}

type DevTenantSwitcherProps = {
  bottomOffset?: number;
  variant?: 'floating' | 'inline';
};

export function DevTenantSwitcher({ bottomOffset = 16, variant = 'floating' }: DevTenantSwitcherProps) {
  const helper = window.fotospielDemoAuth;
  const themeName = useThemeName();
  const themeLabel = String(themeName ?? '').toLowerCase();
  const isDark = themeLabel.includes('dark') || themeLabel.includes('night');
  const [loggingIn, setLoggingIn] = React.useState<string | null>(null);
  const [collapsed, setCollapsed] = React.useState<boolean>(() => {
    if (typeof window === 'undefined') {
      return false;
    }

    try {
      return window.localStorage.getItem('fotospiel-dev-switcher-collapsed') === '1';
    } catch (error) {
      console.warn('[DevAuth] Failed to read collapse state', error);
      return false;
    }
  });

  React.useEffect(() => {
    if (typeof window === 'undefined') {
      return;
    }

    try {
      window.localStorage.setItem('fotospiel-dev-switcher-collapsed', collapsed ? '1' : '0');
    } catch (error) {
      console.warn('[DevAuth] Failed to persist collapse state', error);
    }
  }, [collapsed]);

  if (!helper) {
    return null;
  }

  async function handleLogin(key: string) {
    if (!helper) {
      return;
    }
    setLoggingIn(key);
    try {
      await helper.loginAs(key);
    } catch (error) {
      console.error('[DevAuth] Switch failed', error);
      setLoggingIn(null);
    }
  }

  if (variant === 'inline') {
    if (collapsed) {
      return (
        <Button
          size="$2"
          theme="yellow"
          onPress={() => setCollapsed(false)}
          circular
          minWidth={0}
          width={34}
          height={34}
          padding={0}
          icon={<PanelRightOpen size={16} />}
          aria-label="Demo tenants anzeigen"
        >
        </Button>
      );
    }

    return (
      <YStack
        borderWidth={1}
        borderColor={isDark ? 'rgba(248,250,255,0.2)' : 'rgba(234,179,8,0.5)'}
        backgroundColor={isDark ? 'rgba(15,23,42,0.95)' : 'rgba(255,255,255,0.95)'}
        padding="$3"
        gap="$2"
        borderRadius="$4"
        shadowColor={isDark ? 'rgba(2,6,23,0.7)' : '#f59e0b'}
        shadowOpacity={0.25}
        shadowRadius={14}
        shadowOffset={{ width: 0, height: 8 }}
        maxWidth={320}
      >
        <XStack alignItems="center" justifyContent="space-between">
          <XStack alignItems="center" gap="$2">
            <Text fontSize={13} fontWeight="800" color={isDark ? '#F8FAFF' : '#92400e'}>
              Demo tenants
            </Text>
            <Text fontSize={10} color={isDark ? 'rgba(248,250,255,0.7)' : '#a16207'} textTransform="uppercase" letterSpacing={1}>
              Dev mode
            </Text>
          </XStack>
          <Button
            size="$2"
            theme="yellow"
            circular
            icon={<PanelLeftClose size={14} />}
            onPress={() => setCollapsed(true)}
            aria-label="Switcher minimieren"
          />
        </XStack>
        <YStack gap="$1">
          {DEV_TENANT_KEYS.map(({ key, label }) => (
            <Button
              key={key}
              size="$3"
              variant="outlined"
              theme="yellow"
              disabled={Boolean(loggingIn)}
              onPress={() => void handleLogin(key)}
              icon={loggingIn === key ? <Loader2 size={14} className="animate-spin" /> : undefined}
            >
              {loggingIn === key ? 'Verbinde...' : label}
            </Button>
          ))}
        </YStack>
      </YStack>
    );
  }

  if (collapsed) {
    return (
      <Button
        size="$3"
        theme="yellow"
        icon={<PanelRightOpen size={16} />}
        circular
        minWidth={0}
        width={40}
        height={40}
        padding={0}
        position="fixed"
        right="$4"
        zIndex={1000}
        onPress={() => setCollapsed(false)}
        aria-label="Demo tenants anzeigen"
        style={{ bottom: bottomOffset + BOTTOM_NAV_HEIGHT + BOTTOM_NAV_PADDING }}
      >
      </Button>
    );
  }

  return (
    <YStack
      position="fixed"
      right="$4"
      zIndex={1000}
      maxWidth={320}
      gap="$2"
      borderWidth={1}
      borderColor={isDark ? 'rgba(248,250,255,0.2)' : 'rgba(234,179,8,0.5)'}
      backgroundColor={isDark ? 'rgba(15,23,42,0.95)' : 'rgba(255,255,255,0.95)'}
      padding="$3"
      borderRadius="$4"
      shadowColor={isDark ? 'rgba(2,6,23,0.7)' : '#f59e0b'}
      shadowOpacity={0.25}
      shadowRadius={14}
      shadowOffset={{ width: 0, height: 8 }}
      pointerEvents="auto"
      style={{ bottom: bottomOffset + BOTTOM_NAV_HEIGHT + BOTTOM_NAV_PADDING }}
    >
      <XStack alignItems="center" justifyContent="space-between">
        <XStack alignItems="center" gap="$2">
          <Text fontSize={13} fontWeight="800" color={isDark ? '#F8FAFF' : '#92400e'}>
            Demo tenants
          </Text>
          <Text fontSize={10} color={isDark ? 'rgba(248,250,255,0.7)' : '#a16207'} textTransform="uppercase" letterSpacing={1}>
            Dev mode
          </Text>
        </XStack>
        <Button
          size="$2"
          theme="yellow"
          circular
          icon={<PanelLeftClose size={14} />}
          onPress={() => setCollapsed(true)}
          aria-label="Switcher minimieren"
        />
      </XStack>
      <Text fontSize={11} color={isDark ? 'rgba(248,250,255,0.7)' : '#a16207'}>
        Select a seeded tenant to mint Sanctum PATs and jump straight into their admin space. Available only in development builds.
      </Text>
      <YStack gap="$1">
        {DEV_TENANT_KEYS.map(({ key, label }) => (
          <Button
            key={key}
            size="$3"
            variant="outlined"
            theme="yellow"
            disabled={Boolean(loggingIn)}
            onPress={() => void handleLogin(key)}
            icon={loggingIn === key ? <Loader2 size={14} className="animate-spin" /> : undefined}
          >
            {loggingIn === key ? 'Verbinde...' : label}
          </Button>
        ))}
      </YStack>
      <Text fontSize={10} color={isDark ? 'rgba(248,250,255,0.7)' : '#a16207'}>
        Console: <Text as="span" fontFamily="$mono">fotospielDemoAuth.loginAs('lumen')</Text>
      </Text>
    </YStack>
  );
}

export default DevTenantSwitcher;