import Link from "next/link";
import { changePasswordAction } from "@/app/actions/auth";
import { Flash } from "@/components/flash";
import { requireSessionUser } from "@/lib/auth";
import { queryMessage } from "@/lib/format";

export const runtime = "nodejs";

export default async function AccountPage({
  searchParams,
}: {
  searchParams: Promise<Record<string, string | string[] | undefined>>;
}) {
  const user = await requireSessionUser();
  const params = await searchParams;

  return (
    <>
      <div className="breadcrumbs">
        <Link href="/">Übersicht</Link>
        <span>/</span>
        Konto
      </div>
      <div className="page-heading">
        <div>
          <p className="eyebrow">Mein Zugang</p>
          <h1>Konto</h1>
        </div>
      </div>
      <Flash error={queryMessage(params, "error")} success={queryMessage(params, "success")} />

      <section className="detail-grid">
        <div className="panel">
          <h3 className="panel-title">Profil</h3>
          <dl className="data-list">
            <div><dt>Name</dt><dd>{user.name}</dd></div>
            <div><dt>E-Mail</dt><dd className="mono">{user.email}</dd></div>
            <div><dt>Rolle</dt><dd>{user.role === "admin" ? "Administrator" : "Mitglied"}</dd></div>
          </dl>
        </div>
      </section>

      <section className="section-block">
        <div className="section-heading">
          <div>
            <p className="eyebrow">Sicherheit</p>
            <h2>Passwort ändern</h2>
          </div>
        </div>
        <form action={changePasswordAction} className="panel form-grid">
          <label className="span-2">
            Aktuelles Passwort *
            <input name="current_password" type="password" required autoComplete="current-password" />
          </label>
          <label>
            Neues Passwort * (min. 10 Zeichen)
            <input name="new_password" type="password" required minLength={10} maxLength={200} autoComplete="new-password" />
          </label>
          <label>
            Neues Passwort bestätigen *
            <input name="confirm_password" type="password" required minLength={10} maxLength={200} autoComplete="new-password" />
          </label>
          <div className="form-actions span-2">
            <button className="button button-primary" type="submit">Passwort ändern</button>
          </div>
        </form>
      </section>
    </>
  );
}