Test Article

'use client';

import { useActionState } from 'react';
import { loginAction, type AuthActionState } from '@/features/auth/actions';
import { Logo } from '@/components/shared/logo';
import { ShieldCheck, Lock, Mail, AlertCircle, ArrowRight } from 'lucide-react';

const initialState: AuthActionState = {
  success: false,
};

export default function AdminLoginPage() {
  const [state, formAction, isPending] = useActionState(loginAction, initialState);

  return (
    <div className="relative flex min-h-screen items-center justify-center overflow-hidden px-4 py-12">
      {/* Subtle Background Radial Mesh */}
      <div
        aria-hidden="true"
        className="pointer-events-none absolute left-1/2 top-1/2 h-[500px] w-[500px] -translate-x-1/2 -translate-y-1/2 rounded-full opacity-20 blur-[100px]"
        style={{
          background: 'radial-gradient(circle, oklch(0.68 0.2 264) 0%, transparent 70%)',
        }}
      />

      <div className="relative z-10 w-full max-w-md">
        {/* Brand Header */}
        <div className="mb-8 text-center">
          <div className="inline-flex justify-center">
            <Logo showText={false} />
          </div>
          <h1 className="mt-4 text-2xl font-bold tracking-tight text-foreground sm:text-3xl">
            Editorial Management
          </h1>
          <p className="mt-1.5 text-xs text-muted-foreground sm:text-sm">
            Authenticate to access CMS controls, review queues, and publishing pipelines.
          </p>
        </div>

        {/* Login Card */}
        <div className="rounded-2xl border border-border/80 bg-surface/80 p-6 shadow-xl backdrop-blur-xl sm:p-8">
          {state?.error && (
            <div
              role="alert"
              className="mb-6 flex items-start gap-3 rounded-xl border border-destructive/40 bg-destructive/10 p-3.5 text-xs text-destructive-foreground"
            >
              <AlertCircle className="h-4 w-4 shrink-0 text-destructive" />
              <span>{state.error}</span>
            </div>
          )}

          <form action={formAction} className="space-y-4">
            {/* Email Input */}
            <div>
              <label
                htmlFor="email"
                className="block text-xs font-semibold uppercase tracking-wider text-muted-foreground"
              >
                Editorial Email
              </label>
              <div className="relative mt-1.5">
                <Mail className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
                <input
                  id="email"
                  name="email"
                  type="email"
                  autoComplete="email"
                  required
                  defaultValue="admin@lumarcpulse.internal"
                  placeholder="editor@pulse.lumarcstudio.com"
                  className="h-10 w-full rounded-lg border border-border bg-background pl-9 pr-3 text-sm text-foreground placeholder:text-muted-foreground focus:outline-2 focus:outline-ring"
                />
              </div>
            </div>

            {/* Password Input */}
            <div>
              <div className="flex items-center justify-between">
                <label
                  htmlFor="password"
                  className="block text-xs font-semibold uppercase tracking-wider text-muted-foreground"
                >
                  Password
                </label>
              </div>
              <div className="relative mt-1.5">
                <Lock className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
                <input
                  id="password"
                  name="password"
                  type="password"
                  autoComplete="current-password"
                  required
                  defaultValue="AdminPassword123!"
                  placeholder="••••••••••••"
                  className="h-10 w-full rounded-lg border border-border bg-background pl-9 pr-3 text-sm text-foreground placeholder:text-muted-foreground focus:outline-2 focus:outline-ring"
                />
              </div>
            </div>

            {/* Submit Button */}
            <button
              type="submit"
              disabled={isPending}
              className="mt-6 flex h-10 w-full items-center justify-center gap-2 rounded-lg bg-brand font-medium text-brand-foreground transition-colors hover:bg-brand-hover disabled:opacity-60 cursor-pointer"
            >
              <span>{isPending ? 'Verifying session…' : 'Sign in to workspace'}</span>
              <ArrowRight className="h-4 w-4" />
            </button>
          </form>

          {/* Seed Credentials Hint Box */}
          <div className="mt-6 rounded-xl border border-border/70 bg-background/50 p-3 text-xs text-muted-foreground">
            <div className="flex items-center gap-1.5 font-semibold text-foreground">
              <ShieldCheck className="h-3.5 w-3.5 text-brand" />
              <span>Development Access:</span>
            </div>
            <p className="mt-1 font-mono text-[11px] text-muted-foreground/90">
              admin@lumarcpulse.internal / AdminPassword123!
            </p>
          </div>
        </div>
      </div>
    </div>
  );
}