spazio-solazzo/lib/spazio_solazzo_web/live/user/profile_live.html.heex

<Layouts.app flash={@flash} current_user={@current_user}>
  <div class="mx-auto max-w-[800px] px-6 py-12">
    <div class="mb-10">
      <.back_to_link
        navigate={~p"/"}
        value="Back to Home"
      />
    </div>

    <div class="mb-10 text-center">
      <h1 class="text-4xl font-black text-base-content tracking-tight">
        User Profile
      </h1>
      <p class="text-neutral mt-2">
        Manage your account settings and personal information
      </p>
    </div>

    <div class="space-y-8">
      <%!-- Personal Information Section --%>
      <section class="bg-base-100 rounded-2xl p-8 border border-base-200 shadow-sm">
        <div class="flex items-center gap-3 mb-8">
          <.icon name="hero-user" class="text-primary w-6 h-6" />
          <h2 class="text-xl font-bold text-base-content">
            Personal Information
          </h2>
        </div>

        <.form
          for={@profile_form}
          id="profile-form"
          phx-change="validate_profile"
          phx-submit="save_profile"
        >
          <div class="grid gap-6">
            <div class="space-y-2">
              <.input
                field={@profile_form[:name]}
                type="text"
                label="Full Name *"
                required
                placeholder="Enter your full name"
              />
            </div>

            <div class="space-y-2">
              <label class="text-sm font-semibold text-base-content">
                Email Address
              </label>
              <div class="relative">
                <input
                  type="email"
                  readonly
                  value={@current_user.email}
                  title="Email cannot be changed"
                  class="w-full bg-base-200 border border-base-300 rounded-xl px-4 py-3 text-neutral cursor-not-allowed outline-none"
                />
                <.icon
                  name="hero-lock-closed"
                  class="absolute right-4 top-1/2 -translate-y-1/2 text-neutral w-5 h-5"
                />
              </div>
              <p class="text-xs text-neutral">
                Contact support to change your email address.
              </p>
            </div>

            <div class="space-y-2">
              <.input
                field={@profile_form[:phone_number]}
                type="tel"
                label="Phone Number"
                placeholder="+39 123456789"
              />
            </div>
          </div>

          <div class="mt-8 pt-8 border-t border-base-200 flex justify-end">
            <button
              type="submit"
              class="btn btn-secondary rounded-xl shadow-lg cursor-pointer"
            >
              Save Changes
            </button>
          </div>
        </.form>
      </section>

      <%!-- Account Management Section --%>
      <section class="bg-base-100 rounded-2xl p-8 border border-base-200 shadow-sm border-l-4 border-l-error/50">
        <div class="flex items-center gap-3 mb-8">
          <.icon name="hero-no-symbol" class="text-error w-6 h-6" />
          <h2 class="text-xl font-bold text-base-content">
            Account Management
          </h2>
        </div>

        <div class="bg-error/5 border border-error/20 rounded-xl p-5 mb-8">
          <h3 class="text-error font-bold text-sm mb-2 flex items-center gap-2">
            <.icon
              name="hero-exclamation-triangle"
              class="w-5 h-5 text-error"
            /> Danger Zone
          </h3>
          <p class="text-sm text-neutral leading-relaxed">
            Deleting your account is permanent. This action cannot be undone. All your current active bookings will be cancelled.
          </p>
        </div>

        <div class="space-y-6">
          <div class="flex items-start gap-3 p-4 bg-base-200 rounded-xl border border-base-300">
            <div class="flex h-6 items-center">
              <input
                type="checkbox"
                id="gdpr-consent"
                phx-click="toggle_delete_history"
                value="on"
                checked={@delete_history}
                class="checkbox checkbox-primary"
              />
            </div>
            <div class="text-sm leading-6">
              <label for="gdpr-consent" class="font-medium text-base-content">
                Delete all my booking history and personal data (GDPR compliant)
              </label>
              <p class="text-neutral">
                We will permanently remove all records related to your identity and activities from our servers.
              </p>
            </div>
          </div>

          <div class="flex justify-start">
            <button
              type="button"
              phx-click="show_delete_modal"
              class="btn btn-outline btn-error rounded-xl flex items-center gap-2 cursor-pointer"
            >
              <.icon name="hero-trash" class="w-5 h-5" /> Delete My Account
            </button>
          </div>
        </div>
      </section>
    </div>
  </div>

  <%!-- Delete Confirmation Modal --%>
  <%= if @show_delete_modal do %>
    <div
      class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm"
      phx-click="hide_delete_modal"
    >
      <div class="bg-base-100 rounded-2xl p-8 max-w-md mx-4 shadow-2xl border border-base-200">
        <div class="flex items-center gap-3 mb-4">
          <.icon name="hero-exclamation-triangle" class="text-error w-8 h-8" />
          <h3 class="text-xl font-bold text-base-content">
            Confirm Account Deletion
          </h3>
        </div>

        <p class="text-neutral mb-6">
          Are you absolutely sure you want to delete your account? This action cannot be undone.
          <%= if @delete_history do %>
            <strong class="text-error">
              All your booking history will be permanently deleted.
            </strong>
          <% else %>
            Your booking history will be preserved but anonymized.
          <% end %>
        </p>

        <div class="flex gap-4 justify-end">
          <button
            type="button"
            phx-click="hide_delete_modal"
            class="btn btn-ghost text-base-content rounded-xl cursor-pointer"
          >
            Cancel
          </button>
          <button
            type="button"
            phx-click="confirm_delete_account"
            class="btn btn-error rounded-xl cursor-pointer"
          >
            Yes, Delete My Account
          </button>
        </div>
      </div>
    </div>
  <% end %>
</Layouts.app>