arbret/frontend/app/invites/page.tsx

"use client";

import { useState } from "react";
import { invitesApi } from "../api";
import { PageLayout } from "../components/PageLayout";
import { StatusBadge } from "../components/StatusBadge";
import { EmptyState } from "../components/EmptyState";
import { useRequireAuth } from "../hooks/useRequireAuth";
import { useAsyncData } from "../hooks/useAsyncData";
import { components } from "../generated/api";
import constants from "../../../shared/constants.json";
import { Permission } from "../auth-context";
import { cardStyles, typographyStyles, buttonStyles } from "../styles/shared";
import { useTranslation } from "../hooks/useTranslation";

// Use generated type from OpenAPI schema
type Invite = components["schemas"]["UserInviteResponse"];

export default function InvitesPage() {
  const t = useTranslation("invites");
  const { user, isLoading, isAuthorized } = useRequireAuth({
    requiredPermission: Permission.VIEW_OWN_INVITES,
    fallbackRedirect: "/admin/trades",
  });

  const { data: invites = [], isLoading: isLoadingInvites } = useAsyncData(
    () => invitesApi.getInvites(),
    {
      enabled: !!user && isAuthorized,
      initialData: [],
    }
  );

  const [copiedId, setCopiedId] = useState<number | null>(null);

  const getInviteUrl = (identifier: string) => {
    if (typeof window !== "undefined") {
      return `${window.location.origin}/signup/${identifier}`;
    }
    return `/signup/${identifier}`;
  };

  const copyToClipboard = async (invite: Invite) => {
    const url = getInviteUrl(invite.identifier);
    try {
      await navigator.clipboard.writeText(url);
      setCopiedId(invite.id);
      setTimeout(() => setCopiedId(null), 2000);
    } catch (err) {
      console.error("Failed to copy:", err);
    }
  };

  const { READY, SPENT, REVOKED } = constants.inviteStatuses;
  const readyInvites = (invites ?? []).filter((i) => i.status === READY);
  const spentInvites = (invites ?? []).filter((i) => i.status === SPENT);
  const revokedInvites = (invites ?? []).filter((i) => i.status === REVOKED);

  return (
    <PageLayout
      currentPage="invites"
      isLoading={isLoading || isLoadingInvites}
      isAuthorized={!!user && isAuthorized}
    >
      <div style={styles.pageCard}>
        <div style={cardStyles.cardHeader}>
          <h1 style={cardStyles.cardTitle}>{t("page.title")}</h1>
          <p style={cardStyles.cardSubtitle}>{t("page.subtitle")}</p>
        </div>

        {(invites?.length ?? 0) === 0 ? (
          <EmptyState message={t("page.noInvites")} hint={t("page.noInvitesHint")} />
        ) : (
          <div style={styles.sections}>
            {/* Ready Invites */}
            {readyInvites.length > 0 && (
              <div style={styles.section}>
                <h2 style={typographyStyles.sectionTitle}>
                  {t("page.available", { count: readyInvites.length })}
                </h2>
                <p style={typographyStyles.sectionHint}>{t("page.availableHint")}</p>
                <div style={styles.inviteList}>
                  {readyInvites.map((invite) => (
                    <div key={invite.id} style={styles.inviteCard}>
                      <div style={styles.inviteCode}>{invite.identifier}</div>
                      <div style={styles.inviteActions}>
                        <button
                          onClick={() => copyToClipboard(invite)}
                          style={buttonStyles.accentButton}
                        >
                          {copiedId === invite.id ? t("page.copied") : t("page.copyLink")}
                        </button>
                      </div>
                    </div>
                  ))}
                </div>
              </div>
            )}

            {/* Spent Invites */}
            {spentInvites.length > 0 && (
              <div style={styles.section}>
                <h2 style={typographyStyles.sectionTitle}>
                  {t("page.used", { count: spentInvites.length })}
                </h2>
                <div style={styles.inviteList}>
                  {spentInvites.map((invite) => (
                    <div key={invite.id} style={styles.inviteCardSpent}>
                      <div style={styles.inviteCode}>{invite.identifier}</div>
                      <div style={styles.inviteeMeta}>
                        <StatusBadge variant="success">{t("page.usedStatus")}</StatusBadge>
                        {invite.used_by_email && (
                          <span style={styles.inviteeEmail}>
                            {t("page.usedBy", { email: invite.used_by_email })}
                          </span>
                        )}
                      </div>
                    </div>
                  ))}
                </div>
              </div>
            )}

            {/* Revoked Invites */}
            {revokedInvites.length > 0 && (
              <div style={styles.section}>
                <h2 style={typographyStyles.sectionTitle}>
                  {t("page.revoked", { count: revokedInvites.length })}
                </h2>
                <div style={styles.inviteList}>
                  {revokedInvites.map((invite) => (
                    <div key={invite.id} style={styles.inviteCardRevoked}>
                      <div style={styles.inviteCode}>{invite.identifier}</div>
                      <StatusBadge variant="error">{t("page.revokedStatus")}</StatusBadge>
                    </div>
                  ))}
                </div>
              </div>
            )}
          </div>
        )}
      </div>
    </PageLayout>
  );
}

// Page-specific styles
const styles: Record<string, React.CSSProperties> = {
  pageCard: {
    ...cardStyles.card,
    width: "100%",
    maxWidth: "600px",
  },
  emptyState: {
    textAlign: "center",
    padding: "2rem 0",
  },
  emptyText: {
    fontFamily: "'DM Sans', system-ui, sans-serif",
    color: "rgba(255, 255, 255, 0.6)",
    fontSize: "1rem",
    margin: 0,
  },
  emptyHint: {
    fontFamily: "'DM Sans', system-ui, sans-serif",
    color: "rgba(255, 255, 255, 0.4)",
    fontSize: "0.85rem",
    marginTop: "0.5rem",
  },
  sections: {
    display: "flex",
    flexDirection: "column",
    gap: "2rem",
  },
  section: {
    display: "flex",
    flexDirection: "column",
    gap: "0.75rem",
  },
  inviteList: {
    display: "flex",
    flexDirection: "column",
    gap: "0.75rem",
  },
  inviteCard: {
    background: "rgba(99, 102, 241, 0.1)",
    border: "1px solid rgba(99, 102, 241, 0.3)",
    borderRadius: "12px",
    padding: "1rem",
    display: "flex",
    justifyContent: "space-between",
    alignItems: "center",
  },
  inviteCardSpent: {
    background: "rgba(34, 197, 94, 0.08)",
    border: "1px solid rgba(34, 197, 94, 0.2)",
    borderRadius: "12px",
    padding: "1rem",
    display: "flex",
    justifyContent: "space-between",
    alignItems: "center",
  },
  inviteCardRevoked: {
    background: "rgba(239, 68, 68, 0.08)",
    border: "1px solid rgba(239, 68, 68, 0.2)",
    borderRadius: "12px",
    padding: "1rem",
    display: "flex",
    justifyContent: "space-between",
    alignItems: "center",
    opacity: 0.7,
  },
  inviteCode: {
    fontFamily: "'DM Mono', monospace",
    fontSize: "0.95rem",
    color: "#fff",
    letterSpacing: "0.02em",
  },
  inviteActions: {
    display: "flex",
    gap: "0.5rem",
  },
  inviteeMeta: {
    display: "flex",
    alignItems: "center",
    gap: "0.5rem",
  },
  inviteeEmail: {
    fontFamily: "'DM Sans', system-ui, sans-serif",
    fontSize: "0.8rem",
    color: "rgba(255, 255, 255, 0.6)",
  },
};