/**
 * Live demo for identity-auth/ui/auth-screens.
 *
 * The public screens of the Labs SPA (alchemy_labs, branch d1a-token-source,
 * fd8558f) rebuilt as one presentational component with the design system:
 * LoginAlchemy.tsx (460 lines), MagicLinkCallback.tsx (286), AuthCallback.tsx
 * (44), PrivateRoute.tsx (89), ForgotPassword.tsx (282), ResetPassword.tsx
 * (316), EmailVerification.tsx (370), VerifyCode.tsx (278) and
 * SetupPassword.tsx (286). The real pages read useAuth, React Router's
 * search params and fetch; this rebuild takes the screen and its state as
 * props, and the network outcome as a `Failure` already read through
 * helpers.ts, so every state the pages can be in renders from a literal.
 *
 * What differs from Labs, and why (recipe Frontend and Gotchas):
 *   - the ground is bg-paper and the accent is the brand-purple token on every
 *     screen; LoginAlchemy paints bg-white with seven #6642C1 literals (the
 *     prima.li purple, not the Labs one), AuthCallback bg-[#f5f1ea], the rest
 *     bg-stone-100. D1a makes the token the rule, so the rebuild uses it;
 *   - the controls are the atoms (Button, Input, Card, Heading, Text, Spinner)
 *     where LoginAlchemy hand-writes its input and button class strings;
 *   - the root is min-h-[560px] instead of min-h-screen, the framer-motion
 *     entrances are gone (the frame has no first paint to animate), and the
 *     agency logo files are an inline mark plus a brand word;
 *   - failures are rendered through failureCopy: the 401, 403, 429 and
 *     verification_required outcomes get a sentence each, which the Labs
 *     pages do not do at fd8558f (they show one fixed string or the backend's
 *     English detail);
 *   - the two split-layout pages (VerifyCode, SetupPassword) render their form
 *     column only; the lg: branding column is described in the recipe;
 *   - copy is de-CH: "ss" where the source has ß.
 *
 * Sample data only: addresses under example.com, no token, no key.
 */
import React from 'react';
import { AlertCircle, ArrowLeft, ArrowRight, CheckCircle, Eye, EyeOff, Key, Lock, Mail } from 'lucide-react';
import { defineStates } from '@prima-modules/demo';
import { Button, Card, Heading, Input, Spinner, Text } from '@prima-modules/alchemy-ui';
import { type Failure, failureCopy, oidcErrorCopy, passwordStrength, signInDestination } from './helpers';

/* ---- props ----------------------------------------------------------- */

export type Screen =
  | 'login'
  | 'magic-link-sent'
  | 'verification-required'
  | 'magic-link-callback'
  | 'oidc-callback'
  | 'not-permitted'
  | 'forgot-password'
  | 'forgot-password-sent'
  | 'reset-password'
  | 'reset-password-done'
  | 'verify-email'
  | 'verify-email-set-password'
  | 'verify-code';

export interface CallbackState {
  status: 'loading' | 'success' | 'error';
  /** The verify body's `next`, `desk_only` and `acting_email` (MagicLinkCallback.tsx lines 60 to 76). */
  next?: string;
  desk_only?: boolean;
  acting_email?: string | null;
  error?: string;
}

export interface Props {
  screen: Screen;
  /** The word beside the mark; a customer build puts its own name here. */
  brandWord?: string;
  /** Login: magic link is the default mode, password the quiet second (LoginAlchemy.tsx line 27). */
  mode?: 'magic-link' | 'password';
  /** Whether the build has VITE_INFOMANIAK_LOGIN=true (LoginAlchemy.tsx lines 327 to 345). */
  infomaniak?: boolean;
  email?: string;
  password?: string;
  confirmPassword?: string;
  showPassword?: boolean;
  submitting?: boolean;
  /** A failed request, already read through readFailure. */
  failure?: Failure | null;
  /** The `?oidc_error=` code the OIDC callback redirected with. */
  oidcError?: string | null;
  callback?: CallbackState;
  /** PrivateRoute: the account's grants and this build's surface (PrivateRoute.tsx lines 56 to 83). */
  surfaces?: string[];
  buildSurface?: string;
  /** Verify e-mail: the resend cooldown in seconds and the last message. */
  resendCooldown?: number;
  message?: { tone: 'success' | 'error'; text: string } | null;
  /** Verify code: the six digits typed so far. */
  code?: string[];
}

/* ---- sample data ------------------------------------------------------ */

const EMAIL = '[email protected]';

const base: Props = { screen: 'login', brandWord: 'Acme', mode: 'magic-link', infomaniak: true, email: '' };

