// =============================================================================
// HeadlineSift.com — Admin Login Page
// =============================================================================

import type { Metadata } from "next";
import { getSession } from "@/lib/auth";
import { redirect } from "next/navigation";
import { Suspense } from "react";
import LoginForm from "./LoginForm";

export const metadata: Metadata = {
  title: "Admin Login",
  robots: { index: false, follow: false },
};

export default async function LoginPage() {
  // If the user already has a valid session, skip the login form entirely.
  // (Middleware also does this, but a server-side check avoids any flash.)
  const session = await getSession();
  if (session) {
    redirect("/admin");
  }

  return (
    <div className="flex min-h-screen items-center justify-center bg-surface-secondary px-4">
      <div className="w-full max-w-sm">
        {/* Brand */}
        <div className="mb-8 text-center">
          <span className="inline-flex items-center justify-center rounded-lg bg-brand-600 p-2 text-white">
            <svg
              className="h-6 w-6"
              viewBox="0 0 24 24"
              fill="currentColor"
            >
              <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" />
            </svg>
          </span>
          <h1 className="mt-4 text-xl font-bold text-heading">HeadlineSift</h1>
          <p className="mt-1 text-sm text-body-muted">
            Sign in to the admin panel
          </p>
        </div>

        {/* Card */}
        <div className="rounded-lg bg-white p-6 shadow-md ring-1 ring-border">
          {/* Suspense boundary needed because LoginForm uses useSearchParams().
              The fallback shows a skeleton while the router hydrates. */}
          <Suspense
            fallback={
              <div className="space-y-5">
                <div className="h-10 animate-pulse rounded-md bg-surface-secondary" />
                <div className="h-10 animate-pulse rounded-md bg-surface-secondary" />
                <div className="h-10 animate-pulse rounded-md bg-surface-secondary" />
              </div>
            }
          >
            <LoginForm />
          </Suspense>
        </div>

        {/* Footer */}
        <p className="mt-6 text-center text-xs text-body-muted">
          &copy; {new Date().getFullYear()} HeadlineSift. All rights reserved.
        </p>
      </div>
    </div>
  );
}