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 { TesseraLogo } from '@/components/brand/tessera-logo';
import { DesktopDownloadLinks } from '@/components/desktop/desktop-download-links';

/**
 * Split-screen login page (D-01), Design „Mosaik“.
 * Left (ab lg): dunkles Markenpanel mit Bildmarke, Claim und Farbmosaik.
 * Right: Anmeldekarte auf der Arbeitsflaeche; unter lg nur die Karte.
 * 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 bg-background">
      {/* Links (ab lg): dunkles Markenpanel im Ton der App-Leiste mit
          grosser Bildmarke, Produktname, einem ruhigen Satz und einem
          stillen Mosaik in Grau und Gelb — kein Verlauf, keine Animation. */}
      <div className="relative hidden w-[45%] shrink-0 flex-col overflow-hidden bg-appbar px-14 py-12 text-appbar-foreground lg:flex">
        <TesseraLogo
          variant="horizontal"
          size={40}
          plateOutline="always"
          className="gap-3"
          wordmarkClassName="text-xl font-semibold tracking-normal text-appbar-foreground"
        />

        <div className="my-auto max-w-[30rem]">
          <LoginMosaic />
          <p className="mt-12 text-[32px] font-semibold leading-10 tracking-tight">
            {t('branding.claim')}
          </p>
          <p className="mt-3 text-base leading-6 text-appbar-muted">
            {t('branding.tagline')}
          </p>
        </div>
      </div>

      {/* Rechts: Anmeldekarte zentriert auf der Arbeitsflaeche */}
      <div className="flex flex-1 items-center justify-center px-4 py-10">
        <div className="w-full max-w-[400px]">
          {/* Unter lg: Bildmarke ueber der Karte */}
          <div className="mb-6 flex justify-center lg:hidden">
            <TesseraLogo
              variant="horizontal"
              size={32}
              className="gap-2.5"
              wordmarkClassName="text-lg font-semibold tracking-normal"
            />
          </div>

          <div className="surface space-y-6 p-6 sm:p-8">
          {/* Login heading */}
          <div>
            <h1 className="text-2xl font-semibold text-foreground">
              {t('login')}
            </h1>
            <p className="mt-1 text-sm text-muted-foreground">
              {t('loginSubtitle')}
            </p>
          </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-4">
            {/* Username */}
            <div className="space-y-1.5">
              <label
                htmlFor="username"
                className="block text-sm font-semibold text-foreground"
              >
                {t('username')}
              </label>
              <input
                id="username"
                name="username"
                type="text"
                required
                autoComplete="username"
                className="flex h-8 w-full rounded-md border border-input bg-card px-2.5 text-sm placeholder:text-muted-foreground"
              />
            </div>

            {/* Password */}
            <div className="space-y-1.5">
              <label
                htmlFor="password"
                className="block text-sm font-semibold text-foreground"
              >
                {t('password')}
              </label>
              <input
                id="password"
                name="password"
                type="password"
                required
                autoComplete="current-password"
                className="flex h-8 w-full rounded-md border border-input bg-card px-2.5 text-sm placeholder:text-muted-foreground"
              />
            </div>

            {/* Angemeldet bleiben (D-02) und Passwort vergessen (D-03) in einer Zeile */}
            <div className="flex items-center justify-between gap-3">
              <div className="flex items-center gap-2">
              <input
                id="rememberMe"
                name="rememberMe"
                type="checkbox"
                defaultChecked
                className="h-4 w-4 rounded border-input"
              />
              <label
                htmlFor="rememberMe"
                className="whitespace-nowrap text-sm text-muted-foreground"
              >
                {t('rememberMe')}
              </label>
            </div>
              <Link
                href="/reset-password"
                className="whitespace-nowrap text-sm link"
              >
                {t('forgotPassword')}
              </Link>
            </div>

            {/* Submit button */}
            <button
              type="submit"
              disabled={isPending}
              className="btn btn-primary w-full"
            >
              {isPending ? (
                <svg
                  className="animate-spin h-4 w-4"
                  aria-hidden="true"
                  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>
          </div>

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

/**
 * Stilles Mosaik (Design „Mosaik“): acht Kacheln in einem lockeren
 * 4 x 3-Raster in Grautoenen, eine davon in der Akzentfarbe und — wie die
 * Signalkachel der Bildmarke — leicht gedreht. Rein dekorativ.
 */
function LoginMosaic() {
  // Runde 2: nur Gelb und Graphit-/Grautoene des dunklen Panels.
  const tiles: { col: number; row: number; color: string; rotate?: boolean }[] = [
    { col: 1, row: 1, color: 'oklch(1 0 0 / 0.14)' },
    { col: 2, row: 1, color: 'oklch(1 0 0 / 0.08)' },
    { col: 4, row: 1, color: 'oklch(1 0 0 / 0.1)' },
    { col: 2, row: 2, color: 'oklch(1 0 0 / 0.18)' },
    { col: 3, row: 2, color: 'var(--primary)', rotate: true },
    { col: 4, row: 2, color: 'oklch(1 0 0 / 0.06)' },
    { col: 1, row: 3, color: 'oklch(1 0 0 / 0.1)' },
    { col: 3, row: 3, color: 'oklch(1 0 0 / 0.05)' },
  ];
  return (
    <div aria-hidden="true" className="grid w-max grid-cols-4 grid-rows-3 gap-3">
      {tiles.map((tile) => (
        <span
          key={`${tile.col}-${tile.row}`}
          className="h-14 w-14 rounded-xl"
          style={{
            gridColumn: tile.col,
            gridRow: tile.row,
            backgroundColor: tile.color,
            transform: tile.rotate ? 'rotate(12deg)' : undefined,
          }}
        />
      ))}
    </div>
  );
}