import { redirect } from 'next/navigation';

import { userLoginAction } from '@/src/lib/actions.js';
import { runCleanupIfNeeded } from '@/src/lib/db.js';
import { readSearchParam } from '@/src/lib/format.js';
import { ensureCsrfToken, getAuthenticatedUser } from '@/src/lib/security.js';

import { StatusMessage } from '../_components/status-message.js';

export const dynamic = 'force-dynamic';

export default async function LoginPage({ searchParams }) {
  await runCleanupIfNeeded();

  const user = await getAuthenticatedUser();
  if (user) {
    redirect('/manage/dashboard');
  }

  const csrfToken = await ensureCsrfToken();
  const resolvedSearchParams = await searchParams;
  const error = readSearchParam(resolvedSearchParams, 'error');
  const success = readSearchParam(resolvedSearchParams, 'success');

  return (
    <main className="page-shell narrow">
      <header className="page-header">
        <div className="header-main">
          <h1>Dateiverwaltung</h1>
          <p className="muted">Melde dich an, um Uploads zu verwalten.</p>
        </div>
        <a className="chip" href="/manage/admin">
          Admin-Anmeldung
        </a>
      </header>

      <section className="panel">
        <StatusMessage error={error} success={success} />
        <form className="form-grid" action={userLoginAction}>
          <input type="hidden" name="csrfToken" value={csrfToken} />

          <label className="field">
            Benutzername
            <input className="input" name="username" autoComplete="username" required />
          </label>

          <label className="field">
            Passwort
            <input
              className="input"
              name="password"
              type="password"
              autoComplete="current-password"
              required
            />
          </label>

          <button className="btn" type="submit">
            Anmelden
          </button>
        </form>
      </section>
    </main>
  );
}