'use client'

/**
 * Magic Help Admin Page
 *
 * Comprehensive admin interface for TrOCR Handwriting Recognition and Exam Correction.
 * Features:
 * - Model status monitoring
 * - OCR testing with image upload
 * - Training data management
 * - Fine-tuning controls
 * - Architecture documentation
 * - Configuration settings
 */

import AdminLayout from '@/components/admin/AdminLayout'
import { TABS } from './_components/types'
import { useMagicHelp } from './_components/useMagicHelp'
import OverviewTab from './_components/OverviewTab'
import OcrTestTab from './_components/OcrTestTab'
import TrainingTab from './_components/TrainingTab'
import ArchitectureTab from './_components/ArchitectureTab'
import SettingsTab from './_components/SettingsTab'

export default function MagicHelpPage() {
  const {
    activeTab,
    setActiveTab,
    status,
    loading,
    ocrResult,
    ocrLoading,
    examples,
    trainingImage,
    setTrainingImage,
    trainingText,
    setTrainingText,
    fineTuning,
    settings,
    setSettings,
    settingsSaved,
    fetchStatus,
    handleFileUpload,
    handleAddTrainingExample,
    handleFineTune,
    saveSettings,
    getStatusBadge,
  } = useMagicHelp()

  return (
    <AdminLayout>
      <div className="space-y-6">
        {/* Header */}
        <div className="flex items-center justify-between">
          <div>
            <h1 className="text-2xl font-bold text-white flex items-center gap-2">
              <span className="text-2xl">✨</span>
              Magic Help - Handschrifterkennung
            </h1>
            <p className="text-gray-400 mt-1">
              KI-gestützte Klausurkorrektur mit TrOCR und Privacy-by-Design
            </p>
          </div>
          {getStatusBadge()}
        </div>

        {/* Tabs */}
        <div className="flex gap-2 border-b border-gray-700 pb-2">
          {TABS.map((tab) => (
            <button
              key={tab.id}
              onClick={() => setActiveTab(tab.id)}
              className={`px-4 py-2 rounded-t-lg text-sm font-medium transition-colors ${
                activeTab === tab.id
                  ? 'bg-gray-800 text-white border-b-2 border-blue-500'
                  : 'text-gray-400 hover:text-white hover:bg-gray-800/50'
              }`}
            >
              <span className="mr-2">{tab.icon}</span>
              {tab.label}
            </button>
          ))}
        </div>

        {/* Tab Content */}
        {activeTab === 'overview' && (
          <OverviewTab status={status} loading={loading} fetchStatus={fetchStatus} />
        )}

        {activeTab === 'test' && (
          <OcrTestTab ocrResult={ocrResult} ocrLoading={ocrLoading} handleFileUpload={handleFileUpload} />
        )}

        {activeTab === 'training' && (
          <TrainingTab
            status={status}
            examples={examples}
            trainingImage={trainingImage}
            setTrainingImage={setTrainingImage}
            trainingText={trainingText}
            setTrainingText={setTrainingText}
            fineTuning={fineTuning}
            settings={settings}
            handleAddTrainingExample={handleAddTrainingExample}
            handleFineTune={handleFineTune}
          />
        )}

        {activeTab === 'architecture' && <ArchitectureTab />}

        {activeTab === 'settings' && (
          <SettingsTab
            settings={settings}
            setSettings={setSettings}
            settingsSaved={settingsSaved}
            saveSettings={saveSettings}
          />
        )}
      </div>
    </AdminLayout>
  )
}