export const states = defineStates<Props>({
  login: { label: 'Login, magic link first: four ways in', props: base, height: 720 },
  'login-password': { label: 'Password mode, filled', props: { ...base, mode: 'password', email: EMAIL, password: 'correct-horse-battery', showPassword: false }, height: 720 },
  'login-submitting': { label: 'Password mode, request in flight', props: { ...base, mode: 'password', email: EMAIL, password: 'correct-horse-battery', submitting: true }, height: 720 },
  'login-error': { label: '401 from POST /api/auth/login', props: { ...base, mode: 'password', email: EMAIL, password: 'wrong', failure: { status: 401, code: 'INVALID_CREDENTIALS', message: 'Invalid email or password' } }, height: 720 },
  'login-not-permitted': { label: '403: the account holds no grant for this surface', props: { ...base, mode: 'password', email: EMAIL, password: 'correct-horse-battery', failure: { status: 403, code: 'FORBIDDEN', message: 'This account is not permitted to sign in here.' } }, height: 720 },
  'login-rate-limited': { label: '429 with Retry-After 42 on the magic-link request', props: { ...base, email: EMAIL, failure: { status: 429, code: 'RATE_LIMIT_EXCEEDED', message: 'Too many authentication attempts. Please try again later.', retryAfter: 42 } }, height: 720 },
  'login-oidc-error': { label: 'Back from the OIDC provider with ?oidc_error=no_account', props: { ...base, oidcError: 'no_account' }, height: 760 },
  'magic-link-sent': { label: '202 from /request-magic-link: the same screen whether or not the address exists', props: { ...base, screen: 'magic-link-sent', email: EMAIL }, height: 560 },
  'verification-required': { label: '200 verification_required: a body with no session', props: { ...base, screen: 'verification-required', email: EMAIL }, height: 560 },
  'magic-link-verifying': { label: '/auth/magic-link while POST /verify-magic-link runs', props: { ...base, screen: 'magic-link-callback', callback: { status: 'loading' } }, height: 600 },
  'magic-link-success': { label: 'Redeemed under a shared account, bound for the desk', props: { ...base, screen: 'magic-link-callback', callback: { status: 'success', desk_only: true, acting_email: '[email protected]' } }, height: 600 },
  'magic-link-invalid': { label: '400 "Invalid or expired magic link"', props: { ...base, screen: 'magic-link-callback', callback: { status: 'error', error: 'Dieser Link ist ungültig oder abgelaufen.' } }, height: 600 },
  'oidc-callback': { label: '/auth/callback: the fragment is read, stored and stripped', props: { ...base, screen: 'oidc-callback' }, height: 360 },
  'not-permitted': { label: 'PrivateRoute: signed in, no grant for this build', props: { ...base, screen: 'not-permitted', surfaces: ['prima_web', 'prima_chat'], buildSurface: 'labs' }, height: 360 },
  'forgot-password': { label: 'Forgot password', props: { ...base, screen: 'forgot-password', email: '' }, height: 720 },
  'forgot-password-sent': { label: '202 from /forgot-password: always this screen', props: { ...base, screen: 'forgot-password-sent', email: EMAIL }, height: 600 },
  'reset-password': { label: 'Reset with ?token=, four of five requirements met', props: { ...base, screen: 'reset-password', password: 'Abcdefg1', confirmPassword: 'Abcdefg1' }, height: 800 },
  'reset-password-done': { label: '204 from /reset-password', props: { ...base, screen: 'reset-password-done' }, height: 480 },
  'verify-email': { label: '/verify-email without a token: resend with a cooldown', props: { ...base, screen: 'verify-email', email: EMAIL, resendCooldown: 47, message: { tone: 'success', text: 'Bestätigungs-E-Mail gesendet! Bitte prüfe dein Postfach.' } }, height: 760 },
  'verify-email-set-password': { label: 'Token verified: set the first password', props: { ...base, screen: 'verify-email-set-password', password: '', confirmPassword: '' }, height: 800 },
  'verify-code': { label: 'Six-digit code, three typed (dead at fd8558f: its backend routes are commented out)', props: { ...base, screen: 'verify-code', email: EMAIL, code: ['4', '8', '1', '', '', ''] }, height: 720 },
});

/* ---- chrome ------------------------------------------------------------- */

function Mark({ className }: { className?: string }) {
  return (
    <svg width="28" height="28" viewBox="0 0 24 24" fill="currentColor" className={className} aria-hidden>
      <path d="M12 3l1.8 4.9L18.5 9l-4.7 1.8L12 15.5l-1.8-4.7L5.5 9l4.7-1.1L12 3z" />
    </svg>
  );
}

