// API tokens on the account page: the person's tokens, and making one.
import { ActionForm, SubmitButton } from "@/components/forms";
import { Tag } from "@/components/status";
import { DateTime } from "@/components/time";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import type { TokenEntry, TokenList } from "@/lib/api";
import { revokeToken } from "./actions";
import { TokenForm } from "./token-form";

export function TokensCard({ data }: { data: TokenList }) {
  const active = data.tokens.filter((t) => t.status === "active");
  const past = data.tokens.filter((t) => t.status !== "active").slice(0, 10);
  return (
    <Card>
      <CardHeader>
        <CardTitle>API Tokens</CardTitle>
        <CardDescription>
          For your own scripts. A token can do only what you give it, and never more than you can do yourself.
        </CardDescription>
      </CardHeader>
      <CardContent className="space-y-6">
        {active.length > 0 && (
          <ul className="divide-y">
            {active.map((t) => (
              <TokenRow key={t.id} token={t} />
            ))}
          </ul>
        )}
        {data.scopes.length > 0 ? (
          <TokenForm scopes={data.scopes} maxDays={data.maxDays} />
        ) : (
          <p className="text-sm text-muted-foreground">
            Tokens act on what you manage: your products or a catalog&apos;s team. You don&apos;t manage anything yet.
          </p>
        )}
        {past.length > 0 && (
          <details className="text-sm">
            <summary className="cursor-pointer text-muted-foreground hover:text-foreground">Revoked and expired</summary>
            <ul className="mt-2 divide-y">
              {past.map((t) => (
                <TokenRow key={t.id} token={t} />
              ))}
            </ul>
          </details>
        )}
      </CardContent>
    </Card>
  );
}

function TokenRow({ token: t }: { token: TokenEntry }) {
  return (
    <li className="space-y-1 py-3 first:pt-0 last:pb-0">
      <div className="flex flex-wrap items-center gap-2">
        <span className="font-medium">{t.name}</span>
        {t.status !== "active" && <Tag tone={t.status === "revoked" ? "danger" : "neutral"}>{t.status}</Tag>}
        <span className="flex-1" />
        {t.status === "active" && (
          <ActionForm action={revokeToken} fields={{ id: t.id }}>
            <SubmitButton size="sm" variant="outline" pendingLabel="Revoking…" confirm={`Revoke ${t.name}? Scripts using it stop working.`}>
              Revoke
            </SubmitButton>
          </ActionForm>
        )}
      </div>
      <p className="text-xs text-muted-foreground">
        {t.grants.map((g, i) => (
          <span key={i}>
            {i > 0 && ", "}
            <span className="font-mono">{g.permission}</span> on {g.scope.type === "hub" ? "everything" : g.name}
          </span>
        ))}
      </p>
      <p className="text-xs text-muted-foreground">
        Made <DateTime iso={t.createdAt} dateOnly />
        {" · "}
        {t.status === "revoked" && t.revokedAt ? (
          <>
            revoked <DateTime iso={t.revokedAt} dateOnly />
          </>
        ) : (
          <>
            {t.status === "expired" ? "expired" : "expires"} <DateTime iso={t.expiresAt} dateOnly />
          </>
        )}
        {" · "}
        {t.lastUsedAt ? (
          <>
            last used <DateTime iso={t.lastUsedAt} />
          </>
        ) : (
          "never used"
        )}
      </p>
    </li>
  );
}