'use client'

/**
 * Build Pipeline Wizard
 *
 * Interactive guide for learning about the multi-platform
 * build and deployment process for Breakpilot Drive
 */

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, EducationCard, Sidebar } from './_components/WizardComponents'
import { PlatformCards, WorkflowDiagram, SecretsChecklist } from './_components/StepContent'

export default function BuildPipelineWizardPage() {
  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="Build Pipeline Wizard"
      description="Lerne die Multi-Platform Build Pipeline 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 === 'platforms' && <PlatformCards />}
          {currentStep === 'github-actions' && <WorkflowDiagram />}
          {currentStep === 'deployment' && <SecretsChecklist />}

          {/* 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-green-600 text-white hover:bg-green-700 disabled:opacity-50 disabled:cursor-not-allowed"
            >
              {currentStepIndex === STEPS.length - 1 ? 'Fertig' : 'Weiter'}
            </button>
          </div>
        </div>

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