import Link from "next/link";
import type { Metadata } from "next";
import { redirect } from "next/navigation";
import { getAccountSnapshot } from "@/lib/medusa/customer";
import { loginCustomerAction } from "@/app/compte/actions";
import { getResolvedSiteText } from "@/lib/site-text-server";
import { text } from "@/lib/site-text";
import { normalizeAuthRedirect } from "@/lib/auth-redirect";

type Props = {
  searchParams: Promise<{ notice?: string; next?: string }>;
};

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

export default async function ConnexionPage({ searchParams }: Props) {
  const [{ notice, next }, account, siteText] = await Promise.all([searchParams, getAccountSnapshot(), getResolvedSiteText()]);
  const safeNext = normalizeAuthRedirect(next);
  const encodedNext = encodeURIComponent(safeNext);

  if (account.authenticated) {
    redirect(safeNext);
  }

  const noticeMap: Record<string, string> = {
    "login-missing": text(siteText, "notice.login-missing"),
    "login-error": text(siteText, "notice.login-error"),
    "logout-success": text(siteText, "notice.logout-success"),
    "checkout-login-required": text(siteText, "notice.checkout-login-required"),
  };

  const feedback = notice ? noticeMap[notice] : null;

  return (
    <div className="grid gap-6 lg:grid-cols-[1.05fr_0.95fr]">
      <section className="relative overflow-hidden rounded-[1.9rem] border border-[#ffdede] bg-[linear-gradient(135deg,#fffafa_0%,#fff0f0_55%,#ffe7e7_100%)] p-6 shadow-[0_20px_42px_rgba(49,18,18,0.1)] md:p-8">
        <div className="pointer-events-none absolute -right-20 -top-20 h-56 w-56 rounded-full bg-[#f5505030] blur-3xl" />
        <p className="text-xs font-semibold uppercase tracking-[0.18em] text-[var(--accent-3)]">{text(siteText, "auth.login.eyebrow")}</p>
        <h1 className="mt-2 font-serif text-5xl text-[var(--foreground)] md:text-6xl">{text(siteText, "auth.login.title")}</h1>
        <p className="mt-3 max-w-xl text-[var(--muted)]">{text(siteText, "auth.login.description")}</p>
        <div className="mt-6 grid gap-3 text-sm text-[var(--foreground)]">
          <p className="rounded-xl border border-[#ffd8d8] bg-white/80 px-4 py-2">{text(siteText, "auth.login.benefit.1")}</p>
          <p className="rounded-xl border border-[#ffd8d8] bg-white/80 px-4 py-2">{text(siteText, "auth.login.benefit.2")}</p>
          <p className="rounded-xl border border-[#ffd8d8] bg-white/80 px-4 py-2">{text(siteText, "auth.login.benefit.3")}</p>
        </div>
      </section>

      <section className="rounded-[1.5rem] border border-[#ffe0e0] bg-white p-6 shadow-[0_14px_32px_rgba(49,18,18,0.08)] md:p-8">
        <div className="inline-flex rounded-full border border-[#ffdcdc] bg-[#fff5f5] p-1 text-sm font-semibold">
          <span className="rounded-full bg-white px-4 py-1 text-[var(--accent-3)]">{text(siteText, "auth.login.tab")}</span>
          <Link href={`/inscription?next=${encodedNext}`} className="rounded-full px-4 py-1 text-[var(--muted)] hover:text-[var(--foreground)]">
            {text(siteText, "header.account.signup")}
          </Link>
        </div>

        {feedback ? (
          <p className="mt-4 rounded-xl border border-[#ffd9d9] bg-[#fff6f6] px-4 py-3 text-sm text-[var(--foreground)]">{feedback}</p>
        ) : null}

        <form action={loginCustomerAction} className="mt-5 space-y-4">
          <input type="hidden" name="next" value={safeNext} />
          <label className="block space-y-1.5 text-sm">
            <span className="font-medium text-[var(--foreground)]">{text(siteText, "auth.field.email")}</span>
            <input
              name="email"
              type="email"
              required
              placeholder={text(siteText, "auth.placeholder.email")}
              className="h-11 w-full rounded-xl border border-[#ffd8d8] px-3 outline-none focus:border-[#f55050]"
            />
          </label>
          <label className="block space-y-1.5 text-sm">
            <span className="font-medium text-[var(--foreground)]">{text(siteText, "auth.field.password")}</span>
            <input
              name="password"
              type="password"
              required
              placeholder={text(siteText, "auth.placeholder.password")}
              className="h-11 w-full rounded-xl border border-[#ffd8d8] px-3 outline-none focus:border-[#f55050]"
            />
          </label>
          <button type="submit" className="inline-flex h-11 w-full items-center justify-center rounded-xl bg-[var(--accent)] px-5 text-sm font-semibold text-white hover:bg-[var(--accent-2)]">
            {text(siteText, "auth.login.submit")}
          </button>
        </form>
        <p className="mt-4 text-sm text-[var(--muted)]">
          {text(siteText, "auth.login.noAccount")}{" "}
          <Link href={`/inscription?next=${encodedNext}`} className="font-semibold text-[var(--accent-3)] hover:text-[#2c1717]">
            {text(siteText, "auth.login.createAccount")}
          </Link>
        </p>
      </section>
    </div>
  );
}