import { withBase } from "@/lib/basePath";

const ERRORS: Record<string, string> = {
  invalid_credentials: "Incorrect username or password.",
  missing_credentials: "Enter your username and password.",
  login_unavailable: "Login service is unavailable. Try again shortly.",
  google_not_configured: "Google sign-in is not configured on this environment.",
  invalid_state: "Sign-in session expired. Please try again.",
  token_exchange: "Could not complete Google sign-in.",
  not_allowed: "This account is not on the allow-list.",
  no_email: "Google did not return an email address.",
};

export default async function LoginPage({
  searchParams,
}: {
  searchParams: Promise<{ from?: string; error?: string }>;
}) {
  const googleEnabled = !!process.env.GOOGLE_CLIENT_ID;
  const devEnabled = process.env.ALLOW_DEV_LOGIN !== "false";
  const sp = await searchParams;
  const from = sp.from || "/";
  const error = sp.error ? ERRORS[sp.error] || "Sign-in failed." : null;

  return (
    <main className="flex min-h-screen items-center justify-center px-4">
      <div className="card w-full max-w-md">
        <h1 className="text-2xl font-semibold text-slate-900">AI Data Aggregation</h1>
        <p className="mt-1 text-sm text-slate-600">Admin Backoffice &amp; Observability Dashboard</p>

        {error && (
          <p role="alert" className="mt-4 rounded-md bg-red-50 px-3 py-2 text-sm text-danger">
            {error}
          </p>
        )}

        {/* Local username + password login */}
        <form method="post" action={withBase("/api/auth/login")} className="mt-6 space-y-3">
          <input type="hidden" name="from" value={from} />
          <div>
            <label htmlFor="email" className="label">Username (email)</label>
            <input id="email" name="email" type="email" required autoComplete="username" placeholder="you@digt.ch" className="input" />
          </div>
          <div>
            <label htmlFor="password" className="label">Password</label>
            <input id="password" name="password" type="password" required autoComplete="current-password" className="input" />
          </div>
          <button type="submit" className="btn-primary w-full">Sign in</button>
        </form>

        {googleEnabled && (
          <>
            <div className="my-5 flex items-center gap-3 text-xs text-slate-400">
              <span className="h-px flex-1 bg-slate-200" /> or <span className="h-px flex-1 bg-slate-200" />
            </div>
            <a href={withBase("/api/auth/google/start")} className="btn-secondary w-full">Sign in with Google</a>
          </>
        )}

        {devEnabled && (
          <details className="mt-6">
            <summary className="cursor-pointer text-xs text-slate-400">Developer login (no password)</summary>
            <form method="post" action={withBase("/api/auth/dev")} className="mt-3 flex gap-2">
              <input type="hidden" name="from" value={from} />
              <input name="email" type="email" required autoComplete="email" defaultValue="admin@digt.ch" className="input" aria-label="Developer email" />
              <button type="submit" className="btn-secondary shrink-0">Sign in</button>
            </form>
            <p className="mt-1 text-xs text-slate-400">Bootstrap / escape-hatch — grants Superadmin. Disable with ALLOW_DEV_LOGIN=false.</p>
          </details>
        )}
      </div>
    </main>
  );
}