cameleer-saas/ui/src/pages/LicensePage.tsx

import React, { useState } from 'react';
import {
  Badge,
  Button,
  Card,
  EmptyState,
  Spinner,
  useToast,
} from '@cameleer/design-system';
import { Copy } from 'lucide-react';
import { useAuth } from '../auth/useAuth';
import { useLicense } from '../api/hooks';
import styles from '../styles/platform.module.css';
import { tierColor } from '../utils/tier';

const FEATURE_LABELS: Record<string, string> = {
  topology: 'Topology',
  lineage: 'Lineage',
  correlation: 'Correlation',
  debugger: 'Debugger',
  replay: 'Replay',
};

const LIMIT_LABELS: Record<string, string> = {
  max_agents: 'Max Agents',
  retention_days: 'Retention Days',
  max_environments: 'Max Environments',
};

function daysRemaining(expiresAt: string): number {
  const now = Date.now();
  const exp = new Date(expiresAt).getTime();
  return Math.max(0, Math.ceil((exp - now) / (1000 * 60 * 60 * 24)));
}

export function LicensePage() {
  const { tenantId } = useAuth();
  const { data: license, isLoading, isError } = useLicense(tenantId ?? '');
  const [tokenExpanded, setTokenExpanded] = useState(false);
  const { toast } = useToast();

  if (isLoading) {
    return (
      <div className="flex items-center justify-center h-64">
        <Spinner />
      </div>
    );
  }

  if (!tenantId) {
    return (
      <EmptyState
        title="No tenant associated"
        description="Your account is not linked to a tenant. Please contact your administrator."
      />
    );
  }

  if (isError || !license) {
    return (
      <EmptyState
        title="License unavailable"
        description="Unable to load license information. Please try again later."
      />
    );
  }

  const expDate = new Date(license.expiresAt).toLocaleDateString(undefined, {
    year: 'numeric',
    month: 'long',
    day: 'numeric',
  });
  const days = daysRemaining(license.expiresAt);
  const isExpiringSoon = days <= 30;
  const isExpired = days === 0;

  return (
    <div className="space-y-6 p-6">
      {/* Header */}
      <div className="flex items-center gap-3">
        <h1 className={styles.heading}>License</h1>
        <Badge
          label={license.tier.toUpperCase()}
          color={tierColor(license.tier)}
        />
      </div>

      {/* Expiry info */}
      <Card title="Validity">
        <div className="flex flex-col gap-2">
          <div className={styles.kvRow}>
            <span className={styles.kvLabel}>Issued</span>
            <span className={styles.kvValue}>
              {new Date(license.issuedAt).toLocaleDateString(undefined, {
                year: 'numeric',
                month: 'long',
                day: 'numeric',
              })}
            </span>
          </div>
          <div className={styles.kvRow}>
            <span className={styles.kvLabel}>Expires</span>
            <span className={styles.kvValue}>{expDate}</span>
          </div>
          <div className={styles.kvRow}>
            <span className={styles.kvLabel}>Days remaining</span>
            <Badge
              label={isExpired ? 'Expired' : `${days} days`}
              color={isExpired ? 'error' : isExpiringSoon ? 'warning' : 'success'}
            />
          </div>
        </div>
      </Card>

      {/* Feature matrix */}
      <Card title="Features">
        <div className={styles.dividerList}>
          {Object.entries(FEATURE_LABELS).map(([key, label]) => {
            const enabled = license.features[key] ?? false;
            return (
              <div key={key} className={styles.dividerRow}>
                <span className={styles.kvLabel}>{label}</span>
                <Badge
                  label={enabled ? 'Enabled' : 'Not included'}
                  color={enabled ? 'success' : 'warning'}
                />
              </div>
            );
          })}
        </div>
      </Card>

      {/* Limits */}
      <Card title="Limits">
        <div className={styles.dividerList}>
          {Object.entries(LIMIT_LABELS).map(([key, label]) => {
            const value = license.limits[key];
            return (
              <div key={key} className={styles.dividerRow}>
                <span className={styles.kvLabel}>{label}</span>
                <span className={styles.kvValueMono}>
                  {value !== undefined ? value : '—'}
                </span>
              </div>
            );
          })}
        </div>
      </Card>

      {/* License token */}
      <Card title="License Token">
        <div className="space-y-3">
          <p className={styles.description}>
            Use this token when registering Cameleer agents with your tenant.
          </p>
          <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
            <Button variant="ghost" size="sm" onClick={() => setTokenExpanded((v) => !v)}>
              {tokenExpanded ? 'Hide token' : 'Show token'}
            </Button>
            {tokenExpanded && (
              <Button variant="ghost" size="sm" onClick={() => {
                navigator.clipboard.writeText(license.token);
                toast({ title: 'Token copied to clipboard', variant: 'success' });
              }}>
                <Copy size={14} /> Copy
              </Button>
            )}
          </div>
          {tokenExpanded && (
            <div className={styles.tokenBlock}>
              <code className={styles.tokenCode}>
                {license.token}
              </code>
            </div>
          )}
        </div>
      </Card>
    </div>
  );
}