cameleer-saas/ui/src/pages/vendor/LicenseVerifyPage.tsx

import { useState } from 'react';
import {
  Badge,
  Button,
  Card,
  useToast,
} from '@cameleer/design-system';
import { Clipboard, Search, ShieldCheck } from 'lucide-react';
import { useVerifyLicense, usePublicKey } from '../../api/vendor-hooks';
import styles from '../../styles/platform.module.css';
import type { VerifyLicenseResponse } from '../../types/api';

const LIMIT_LABELS: Record<string, string> = {
  max_environments: 'Environments',
  max_apps: 'Apps',
  max_agents: 'Agents',
  max_users: 'Users',
  max_outbound_connections: 'Outbound Connections',
  max_alert_rules: 'Alert Rules',
  max_total_cpu_millis: 'CPU (millicores)',
  max_total_memory_mb: 'Memory (MB)',
  max_total_replicas: 'Replicas',
  max_execution_retention_days: 'Execution Retention (days)',
  max_log_retention_days: 'Log Retention (days)',
  max_metric_retention_days: 'Metric Retention (days)',
  max_jar_retention_count: 'JAR Retention Count',
};

function stateColor(state: string): 'success' | 'warning' | 'error' | 'auto' {
  switch (state) {
    case 'ACTIVE': return 'success';
    case 'GRACE': return 'warning';
    case 'EXPIRED': return 'error';
    case 'INVALID': return 'error';
    default: return 'auto';
  }
}

export function LicenseVerifyPage() {
  const { toast } = useToast();
  const verifyLicense = useVerifyLicense();
  const { data: keyData } = usePublicKey();
  const [token, setToken] = useState('');
  const [result, setResult] = useState<VerifyLicenseResponse | null>(null);

  async function handleVerify() {
    if (!token.trim()) return;
    try {
      const res = await verifyLicense.mutateAsync(token.trim());
      setResult(res);
    } catch (err) {
      toast({ title: 'Verification failed', description: String(err), variant: 'error' });
    }
  }

  async function handleCopyPublicKey() {
    if (!keyData?.publicKey) return;
    try {
      await navigator.clipboard.writeText(keyData.publicKey);
      toast({ title: 'Public key copied', variant: 'success' });
    } catch {
      toast({ title: 'Copy failed', variant: 'error' });
    }
  }

  return (
    <div style={{ padding: 24, display: 'flex', flexDirection: 'column', gap: 20 }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
        <h1 style={{ margin: 0, fontSize: '1.25rem', fontWeight: 600 }}>License Tools</h1>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(400px, 1fr))', gap: 16 }}>
        {/* Verify Token */}
        <Card title="Verify License Token">
          <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
            <p className={styles.description}>
              Paste a signed license token to decode and validate its signature.
            </p>
            <textarea
              value={token}
              onChange={(e) => setToken(e.target.value)}
              placeholder="base64payload.base64signature"
              rows={4}
              style={{
                width: '100%', padding: '8px 12px', border: '1px solid var(--border)',
                borderRadius: 6, background: 'var(--bg-surface)', color: 'var(--text-primary)',
                fontSize: '0.8rem', fontFamily: 'monospace', resize: 'vertical',
              }}
            />
            <Button variant="primary" onClick={handleVerify} loading={verifyLicense.isPending} disabled={!token.trim()}>
              <Search size={14} style={{ marginRight: 6, verticalAlign: -2 }} />
              Verify
            </Button>
          </div>
        </Card>

        {/* Public Key */}
        <Card title="Signing Public Key">
          <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
            <p className={styles.description}>
              This is the Ed25519 public key used to verify license signatures.
              Distribute to standalone tenants via <code>CAMELEER_SERVER_LICENSE_PUBLICKEY</code>.
            </p>
            {keyData?.publicKey ? (
              <>
                <div className={styles.tokenBlock}>
                  <code className={styles.tokenCode} style={{ fontSize: 11, wordBreak: 'break-all' }}>
                    {keyData.publicKey}
                  </code>
                </div>
                <Button variant="secondary" onClick={handleCopyPublicKey}>
                  <Clipboard size={14} style={{ marginRight: 6, verticalAlign: -2 }} />
                  Copy Public Key
                </Button>
              </>
            ) : (
              <p className={styles.description}>Loading...</p>
            )}
          </div>
        </Card>
      </div>

      {/* Verification Result */}
      {result && (
        <Card title="Verification Result">
          <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
              <ShieldCheck size={20} style={{ color: result.valid ? 'var(--success)' : 'var(--error)' }} />
              <Badge
                label={result.valid ? 'Valid Signature' : 'Invalid'}
                color={result.valid ? 'success' : 'error'}
              />
              {result.valid && (
                <Badge label={result.state} color={stateColor(result.state)} />
              )}
            </div>

            {result.error && (
              <p style={{ color: 'var(--error)', fontSize: 13, margin: 0 }}>{result.error}</p>
            )}

            {result.valid && (
              <div className={styles.dividerList}>
                <div className={styles.kvRow}>
                  <span className={styles.kvLabel}>Tenant ID</span>
                  <span className={styles.kvValueMono}>{result.tenantId}</span>
                </div>
                {result.label && (
                  <div className={styles.kvRow}>
                    <span className={styles.kvLabel}>Label</span>
                    <span className={styles.kvValue}>{result.label}</span>
                  </div>
                )}
                <div className={styles.kvRow}>
                  <span className={styles.kvLabel}>Issued</span>
                  <span className={styles.kvValue}>{result.issuedAt ? new Date(result.issuedAt).toLocaleDateString() : '—'}</span>
                </div>
                <div className={styles.kvRow}>
                  <span className={styles.kvLabel}>Expires</span>
                  <span className={styles.kvValue}>{result.expiresAt ? new Date(result.expiresAt).toLocaleDateString() : '—'}</span>
                </div>
                <div className={styles.kvRow}>
                  <span className={styles.kvLabel}>Grace Period</span>
                  <span className={styles.kvValue}>{result.gracePeriodDays}d</span>
                </div>
              </div>
            )}

            {result.valid && result.limits && (
              <div>
                <label style={{ fontSize: 12, fontWeight: 500, color: 'var(--text-muted)', display: 'block', marginBottom: 8 }}>Limits</label>
                <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(220px, 1fr))', gap: 4 }}>
                  {Object.entries(result.limits).map(([key, value]) => (
                    <div key={key} className={styles.kvRow}>
                      <span className={styles.kvLabel} style={{ fontSize: 12 }}>{LIMIT_LABELS[key] ?? key}</span>
                      <span className={styles.kvValue} style={{ fontSize: 12, fontVariantNumeric: 'tabular-nums' }}>{value.toLocaleString()}</span>
                    </div>
                  ))}
                </div>
              </div>
            )}
          </div>
        </Card>
      )}
    </div>
  );
}