pieced-portal/src/components/admin/skills/pending-skill-requests.tsx

"use client";

import { useState, Fragment } from "react";
import { useRouter } from "next/navigation";
import { useTranslations } from "next-intl";
import { Card } from "@/components/ui/card";
import type { SkillActivationRequest } from "@/types";

interface RowData extends SkillActivationRequest {
  skillName: string;
  companyName: string | null;
}

interface Props {
  initialRows: RowData[];
}

/**
 * Admin queue table. Each row has Approve and Reject buttons.
 * Reject opens an inline reason input that must be filled before
 * the call goes through (the API also enforces this — empty
 * reasons are 400'd server-side).
 *
 * Actions hit the admin API endpoints, then router.refresh() to
 * re-render the server component with the new state (the row
 * disappears once flipped to approved/rejected).
 */
export function PendingSkillRequests({ initialRows }: Props) {
  const t = useTranslations("adminSkills");
  const router = useRouter();
  const [busyId, setBusyId] = useState<string | null>(null);
  const [error, setError] = useState("");
  // Per-row open-reject-input state. Key = request id.
  const [rejectingId, setRejectingId] = useState<string | null>(null);
  const [reasonText, setReasonText] = useState("");

  const approve = async (id: string) => {
    setError("");
    setBusyId(id);
    try {
      const res = await fetch(`/api/admin/skills/pending/${id}/approve`, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({}),
      });
      if (!res.ok) {
        const j = await res.json().catch(() => ({}));
        throw new Error(j.error || `HTTP ${res.status}`);
      }
      router.refresh();
    } catch (e: any) {
      setError(e.message);
    } finally {
      setBusyId(null);
    }
  };

  const reject = async (id: string) => {
    if (!reasonText.trim()) {
      setError(t("reasonRequired"));
      return;
    }
    setError("");
    setBusyId(id);
    try {
      const res = await fetch(`/api/admin/skills/pending/${id}/reject`, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ reason: reasonText }),
      });
      if (!res.ok) {
        const j = await res.json().catch(() => ({}));
        throw new Error(j.error || `HTTP ${res.status}`);
      }
      setRejectingId(null);
      setReasonText("");
      router.refresh();
    } catch (e: any) {
      setError(e.message);
    } finally {
      setBusyId(null);
    }
  };

  if (initialRows.length === 0) {
    return (
      <Card>
        <p className="text-sm text-text-muted italic text-center py-6">
          {t("emptyQueue")}
        </p>
      </Card>
    );
  }

  return (
    <Card>
      {error && (
        <div className="mb-3 p-3 rounded-md border border-error bg-error/10 text-sm text-error">
          {error}
        </div>
      )}
      <table className="w-full text-sm">
        <thead className="text-xs text-text-muted text-left">
          <tr>
            <th className="pb-2">{t("requestedAtCol")}</th>
            <th className="pb-2">{t("skillCol")}</th>
            <th className="pb-2">{t("tenantCol")}</th>
            <th className="pb-2">{t("orgCol")}</th>
            <th className="pb-2 text-right">{t("actionsCol")}</th>
          </tr>
        </thead>
        <tbody>
          {initialRows.map((row) => (
            <Fragment key={row.id}>
              <tr className="border-t border-border align-top">
                <td className="py-2 text-xs text-text-muted font-mono">
                  {row.requestedAt.slice(0, 16).replace("T", " ")}
                </td>
                <td className="py-2">
                  <div className="font-medium">{row.skillName}</div>
                  <div className="text-xs text-text-muted font-mono">
                    {row.skillId}
                  </div>
                </td>
                <td className="py-2 font-mono text-xs">{row.tenantName}</td>
                <td className="py-2">
                  <div className="text-xs">{row.companyName ?? "—"}</div>
                  <div className="text-xs text-text-muted font-mono">
                    {row.zitadelOrgId.slice(0, 16)}…
                  </div>
                </td>
                <td className="py-2 text-right">
                  {rejectingId !== row.id && (
                    <div className="flex justify-end gap-2">
                      <button
                        onClick={() => {
                          setRejectingId(row.id);
                          setReasonText("");
                          setError("");
                        }}
                        disabled={busyId !== null}
                        className="text-xs px-3 py-1.5 rounded-md border border-error text-error hover:bg-error/10 disabled:opacity-50"
                      >
                        {t("rejectBtn")}
                      </button>
                      <button
                        onClick={() => approve(row.id)}
                        disabled={busyId !== null}
                        className="text-xs px-3 py-1.5 rounded-md bg-accent text-white disabled:opacity-50"
                      >
                        {busyId === row.id ? t("working") : t("approveBtn")}
                      </button>
                    </div>
                  )}
                </td>
              </tr>
              {rejectingId === row.id && (
                <tr className="border-t border-border bg-surface-2">
                  <td colSpan={5} className="py-3 px-3">
                    <div className="flex flex-col gap-2">
                      <label className="text-xs text-text-muted">
                        {t("reasonLabel")}
                      </label>
                      <textarea
                        value={reasonText}
                        onChange={(e) => setReasonText(e.target.value)}
                        rows={3}
                        maxLength={1000}
                        placeholder={t("reasonPlaceholder")}
                        className="w-full px-3 py-2 rounded-md border border-border bg-surface-1 text-sm"
                        autoFocus
                      />
                      <div className="flex justify-end gap-2">
                        <button
                          onClick={() => {
                            setRejectingId(null);
                            setReasonText("");
                          }}
                          disabled={busyId !== null}
                          className="text-xs px-3 py-1.5 rounded-md border border-border disabled:opacity-50"
                        >
                          {t("cancel")}
                        </button>
                        <button
                          onClick={() => reject(row.id)}
                          disabled={busyId !== null || !reasonText.trim()}
                          className="text-xs px-3 py-1.5 rounded-md bg-error text-white disabled:opacity-50"
                        >
                          {busyId === row.id
                            ? t("working")
                            : t("confirmRejectBtn")}
                        </button>
                      </div>
                    </div>
                  </td>
                </tr>
              )}
            </Fragment>
          ))}
        </tbody>
      </table>
    </Card>
  );
}