'use client';

import { useState, useTransition } from 'react';
import { useTranslations } from 'next-intl';
import { useRouter } from 'next/navigation';
import { login } from '@/lib/auth-actions';

/**
 * Split-screen login page (D-01).
 * Left: Tessera branding with primary yellow (#ffed00) background.
 * 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 router = useRouter();
  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) {
        router.push('/');
        router.refresh();
      } 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 bg-[#ffed00]">
        <div className="flex flex-col items-center gap-6 px-8 text-center">
          {/* Tessera logo / text */}
          <h1 className="text-6xl font-extrabold text-gray-900 tracking-tight">
            Tessera
          </h1>
          <p className="text-xl text-gray-800 max-w-md leading-relaxed">
            {t('branding.tagline')}
          </p>
          {/* Abstract grid icon representing modules */}
          <div className="mt-4">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="80"
              height="80"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              strokeWidth="1.5"
              strokeLinecap="round"
              strokeLinejoin="round"
              className="text-gray-800 opacity-50"
            >
              <rect x="3" y="3" width="7" height="7" rx="1" />
              <rect x="14" y="3" width="7" height="7" rx="1" />
              <rect x="14" y="14" width="7" height="7" rx="1" />
              <rect x="3" y="14" width="7" height="7" rx="1" />
            </svg>
          </div>
        </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">
            <h1 className="text-3xl font-extrabold text-primary tracking-tight">
              Tessera
            </h1>
            <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>

            {/* 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>
        </div>
      </div>
    </div>
  );
}