<Layouts.app flash={@flash} current_user={@current_user}>
  <div class="min-h-screen bg-gradient-to-br from-base-100 via-secondary/5 to-base-200 flex items-center justify-center px-4">
    <div class="w-full max-w-md">
      <div class="bg-base-100 rounded-2xl shadow-2xl border border-base-200 overflow-hidden">
        <div class="p-8">
          <%= if @existing_user? do %>
            <%!-- Existing User Sign In --%>
            <div class="text-center mb-6">
              <div class="inline-flex items-center justify-center size-12 bg-success/10 rounded-full mb-4">
                <.icon name="hero-check-circle" class="size-6 text-success" />
              </div>
              <h2 class="text-2xl font-bold text-base-content mb-2">
                Welcome Back!
              </h2>
              <p class="text-neutral text-sm">
                We found your account. Click below to continue.
              </p>
            </div>

            <.form :let={f} for={@form} id="sign-in-form" phx-submit="sign_in" class="space-y-5">
              <div class="flex items-center gap-3 p-4 bg-secondary/5 rounded-xl border border-base-200">
                <div class="flex-shrink-0">
                  <.icon name="hero-envelope" class="size-5 text-secondary" />
                </div>
                <span class="text-sm font-medium text-base-content truncate">
                  {@email}
                </span>
              </div>

              <.input
                field={f[:remember_me]}
                type="checkbox"
                label="Remember me on this device for 30 days"
                class="checkbox-primary"
              />

              <.button
                type="submit"
                id="sign-in-button"
                class="btn btn-secondary w-full rounded-xl text-white"
              >
                Sign In to Your Account
              </.button>
            </.form>
          <% else %>
            <%!-- New User Registration --%>
            <div class="text-center mb-6">
              <div class="inline-flex items-center justify-center size-12 bg-primary/10 rounded-full mb-4">
                <.icon name="hero-user-plus" class="size-6 text-primary" />
              </div>
              <h2 class="text-2xl font-bold text-base-content mb-2">
                Complete Your Profile
              </h2>
              <p class="text-neutral text-sm">
                Just a few details to get you started
              </p>
            </div>

            <.form
              :let={f}
              for={@form}
              id="registration-form"
              phx-submit="register"
              class="space-y-5"
            >
              <div class="flex items-center gap-3 p-4 bg-secondary/5 rounded-xl border border-base-200">
                <div class="flex-shrink-0">
                  <.icon name="hero-envelope" class="size-5 text-secondary" />
                </div>
                <span class="text-sm font-medium text-base-content truncate">
                  {@email}
                </span>
              </div>

              <.input
                field={f[:name]}
                type="text"
                label="Full Name *"
                placeholder="John Doe"
                required
              />

              <div>
                <.input
                  field={f[:phone_number]}
                  type="tel"
                  label="Phone Number (Optional)"
                  placeholder="+39 123456789"
                />
                <p class="mt-2 text-xs text-neutral">
                  Your number will only be used to contact you personally about booking issues, never for marketing.
                </p>
              </div>

              <.input
                field={f[:remember_me]}
                type="checkbox"
                label="Remember me on this device for 30 days"
                class="checkbox-primary"
              />

              <.button
                type="submit"
                id="register-button"
                class="btn btn-secondary w-full rounded-xl text-white"
              >
                Create Account
              </.button>
            </.form>
          <% end %>
        </div>

        <div class="px-8 py-4 bg-base-200 border-t border-base-300">
          <p class="text-xs text-center text-neutral">
            By continuing, you agree to our Terms of Service and Privacy Policy
          </p>
        </div>
      </div>

      <div class="mt-6 text-center">
        <.link
          navigate="/"
          class="inline-flex items-center gap-2 text-sm text-neutral hover:text-secondary transition-colors"
        >
          <.icon name="hero-arrow-left" class="size-4" />
          <span>Back to home</span>
        </.link>
      </div>
    </div>
  </div>
</Layouts.app>
