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

import React from 'react';
import { Loader2, PanelLeftClose, PanelRightOpen } from 'lucide-react';

import { Button } from '@/components/ui/button';

const DEV_TENANT_KEYS = [
  { key: 'cust-standard-empty', label: 'Endkunde – Standard (kein Event)' },
  { key: 'cust-starter-wedding', label: 'Endkunde – Starter (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 [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;
  }

  if (variant === 'inline') {
    if (collapsed) {
      return (
        <button
          type="button"
          className="inline-flex items-center gap-2 rounded-full border border-amber-200 bg-white/95 px-3 py-1.5 text-xs font-semibold text-amber-700 shadow-sm shadow-amber-200/60 transition hover:bg-amber-50"
          onClick={() => setCollapsed(false)}
        >
          <PanelRightOpen className="h-4 w-4" />
          Demo tenants
        </button>
      );
    }

    return (
      <div className="relative">
        <div className="pointer-events-auto flex max-w-xs flex-col gap-2 rounded-xl border border-amber-200 bg-white/95 p-3 text-xs shadow-xl shadow-amber-200/60">
          <div className="flex items-center justify-between gap-2">
            <div className="flex items-center gap-2">
              <strong className="text-amber-800">Demo tenants</strong>
              <span className="text-[10px] uppercase tracking-wide text-amber-600">Dev mode</span>
            </div>
            <button
              type="button"
              onClick={() => setCollapsed(true)}
              className="inline-flex h-7 w-7 items-center justify-center rounded-full border border-amber-200 bg-white text-amber-600 transition hover:bg-amber-50"
              aria-label="Switcher minimieren"
            >
              <PanelLeftClose className="h-4 w-4" />
            </button>
          </div>
          <div className="space-y-1">
            {DEV_TENANT_KEYS.map(({ key, label }) => (
              <Button
                key={key}
                variant="outline"
                className="w-full border-amber-200 text-amber-800 hover:bg-amber-50"
                disabled={Boolean(loggingIn)}
                onClick={() => void handleLogin(key)}
              >
                {loggingIn === key ? (
                  <>
                    <Loader2 className="h-4 w-4 animate-spin" />
                    Verbinde...
                  </>
                ) : (
                  label
                )}
              </Button>
            ))}
          </div>
        </div>
      </div>
    );
  }

  if (collapsed) {
    return (
      <button
        type="button"
        className="pointer-events-auto fixed right-4 z-[1000] flex items-center gap-2 rounded-full border border-amber-200 bg-white/95 px-4 py-2 text-sm font-medium text-amber-700 shadow-lg shadow-amber-200/60 transition hover:bg-amber-50"
        style={{ bottom: bottomOffset }}
        onClick={() => setCollapsed(false)}
      >
        <PanelRightOpen className="h-4 w-4" />
        Demo tenants
      </button>
    );
  }

  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);
    }
  }

  return (
    <div
      className="pointer-events-auto fixed right-4 z-[1000] flex max-w-xs flex-col gap-2 rounded-xl border border-amber-200 bg-white/95 p-3 text-sm shadow-xl shadow-amber-200/60"
      style={{ bottom: bottomOffset }}
    >
      <div className="flex items-center justify-between gap-2">
        <div className="flex items-center gap-2">
          <strong className="text-amber-800">Demo tenants</strong>
          <span className="text-xs uppercase tracking-wide text-amber-600">Dev mode</span>
        </div>
        <button
          type="button"
          onClick={() => setCollapsed(true)}
          className="inline-flex h-7 w-7 items-center justify-center rounded-full border border-amber-200 bg-white text-amber-600 transition hover:bg-amber-50"
          aria-label="Switcher minimieren"
        >
          <PanelLeftClose className="h-4 w-4" />
        </button>
      </div>
      <p className="text-xs text-amber-700">
        Select a seeded tenant to mint Sanctum PATs and jump straight into their admin space. Available only in development builds.
      </p>
      <div className="space-y-1">
        {DEV_TENANT_KEYS.map(({ key, label }) => (
          <Button
            key={key}
            variant="outline"
            className="w-full border-amber-200 text-amber-800 hover:bg-amber-50"
            disabled={Boolean(loggingIn)}
            onClick={() => void handleLogin(key)}
          >
            {loggingIn === key ? (
              <>
                <Loader2 className="h-4 w-4 animate-spin" />
                Verbinde...
              </>
            ) : (
              label
            )}
          </Button>
        ))}
      </div>
      <p className="text-[10px] text-amber-600">
        Console: <code>fotospielDemoAuth.loginAs('lumen')</code>
      </p>
    </div>
  );
}

export default DevTenantSwitcher;