"use client"

import { useState, useCallback } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Progress } from "@/components/ui/progress"
import { Badge } from "@/components/ui/badge"
import { Database, Settings, Brain, Sparkles, ChevronRight, Play, BookOpen } from "lucide-react"
import DataCollectionStep from "@/components/data-collection-step"
import DataPreprocessingStep from "@/components/data-preprocessing-step"
import ModelTrainingStep from "@/components/model-training-step"
import ImageGenerationStep from "@/components/image-generation-step"

const steps = [
  {
    id: 1,
    title: "数据采集",
    description: "选择图像作为AI的学习材料",
    icon: Database,
    color: "bg-chart-1",
    details: "学习如何为AI模型收集和准备训练数据",
  },
  {
    id: 2,
    title: "数据预处理",
    description: "对图像进行清洗和标准化处理",
    icon: Settings,
    color: "bg-chart-2",
    details: "了解数据预处理在AI训练中的重要作用",
  },
  {
    id: 3,
    title: "模型训练",
    description: "模拟AI学习图像特征的过程",
    icon: Brain,
    color: "bg-chart-3",
    details: "观察AI如何从数据中学习和提取特征",
  },
  {
    id: 4,
    title: "图像生成",
    description: "输入提示词生成新的艺术作品",
    icon: Sparkles,
    color: "bg-chart-4",
    details: "体验AI根据学习内容创作新图像的过程",
  },
]

export default function HomePage() {
  const [currentStep, setCurrentStep] = useState(0)
  const [isStarted, setIsStarted] = useState(false)
  const [selectedImages, setSelectedImages] = useState<string[]>([])

  const handleStartLearning = () => {
    setIsStarted(true)
    setCurrentStep(1)
  }

  const handleStepClick = (stepId: number) => {
    if (isStarted) {
      setCurrentStep(stepId)
    }
  }

  const handleImagesChange = useCallback((images: string[]) => {
    setSelectedImages(images)
  }, [])

  const renderStepContent = () => {
    switch (currentStep) {
      case 1:
        return (
          <DataCollectionStep
            onNext={() => setCurrentStep(2)}
            selectedImages={selectedImages}
            onImagesChange={handleImagesChange}
          />
        )
      case 2:
        return <DataPreprocessingStep onNext={() => setCurrentStep(3)} selectedImages={selectedImages} />
      case 3:
        return <ModelTrainingStep onNext={() => setCurrentStep(4)} />
      case 4:
        return <ImageGenerationStep selectedImages={selectedImages} />
      default:
        return null
    }
  }

  return (
    <div className="min-h-screen bg-background">
      {/* Header */}
      <header className="border-b border-border bg-card">
        <div className="container mx-auto px-4 py-6">
          <div className="flex items-center justify-between">
            <div>
              <h1 className="text-3xl font-bold font-serif text-primary">AI绘画教学平台</h1>
              <p className="text-muted-foreground mt-2">探索人工智能绘画的奥秘</p>
            </div>
            <Badge variant="secondary" className="text-sm">
              <BookOpen className="w-4 h-4 mr-1" />
              教育版
            </Badge>
          </div>
        </div>
      </header>

      <div className="flex">
        {/* Sidebar Navigation */}
        <aside className="w-80 bg-sidebar border-r border-sidebar-border min-h-screen">
          <div className="p-6">
            <div className="mb-6">
              <h2 className="text-lg font-semibold font-serif mb-2">学习进度</h2>
              <Progress value={(currentStep / steps.length) * 100} className="h-2" />
              <p className="text-sm text-muted-foreground mt-2">
                {currentStep > 0 ? `第 ${currentStep} 步，共 ${steps.length} 步` : "准备开始学习"}
              </p>
            </div>

            <nav className="space-y-2">
              {steps.map((step) => {
                const Icon = step.icon
                const isActive = currentStep === step.id
                const isCompleted = currentStep > step.id
                const isAccessible = isStarted && step.id <= currentStep + 1

                return (
                  <button
                    key={step.id}
                    onClick={() => handleStepClick(step.id)}
                    disabled={!isAccessible}
                    className={`w-full text-left p-4 rounded-lg border transition-all duration-200 ${
                      isActive
                        ? "bg-sidebar-primary text-sidebar-primary-foreground border-sidebar-primary"
                        : isCompleted
                          ? "bg-sidebar-accent text-sidebar-accent-foreground border-sidebar-accent"
                          : isAccessible
                            ? "bg-sidebar hover:bg-sidebar-accent border-sidebar-border hover:border-sidebar-accent"
                            : "bg-muted text-muted-foreground border-border opacity-50 cursor-not-allowed"
                    }`}
                  >
                    <div className="flex items-center gap-3">
                      <div className={`p-2 rounded-md ${isActive || isCompleted ? "bg-white/20" : "bg-primary/10"}`}>
                        <Icon className="w-5 h-5" />
                      </div>
                      <div>
                        <h3 className="font-semibold text-sm">{step.title}</h3>
                        <p className="text-xs opacity-80 mt-1">{step.description}</p>
                      </div>
                      {isAccessible && <ChevronRight className="w-4 h-4 opacity-60" />}
                    </div>
                  </button>
                )
              })}
            </nav>
          </div>
        </aside>

        {/* Main Content */}
        <main className="flex-1 p-8">
          {!isStarted ? (
            // Welcome Screen
            <div className="max-w-4xl mx-auto">
              <div className="text-center mb-12">
                <h2 className="text-4xl font-bold font-serif text-foreground mb-4">欢迎来到AI绘画世界</h2>
                <p className="text-xl text-muted-foreground max-w-2xl mx-auto leading-relaxed">
                  通过这个交互式学习平台，你将深入了解AI绘画的完整流程，
                  从数据采集到最终的艺术创作，每一步都有详细的解释和实践操作。
                </p>
              </div>

              <div className="grid md:grid-cols-2 gap-6 mb-12">
                {steps.map((step) => {
                  const Icon = step.icon
                  return (
                    <Card key={step.id} className="hover:shadow-lg transition-shadow">
                      <CardHeader>
                        <div className="flex items-center gap-3">
                          <div className={`p-3 rounded-lg ${step.color} text-white`}>
                            <Icon className="w-6 h-6" />
                          </div>
                          <div>
                            <CardTitle className="font-serif">{step.title}</CardTitle>
                            <CardDescription>{step.description}</CardDescription>
                          </div>
                        </div>
                      </CardHeader>
                      <CardContent>
                        <p className="text-sm text-muted-foreground">{step.details}</p>
                      </CardContent>
                    </Card>
                  )
                })}
              </div>

              <div className="text-center">
                <Button onClick={handleStartLearning} size="lg" className="text-lg px-8 py-6 font-semibold">
                  <Play className="w-5 h-5 mr-2" />
                  开始学习之旅
                </Button>
                <p className="text-sm text-muted-foreground mt-4">预计学习时间：30-45分钟</p>
              </div>
            </div>
          ) : (
            // Step Content Area
            <div className="max-w-4xl mx-auto">
              <div className="mb-8">
                <div className="flex items-center gap-3 mb-4">
                  <Badge variant="outline">第 {currentStep} 步</Badge>
                  <h2 className="text-3xl font-bold font-serif">{steps[currentStep - 1].title}</h2>
                </div>
                <p className="text-lg text-muted-foreground">{steps[currentStep - 1].details}</p>
              </div>

              {renderStepContent()}
            </div>
          )}
        </main>
      </div>
    </div>
  )
}