'use client'

import { useState } from 'react'
import { Tab } from './_types'
import { SourcesTab } from './_components/SourcesTab'
import { JobsTab } from './_components/JobsTab'
import { DocumentsTab } from './_components/DocumentsTab'
import { ReportTab } from './_components/ReportTab'

export default function DocumentCrawlerPage() {
  const [activeTab, setActiveTab] = useState<Tab>('sources')

  const tabs: { id: Tab; label: string }[] = [
    { id: 'sources', label: 'Quellen' },
    { id: 'jobs', label: 'Crawl-Jobs' },
    { id: 'documents', label: 'Dokumente' },
    { id: 'report', label: 'Onboarding-Report' },
  ]

  return (
    <div className="max-w-6xl mx-auto space-y-6">
      {/* Header */}
      <div>
        <h1 className="text-2xl font-bold text-gray-900">Document Crawler & Auto-Onboarding</h1>
        <p className="mt-1 text-gray-500">
          Automatisches Scannen von Dateisystemen, KI-Klassifizierung, IPFS-Archivierung und Compliance Gap-Analyse.
        </p>
      </div>

      {/* Tabs */}
      <div className="border-b border-gray-200">
        <nav className="flex gap-6">
          {tabs.map(tab => (
            <button
              key={tab.id}
              onClick={() => setActiveTab(tab.id)}
              className={`pb-3 text-sm font-medium border-b-2 transition-colors ${
                activeTab === tab.id
                  ? 'border-purple-600 text-purple-600'
                  : 'border-transparent text-gray-500 hover:text-gray-700'
              }`}
            >
              {tab.label}
            </button>
          ))}
        </nav>
      </div>

      {/* Tab content */}
      {activeTab === 'sources' && <SourcesTab />}
      {activeTab === 'jobs' && <JobsTab />}
      {activeTab === 'documents' && <DocumentsTab />}
      {activeTab === 'report' && <ReportTab />}
    </div>
  )
}