import Link from "next/link";
import type { Metadata } from "next";
import { redirect } from "next/navigation";
import { getAccountSnapshot } from "@/lib/medusa/customer";
import { registerCustomerAction } 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: "Inscription",
  robots: { index: false, follow: false },
};

export default async function InscriptionPage({ 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> = {
    "register-invalid": text(siteText, "notice.register-invalid"),
    "register-terms": text(siteText, "notice.register-terms"),
    "register-error": text(siteText, "notice.register-error"),
  };

  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 -left-20 -bottom-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.register.eyebrow")}</p>
        <h1 className="mt-2 font-serif text-5xl text-[var(--foreground)] md:text-6xl">{text(siteText, "auth.register.title")}</h1>
        <p className="mt-3 max-w-xl text-[var(--muted)]">{text(siteText, "auth.register.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.register.benefit.1")}</p>
          <p className="rounded-xl border border-[#ffd8d8] bg-white/80 px-4 py-2">{text(siteText, "auth.register.benefit.2")}</p>
          <p className="rounded-xl border border-[#ffd8d8] bg-white/80 px-4 py-2">{text(siteText, "auth.register.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">
          <Link href={`/connexion?next=${encodedNext}`} className="rounded-full px-4 py-1 text-[var(--muted)] hover:text-[var(--foreground)]">
            {text(siteText, "header.account.login")}
          </Link>
          <span className="rounded-full bg-white px-4 py-1 text-[var(--accent-3)]">{text(siteText, "header.account.signup")}</span>
        </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={registerCustomerAction} className="mt-5 grid gap-4">
          <input type="hidden" name="next" value={safeNext} />
          <div className="grid gap-4 sm:grid-cols-2">
            <label className="block space-y-1.5 text-sm">
              <span className="font-medium text-[var(--foreground)]">{text(siteText, "auth.field.firstName")}</span>
              <input name="firstName" placeholder={text(siteText, "auth.placeholder.firstName")} 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.lastName")}</span>
              <input name="lastName" placeholder={text(siteText, "auth.placeholder.lastName")} className="h-11 w-full rounded-xl border border-[#ffd8d8] px-3 outline-none focus:border-[#f55050]" />
            </label>
          </div>
          <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.phone")}</span>
            <input name="phone" placeholder={text(siteText, "auth.placeholder.optional")} 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"
              minLength={8}
              required
              placeholder={text(siteText, "auth.placeholder.passwordMin")}
              className="h-11 w-full rounded-xl border border-[#ffd8d8] px-3 outline-none focus:border-[#f55050]"
            />
          </label>
          <label className="flex items-start gap-3 rounded-xl border border-[#ffd8d8] bg-[#fff8f8] px-4 py-3 text-sm text-[var(--foreground)]">
            <input
              name="acceptedTerms"
              type="checkbox"
              value="yes"
              required
              className="mt-0.5 h-4 w-4 rounded border-[#f0b8b8] text-[var(--accent-3)] focus:ring-[var(--accent-3)]"
            />
            <span className="leading-6">
              {text(siteText, "auth.register.termsPrefix")}{" "}
              <Link href="/cgu" className="font-semibold text-[var(--accent-3)] underline underline-offset-2 hover:text-[#2c1717]">
                {text(siteText, "auth.register.termsLink")}
              </Link>{" "}
              {text(siteText, "auth.register.termsSuffix")}
            </span>
          </label>
          <button type="submit" className="inline-flex h-11 w-full items-center justify-center rounded-xl bg-[var(--accent-3)] px-5 text-sm font-semibold text-white hover:bg-[#2c1717]">
            {text(siteText, "auth.register.submit")}
          </button>
        </form>
        <p className="mt-4 text-sm text-[var(--muted)]">
          {text(siteText, "auth.register.already")}{" "}
          <Link href={`/connexion?next=${encodedNext}`} className="font-semibold text-[var(--accent-3)] hover:text-[#2c1717]">
            {text(siteText, "auth.register.loginLink")}
          </Link>
        </p>
      </section>
    </div>
  );
}