<Layouts.app flash={@flash} current_scope={@current_scope}>
  <div class="mx-auto max-w-md space-y-5">
    <div class="text-center">
      <.header>
        {gettext("Continue with Google")}
        <:subtitle>
          {gettext("Google verified your identity. Finish this one-time step to continue.")}
        </:subtitle>
      </.header>
    </div>

    <div class="rounded-2xl border border-base-300 bg-base-100 p-4 shadow-sm">
      <div class="flex items-center gap-3">
        <span
          class="flex size-10 items-center justify-center rounded-full bg-base-200"
          aria-hidden="true"
        >
          <span class="text-lg font-bold text-brand">G</span>
        </span>
        <div class="min-w-0">
          <p class="truncate font-semibold">{@pending.display_name}</p>
          <p class="truncate text-sm text-base-content/65">{@pending.email}</p>
        </div>
        <span class="badge badge-success badge-outline ml-auto shrink-0">
          {gettext("Verified")}
        </span>
      </div>
    </div>

    <%= if @existing_account do %>
      <section class="space-y-4 rounded-2xl bg-base-200 p-5">
        <div>
          <h2 class="font-semibold">{gettext("This email already has an account")}</h2>
          <p class="mt-2 text-sm text-base-content/70">
            {gettext(
              "Confirm access once so nobody can attach Google to your account using only a matching email address."
            )}
          </p>
        </div>

        <.form for={%{}} as={:google_verification} action={~p"/auth/google/verify-existing"}>
          <.button class="btn btn-primary w-full" phx-disable-with={gettext("Sending...")}>
            {gettext("Email me a verification link")} <span aria-hidden="true">→</span>
          </.button>
        </.form>

        <.link navigate={~p"/users/log-in"} class="btn btn-ghost w-full">
          {gettext("Use my password instead")}
        </.link>

        <p class="text-xs text-base-content/60">
          {gettext("After this confirmation, future Google sign-ins will take one click.")}
        </p>
      </section>
    <% else %>
      <section class="space-y-4 rounded-2xl bg-base-200 p-5">
        <div>
          <h2 class="font-semibold">{gettext("Create your Who Need Help account")}</h2>
          <p class="mt-2 text-sm text-base-content/70">
            {gettext("No password is required. Google will be connected as your sign-in method.")}
          </p>
        </div>

        <.form
          for={%{}}
          as={:google_registration}
          action={~p"/auth/google/complete-registration"}
          class="space-y-3"
        >
          <input type="hidden" name="google_registration[locale]" value={@pending.locale} />
          <.input
            type="checkbox"
            id="google_completion_terms"
            name="google_registration[terms_accepted]"
            value="false"
            label={gettext("I am 18 or older and accept the Terms and Safety Rules")}
            required
          />
          <p class="text-xs text-base-content/60">
            {gettext("Read the")}
            <.link href={~p"/terms"} class="link font-semibold">{gettext("Terms")}</.link>,
            <.link href={~p"/privacy"} class="link font-semibold">{gettext("Privacy Policy")}</.link>
            {gettext("and")}
            <.link href={~p"/safety"} class="link font-semibold">{gettext("Safety Rules")}</.link>
            {gettext("before confirming.")}
          </p>
          <.button
            class="btn btn-primary w-full"
            phx-disable-with={gettext("Creating account...")}
          >
            {gettext("Create account and continue")} <span aria-hidden="true">→</span>
          </.button>
        </.form>
      </section>
    <% end %>

    <div class="text-center">
      <.link href={~p"/users/log-in"} class="link text-sm">
        {gettext("Cancel and use another sign-in method")}
      </.link>
    </div>
  </div>
</Layouts.app>