/** The centred column every public page uses: mark, content, footer. */
function Page({ brandWord = 'Acme', children }: { brandWord?: string; children: React.ReactNode }) {
  return (
    <div className="min-h-[560px] flex flex-col items-center justify-center relative overflow-hidden p-6 bg-paper text-ink font-sans">
      <div className="relative z-10 w-full max-w-md">
        <div className="text-center mb-8 flex items-center justify-center gap-2 text-brand-purple">
          <Mark />
          <span className="text-xl font-semibold text-ink">{brandWord}</span>
        </div>
        {children}
        <div className="text-center mt-8">
          <Text size="xs" muted>{brandWord.toUpperCase()} © 2026</Text>
        </div>
      </div>
    </div>
  );
}

function Notice({ tone, children }: { tone: 'error' | 'success' | 'info'; children: React.ReactNode }) {
  const cls = {
    error: 'bg-danger-bg border-danger/30 text-danger',
    success: 'bg-success-bg border-success/30 text-success-dark',
    info: 'bg-brand-purple/10 border-brand-purple/30 text-brand-purple',
  }[tone];
  return (
    <div role={tone === 'error' ? 'alert' : 'status'} className={`rounded-2xl px-4 py-3 mb-5 border text-sm leading-relaxed ${cls}`}>
      {children}
    </div>
  );
}

function Field({
  label,
  icon,
  type,
  value,
  placeholder,
  autoComplete,
  trailing,
  disabled,
}: {
  label: string;
  icon: React.ReactNode;
  type: string;
  value: string;
  placeholder: string;
  autoComplete?: string;
  trailing?: React.ReactNode;
  disabled?: boolean;
}) {
  return (
    <div className="mb-5">
      <Text as="label" size="sm" weight="medium" className="block mb-2 px-4">
        {label}
      </Text>
      <div className="relative">
        <div className="absolute inset-y-0 left-0 pl-6 flex items-center pointer-events-none z-10 text-ink-40">{icon}</div>
        <Input type={type} defaultValue={value} placeholder={placeholder} autoComplete={autoComplete} inputSize="md" className={`pl-14 ${trailing ? 'pr-14' : ''}`} disabled={disabled} />
        {trailing && <div className="absolute inset-y-0 right-0 pr-4 flex items-center z-10">{trailing}</div>}
      </div>
    </div>
  );
}

function Divider({ word }: { word: string }) {
  return (
    <div className="flex items-center gap-3 my-6">
      <span className="h-px flex-1 bg-line" />
      <span className="text-[11px] uppercase tracking-[0.22em] text-ink-40">{word}</span>
      <span className="h-px flex-1 bg-line" />
    </div>
  );
}

function IconDisc({ tone, children }: { tone: 'purple' | 'success' | 'error'; children: React.ReactNode }) {
  const cls = { purple: 'bg-brand-purple/10 text-brand-purple', success: 'bg-success-bg text-success', error: 'bg-danger-bg text-danger' }[tone];
  return <div className={`w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-6 ${cls}`}>{children}</div>;
}

/* ---- /login ------------------------------------------------------------- */

