'use client'

/**
 * Multiplayer Feature Wizard
 *
 * Interactive guide for learning about and testing
 * Breakpilot Drive multiplayer features (Matrix Chat & Jitsi Video)
 */

import { useState } from 'react'
import Link from 'next/link'
import AdminLayout from '@/components/admin/AdminLayout'
import { STEPS, EDUCATION_CONTENT, WizardStep } from './_components/types'
import { WizardStepper } from './_components/WizardStepper'
import { EducationCard } from './_components/EducationCard'
import { GameModeDemo, ServiceStatusDemo, CodePreview } from './_components/StepContent'
import { Sidebar } from './_components/Sidebar'
import { CODE_EXAMPLES } from './_components/codeExamples'

export default function MultiplayerWizardPage() {
  const [currentStep, setCurrentStep] = useState<WizardStep>('welcome')
  const currentStepIndex = STEPS.findIndex(s => s.id === currentStep)
  const education = EDUCATION_CONTENT[currentStep]

  const goToNext = () => {
    const nextIndex = currentStepIndex + 1
    if (nextIndex < STEPS.length) {
      setCurrentStep(STEPS[nextIndex].id)
    }
  }

  const goToPrevious = () => {
    const prevIndex = currentStepIndex - 1
    if (prevIndex >= 0) {
      setCurrentStep(STEPS[prevIndex].id)
    }
  }

  return (
    <AdminLayout
      title="Multiplayer Wizard"
      description="Lerne die Multiplayer-Features von Breakpilot Drive kennen"
    >
      {/* Back Link */}
      <div className="mb-6">
        <Link
          href="/admin/game"
          className="inline-flex items-center gap-2 text-gray-600 hover:text-gray-900"
        >
          <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
          </svg>
          Zurueck zum Game Dashboard
        </Link>
      </div>

      {/* Stepper */}
      <div className="mb-8">
        <WizardStepper
          steps={STEPS}
          currentStep={currentStep}
          onStepClick={setCurrentStep}
        />
      </div>

      {/* Content */}
      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
        {/* Main Content */}
        <div className="lg:col-span-2">
          <EducationCard
            title={education.title}
            content={education.content}
            tips={education.tips}
          />

          {/* Step-specific content */}
          {currentStep === 'game-modes' && <GameModeDemo />}
          {currentStep === 'demo' && <ServiceStatusDemo />}
          {currentStep === 'matrix-chat' && (
            <CodePreview {...CODE_EXAMPLES.matrixChat} />
          )}
          {currentStep === 'jitsi-video' && (
            <CodePreview {...CODE_EXAMPLES.jitsiVideo} />
          )}
          {currentStep === 'unity-integration' && (
            <CodePreview {...CODE_EXAMPLES.unityIntegration} />
          )}

          {/* Navigation */}
          <div className="flex justify-between mt-8">
            <button
              onClick={goToPrevious}
              disabled={currentStepIndex === 0}
              className="px-6 py-3 rounded-lg font-medium bg-gray-100 text-gray-700 hover:bg-gray-200 disabled:opacity-50 disabled:cursor-not-allowed"
            >
              Zurueck
            </button>
            <button
              onClick={goToNext}
              disabled={currentStepIndex === STEPS.length - 1}
              className="px-6 py-3 rounded-lg font-medium bg-indigo-600 text-white hover:bg-indigo-700 disabled:opacity-50 disabled:cursor-not-allowed"
            >
              {currentStepIndex === STEPS.length - 1 ? 'Fertig' : 'Weiter'}
            </button>
          </div>
        </div>

        {/* Sidebar */}
        <Sidebar currentStepIndex={currentStepIndex} />
      </div>
    </AdminLayout>
  )
}