import Link from "next/link";
import { redirect } from "next/navigation";
import { StatusToastBridge } from "@/components/feedback/status-toast-bridge";
import { AuthPanel } from "@/components/auth/auth-panel";
import { signUpAction } from "@/app/auth-actions";
import { Alert, AlertDescription } from "@/components/ui/alert";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { buildPathWithQuery, sanitizeNextPath } from "@/lib/auth/navigation";
import { getAuthState } from "@/lib/auth/session";
import { getAuthStatusToast } from "@/lib/feedback/status-messages";
import { getParamValue, type PageSearchParams } from "@/lib/search-params";

export const dynamic = "force-dynamic";

type SignUpPageProps = {
  searchParams: Promise<PageSearchParams>;
};

export default async function SignUpPage({ searchParams }: SignUpPageProps) {
  const authState = await getAuthState();
  const resolvedSearchParams = await searchParams;
  const next = sanitizeNextPath(getParamValue(resolvedSearchParams, "next"));

  if (authState.isAuthenticated) {
    redirect(next);
  }

  const statusToast = getAuthStatusToast(
    getParamValue(resolvedSearchParams, "error"),
    getParamValue(resolvedSearchParams, "status"),
  );
  const loginHref = buildPathWithQuery("/login", { next });

  return (
    <AuthPanel
      eyebrow="Account aanmaken"
      title="Maak je eerste account aan"
      description="Release 1 gebruikt e-mail en wachtwoord als eenvoudige basis. Na registratie bevestig je eerst je e-mailadres."
      footer={
        <p>
          Heb je al een account?{" "}
          <Link href={loginHref} className="font-semibold text-primary underline-offset-4 hover:underline">
            Log dan in
          </Link>
        </p>
      }
    >
      <StatusToastBridge toast={statusToast} paramKeys={["error", "status"]} />

      {!authState.isConfigured ? (
        <Alert variant="info">
          <AlertDescription className="leading-7 text-current">
            Voeg eerst je Supabase-gegevens toe in `.env.local` op basis van `.env.example`.
          </AlertDescription>
        </Alert>
      ) : (
        <form action={signUpAction} className="space-y-5">
          <input type="hidden" name="next" value={next} />

          <div className="space-y-2">
            <Label htmlFor="email" className="text-foreground">
              E-mailadres
            </Label>
            <Input
              id="email"
              className="h-12 rounded-[1.25rem] bg-background/80 px-4 text-base md:text-base"
              type="email"
              name="email"
              autoComplete="email"
              required
            />
          </div>

          <div className="space-y-2">
            <Label htmlFor="password" className="text-foreground">
              Wachtwoord
            </Label>
            <Input
              id="password"
              className="h-12 rounded-[1.25rem] bg-background/80 px-4 text-base md:text-base"
              type="password"
              name="password"
              autoComplete="new-password"
              minLength={8}
              required
            />
          </div>

          <Button
            type="submit"
            size="lg"
            className="w-full rounded-[1.25rem]"
          >
            Account aanmaken
          </Button>
        </form>
      )}
    </AuthPanel>
  );
}
