{% extends layout | default('lila/base.html') %}
{% block title %}{{title}}{% endblock %}

{% block content %}
<div
  class="min-h-screen bg-bg-body dark:bg-bg-body-dark text-slate-800 dark:text-slate-200 transition-colors duration-300 font-sans flex flex-col">
  <!-- Header -->
  <header
    class="bg-surface dark:bg-surface-dark border-b border-slate-200 dark:border-slate-800 shadow-sm py-4 sticky top-0 z-50">
    <div class="max-w-7xl mx-auto px-4 flex justify-between items-center">
      <h3>
        <a href="/dashboard"
          class="text-2xl font-black bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">Lila</a>
      </h3>
      <div class="flex items-center gap-2">
        <span class="text-sm font-semibold px-3 py-1 bg-primary/10 text-primary rounded-full">{{user.name}}</span>
      </div>
    </div>
  </header>

  <!-- Main Container -->
  <div class="max-w-7xl w-full mx-auto px-4 py-8 flex-1 grid grid-cols-1 md:grid-cols-4 gap-8">
    <!-- Sidebar Menu -->
    <aside class="md:col-span-1 flex flex-col gap-2">
      <div class="card p-4 space-y-1">
        <h4 class="text-xs font-black uppercase text-slate-400 px-3 mb-2 tracking-wider">Menu</h4>

        <a href="/dashboard"
          class="flex items-center gap-2 px-3 py-2.5 rounded-xl text-sm font-semibold hover:bg-slate-50 dark:hover:bg-slate-800 text-slate-600 dark:text-slate-400 hover:text-primary dark:hover:text-primary transition-all">
          <span>🏠</span> {{translate['home']}}
        </a>
        <a href="/profile"
          class="flex items-center gap-2 px-3 py-2.5 rounded-xl text-sm font-bold bg-primary text-white shadow-material transition-all">
          <span>👤</span> {{user.name}}
        </a>
        <a href="?lang=es"
          class="flex items-center gap-2 px-3 py-2.5 rounded-xl text-sm font-semibold hover:bg-slate-50 dark:hover:bg-slate-800 text-slate-600 dark:text-slate-400 transition-all">
          <span>🇪🇸</span> Español (Esp)
        </a>
        <a href="?lang=en"
          class="flex items-center gap-2 px-3 py-2.5 rounded-xl text-sm font-semibold hover:bg-slate-50 dark:hover:bg-slate-800 text-slate-600 dark:text-slate-400 transition-all">
          <span>🇺🇸</span> English (US)
        </a>

        <hr class="border-slate-200 dark:border-slate-800 my-2" />

        <a href="/logout" class="flex btn-secondary transition-all">
          {{translate['logout']}}
        </a>
      </div>
    </aside>

    <!-- Main Content -->
    <main class="md:col-span-3 flex flex-col gap-6">
      <article class="card p-8 flex flex-col gap-6">
        <div>
          <h1 class="text-3xl font-black text-slate-850 dark:text-slate-100 tracking-tight">{{translate['Profile']}}
          </h1>
          <p class="text-xs text-slate-400 mt-1">Manage your account details and security settings.</p>
        </div>

        <div
          class="grid grid-cols-1 sm:grid-cols-2 gap-4 p-4 rounded-xl bg-slate-50 dark:bg-slate-900 border border-slate-200 dark:border-slate-800">
          <p class="text-sm"><strong class="font-bold text-slate-500 mr-1">{{translate['Name']}}:</strong> {{user.name}}
          </p>
          <p class="text-sm"><strong class="font-bold text-slate-500 mr-1">Email:</strong> {{user.email}}</p>
        </div>

        <form id="update-profile-form" class="space-y-6">
          <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
            <div>
              <label for="name"
                class="block text-sm font-bold text-slate-600 dark:text-slate-400 mb-2">{{translate['name']}}</label>
              <input type="text" id="name" name="name" class="input-lila" required value="{{user.name}}" />
            </div>
            <div>
              <label for="email" class="block text-sm font-bold text-slate-600 dark:text-slate-400 mb-2">Email</label>
              <input type="email" id="email" name="email" class="input-lila opacity-60 cursor-not-allowed" required
                value="{{user.email}}" disabled />
            </div>
          </div>

          <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
            <div>
              <label for="password"
                class="block text-sm font-bold text-slate-600 dark:text-slate-400 mb-2">{{translate['password']}}
                ({{translate['current']}})</label>
              <input type="password" id="password" name="password" class="input-lila" required />
            </div>
            <div>
              <label for="password_2"
                class="block text-sm font-bold text-slate-600 dark:text-slate-400 mb-2">{{translate['new_password']}}
                ({{translate['optional'] | default('Optional')}})</label>
              <input type="password" id="password_2" name="password_2" class="input-lila" />
            </div>
          </div>

          <div class="flex items-center justify-between gap-4 pt-2">
            <p id="message" class="text-sm font-semibold"></p>
            <button type="submit" class="btn-primary text-xs">
              {{translate['Save']}}
            </button>
          </div>
        </form>

        <hr class="border-slate-250 dark:border-slate-800 my-4" />


        <div class="border border-gray-200 dark:border-gray-950/40 rounded-2xl p-6 bg-gray-50/20 dark:bg-gray-950/10">
          <h4 class="text-lg font-black text-gray-800 mb-2">{{translate['danger_zone']}}</h4>
          <p class="text-xs text-slate-500 mb-4">{{translate['once_you_delete_your_account_there_is_no_going_back']}}
          </p>

          <form id="delete-account-form">
            <button type="button" class="btn-secondary" id="show-delete-password">
              {{translate['Delete Account']}}
            </button>

            <div id="delete-password-div" style="display: none" class="mt-4 space-y-4">
              <div class="max-w-sm">
                <label for="delete-password"
                  class="block text-sm font-bold text-slate-600 dark:text-slate-400 mb-2">{{translate['password']}}</label>
                <input type="password" id="delete-password" name="password" class="input-lila" required />
              </div>
              <div class="flex items-center gap-4">
                <button type="submit" class="btn-error  text-xs">
                  {{translate['Delete Account']}}
                </button>
                <p id="delete-message" class="text-sm font-semibold"></p>
              </div>
            </div>
          </form>
        </div>
      </article>
    </main>
  </div>
