---
import SettingsLayout from "@/layouts/SettingsLayout.astro";

const user = Astro.locals.user;

if (!user) {
  return Astro.redirect("/login");
}
---

<SettingsLayout title="Public profile">
  <div class="max-w-[640px]">
    <!-- Header -->
    <div class="mb-6">
      <h2 class="text-[28px] font-semibold text-foreground">Public profile</h2>
      <p class="text-sm text-muted-foreground mt-1">
        This information will be displayed publicly so be careful what you share.
      </p>
    </div>

    <form id="profile-form" class="space-y-0">
      <!-- Avatar -->
      <div class="flex flex-col sm:flex-row gap-6 py-5 border-t border-border">
        <label class="text-sm font-medium text-foreground sm:w-[180px] sm:pt-2 shrink-0">
          Profile picture
        </label>
        <div class="flex-1">
          <div class="flex items-start gap-4">
            <div id="avatar-preview" class="w-[128px] h-[128px] rounded-full overflow-hidden border border-border bg-secondary flex-shrink-0">
              {user.avatarUrl ? (
                <img src={user.avatarUrl} alt={user.username} class="w-full h-full object-cover" id="avatar-img" />
              ) : (
                <div class="w-full h-full flex items-center justify-center text-4xl font-semibold text-muted-foreground bg-secondary" id="avatar-letter">
                  {user.username[0].toUpperCase()}
                </div>
              )}
            </div>
            <div class="flex-1 space-y-2">
              <input
                type="url"
                name="avatarUrl"
                id="avatarUrl"
                placeholder="https://example.com/avatar.jpg"
                value={user.avatarUrl || ""}
                class="w-full rounded-md border border-border bg-background px-3 py-1.5 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:border-[#58a6ff] focus:ring-1 focus:ring-[#58a6ff]/30 transition-colors"
              />
              <p class="text-xs text-muted-foreground">
                URL to an image (PNG, JPG, GIF, SVG). Recommended 500x500px.
              </p>
            </div>
          </div>
        </div>
      </div>

      <!-- Name -->
      <div class="flex flex-col sm:flex-row gap-6 py-5 border-t border-border">
        <label for="displayName" class="text-sm font-medium text-foreground sm:w-[180px] sm:pt-2 shrink-0">
          Name
        </label>
        <div class="flex-1">
          <input
            type="text"
            name="displayName"
            id="displayName"
            value={user.displayName || ""}
            class="w-full rounded-md border border-border bg-background px-3 py-1.5 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:border-[#58a6ff] focus:ring-1 focus:ring-[#58a6ff]/30 transition-colors"
          />
          <p class="text-xs text-muted-foreground mt-2">
            Your name may appear around OpenCodeHub where you contribute or are mentioned.
          </p>
        </div>
      </div>

      <!-- Bio -->
      <div class="flex flex-col sm:flex-row gap-6 py-5 border-t border-border">
        <label for="bio" class="text-sm font-medium text-foreground sm:w-[180px] sm:pt-2 shrink-0">
          Bio
        </label>
        <div class="flex-1">
          <textarea
            id="bio"
            name="bio"
            rows="3"
            maxlength="160"
            class="w-full rounded-md border border-border bg-background px-3 py-1.5 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:border-[#58a6ff] focus:ring-1 focus:ring-[#58a6ff]/30 transition-colors resize-none"
          >{user.bio || ""}</textarea>
          <p class="text-xs text-muted-foreground mt-2">
            You can @mention other users or organizations to link to them.
            <span id="bio-count" class="float-right">{160 - (user.bio?.length || 0)}/160</span>
          </p>
        </div>
      </div>

      <!-- Company -->
      <div class="flex flex-col sm:flex-row gap-6 py-5 border-t border-border">
        <label for="company" class="text-sm font-medium text-foreground sm:w-[180px] sm:pt-2 shrink-0">
          Company
        </label>
        <div class="flex-1">
          <input
            type="text"
            name="company"
            id="company"
            value={user.company || ""}
            class="w-full rounded-md border border-border bg-background px-3 py-1.5 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:border-[#58a6ff] focus:ring-1 focus:ring-[#58a6ff]/30 transition-colors"
          />
        </div>
      </div>

      <!-- Location -->
      <div class="flex flex-col sm:flex-row gap-6 py-5 border-t border-border">
        <label for="location" class="text-sm font-medium text-foreground sm:w-[180px] sm:pt-2 shrink-0">
          Location
        </label>
        <div class="flex-1">
          <input
            type="text"
            name="location"
            id="location"
            value={user.location || ""}
            placeholder="San Francisco, CA"
            class="w-full rounded-md border border-border bg-background px-3 py-1.5 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:border-[#58a6ff] focus:ring-1 focus:ring-[#58a6ff]/30 transition-colors"
          />
        </div>
      </div>

      <!-- Website -->
      <div class="flex flex-col sm:flex-row gap-6 py-5 border-t border-border">
        <label for="website" class="text-sm font-medium text-foreground sm:w-[180px] sm:pt-2 shrink-0">
          Website
        </label>
        <div class="flex-1">
          <input
            type="url"
            name="website"
            id="website"
            placeholder="https://example.com"
            value={user.website || ""}
            class="w-full rounded-md border border-border bg-background px-3 py-1.5 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:border-[#58a6ff] focus:ring-1 focus:ring-[#58a6ff]/30 transition-colors"
          />
        </div>
      </div>

      <!-- Email (read-only) -->
      <div class="flex flex-col sm:flex-row gap-6 py-5 border-t border-border">
        <label class="text-sm font-medium text-foreground sm:w-[180px] sm:pt-2 shrink-0">
          Email
        </label>
        <div class="flex-1">
          <input
            type="email"
            value={user.email || ""}
            disabled
            class="w-full rounded-md border border-border bg-secondary px-3 py-1.5 text-sm text-muted-foreground cursor-not-allowed"
          />
          <p class="text-xs text-muted-foreground mt-2">
            Your email is used for notifications and sign-in. <a href="/settings/account" class="text-[#58a6ff] hover:underline">Change in account settings</a>.
          </p>
        </div>
      </div>

      <!-- Submit -->
      <div class="flex justify-end py-6 border-t border-border mt-2">
        <div class="flex items-center gap-3">
          <span id="save-status" class="text-sm hidden">
            <span class="text-green-500">Profile updated successfully.</span>
          </span>
          <button
            type="submit"
            class="px-4 py-1.5 rounded-md bg-[#238636] border border-[#2ea043] text-sm font-medium text-white hover:bg-[#2ea043] transition-colors"
          >
            Update profile
          </button>
        </div>
      </div>
    </form>
  </div>
