arbret/frontend/app/admin/invites/page.tsx

"use client";

import { useEffect, useState, useCallback } from "react";
import { Permission } from "../../auth-context";
import { adminApi } from "../../api";
import { Header } from "../../components/Header";
import { StatusBadge } from "../../components/StatusBadge";
import { useRequireAuth } from "../../hooks/useRequireAuth";
import { useMutation } from "../../hooks/useMutation";
import { useTranslation } from "../../hooks/useTranslation";
import { components } from "../../generated/api";
import constants from "../../../../shared/constants.json";
import {
  layoutStyles,
  cardStyles,
  tableStyles,
  paginationStyles,
  formStyles,
  buttonStyles,
  utilityStyles,
} from "../../styles/shared";

const { READY, SPENT, REVOKED } = constants.inviteStatuses;

// Use generated types from OpenAPI schema
type _InviteRecord = components["schemas"]["InviteResponse"];
type PaginatedInvites = components["schemas"]["PaginatedResponse_InviteResponse_"];
type UserOption = components["schemas"]["AdminUserResponse"];

export default function AdminInvitesPage() {
  const t = useTranslation("admin");
  const tCommon = useTranslation("common");
  const [data, setData] = useState<PaginatedInvites | null>(null);
  const [error, setError] = useState<string | null>(null);
  const [page, setPage] = useState(1);
  const [statusFilter, setStatusFilter] = useState<string>("");
  const [newGodfatherId, setNewGodfatherId] = useState("");
  const [users, setUsers] = useState<UserOption[]>([]);
  const { user, isLoading, isAuthorized } = useRequireAuth({
    requiredPermission: Permission.MANAGE_INVITES,
    fallbackRedirect: "/",
  });

  const fetchUsers = useCallback(async () => {
    try {
      const data = await adminApi.getUsers();
      setUsers(data);
    } catch (err) {
      console.error("Failed to fetch users:", err);
    }
  }, []);

  const fetchInvites = useCallback(
    async (page: number, status: string) => {
      setError(null);
      try {
        const data = await adminApi.getInvites(page, 10, status || undefined);
        setData(data);
      } catch (err) {
        setData(null);
        setError(err instanceof Error ? err.message : t("invites.errors.loadFailed"));
      }
    },
    [t]
  );

  useEffect(() => {
    if (user && isAuthorized) {
      fetchUsers();
      fetchInvites(page, statusFilter);
    }
  }, [user, page, statusFilter, isAuthorized, fetchUsers, fetchInvites]);

  const {
    mutate: createInvite,
    isLoading: isCreating,
    error: createError,
  } = useMutation(
    (godfatherId: number) =>
      adminApi.createInvite({
        godfather_id: godfatherId,
      }),
    {
      onSuccess: () => {
        setNewGodfatherId("");
        fetchInvites(1, statusFilter);
        setPage(1);
      },
    }
  );

  const { mutate: revokeInvite } = useMutation(
    (inviteId: number) => adminApi.revokeInvite(inviteId),
    {
      onSuccess: () => {
        setError(null);
        fetchInvites(page, statusFilter);
      },
      onError: (err) => {
        setError(err instanceof Error ? err.message : t("invites.errors.revokeFailed"));
      },
    }
  );

  const handleCreateInvite = async () => {
    if (!newGodfatherId) {
      return;
    }
    try {
      await createInvite(parseInt(newGodfatherId));
    } catch {
      // Error handled by useMutation
    }
  };

  const handleRevoke = async (inviteId: number) => {
    try {
      await revokeInvite(inviteId);
    } catch {
      // Error handled by useMutation
    }
  };

  const formatDate = (dateStr: string) => {
    return new Date(dateStr).toLocaleString("es-ES");
  };

  const getStatusBadgeVariant = (status: string): "ready" | "success" | "error" | undefined => {
    switch (status) {
      case READY:
        return "ready";
      case SPENT:
        return "success";
      case REVOKED:
        return "error";
      default:
        return undefined;
    }
  };

  if (isLoading) {
    return (
      <main style={layoutStyles.main}>
        <div style={layoutStyles.loader}>{tCommon("loading")}</div>
      </main>
    );
  }

  if (!user || !isAuthorized) {
    return null;
  }

  return (
    <main style={layoutStyles.main}>
      <Header currentPage="admin-invites" />

      <div style={layoutStyles.contentScrollable}>
        <div style={styles.pageContainer}>
          {/* Create Invite Section */}
          <div style={styles.createCard}>
            <h2 style={styles.createTitle}>{t("invites.createInvite")}</h2>
            <div style={styles.createForm}>
              <div style={formStyles.field}>
                <label style={styles.inputLabel}>{t("invites.godfatherLabel")}</label>
                <select
                  value={newGodfatherId}
                  onChange={(e) => setNewGodfatherId(e.target.value)}
                  style={{ ...formStyles.select, maxWidth: "400px" }}
                >
                  <option value="">{t("invites.selectUser")}</option>
                  {users.map((u) => (
                    <option key={u.id} value={u.id}>
                      {u.email}
                    </option>
                  ))}
                </select>
                {users.length === 0 && (
                  <span style={formStyles.hint}>{t("invites.noUsersHint")}</span>
                )}
              </div>
              {createError && <div style={styles.createError}>{createError}</div>}
              <button
                onClick={handleCreateInvite}
                disabled={isCreating || !newGodfatherId}
                style={{
                  ...buttonStyles.accentButton,
                  alignSelf: "flex-start",
                  ...(!newGodfatherId ? buttonStyles.buttonDisabled : {}),
                }}
              >
                {isCreating ? t("invites.creating") : t("invites.createInvite")}
              </button>
            </div>
          </div>

          {/* Invites Table */}
          <div style={cardStyles.tableCard}>
            <div style={tableStyles.tableHeader}>
              <h2 style={tableStyles.tableTitle}>{t("invites.allInvites")}</h2>
              <div style={utilityStyles.filterGroup}>
                <select
                  value={statusFilter}
                  onChange={(e) => {
                    setStatusFilter(e.target.value);
                    setPage(1);
                  }}
                  style={styles.filterSelect}
                >
                  <option value="">{t("invites.allStatuses")}</option>
                  <option value={READY}>{t("invites.statusReady")}</option>
                  <option value={SPENT}>{t("invites.statusSpent")}</option>
                  <option value={REVOKED}>{t("invites.statusRevoked")}</option>
                </select>
                <span style={tableStyles.totalCount}>
                  {t("invites.invitesCount", { count: data?.total ?? 0 })}
                </span>
              </div>
            </div>

            <div style={tableStyles.tableWrapper}>
              <table style={tableStyles.table}>
                <thead>
                  <tr>
                    <th style={tableStyles.th}>{t("invites.tableHeaders.code")}</th>
                    <th style={tableStyles.th}>{t("invites.tableHeaders.godfather")}</th>
                    <th style={tableStyles.th}>{t("invites.tableHeaders.status")}</th>
                    <th style={tableStyles.th}>{t("invites.tableHeaders.usedBy")}</th>
                    <th style={tableStyles.th}>{t("invites.tableHeaders.created")}</th>
                    <th style={tableStyles.th}>{t("invites.tableHeaders.actions")}</th>
                  </tr>
                </thead>
                <tbody>
                  {error && (
                    <tr>
                      <td colSpan={6} style={tableStyles.errorRow}>
                        {error}
                      </td>
                    </tr>
                  )}
                  {!error &&
                    data?.records.map((record) => (
                      <tr key={record.id} style={tableStyles.tr}>
                        <td style={tableStyles.tdMono}>{record.identifier}</td>
                        <td style={tableStyles.td}>{record.godfather_email}</td>
                        <td style={tableStyles.td}>
                          <StatusBadge variant={getStatusBadgeVariant(record.status)}>
                            {record.status}
                          </StatusBadge>
                        </td>
                        <td style={tableStyles.td}>{record.used_by_email || "-"}</td>
                        <td style={tableStyles.tdDate}>{formatDate(record.created_at)}</td>
                        <td style={tableStyles.td}>
                          {record.status === READY && (
                            <button
                              onClick={() => handleRevoke(record.id)}
                              style={buttonStyles.dangerButton}
                            >
                              {t("invites.revoke")}
                            </button>
                          )}
                        </td>
                      </tr>
                    ))}
                  {!error && (!data || data.records.length === 0) && (
                    <tr>
                      <td colSpan={6} style={tableStyles.emptyRow}>
                        {t("invites.noInvites")}
                      </td>
                    </tr>
                  )}
                </tbody>
              </table>
            </div>

            {data && data.total_pages > 1 && (
              <div style={paginationStyles.pagination}>
                <button
                  onClick={() => setPage((p) => Math.max(1, p - 1))}
                  disabled={page === 1}
                  style={paginationStyles.pageBtn}
                >
                  ←
                </button>
                <span style={paginationStyles.pageInfo}>
                  {page} / {data.total_pages}
                </span>
                <button
                  onClick={() => setPage((p) => Math.min(data.total_pages, p + 1))}
                  disabled={page === data.total_pages}
                  style={paginationStyles.pageBtn}
                >
                  →
                </button>
              </div>
            )}
          </div>
        </div>
      </div>
    </main>
  );
}

