'use client'

/**
 * Developer Documentation Page
 *
 * SDK-style documentation with architecture overview, API reference,
 * and interactive system architecture diagram
 */

import { useState } from 'react'
import AdminLayout from '@/components/admin/AdminLayout'
import type { TabType } from './types'
import TabNavigation from './_components/TabNavigation'
import OverviewTab from './_components/OverviewTab'
import ServicesTab from './_components/ServicesTab'
import ApiReferenceTab from './_components/ApiReferenceTab'
import DockerTab from './_components/DockerTab'
import TestingTab from './_components/TestingTab'

export default function DeveloperDocsPage() {
  const [activeTab, setActiveTab] = useState<TabType>('overview')

  return (
    <AdminLayout
      title="Developer Documentation"
      description="API Reference, Architektur und Service-Dokumentation"
    >
      <TabNavigation activeTab={activeTab} onTabChange={setActiveTab} />

      {activeTab === 'overview' && <OverviewTab />}
      {activeTab === 'services' && <ServicesTab />}
      {activeTab === 'api' && <ApiReferenceTab />}
      {activeTab === 'docker' && <DockerTab />}
      {activeTab === 'testing' && <TestingTab />}
    </AdminLayout>
  )
}