---
import { getDatabase } from "@/db";
import { gpgKeys } from "@/db/schema";
import SettingsLayout from "@/layouts/SettingsLayout.astro";
import { desc, eq } from "drizzle-orm";

const user = Astro.locals.user;

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

const db = getDatabase();
const keys = await db.query.gpgKeys.findMany({
  where: eq(gpgKeys.userId, user.id),
  orderBy: [desc(gpgKeys.createdAt)],
});
---

<SettingsLayout title="GPG Keys">
  <div class="space-y-6">
    <div>
      <h3 class="text-lg font-medium leading-6 text-gray-900">GPG Keys</h3>
      <p class="mt-1 text-sm text-muted-foreground">
        This is a list of GPG keys associated with your account. Keys are used to verify commit signatures.
      </p>
    </div>

    <div class="border-t border-gray-200 pt-6">
      <div class="flex justify-between items-center mb-4">
        <h4 class="text-md font-medium text-gray-900">Your GPG Keys</h4>
        <button
          type="button"
          id="add-key-btn"
          class="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-foreground bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
        >
          New GPG Key
        </button>
      </div>

      {
        keys.length > 0 ? (
          <ul class="divide-y divide-gray-200">
            {keys.map((key) => (
              <li class="py-4 flex items-center justify-between">
                <div>
                  <p class="text-sm font-medium text-gray-900">{key.name}</p>
                  <p class="text-sm text-muted-foreground font-mono">
                    Key ID: {key.keyId}
                  </p>
                  <p class="text-xs text-muted-foreground mt-1">
                    Added on {new Date(key.createdAt).toLocaleDateString()}
                  </p>
                </div>
                <button
                  type="button"
                  class="delete-key-btn text-red-600 hover:text-red-900 text-sm font-medium"
                  data-id={key.id}
                >
                  Delete
                </button>
              </li>
            ))}
          </ul>
        ) : (
          <p class="text-sm text-muted-foreground italic">No GPG keys added yet.</p>
        )
      }
    </div>

    <!-- Add Key Modal -->
    <div
      id="add-key-modal"
      class="hidden fixed z-10 inset-0 overflow-y-auto"
      aria-labelledby="modal-title"
      role="dialog"
      aria-modal="true"
    >
      <div
        class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"
      >
        <div
          class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity"
          aria-hidden="true"
        >
        </div>
        <span
          class="hidden sm:inline-block sm:align-middle sm:h-screen"
          aria-hidden="true">&#8203;</span
        >
        <div
          class="inline-block align-bottom bg-white rounded-lg px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full sm:p-6"
        >
          <form id="gpg-key-form">
            <div>
              <h3
                class="text-lg leading-6 font-medium text-gray-900"
                id="modal-title"
              >
                Add New GPG Key
              </h3>
              <div class="mt-4 space-y-4">
                <div>
                  <label
                    for="name"
                    class="block text-sm font-medium text-gray-700">Name</label
                  >
                  <input
                    type="text"
                    name="name"
                    id="name"
                    required
                    class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
                    placeholder="e.g. My GPG Key"
                  />
                </div>
                <div>
                  <label
                    for="key"
                    class="block text-sm font-medium text-gray-700">GPG Public Key</label
                  >
                  <textarea
                    name="key"
                    id="key"
                    rows="8"
                    required
                    class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm font-mono text-xs"
                    placeholder="-----BEGIN PGP PUBLIC KEY BLOCK-----..."></textarea>
                </div>
              </div>
            </div>
            <div
              class="mt-5 sm:mt-6 sm:grid sm:grid-cols-2 sm:gap-3 sm:grid-flow-row-dense"
            >
              <button
                type="submit"
                class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-indigo-600 text-base font-medium text-foreground hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:col-start-2 sm:text-sm"
              >
                Add Key
              </button>
              <button
                type="button"
                id="cancel-add-key-btn"
                class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:col-start-1 sm:text-sm"
              >
                Cancel
              </button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</SettingsLayout>

<script>
  const addBtn = document.getElementById("add-key-btn");
  const modal = document.getElementById("add-key-modal");
  const cancelBtn = document.getElementById("cancel-add-key-btn");
  const form = document.getElementById("gpg-key-form") as HTMLFormElement;
  const deleteBtns = document.querySelectorAll(".delete-key-btn");

  addBtn?.addEventListener("click", () => {
    modal?.classList.remove("hidden");
  });

  cancelBtn?.addEventListener("click", () => {
    modal?.classList.add("hidden");
    form.reset();
  });

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

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

      if (response.ok) {
        window.location.reload();
      } else {
        const error = await response.json();
        alert(error.message || "Failed to add GPG key");
      }
    } catch (error) {
      console.error("Error adding GPG key:", error);
      alert("An error occurred");
    }
  });

  deleteBtns.forEach((btn) => {
    btn.addEventListener("click", async () => {
      if (confirm("Are you sure you want to delete this GPG key?")) {
        const id = btn.getAttribute("data-id");
        try {
          const response = await fetch(`/api/user/gpg-keys/${id}`, {
            method: "DELETE",
          });

          if (response.ok) {
            window.location.reload();
          } else {
            alert("Failed to delete GPG key");
          }
        } catch (error) {
          console.error("Error deleting GPG key:", error);
        }
      }
    });
  });
</script>