'use client'

import { useTestWizard } from './_components/useTestWizard'
import { WizardStepper } from './_components/WizardStepper'
import { EducationCard, TestResultCard, TestSummaryCard } from './_components/TestCards'

export default function TestWizardPage() {
  const {
    currentStep,
    steps,
    currentStepData,
    categoryResults,
    fullResults,
    isLoading,
    error,
    isTestStep,
    isWelcome,
    isSummary,
    runCategoryTest,
    runAllTests,
    goToNext,
    goToPrev,
    handleStepClick,
  } = useTestWizard()

  return (
    <div className="min-h-screen bg-gray-100 py-8">
      <div className="max-w-4xl mx-auto px-4">
        {/* Header */}
        <div className="bg-white rounded-lg shadow-lg p-6 mb-6">
          <div className="flex items-center justify-between">
            <div>
              <h1 className="text-2xl font-bold text-gray-800">🧪 UI Test Wizard</h1>
              <p className="text-gray-600 mt-1">
                Interaktives Middleware-Testing mit Lernmaterial
              </p>
            </div>
            <a
              href="/admin/middleware"
              className="text-blue-600 hover:text-blue-800 text-sm"
            >
              ← Zurueck zur Middleware-Konfiguration
            </a>
          </div>
        </div>

        {/* Stepper */}
        <div className="bg-white rounded-lg shadow-lg p-6 mb-6">
          <WizardStepper
            steps={steps}
            currentStep={currentStep}
            onStepClick={handleStepClick}
          />
        </div>

        {/* Content */}
        <div className="bg-white rounded-lg shadow-lg p-6">
          {/* Step Header */}
          <div className="flex items-center mb-6">
            <span className="text-3xl mr-3">{currentStepData?.icon}</span>
            <div>
              <h2 className="text-xl font-bold text-gray-800">
                Schritt {currentStep + 1}: {currentStepData?.name}
              </h2>
              <p className="text-gray-500 text-sm">
                {currentStep + 1} von {steps.length}
              </p>
            </div>
          </div>

          {/* Education Card */}
          <EducationCard stepId={currentStepData?.id || ''} />

          {/* Error Display */}
          {error && (
            <div className="bg-red-50 border border-red-200 text-red-700 rounded-lg p-4 mb-6">
              <strong>Fehler:</strong> {error}
            </div>
          )}

          {/* Welcome Step */}
          {isWelcome && (
            <div className="text-center py-8">
              <button
                onClick={goToNext}
                className="bg-blue-600 text-white px-8 py-3 rounded-lg font-medium hover:bg-blue-700 transition-colors"
              >
                🚀 Starten
              </button>
            </div>
          )}

          {/* Test Steps */}
          {isTestStep && currentStepData?.category && (
            <div>
              {/* Run Test Button */}
              {!categoryResults[currentStepData.category] && (
                <div className="text-center py-6">
                  <button
                    onClick={() => runCategoryTest(currentStepData.category!)}
                    disabled={isLoading}
                    className={`px-6 py-3 rounded-lg font-medium transition-colors ${
                      isLoading
                        ? 'bg-gray-400 cursor-not-allowed'
                        : 'bg-green-600 text-white hover:bg-green-700'
                    }`}
                  >
                    {isLoading ? '⏳ Tests laufen...' : '▶️ Tests ausfuehren'}
                  </button>
                </div>
              )}

              {/* Test Results */}
              {categoryResults[currentStepData.category] && (
                <div>
                  <div className="flex items-center justify-between mb-4">
                    <h3 className="font-semibold text-gray-700">Testergebnisse</h3>
                    <button
                      onClick={() => runCategoryTest(currentStepData.category!)}
                      disabled={isLoading}
                      className="text-sm text-blue-600 hover:text-blue-800"
                    >
                      🔄 Erneut ausfuehren
                    </button>
                  </div>
                  {categoryResults[currentStepData.category].tests.map((test, index) => (
                    <TestResultCard key={index} result={test} />
                  ))}
                </div>
              )}
            </div>
          )}

          {/* Summary Step */}
          {isSummary && (
            <div>
              {!fullResults ? (
                <div className="text-center py-8">
                  <p className="text-gray-600 mb-4">
                    Fuehren Sie alle Tests aus um eine Zusammenfassung zu sehen.
                  </p>
                  <button
                    onClick={runAllTests}
                    disabled={isLoading}
                    className={`px-6 py-3 rounded-lg font-medium transition-colors ${
                      isLoading
                        ? 'bg-gray-400 cursor-not-allowed'
                        : 'bg-blue-600 text-white hover:bg-blue-700'
                    }`}
                  >
                    {isLoading ? '⏳ Alle Tests laufen...' : '🔬 Alle Tests ausfuehren'}
                  </button>
                </div>
              ) : (
                <TestSummaryCard results={fullResults} />
              )}
            </div>
          )}

          {/* Navigation */}
          <div className="flex justify-between mt-8 pt-6 border-t">
            <button
              onClick={goToPrev}
              disabled={currentStep === 0}
              className={`px-6 py-2 rounded-lg transition-colors ${
                currentStep === 0
                  ? 'bg-gray-200 text-gray-400 cursor-not-allowed'
                  : 'bg-gray-200 text-gray-700 hover:bg-gray-300'
              }`}
            >
              ← Zurueck
            </button>

            {!isSummary && (
              <button
                onClick={goToNext}
                className="bg-blue-600 text-white px-6 py-2 rounded-lg hover:bg-blue-700 transition-colors"
              >
                Weiter →
              </button>
            )}
          </div>
        </div>

        {/* Footer Info */}
        <div className="text-center text-gray-500 text-sm mt-6">
          Diese Tests pruefen die Middleware-Konfiguration Ihrer Anwendung.
          Bei Fragen wenden Sie sich an den Administrator.
        </div>
      </div>
    </div>
  )
}