tessera-ctl/apps/web/src/app/(auth)/login/page.tsx

'use client';

import { useState, useTransition } from 'react';
import { useTranslations } from 'next-intl';
import Link from 'next/link';
import { login } from '@/lib/auth-actions';
import { sanitizeNextPath } from '@/lib/safe-next';
import { BRAND_YELLOW } from '@/components/brand/brand';
import { TesseraLogo } from '@/components/brand/tessera-logo';
import { DesktopDownloadLinks } from '@/components/desktop/desktop-download-links';

/**
 * Split-screen login page (D-01).
 * Left: Tessera branding on the brand yellow background (BRAND_YELLOW).
 * Right: Login form on neutral background.
 * No sidebar or header (D-04, handled by (auth) layout).
 */
export default function LoginPage() {
  const t = useTranslations('auth');
  const [isPending, startTransition] = useTransition();
  const [error, setError] = useState<string | null>(null);

  async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault();
    setError(null);

    const formData = new FormData(e.currentTarget);

    startTransition(async () => {
      const result = await login(formData);
      if (result.success) {
        // `next` erst beim Absenden aus window.location.search lesen statt
        // per useSearchParams(): der Hook verlangt in Next 15 eine
        // Suspense-Grenze, sonst bricht `next build` fuer die statisch
        // vorgerenderte Anmeldeseite ab (quick-260917-gyd).
        const next = new URLSearchParams(window.location.search).get('next');
        window.location.href = sanitizeNextPath(next);
      } else {
        setError(result.error ?? 'invalidCredentials');
      }
    });
  }

  return (
    <div className="flex min-h-screen">
      {/* Left: Branding panel (hidden on mobile, visible on md+) */}
      <div
        className="hidden md:flex md:flex-1 items-center justify-center"
        style={{ backgroundColor: BRAND_YELLOW }}
      >
        <div className="px-8 text-gray-900">
          <TesseraLogo
            variant="horizontal"
            size={104}
            plateOutline={false}
            tagline={t('branding.tagline')}
            className="gap-6"
            wordmarkClassName="text-5xl"
            taglineClassName="text-lg text-gray-800 max-w-xs"
          />
        </div>
      </div>

      {/* Right: Login form */}
      <div className="flex flex-1 items-center justify-center bg-background px-4 py-8">
        <div className="w-full max-w-sm space-y-8">
          {/* Mobile-only branding */}
          <div className="text-center md:hidden">
            <TesseraLogo variant="horizontal" size={32} />
            <p className="mt-2 text-sm text-muted-foreground">
              {t('branding.tagline')}
            </p>
          </div>

          {/* Login heading */}
          <div className="text-center">
            <h2 className="text-2xl font-bold text-foreground">
              {t('login')}
            </h2>
          </div>

          {/* Error message */}
          {error && (
            <div className="rounded-md bg-destructive/10 border border-destructive/20 px-4 py-3 text-sm text-destructive">
              {t(`error.${error}`)}
            </div>
          )}

          {/* Login form */}
          <form onSubmit={handleSubmit} className="space-y-5">
            {/* Username */}
            <div className="space-y-2">
              <label
                htmlFor="username"
                className="text-sm font-medium text-foreground"
              >
                {t('username')}
              </label>
              <input
                id="username"
                name="username"
                type="text"
                required
                autoComplete="username"
                autoFocus
                className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
                placeholder={t('username')}
              />
            </div>

            {/* Password */}
            <div className="space-y-2">
              <label
                htmlFor="password"
                className="text-sm font-medium text-foreground"
              >
                {t('password')}
              </label>
              <input
                id="password"
                name="password"
                type="password"
                required
                autoComplete="current-password"
                className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
                placeholder={t('password')}
              />
            </div>

            {/* Remember me (D-02) */}
            <div className="flex items-center gap-2">
              <input
                id="rememberMe"
                name="rememberMe"
                type="checkbox"
                defaultChecked
                className="h-4 w-4 rounded border-input text-primary focus:ring-ring"
              />
              <label
                htmlFor="rememberMe"
                className="text-sm text-muted-foreground"
              >
                {t('rememberMe')}
              </label>
            </div>

            {/* Forgot password link (D-03) */}
            <div className="flex justify-end">
              <Link
                href="/reset-password"
                className="text-sm text-muted-foreground hover:text-foreground transition-colors"
              >
                {t('forgotPassword')}
              </Link>
            </div>

            {/* Submit button */}
            <button
              type="submit"
              disabled={isPending}
              className="flex w-full items-center justify-center rounded-md bg-primary px-4 py-2.5 text-sm font-medium text-primary-foreground hover:opacity-90 transition-opacity disabled:opacity-50"
            >
              {isPending ? (
                <svg
                  className="animate-spin h-4 w-4"
                  xmlns="http://www.w3.org/2000/svg"
                  fill="none"
                  viewBox="0 0 24 24"
                >
                  <circle
                    className="opacity-25"
                    cx="12"
                    cy="12"
                    r="10"
                    stroke="currentColor"
                    strokeWidth="4"
                  />
                  <path
                    className="opacity-75"
                    fill="currentColor"
                    d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
                  />
                </svg>
              ) : (
                t('submit')
              )}
            </button>
          </form>

          {/* Desktop-App-Link (D-12), blendet sich aus ohne API-Antwort */}
          <DesktopDownloadLinks />
        </div>
      </div>
    </div>
  );
}