veza/apps/web/src/components/developer/DeveloperDashboardView.tsx

import React, { useState, useEffect } from 'react';
import { Card } from '../ui/card';
import { Button } from '../ui/button';
import { StatCard } from '../dashboard/StatCard';
import { CreateAPIKeyModal } from './modals/CreateAPIKeyModal';
import {
  Key,
  Activity,
  Globe,
  Plus,
  Trash2,
  Eye,
  ExternalLink,
  Loader2,
} from 'lucide-react';
import { useToast } from '../../context/ToastContext';
import { developerService } from '../../services/developerService';
import { logger } from '@/utils/logger';

interface ApiKey {
  id: string;
  name: string;
  prefix: string;
  created: string;
  lastUsed: string;
  status: 'active' | 'revoked';
}

export const DeveloperDashboardView: React.FC = () => {
  const { addToast } = useToast();
  const [keys, setKeys] = useState<ApiKey[]>([]);
  const [loading, setLoading] = useState(true);
  const [stats, setStats] = useState<any>({});
  const [showCreateModal, setShowCreateModal] = useState(false);

  useEffect(() => {
    const fetchData = async () => {
      setLoading(true);
      try {
        const [keysData, statsData] = await Promise.all([
          developerService.listKeys(),
          developerService.getStats(),
        ]);
        setKeys(keysData);
        setStats(statsData);
      } catch (e) {
        logger.error('Error loading developer dashboard data', {
          error: e instanceof Error ? e.message : String(e),
          stack: e instanceof Error ? e.stack : undefined,
        });
      } finally {
        setLoading(false);
      }
    };
    fetchData();
  }, []);

  const handleCreateKey = async (data: { name: string; scopes: string[] }) => {
    try {
      const newKey = await developerService.createKey(data);
      setKeys([newKey, ...keys]);
      addToast('API Key created successfully', 'success');
    } catch (e) {
      addToast('Failed to create API key', 'error');
    }
  };

  const handleRevoke = async (id: string) => {
    if (confirm('Are you sure you want to revoke this key?')) {
      await developerService.revokeKey(id);
      setKeys(keys.filter((k) => k.id !== id));
      addToast('API Key revoked', 'info');
    }
  };

  if (loading)
    return (
      <div className="flex justify-center py-20">
        <Loader2 className="w-10 h-10 text-kodo-cyan animate-spin" />
      </div>
    );

  return (
    <div className="space-y-8 animate-fadeIn pb-20">
      {/* Header */}
      <div className="flex flex-col md:flex-row justify-between items-end gap-4 border-b border-kodo-steel/50 pb-6">
        <div>
          <h1 className="text-3xl font-display font-bold text-white mb-2">
            DEVELOPER PORTAL
          </h1>
          <p className="text-kodo-content-dim font-mono text-sm">
            Build on top of the Veza Platform.
          </p>
        </div>
        <div className="flex gap-3">
          <Button
            variant="secondary"
            icon={<ExternalLink className="w-4 h-4" />}
            onClick={() => window.open('https://docs.veza.io', '_blank')}
          >
            Documentation
          </Button>
          <Button
            variant="primary"
            icon={<Plus className="w-4 h-4" />}
            onClick={() => setShowCreateModal(true)}
          >
            Create API Key
          </Button>
        </div>
      </div>

      {/* Stats */}
      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
        <StatCard
          label="API Requests (24h)"
          value={stats.requests_24h?.toLocaleString() || 0}
          icon={<Activity className="w-5 h-5" />}
          trend={5.2}
          color="cyan"
        />
        <StatCard
          label="Avg Latency"
          value={`${stats.avg_latency || 0}ms`}
          icon={<Globe className="w-5 h-5" />}
          trend={-12}
          color="lime"
        />
        <StatCard
          label="Active Keys"
          value={keys.length}
          icon={<Key className="w-5 h-5" />}
          color="gold"
        />
      </div>

      {/* API Keys List */}
      <Card variant="default">
        <h3 className="font-bold text-white mb-6">Active API Keys</h3>
        <div className="overflow-x-auto">
          <table className="w-full text-left">
            <thead>
              <tr className="text-xs text-kodo-content-dim uppercase border-b border-kodo-steel/50">
                <th className="pb-3 pl-4">Name</th>
                <th className="pb-3">Key Prefix</th>
                <th className="pb-3">Created</th>
                <th className="pb-3">Last Used</th>
                <th className="pb-3 text-right pr-4">Actions</th>
              </tr>
            </thead>
            <tbody className="text-sm">
              {keys.map((key) => (
                <tr
                  key={key.id}
                  className="border-b border-kodo-steel/20 hover:bg-white/5 transition-colors"
                >
                  <td className="py-4 pl-4 font-bold text-white">{key.name}</td>
                  <td className="py-4 font-mono text-kodo-gold">
                    {key.prefix}
                  </td>
                  <td className="py-4 text-kodo-content-dim">{key.created}</td>
                  <td className="py-4 text-kodo-text-main">{key.lastUsed}</td>
                  <td className="py-4 text-right pr-4 flex justify-end gap-2">
                    <Button
                      variant="ghost"
                      size="icon"
                      className="h-8 w-8 text-kodo-content-dim hover:text-white"
                      onClick={() => addToast('Full key hidden for security')}
                    >
                      <Eye className="w-4 h-4" />
                    </Button>
                    <Button
                      variant="ghost"
                      size="icon"
                      className="h-8 w-8 text-kodo-red hover:bg-kodo-red/10"
                      onClick={() => handleRevoke(key.id)}
                    >
                      <Trash2 className="w-4 h-4" />
                    </Button>
                  </td>
                </tr>
              ))}
              {keys.length === 0 && (
                <tr>
                  <td colSpan={5} className="py-8 text-center text-kodo-content-dim">
                    No active API keys. Create one to get started.
                  </td>
                </tr>
              )}
            </tbody>
          </table>
        </div>
      </Card>

      {showCreateModal && (
        <CreateAPIKeyModal
          onClose={() => setShowCreateModal(false)}
          onCreate={handleCreateKey}
        />
      )}
    </div>
  );
};