</SettingsLayout>

<script>
  const form = document.getElementById("profile-form") as HTMLFormElement;
  const avatarInput = document.getElementById("avatarUrl") as HTMLInputElement;
  const avatarPreview = document.getElementById("avatar-preview");
  const bioTextarea = document.getElementById("bio") as HTMLTextAreaElement;
  const bioCount = document.getElementById("bio-count");
  const saveStatus = document.getElementById("save-status");

  // Live avatar preview
  let debounceTimer: any;
  avatarInput?.addEventListener("input", () => {
    clearTimeout(debounceTimer);
    debounceTimer = setTimeout(() => {
      const url = avatarInput.value.trim();
      if (url && avatarPreview) {
        const img = new Image();
        img.onload = () => {
          avatarPreview.innerHTML = `<img src="${url}" alt="Avatar" class="w-full h-full object-cover" />`;
        };
        img.onerror = () => {};
        img.src = url;
      }
    }, 500);
  });

  // Bio character count
  bioTextarea?.addEventListener("input", () => {
    if (bioCount) {
      const remaining = 160 - bioTextarea.value.length;
      bioCount.textContent = `${remaining}/160`;
      bioCount.className = remaining < 0 ? "float-right text-red-500" : "float-right";
    }
  });

  // Form submission
  form?.addEventListener("submit", async (e) => {
    e.preventDefault();
    const formData = new FormData(form);
    const data = Object.fromEntries(formData);

    const submitBtn = form.querySelector('button[type="submit"]') as HTMLButtonElement;
    const originalText = submitBtn.textContent;
    submitBtn.disabled = true;
    submitBtn.textContent = "Updating...";

    try {
      const response = await fetch("/api/auth/me", {
        method: "PATCH",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(data),
      });

      if (response.ok) {
        submitBtn.textContent = "Updated!";
        if (saveStatus) {
          saveStatus.classList.remove("hidden");
        }
        setTimeout(() => {
          submitBtn.textContent = originalText;
          submitBtn.disabled = false;
          if (saveStatus) {
            saveStatus.classList.add("hidden");
          }
        }, 3000);
      } else {
        const error = await response.json();
        alert(error.message || "Failed to update profile");
        submitBtn.textContent = originalText;
        submitBtn.disabled = false;
      }
    } catch (error) {
      console.error("Error updating profile:", error);
      alert("An error occurred while updating profile");
      submitBtn.textContent = originalText;
      submitBtn.disabled = false;
    }
  });
</script>