function Login(p: Props) {
  const mode = p.mode ?? 'magic-link';
  const failure = failureCopy(p.failure, mode === 'password' ? 'password' : 'magic-link') ?? oidcErrorCopy(p.oidcError);
  const waiting = p.failure?.status === 429;
  const busy = !!p.submitting || waiting;
  return (
    <Page brandWord={p.brandWord}>
      <div className="text-center mb-8">
        <p className="uppercase tracking-[0.28em] text-[12px] font-semibold text-ink-40 mb-3">Kundenportal</p>
        <Heading level={1} className="mb-2">Willkommen zurück.</Heading>
        <Text muted>{mode === 'magic-link' ? 'Vier Wege hinein. Alle führen zum selben Konto.' : 'Melde dich mit deinem Passwort an.'}</Text>
      </div>

      <Card variant="glass" padding="lg" data-gallery-focus="true">
        <form onSubmit={(e) => e.preventDefault()}>
          <Field label="E-Mail" icon={<Mail className="w-5 h-5" />} type="email" value={p.email ?? ''} placeholder="[email protected]" autoComplete="username" disabled={busy} />

          {mode === 'password' && (
            <Field
              label="Passwort"
              icon={<Lock className="w-5 h-5" />}
              type={p.showPassword ? 'text' : 'password'}
              value={p.password ?? ''}
              placeholder="••••••••"
              autoComplete="current-password"
              disabled={busy}
              trailing={
                <button type="button" aria-label={p.showPassword ? 'Passwort verbergen' : 'Passwort anzeigen'} className="text-ink-40 hover:text-ink transition-colors">
                  {p.showPassword ? <EyeOff className="w-5 h-5" /> : <Eye className="w-5 h-5" />}
                </button>
              }
            />
          )}

          {failure && <Notice tone="error">{failure}</Notice>}

          <Button type="submit" variant="primary" size="lg" fullWidth loading={!!p.submitting} disabled={busy}>
            {p.submitting ? (mode === 'magic-link' ? 'Wird gesendet …' : 'Einen Moment …') : waiting ? `Warten (${p.failure?.retryAfter ?? 60} s)` : mode === 'magic-link' ? 'Login-Link senden' : 'Anmelden'}
            {!p.submitting && !waiting && <ArrowRight className="w-5 h-5" />}
          </Button>

          {mode === 'magic-link' ? (
            <>
              <Divider word="oder" />
              <div className={`grid gap-2.5 ${p.infomaniak ? 'grid-cols-2' : 'grid-cols-1'}`}>
                <Button type="button" variant="outline" size="md" disabled={busy}>
                  <Key className="w-4 h-4" />
                  Passkey
                </Button>
                {p.infomaniak && (
                  <Button type="button" variant="outline" size="md" disabled={busy}>
                    <span aria-hidden className="w-4 h-4 rounded bg-ink/80 inline-block" />
                    Infomaniak
                  </Button>
                )}
              </div>
              <div className="text-center mt-5">
                <button type="button" className="text-sm text-ink-60 hover:text-ink transition-colors">Mit Passwort anmelden</button>
              </div>
            </>
          ) : (
            <div className="text-center mt-5">
              <button type="button" className="text-sm text-ink-60 hover:text-ink transition-colors">Zurück zum Login-Link</button>
            </div>
          )}
        </form>

        <div className="mt-6 pt-6 border-t border-line text-center">
          {mode === 'password' && (
            <a href="#forgot-password" className="block mb-3 text-sm text-ink-60 hover:text-ink transition-colors">Passwort vergessen?</a>
          )}
          <Text size="sm" muted>
            Noch kein Konto? <a href="#" className="text-ink font-medium hover:text-brand-purple transition-colors">Mehr erfahren</a>
          </Text>
        </div>
      </Card>
    </Page>
  );
}

/** The 202 screen. The copy names the typed address and nothing about the account: the backend answers 202 for every address (auth_router.py line 1125). */
function MagicLinkSent(p: Props) {
  return (
    <Page brandWord={p.brandWord}>
      <Card variant="glass" padding="lg" className="text-center">
        <IconDisc tone="purple"><CheckCircle className="w-8 h-8" /></IconDisc>
        <Heading level={2} className="mb-3">Link gesendet.</Heading>
        <Text muted className="mb-1">Falls zu dieser Adresse ein Konto besteht, ist ein Login-Link unterwegs an</Text>
        <Text weight="semibold" className="mb-4 break-all">{p.email}</Text>
        <div className="rounded-2xl p-4 mb-6 bg-white border border-line">
          <Text size="sm" muted>Der Link ist 15 Minuten gültig. Prüfe auch deinen Spam-Ordner.</Text>
        </div>
        <button type="button" className="text-sm font-medium text-ink-60 hover:text-ink transition-colors">Andere E-Mail verwenden</button>
      </Card>
    </Page>
  );
}

/** The 200 body with status verification_required and no tokens (auth_router.py lines 88 to 114), not rendered by Labs at fd8558f. */
function VerificationRequired(p: Props) {
  return (
    <Page brandWord={p.brandWord}>
      <Card variant="glass" padding="lg" className="text-center">
        <IconDisc tone="purple"><Mail className="w-8 h-8" /></IconDisc>
        <Heading level={2} className="mb-3">Bitte zuerst bestätigen.</Heading>
        <Text muted className="mb-1">Dieses Konto ist noch nicht bestätigt. Wir haben einen neuen Bestätigungslink geschickt an</Text>
        <Text weight="semibold" className="mb-4 break-all">{p.email}</Text>
        <div className="rounded-2xl p-4 mb-6 bg-white border border-line">
          <Text size="sm" muted>Öffne den Link in der E-Mail, lege ein Passwort fest und melde dich dann an.</Text>
        </div>
        <Button variant="outline" size="md">Zurück zum Login</Button>
      </Card>
    </Page>
  );
}

/* ---- /auth/magic-link --------------------------------------------------- */

