import type { Metadata } from 'next';
import { desc, eq } from '@/lib/db';
import { db, apiKeys } from '@/lib/db';
import { requireUser } from '@/lib/auth/session';
import { revokeApiKeyAction } from '@/lib/auth/account-actions';
import { PageHeader, btnDanger } from '@/components/account/page-header';
import { Card, CardHeader, Badge, Table, th, td } from '@/components/ui/primitives';
import { fmtRelative } from '@/lib/format';
import { CreateKeyForm } from './create-key-form';

export const metadata: Metadata = { title: 'API keys', robots: { index: false } };

export default async function ApiKeysPage() {
  const u = await requireUser('/account/api-keys');
  const keys = await db().select().from(apiKeys).where(eq(apiKeys.userId, u.id)).orderBy(desc(apiKeys.createdAt));
  return (
    <>
      <PageHeader title="API keys" description="Programmatic access to RareIndex data. Keys are shown once and stored hashed. Send them as `Authorization: Bearer <key>`." />
      <div className="grid gap-4 lg:grid-cols-[minmax(0,1fr)_320px]">
        <Card>
          <CardHeader title="Your keys" subtitle={`${keys.filter((k) => !k.revokedAt).length} active`} />
          <Table>
            <thead>
              <tr>
                <th className={th}>Name</th>
                <th className={th}>Prefix</th>
                <th className={th}>Tier</th>
                <th className={th}>Limits</th>
                <th className={th}>Last used</th>
                <th className={th}></th>
              </tr>
            </thead>
            <tbody>
              {keys.map((k) => (
                <tr key={k.id} className={k.revokedAt ? 'opacity-50' : ''}>
                  <td className={td}>{k.name}</td>
                  <td className={`${td} mono-num text-xs`}>{k.prefix}…</td>
                  <td className={td}>
                    <Badge tone={k.tier === 'free' ? 'neutral' : 'index'}>{k.tier}</Badge>
                  </td>
                  <td className={`${td} text-xs text-muted`}>
                    {k.rateLimitPerMinute}/min · {k.dailyQuota.toLocaleString()}/day
                  </td>
                  <td className={`${td} text-xs text-muted`}>{k.lastUsedAt ? fmtRelative(k.lastUsedAt) : 'never'}</td>
                  <td className={td}>
                    {k.revokedAt ? (
                      <span className="text-xs text-subtle">revoked</span>
                    ) : (
                      <form action={revokeApiKeyAction}>
                        <input type="hidden" name="keyId" value={k.id} />
                        <button className={btnDanger}>Revoke</button>
                      </form>
                    )}
                  </td>
                </tr>
              ))}
              {keys.length === 0 ? (
                <tr>
                  <td className={td} colSpan={6}>
                    <span className="text-muted">No keys yet. Create one to query `/v1/assets/search`, `/v1/indices` and more.</span>
                  </td>
                </tr>
              ) : null}
            </tbody>
          </Table>
        </Card>
        <Card>
          <CardHeader title="Create a key" subtitle="Free tier: 30 requests/min, 1,000/day." />
          <div className="p-4">
            <CreateKeyForm />
          </div>
        </Card>
      </div>
    </>
  );
}