/**
 * Developer Dashboard — simplified (P2.3)
 * API Keys management has no backend yet. This page shows a "Coming soon" message
 * and links to the API documentation (Swagger). Webhooks are available at /webhooks.
 */
import React from 'react';
import { Card, CardContent } from '../ui/card';
import { Button } from '../ui/button';
import { FileText, ExternalLink } from 'lucide-react';
import { SwaggerUIDoc } from './SwaggerUI';
import { EmptyState } from '../ui/empty-state';

export const DeveloperDashboardView: React.FC = () => {
  return (
    <div className="space-y-8 animate-fadeIn pb-20">
      <div className="flex flex-col md:flex-row justify-between items-end gap-4 border-b border-border/50 pb-6">
        <div>
          <h1 className="text-3xl font-heading font-bold text-foreground mb-2">
            DEVELOPER PORTAL
          </h1>
          <p className="text-muted-foreground font-mono text-sm">
            API & Webhooks — Coming soon. Explore the API documentation below.
          </p>
        </div>
        <Button
          variant="secondary"
          icon={<ExternalLink className="w-4 h-4" />}
          onClick={() => window.open('/webhooks', '_self')}
        >
          Manage Webhooks
        </Button>
      </div>

      <Card variant="default">
        <CardContent className="pt-6">
          <EmptyState
            icon={<FileText className="w-12 h-12 text-muted-foreground" />}
            title="API Keys — Coming soon"
            description="API key management will be available in a future release. In the meantime, use the interactive API documentation below to explore endpoints. Webhooks can be configured from the Webhooks page."
            variant="card"
          />
        </CardContent>
      </Card>

      <Card variant="default" className="p-0 overflow-hidden bg-background/80">
        <SwaggerUIDoc useIframe={false} />
      </Card>
    </div>
  );
};