function MagicLinkCallback(p: Props) {
  const c = p.callback ?? { status: 'loading' as const };
  const destination = signInDestination(c);
  return (
    <Page brandWord={p.brandWord}>
      <div className="text-center mb-8">
        <Text size="xs" className="uppercase mb-2 text-brand-purple tracking-widest">Authentifizierung</Text>
        <Heading level={1} className="mb-2">
          {c.status === 'loading' && 'Das Portal öffnet sich …'}
          {c.status === 'success' && 'Willkommen zurück'}
          {c.status === 'error' && 'Authentifizierung fehlgeschlagen'}
        </Heading>
        <Text muted>
          {c.status === 'loading' && 'Dein Schlüssel wird verifiziert'}
          {c.status === 'success' && 'Du wirst weitergeleitet …'}
          {c.status === 'error' && 'Der Login-Link konnte nicht verifiziert werden'}
        </Text>
      </div>
      <Card variant="glass" padding="lg" className="text-center">
        {c.status === 'loading' && (
          <>
            <div className="w-20 h-20 mx-auto mb-6 grid place-items-center"><Spinner size="xl" /></div>
            <Text muted className="italic">Einen Moment bitte …</Text>
          </>
        )}
        {c.status === 'success' && (
          <>
            <IconDisc tone="success"><CheckCircle className="w-8 h-8" /></IconDisc>
            <Heading level={3} className="mb-3">Erfolgreich angemeldet</Heading>
            {c.acting_email && <Text size="sm" muted className="mb-2">Du bist als {c.acting_email} angemeldet.</Text>}
            <Text muted className="mb-6">{destination === '/desk' ? 'Du wirst zum Service Desk weitergeleitet …' : 'Du wirst weitergeleitet …'}</Text>
            <div className="h-1 rounded-full bg-brand-purple mx-auto max-w-[200px]" />
          </>
        )}
        {c.status === 'error' && (
          <>
            <IconDisc tone="error"><AlertCircle className="w-8 h-8" /></IconDisc>
            <Heading level={3} className="mb-3">Etwas ist schiefgelaufen</Heading>
            <Notice tone="error">{c.error ?? 'Verifizierung fehlgeschlagen'}</Notice>
            <Button variant="primary" fullWidth>Neuen Link anfordern</Button>
          </>
        )}
      </Card>
    </Page>
  );
}

/* ---- /auth/callback (OIDC) and PrivateRoute ------------------------------ */

function OidcCallback() {
  return (
    <div className="min-h-[320px] flex flex-col items-center justify-center gap-4 bg-paper text-ink font-sans p-6">
      <Spinner size="lg" />
      <Text size="sm" className="text-ink-60">Anmeldung wird abgeschlossen …</Text>
    </div>
  );
}

const SURFACE_LABEL: Record<string, string> = { labs: 'Admin', prima_web: 'Prima Web', prima_chat: 'Prima Chat', prima_dev: 'Prima Developer' };

/** PrivateRoute's "signed in, not here" screen (PrivateRoute.tsx lines 56 to 83). Labs renders it in English; the rebuild keeps the copy language of the page. */
function NotPermitted(p: Props) {
  const elsewhere = (p.surfaces ?? []).filter((s) => s !== p.buildSurface);
  return (
    <div className="min-h-[320px] flex flex-col justify-center items-center gap-4 px-6 text-center bg-paper text-ink font-sans">
      <Heading level={3}>Dieses Konto kann hier nicht verwendet werden</Heading>
      <Text size="sm" muted className="max-w-md">
        Du bist angemeldet, aber dieses Konto ist nicht für {SURFACE_LABEL[p.buildSurface ?? 'labs'] ?? p.buildSurface} freigeschaltet.
      </Text>
      {elsewhere.length > 0 && (
        <Text size="sm">
          Versuche{' '}
          {elsewhere.map((s, i) => (
            <React.Fragment key={s}>
              {i > 0 && ' oder '}
              <a className="underline" href="#">{SURFACE_LABEL[s] ?? s}</a>
            </React.Fragment>
          ))}
          .
        </Text>
      )}
    </div>
  );
}

/* ---- /forgot-password and /reset-password -------------------------------- */

function ForgotPassword(p: Props) {
  const failure = failureCopy(p.failure, 'forgot');
  return (
    <Page brandWord={p.brandWord}>
      <div className="text-center mb-8">
        <Text size="xs" className="uppercase mb-2 text-brand-purple tracking-widest">Passwort</Text>
        <Heading level={1} className="mb-2">Passwort vergessen?</Heading>
        <Text muted>Kein Problem. Gib deine E-Mail ein und wir senden dir einen Link zum Zurücksetzen.</Text>
      </div>
      <Card variant="glass" padding="lg">
        <form onSubmit={(e) => e.preventDefault()}>
          <IconDisc tone="purple"><Key className="w-8 h-8" /></IconDisc>
          <Field label="E-Mail-Adresse" icon={<Mail className="w-5 h-5" />} type="email" value={p.email ?? ''} placeholder="[email protected]" autoComplete="username" disabled={!!p.submitting} />
          {failure && <Notice tone="error">{failure}</Notice>}
          <Button type="submit" variant="primary" size="lg" fullWidth loading={!!p.submitting} className="mb-4">
            {!p.submitting && 'Link senden'}
          </Button>
          <div className="text-center">
            <Button type="button" variant="ghost" size="sm">
              <ArrowLeft className="w-4 h-4" />
              Zurück zum Login
            </Button>
          </div>
        </form>
      </Card>
    </Page>
  );
}

