import type { NostrEvent } from "./type-definitions.ts";

export async function render(container: HTMLElement): Promise<void> {
  container.innerHTML = `
    <div class="card bg-base-100 shadow-xl max-w-2xl mx-auto">
      <div class="card-body">
        <h2 class="card-title">📝 Publish a Note</h2>

        <div class="form-control">
          <label class="label">
            <span class="label-text">What's on your mind?</span>
            <span class="label-text-alt" id="charCount">0/280</span>
          </label>
          <textarea 
            class="textarea textarea-bordered h-32" 
            id="noteContent" 
            placeholder="Share your thoughts with your CCN..."
            maxlength="280">
          </textarea>
        </div>

        <div class="card-actions justify-between items-center">
          <div id="status" class="flex-1"></div>
          <button class="btn btn-primary" id="publishBtn" disabled>
            Publish Note
          </button>
        </div>
      </div>
    </div>
  `;

  const textarea = container.querySelector<HTMLTextAreaElement>("#noteContent")!;
  const publishBtn = container.querySelector<HTMLButtonElement>("#publishBtn")!;
  const status = container.querySelector<HTMLDivElement>("#status")!;
  const charCount = container.querySelector<HTMLSpanElement>("#charCount")!;

  textarea.oninput = (): void => {
    const length: number = textarea.value.length;
    charCount.textContent = `${length}/280`;
    publishBtn.disabled = length === 0 || length > 280;
  };

  publishBtn.onclick = async (e): Promise<void> => {
    const content: string = textarea.value.trim();
    if (!content) return;

    publishBtn.disabled = true;
    publishBtn.textContent = "Publishing...";
    status.innerHTML = '<span class="loading loading-spinner loading-sm"></span>';

    try {
      const unsignedEvent: NostrEvent = {
        kind: 1, // Text note
        content: content,
        tags: [["client", "arxlet-publisher"]],
        created_at: Math.floor(Date.now() / 1000),
        pubkey: await window.eve.publicKey,
      };

      const signedEvent: NostrEvent = await window.eve.signEvent(unsignedEvent);

      await window.eve.publish(signedEvent);

      status.innerHTML = `
        <div class="alert alert-success">
          <span>✅ Note published successfully!</span>
        </div>
      `;

      textarea.value = "";
      textarea.oninput?.(e);
    } catch (error: unknown) {
      const errorMessage = error instanceof Error ? error.message : "Unknown error";
      console.error("Publishing failed:", error);
      status.innerHTML = `
        <div class="alert alert-error">
          <span>❌ Failed to publish: ${errorMessage}</span>
        </div>
      `;
    } finally {
      publishBtn.disabled = false;
      publishBtn.textContent = "Publish Note";
    }
  };
}