OpenFrontIO/src/client/components/clan/ClanMyRequestsView.ts

import { html, LitElement } from "lit";
import { customElement, property, state } from "lit/decorators.js";
import { invalidateUserMe } from "../../Api";
import { withdrawClanRequest } from "../../ClanApi";
import { translateText } from "../../Utils";
import { modalHeader } from "../ui/ModalHeader";
import { formatClanDate, modalContainerClass, showToast } from "./ClanShared";

@customElement("clan-my-requests-view")
export class ClanMyRequestsView extends LitElement {
  createRenderRoot() {
    return this;
  }

  @property({ type: Array }) myPendingRequests: {
    tag: string;
    name: string;
    createdAt: string;
  }[] = [];

  @state() private actionPending = false;

  async handleWithdrawRequest(tag: string) {
    if (this.actionPending) return;
    this.actionPending = true;
    try {
      const result = await withdrawClanRequest(tag);
      if (result !== true) {
        showToast(translateText(result.error), "red");
        return;
      }
      invalidateUserMe();
      showToast(translateText("clan_modal.join_request_cancelled"), "green");
      this.dispatchEvent(
        new CustomEvent("request-withdrawn", {
          detail: { tag },
          bubbles: true,
          composed: true,
        }),
      );
    } finally {
      this.actionPending = false;
    }
  }

  render() {
    return html`
      <div class="${modalContainerClass}">
        ${modalHeader({
          title: translateText("clan_modal.pending_applications"),
          onBack: () =>
            this.dispatchEvent(
              new CustomEvent("navigate-back", {
                bubbles: true,
                composed: true,
              }),
            ),
          ariaLabel: translateText("common.back"),
        })}
        <div class="flex-1 overflow-y-auto custom-scrollbar mr-1 p-4 lg:p-6">
          ${this.myPendingRequests.length === 0
            ? html`<p class="text-white/40 text-sm text-center py-8">
                ${translateText("clan_modal.no_pending_applications")}
              </p>`
            : html`
                <div class="space-y-3">
                  ${this.myPendingRequests.map(
                    (req) => html`
                      <div
                        class="flex items-center gap-3 bg-white/5 rounded-xl border border-white/10 p-4"
                      >
                        <div
                          class="w-10 h-10 rounded-xl bg-amber-500/10 flex items-center justify-center border border-amber-500/20 shrink-0"
                        >
                          <span class="text-amber-400 font-bold text-xs"
                            >${req.tag}</span
                          >
                        </div>
                        <div class="flex-1 min-w-0">
                          <span
                            class="text-white font-bold text-sm truncate block"
                            >${req.name}</span
                          >
                          <span class="text-white/30 text-xs">
                            ${translateText("clan_modal.applied")}
                            ${formatClanDate(req.createdAt)}
                          </span>
                        </div>
                        <button
                          @click=${() => this.handleWithdrawRequest(req.tag)}
                          ?disabled=${this.actionPending}
                          class="text-[10px] font-bold uppercase tracking-wider px-3 py-1 rounded-full bg-red-500/15 text-red-400 border border-red-500/20 hover:bg-red-500/25 transition-all cursor-pointer disabled:opacity-50 disabled:pointer-events-none"
                        >
                          ${translateText("clan_modal.cancel_request")}
                        </button>
                      </div>
                    `,
                  )}
                </div>
              `}
        </div>
      </div>
    `;
  }
}