/** The 202 screen for /forgot-password: the backend answers 202 whether or not the address has an account (auth_router.py lines 890 to 898). */
function ForgotPasswordSent(p: Props) {
  return (
    <Page brandWord={p.brandWord}>
      <Card variant="glass" padding="lg" className="text-center">
        <IconDisc tone="success"><CheckCircle className="w-8 h-8" /></IconDisc>
        <Heading level={2} className="mb-3">E-Mail unterwegs.</Heading>
        <Text muted className="mb-1">Falls zu dieser Adresse ein Konto besteht, geht ein Link zum Zurücksetzen an</Text>
        <Text weight="semibold" className="text-brand-purple mb-4 break-all">{p.email}</Text>
        <div className="rounded-2xl p-4 mb-6 bg-warn-bg border border-warn/20">
          <Text size="sm" muted>Der Link ist 6 Stunden gültig. Prüfe auch deinen Spam-Ordner.</Text>
        </div>
        <Button variant="ghost">
          <ArrowLeft className="w-4 h-4" />
          Zurück zum Login
        </Button>
      </Card>
    </Page>
  );
}

function Requirement({ ok, children }: { ok: boolean; children: React.ReactNode }) {
  return (
    <Text as="span" size="xs" className={`block ${ok ? 'text-success-dark' : 'text-ink-40'}`}>
      {ok ? '✓' : '•'} {children}
    </Text>
  );
}

/** ResetPassword.tsx lines 158 onward: new password with the five-part strength meter, confirmation, submit. */
function PasswordForm({ title, lead, submitLabel, p }: { title: string; lead: string; submitLabel: string; p: Props }) {
  const pwd = p.password ?? '';
  const s = passwordStrength(pwd);
  const bar = s.score <= 2 ? 'bg-danger' : s.score <= 4 ? 'bg-warn' : 'bg-success';
  const failure = failureCopy(p.failure, 'reset');
  const mismatch = !!p.confirmPassword && p.confirmPassword !== pwd;
  return (
    <Page brandWord={p.brandWord}>
      <Card variant="glass" padding="lg">
        <div className="text-center mb-8">
          <IconDisc tone="purple"><Lock className="w-8 h-8" /></IconDisc>
          <Heading level={2} className="mb-2">{title}</Heading>
          <Text muted>{lead}</Text>
        </div>
        {failure && <Notice tone="error">{failure}</Notice>}
        {mismatch && <Notice tone="error">Die Passwörter stimmen nicht überein</Notice>}
        <form onSubmit={(e) => e.preventDefault()}>
          <Field
            label="Neues Passwort"
            icon={<Lock className="w-5 h-5" />}
            type={p.showPassword ? 'text' : 'password'}
            value={pwd}
            placeholder="Passwort eingeben"
            autoComplete="new-password"
            trailing={
              <button type="button" aria-label={p.showPassword ? 'Passwort verbergen' : 'Passwort anzeigen'} className="text-ink-40 hover:text-ink transition-colors">
                {p.showPassword ? <EyeOff className="w-5 h-5" /> : <Eye className="w-5 h-5" />}
              </button>
            }
          />
          {pwd && (
            <div className="mb-5 px-1">
              <div className="flex items-center justify-between mb-1">
                <Text size="xs" muted>Passwortstärke</Text>
                <Text size="xs" muted>{s.score} von 5</Text>
              </div>
              <div className="h-1.5 rounded-full bg-line overflow-hidden">
                <div className={`h-full rounded-full ${bar}`} style={{ width: `${(s.score / 5) * 100}%` }} />
              </div>
              <div className="mt-2 grid grid-cols-2 gap-x-4">
                <Requirement ok={s.requirements.length}>Mindestens 8 Zeichen</Requirement>
                <Requirement ok={s.requirements.uppercase}>Ein Grossbuchstabe</Requirement>
                <Requirement ok={s.requirements.lowercase}>Ein Kleinbuchstabe</Requirement>
                <Requirement ok={s.requirements.number}>Eine Zahl</Requirement>
                <Requirement ok={s.requirements.special}>Ein Sonderzeichen</Requirement>
              </div>
            </div>
          )}
          <Field label="Passwort bestätigen" icon={<Lock className="w-5 h-5" />} type={p.showPassword ? 'text' : 'password'} value={p.confirmPassword ?? ''} placeholder="Passwort bestätigen" autoComplete="new-password" />
          <Button type="submit" variant="primary" size="lg" fullWidth loading={!!p.submitting} disabled={!!p.submitting || s.score < 5 || !p.confirmPassword || mismatch}>
            {submitLabel}
            <ArrowRight className="w-4 h-4" />
          </Button>
        </form>
        <div className="text-center mt-6">
          <a href="#login" className="text-sm text-brand-purple font-medium">Zurück zum Login</a>
        </div>
      </Card>
    </Page>
  );
}