</div>

<script>
  document
    .getElementById("update-profile-form")
    .addEventListener("submit", async function (event) {
      event.preventDefault();
      const form = event.target;
      const formData = new FormData(form);
      const message = document.getElementById("message");
      try {
        const response = await fetch("/profile", {
          method: "POST",
          body: JSON.stringify(Object.fromEntries(formData)),
          headers: { "Content-Type": "application/json" },
        });
        const result = await response.json();
        if (response.ok && result.success) {
          message.className = "text-green-500 font-semibold text-sm";
          message.textContent = result.msg;
          document.getElementById("password").value = "";
          document.getElementById("password_2").value = "";
        } else {
          message.className = "text-red-500 font-semibold text-sm";
          message.textContent = result.msg || "An error occurred.";
        }
      } catch (error) {
        message.className = "text-red-500 font-semibold text-sm";
        message.textContent = "Failed to connect to the server.";
      }
    });

  document
    .getElementById("delete-account-form")
    .addEventListener("submit", async function (event) {
      event.preventDefault();
      if (
        !confirm(
          '{{translate["Are your sure you want to delete your account? This action cannot be undone."]}}'
        )
      ) {
        return;
      }
      const password = document.getElementById("delete-password").value;
      const message = document.getElementById("delete-message");
      if (!password) {
        message.className = "text-red-500 font-semibold text-sm";
        message.textContent =
          '{{translate["password"]}} {{translate["is required"]}}';
        return;
      }
      try {
        const response = await fetch("/delete-account", {
          method: "POST",
          body: JSON.stringify({ password }),
          headers: { "Content-Type": "application/json" },
        });
        const result = await response.json();
        if (response.ok && result.success) {
          window.location.replace("/register");
        } else {
          message.className = "text-red-500 font-semibold text-sm";
          message.textContent = result.msg || "Failed to delete account.";
        }
      } catch (error) {
        message.className = "text-red-500 font-semibold text-sm";
        message.textContent = "Failed to connect to the server.";
      }
    });

  document.getElementById('show-delete-password').addEventListener('click', function (event) {
    event.preventDefault();
    const div = document.getElementById('delete-password-div');
    if (div.style.display === 'none' || div.style.display === '') {
      div.style.display = 'block';
    } else {
      div.style.display = 'none';
    }
  });
</script>
{% endblock %}