// Page-specific styles
const styles: Record<string, React.CSSProperties> = {
  pageContainer: {
    display: "flex",
    flexDirection: "column",
    gap: "2rem",
    maxWidth: "1000px",
    margin: "0 auto",
  },
  createCard: {
    background: "rgba(99, 102, 241, 0.08)",
    border: "1px solid rgba(99, 102, 241, 0.2)",
    borderRadius: "16px",
    padding: "1.5rem",
  },
  createTitle: {
    fontFamily: "'DM Sans', system-ui, sans-serif",
    fontSize: "1rem",
    fontWeight: 600,
    color: "rgba(255, 255, 255, 0.9)",
    margin: "0 0 1rem 0",
  },
  createForm: {
    display: "flex",
    flexDirection: "column",
    gap: "1rem",
  },
  inputLabel: {
    fontFamily: "'DM Sans', system-ui, sans-serif",
    fontSize: "0.8rem",
    color: "rgba(255, 255, 255, 0.5)",
  },
  createError: {
    fontFamily: "'DM Sans', system-ui, sans-serif",
    fontSize: "0.85rem",
    color: "#f87171",
  },
  filterSelect: {
    fontFamily: "'DM Sans', system-ui, sans-serif",
    fontSize: "0.85rem",
    padding: "0.5rem 1rem",
    background: "rgba(255, 255, 255, 0.05)",
    border: "1px solid rgba(255, 255, 255, 0.1)",
    borderRadius: "8px",
    color: "#fff",
    cursor: "pointer",
  },
};