function ResetDone(p: Props) {
  return (
    <Page brandWord={p.brandWord}>
      <Card variant="glass" padding="xl" className="text-center">
        <IconDisc tone="success"><CheckCircle className="w-8 h-8" /></IconDisc>
        <Heading level={2} className="mb-2">Passwort zurückgesetzt.</Heading>
        <Text muted className="mb-6">Alle bisherigen Sitzungen wurden beendet. Melde dich mit dem neuen Passwort an.</Text>
        <Button variant="primary" size="lg">
          Zum Login
          <ArrowRight className="w-4 h-4" />
        </Button>
      </Card>
    </Page>
  );
}

/* ---- /verify-email and /verify-code -------------------------------------- */

/** EmailVerification.tsx lines 320 onward: no token in the URL, so the page offers a resend with a 60 s cooldown. */
function VerifyEmail(p: Props) {
  const cooldown = p.resendCooldown ?? 0;
  return (
    <Page brandWord={p.brandWord}>
      <Card variant="glass" padding="lg" className="text-center">
        <IconDisc tone="purple"><Mail className="w-8 h-8" /></IconDisc>
        <Heading level={2} className="mb-2">Prüfe deine E-Mails</Heading>
        <Text muted className="mb-6">Wir haben dir eine Bestätigungs-E-Mail gesendet. Bitte prüfe dein Postfach und klicke auf den Bestätigungslink.</Text>
        <Notice tone="info">
          <strong>E-Mail nicht erhalten?</strong> Prüfe deinen Spam-Ordner oder fordere unten eine neue Bestätigungs-E-Mail an.
        </Notice>
        <form onSubmit={(e) => e.preventDefault()} className="text-left">
          <Field label="Deine E-Mail-Adresse" icon={<Mail className="w-5 h-5" />} type="email" value={p.email ?? ''} placeholder="[email protected]" autoComplete="username" />
          <Button type="submit" variant="primary" size="lg" fullWidth disabled={cooldown > 0 || !p.email} className="mb-4">
            {cooldown > 0 ? `Erneut senden in ${cooldown} s` : 'Bestätigungs-E-Mail erneut senden'}
          </Button>
          {p.message && <Notice tone={p.message.tone}>{p.message.text}</Notice>}
        </form>
        <a href="#login" className="inline-block text-brand-purple text-sm font-medium">Zurück zum Login</a>
      </Card>
    </Page>
  );
}

/** VerifyCode.tsx lines 170 onward: six one-character inputs, auto-advance, paste fills all six. The lg: branding column of the page is not rendered. */
function VerifyCode(p: Props) {
  const code = p.code ?? ['', '', '', '', '', ''];
  const complete = code.every((d) => d !== '');
  return (
    <Page brandWord={p.brandWord}>
      <Card variant="glass" padding="xl">
        <div className="text-center mb-8">
          <IconDisc tone="purple"><Mail className="w-8 h-8" /></IconDisc>
          <Heading level={2} className="mb-2">Prüfe deine E-Mails</Heading>
          <Text muted>Gib den 6-stelligen Code ein, den wir gesendet haben an</Text>
          <Text weight="medium" className="mt-1">{p.email}</Text>
        </div>
        <div className="mb-8">
          <div className="flex gap-3 justify-center">
            {code.map((digit, i) => (
              <input
                key={i}
                type="text"
                inputMode="numeric"
                maxLength={1}
                defaultValue={digit}
                aria-label={`Ziffer ${i + 1}`}
                className="w-12 h-14 text-center text-2xl font-bold border-2 border-line rounded-xl bg-white text-ink focus:border-brand-purple focus:ring-2 focus:ring-brand-purple/20 focus:outline-none transition-all"
              />
            ))}
          </div>
          <Text size="sm" muted className="text-center mt-4">Code läuft in 15 Minuten ab</Text>
        </div>
        <Button variant="primary" size="lg" fullWidth disabled={!complete}>
          Weiter
          <ArrowRight className="w-5 h-5" />
        </Button>
        <div className="mt-6 text-center">
          <Text size="sm" muted className="mb-2">Code nicht erhalten?</Text>
          <Button variant="ghost" size="sm">Code erneut senden</Button>
        </div>
      </Card>
    </Page>
  );
}

