/**
 * ApiDocs page — embeds the FastAPI Swagger UI at /docs in an iframe.
 * Provides in-app access to API documentation without leaving LeoCRM.
 */

import React from 'react';
import { useTranslation } from 'react-i18next';
import { BookOpen, ExternalLink } from 'lucide-react';

export function ApiDocsPage() {
  const { t } = useTranslation();

  return (
    <div className="flex flex-col h-full" data-testid="api-docs-page">
      <div className="flex items-center justify-between px-6 py-4 border-b border-secondary-200 bg-white">
        <div className="flex items-center gap-3">
          <BookOpen className="w-5 h-5 text-primary-600" aria-hidden="true" />
          <div>
            <h1 className="text-lg font-semibold text-secondary-900">
              {t('apiDocs.title', 'API-Dokumentation')}
            </h1>
            <p className="text-sm text-secondary-500">
              {t('apiDocs.description', 'Swagger UI — Interaktive API-Referenz')}
            </p>
          </div>
        </div>
        <a
          href="/docs"
          target="_blank"
          rel="noopener noreferrer"
          className="inline-flex items-center gap-1.5 px-3 py-1.5 text-sm font-medium text-primary-600 hover:text-primary-700 hover:bg-primary-50 rounded-md transition-colors min-h-touch focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500"
          aria-label={t('apiDocs.openInNewTab', 'In neuem Tab öffnen')}
        >
          <ExternalLink className="w-4 h-4" aria-hidden="true" />
          {t('apiDocs.openInNewTab', 'In neuem Tab öffnen')}
        </a>
      </div>
      <div className="flex-1 overflow-hidden">
        <iframe
          src="/docs"
          title={t('apiDocs.title', 'API-Dokumentation')}
          className="w-full h-full border-0"
          aria-label={t('apiDocs.title', 'API-Dokumentation')}
        />
      </div>
    </div>
  );
}

export default ApiDocsPage;