/* ---- the demo ------------------------------------------------------------ */

export default function Demo(props: Props) {
  switch (props.screen) {
    case 'login':
      return <Login {...props} />;
    case 'magic-link-sent':
      return <MagicLinkSent {...props} />;
    case 'verification-required':
      return <VerificationRequired {...props} />;
    case 'magic-link-callback':
      return <MagicLinkCallback {...props} />;
    case 'oidc-callback':
      return <OidcCallback />;
    case 'not-permitted':
      return <NotPermitted {...props} />;
    case 'forgot-password':
      return <ForgotPassword {...props} />;
    case 'forgot-password-sent':
      return <ForgotPasswordSent {...props} />;
    case 'reset-password':
      return <PasswordForm title="Passwort zurücksetzen" lead="Gib unten dein neues Passwort ein" submitLabel="Passwort zurücksetzen" p={props} />;
    case 'reset-password-done':
      return <ResetDone {...props} />;
    case 'verify-email':
      return <VerifyEmail {...props} />;
    case 'verify-email-set-password':
      return <PasswordForm title="E-Mail bestätigt!" lead="Lege jetzt dein Passwort fest, um dein Konto zu sichern." submitLabel="Passwort festlegen & fortfahren" p={props} />;
    case 'verify-code':
      return <VerifyCode {...props} />;
    default:
      return <Login {...props} />;
  }
}

<Route /login> LoginAlchemy                     App.tsx 240; no <Navigation>
  div.min-h-screen.bg-white (watermark img, four corner marks)
    img logo
    p.eyebrow "Kundenportal" · h1 "Willkommen zurück." · p lead (per mode)
    div.card
      form[magic-link]                         default mode (line 27)
        label E-Mail · input[type=email] (Mail icon)
        div.error?                             one string, whatever failed
        button.submit "Login-Link senden"      POST /api/auth/request-magic-link {email, next?}
        divider "oder"
        div.grid-cols-2|1                      VITE_INFOMANIAK_LOGIN decides the columns
          button "Passkey"                     begin-discoverable -> startAuthentication -> complete-discoverable
          button "Infomaniak"?                 location = <API>/api/auth/infomaniak/start?surface=labs
        button.quiet "Mit Passwort anmelden"
      form[password]
        label E-Mail · input · label Passwort · input[type=password|text] + eye toggle
        div.error?
        button.submit "Anmelden"               useAuth().login -> POST /api/auth/login
        button.quiet "Zurück zum Login-Link"
      footer: Link /forgot-password (password mode) · "Noch kein Konto? Mehr erfahren" -> /
  [magicLinkSent] div.card "Link gesendet." · {email} · "15 Minuten gültig" · "Andere E-Mail verwenden"
  [authLoading || passkeyLoading] spinner only (lines 190 to 196)
<Route /auth/magic-link> MagicLinkCallback     POST /verify-magic-link {token}; loading | success | error
  Text eyebrow "Authentifizierung" · Heading · Card.glass (spinner | check + acting email + progress bar | AlertCircle + error + "Neuen Link anfordern")
<Route /auth/callback> AuthCallback            fragment -> setTokens -> replaceState -> navigate('/'); Spinner + "Anmeldung wird abgeschlossen…"
<Route /forgot-password> ForgotPassword        Key disc · Input email · Button "Link senden" · [success] "E-Mail gesendet!" + "6 Stunden gültig"
<Route /reset-password> ResetPassword          ?token= · Lock disc · Input x2 + strength meter (5 requirements) · [!token] "Ungültiger Reset-Link" · [success] "Passwort erfolgreich zurückgesetzt!"
<Route /verify-email> EmailVerification        ?token= -> POST /verify-email; pending (resend + 60 s cooldown) | verifying | set_password (POST /set-password) | success | error
<Route /verify-code> VerifyCode                six inputs; dead: POST /request-2fa-code is commented out on the backend
<Route /setup-password> SetupPassword          dead: POST /setup-password is commented out on the backend
<Route /register> Navigate -> /login           App.tsx 244
PrivateRoute                                   loading spinner | !user -> /login?redirect=<path> | !hasSurface -> "This account can't be used here" | children
AdminRoute                                     loading | !user -> /login | !isAdmin -> / | children