"use client"

import { useState, useEffect } from "react"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { ArrowRight, Plus, Globe, BarChart3, Zap, Code, Search, Star, Clock, Users, Layers, AlertCircle, Edit, Trash2 } from "lucide-react"
import { useTemplates } from "@/hooks/useTemplates"
import { CustomTemplateForm } from "@/components/custom-template-form"
import { EditTemplateForm } from "@/components/edit-template-form"
import { DeleteConfirmationDialog } from "@/components/delete-confirmation-dialog"
import { DatabaseTemplate, TemplateFeature } from "@/lib/template-service"

interface Template {
  id: string
  title: string
  description: string
  category: string
  features: string[]
  complexity: number
  timeEstimate: string
  techStack: string[]
  popularity?: number
  lastUpdated?: string
  type?: string
  icon?: string | null
  gradient?: string | null
  border?: string | null
  text?: string | null
  subtext?: string | null
  is_active?: boolean
  created_at?: string
  updated_at?: string
}

function TemplateSelectionStep({ onNext }: { onNext: (template: Template) => void }) {
  const [selectedCategory, setSelectedCategory] = useState("all")
  const [searchQuery, setSearchQuery] = useState("")
  const [showCustomForm, setShowCustomForm] = useState(false)
  const [editingTemplate, setEditingTemplate] = useState<DatabaseTemplate | null>(null)
  const [deletingTemplate, setDeletingTemplate] = useState<DatabaseTemplate | null>(null)
  const [deleteLoading, setDeleteLoading] = useState(false)
  
  const { templates: dbTemplates, loading, error, getTemplatesForUI, createTemplate, updateTemplate, deleteTemplate } = useTemplates()
  
  // Get templates from database and convert to UI format
  const databaseTemplates = getTemplatesForUI()
  
  // Fallback static templates if database is empty or loading
  const fallbackTemplates: Template[] = [
    { id: "marketing-website", title: "Marketing Website", description: "Professional marketing site with CMS and lead generation", category: "Marketing", features: ["Content Management", "Contact Forms", "SEO Optimization", "Analytics Integration"], complexity: 2, timeEstimate: "1-2 weeks", techStack: ["Next.js", "Sanity CMS", "Tailwind CSS", "Vercel"], popularity: 95, lastUpdated: "2024-01-15" },
    { id: "saas-platform", title: "SaaS Platform", description: "Complete SaaS application with user management, billing, and analytics", category: "SaaS Platform", features: ["User Authentication", "Payment Processing", "Analytics Integration", "API Management"], complexity: 5, timeEstimate: "4-6 weeks", techStack: ["Next.js", "PostgreSQL", "Stripe", "NextAuth.js"], popularity: 92, lastUpdated: "2024-01-15" },
  ]
  
  // Use database templates if available, otherwise fallback
  const templates: Template[] = databaseTemplates.length > 0 ? databaseTemplates : fallbackTemplates

  // Generate dynamic categories from templates
  const getCategories = () => {
    const categoryMap = new Map<string, { name: string; icon: any; count: number }>()
    
    // Add "All Templates" category
    categoryMap.set("all", { name: "All Templates", icon: Globe, count: templates.length })
    
    // Add categories from templates
    templates.forEach(template => {
      if (!categoryMap.has(template.category)) {
        // Choose icon based on category name
        let icon = Code // default
        if (template.category.toLowerCase().includes('marketing') || template.category.toLowerCase().includes('branding')) {
          icon = Zap
        } else if (template.category.toLowerCase().includes('seo') || template.category.toLowerCase().includes('content')) {
          icon = BarChart3
        } else if (template.category.toLowerCase().includes('food') || template.category.toLowerCase().includes('delivery')) {
          icon = Users
        }
        
        categoryMap.set(template.category, { 
          name: template.category, 
          icon, 
          count: templates.filter(t => t.category === template.category).length 
        })
      }
    })
    
    return Array.from(categoryMap.entries()).map(([id, data]) => ({
      id,
      ...data
    }))
  }
  
  const categories = getCategories()

  const filteredTemplates = templates.filter((template) => {
    const matchesCategory = selectedCategory === "all" || template.category === selectedCategory
    const matchesSearch =
      template.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
      template.description.toLowerCase().includes(searchQuery.toLowerCase()) ||
      template.features.some((feature) => feature.toLowerCase().includes(searchQuery.toLowerCase()))
    return matchesCategory && matchesSearch
  })

  const getComplexityColor = (complexity: number) => {
    if (complexity <= 2) return "bg-emerald-900/40 text-emerald-300 border border-emerald-800"
    if (complexity <= 3) return "bg-amber-900/40 text-amber-300 border border-amber-800"
    return "bg-rose-900/40 text-rose-300 border border-rose-800"
  }

  const getComplexityLabel = (complexity: number) => {
    if (complexity <= 2) return "Simple"
    if (complexity <= 3) return "Moderate"
    return "Complex"
  }

  const handleCreateTemplate = async (templateData: Partial<DatabaseTemplate>) => {
    try {
      await createTemplate(templateData)
      setShowCustomForm(false)
    } catch (error) {
      console.error('Error creating template:', error)
    }
  }

  const handleUpdateTemplate = async (id: string, templateData: Partial<DatabaseTemplate>) => {
    try {
      await updateTemplate(id, templateData)
      setEditingTemplate(null)
    } catch (error) {
      console.error('Error updating template:', error)
    }
  }

  const handleDeleteTemplate = async () => {
    if (!deletingTemplate) return
    
    setDeleteLoading(true)
    try {
      await deleteTemplate(deletingTemplate.id)
      setDeletingTemplate(null)
    } catch (error) {
      console.error('Error deleting template:', error)
    } finally {
      setDeleteLoading(false)
    }
  }

  // Show loading state
  if (loading) {
    return (
      <div className="max-w-7xl mx-auto space-y-6">
        <div className="text-center space-y-3">
          <h1 className="text-4xl font-bold text-white">Loading Templates...</h1>
          <p className="text-xl text-white/60">Fetching templates from database</p>
        </div>
        <div className="flex justify-center">
          <div className="animate-spin rounded-full h-32 w-32 border-b-2 border-orange-500"></div>
        </div>
      </div>
    )
  }

  // Show error state
  if (error) {
    return (
      <div className="max-w-7xl mx-auto space-y-6">
        <div className="text-center space-y-3">
          <div className="flex items-center justify-center space-x-2 text-red-400">
            <AlertCircle className="h-6 w-6" />
            <h1 className="text-2xl font-bold">Error Loading Templates</h1>
          </div>
          <p className="text-white/60">{error}</p>
          <Button onClick={() => window.location.reload()} className="bg-orange-500 hover:bg-orange-400 text-black">
            Retry
          </Button>
        </div>
      </div>
    )
  }

  // Show custom template form
  if (showCustomForm) {
    return (
      <div className="max-w-4xl mx-auto space-y-6">
        <div className="text-center space-y-3">
          <h1 className="text-4xl font-bold text-white">Create Custom Template</h1>
          <p className="text-xl text-white/60">Design your own project template</p>
        </div>
        <CustomTemplateForm 
          onSubmit={handleCreateTemplate}
          onCancel={() => setShowCustomForm(false)}
        />
      </div>
    )
  }

  // Show edit template form
  if (editingTemplate) {
    return (
      <div className="max-w-4xl mx-auto space-y-6">
        <div className="text-center space-y-3">
          <h1 className="text-4xl font-bold text-white">Edit Template</h1>
          <p className="text-xl text-white/60">Modify your template settings</p>
        </div>
        <EditTemplateForm 
          template={editingTemplate}
          onSubmit={handleUpdateTemplate}
          onCancel={() => setEditingTemplate(null)}
        />
      </div>
    )
  }

  // Show delete confirmation dialog
  if (deletingTemplate) {
    return (
      <>
        <div className="max-w-7xl mx-auto space-y-6">
          {/* Header */}
          <div className="text-center space-y-3">
            <h1 className="text-4xl font-bold text-white">Choose Your Project Template</h1>
            <p className="text-xl text-white/60 max-w-3xl mx-auto">
              Select from our comprehensive library of professionally designed templates
            </p>
          </div>
        </div>
        <DeleteConfirmationDialog
          templateTitle={deletingTemplate.title}
          onConfirm={handleDeleteTemplate}
          onCancel={() => setDeletingTemplate(null)}
          loading={deleteLoading}
        />
      </>
    )
  }

  return (
    <div className="max-w-7xl mx-auto space-y-6">
      {/* Header */}
      <div className="text-center space-y-3">
        <h1 className="text-4xl font-bold text-white">Choose Your Project Template</h1>
        <p className="text-xl text-white/60 max-w-3xl mx-auto">
          Select from our comprehensive library of professionally designed templates
        </p>
      </div>

      {/* Search and Filter */}
      <div className="space-y-4">
        <div className="max-w-2xl mx-auto relative">
          <Search className="absolute left-3 top-1/2 -translate-y-1/2 text-white/40 h-5 w-5" />
          <Input
            placeholder="Search templates, features, or technologies..."
            value={searchQuery}
            onChange={(e) => setSearchQuery(e.target.value)}
            className="pl-10 h-12 text-lg border border-white/10 bg-white/5 text-white placeholder:text-white/40 focus:border-white/30 focus:ring-white/30 rounded-xl"
          />
        </div>

        {/* Category Filters */}
        <div className="flex flex-wrap justify-center gap-3">
          {categories.map((category) => {
            const Icon = category.icon
            const active = selectedCategory === category.id
            return (
              <button
                key={category.id}
                onClick={() => setSelectedCategory(category.id)}
                className={`flex items-center space-x-3 px-6 py-3 rounded-xl border transition-all cursor-pointer ${
                  active
                    ? "bg-orange-500 text-black border-orange-500"
                    : "bg-white/5 text-white/80 border-white/10 hover:bg-white/10"
                }`}
              >
                <div className={`p-2 rounded-lg ${active ? "bg-white/10" : "bg-white/10"}`}>
                  <Icon className="h-5 w-5" />
                </div>
                <div className="text-left">
                  <div className="font-semibold">{category.name}</div>
                  <div className={`text-sm ${active ? "text-black/80" : "text-white/60"}`}>
                    {category.count} templates
                  </div>
                </div>
              </button>
            )
          })}
        </div>
      </div>

      {/* Templates Grid */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        {filteredTemplates.map((template) => (
          <Card key={template.id} className="group bg-white/5 border-white/10 hover:border-white/20 rounded-xl shadow-sm hover:shadow-md transition-all">
            <div className="bg-white/5 px-4 py-4 border-b border-white/10">
              <div className="flex items-start justify-between mb-2">
                <div className="space-y-2 flex-1">
                  <CardTitle className="text-xl font-bold text-white group-hover:text-orange-400 transition-colors line-clamp-2">
                    {template.title}
                  </CardTitle>
                  <div className="flex items-center space-x-2">
                    <Badge className={`${getComplexityColor(template.complexity)} font-medium px-3 py-1 rounded-full`}>{getComplexityLabel(template.complexity)}</Badge>
                    {template.popularity && (
                      <div className="flex items-center space-x-1 bg-white/10 px-2 py-1 rounded-full text-white/80">
                        <Star className="h-4 w-4 text-amber-400 fill-current" />
                        <span className="text-sm font-semibold">{template.popularity}%</span>
                      </div>
                    )}
                  </div>
                </div>
                {/* Edit and Delete buttons - only show for database templates */}
                {template.id && template.id !== "marketing-website" && template.id !== "saas-platform" && (
                  <div className="flex items-center space-x-1 ml-2">
                    <Button
                      size="sm"
                      variant="ghost"
                      onClick={(e) => {
                        e.stopPropagation()
                        setEditingTemplate(template as DatabaseTemplate)
                      }}
                      className="h-8 w-8 p-0 text-white/60 hover:text-white hover:bg-white/10 cursor-pointer"
                    >
                      <Edit className="h-4 w-4" />
                    </Button>
                    <Button
                      size="sm"
                      variant="ghost"
                      onClick={(e) => {
                        e.stopPropagation()
                        setDeletingTemplate(template as DatabaseTemplate)
                      }}
                      className="h-8 w-8 p-0 text-white/60 hover:text-red-400 hover:bg-red-400/10 cursor-pointer"
                    >
                      <Trash2 className="h-4 w-4" />
                    </Button>
                  </div>
                )}
              </div>
              <p className="text-white/80 text-sm leading-relaxed">{template.description}</p>
            </div>

            <CardContent className="p-4 flex flex-col h-full text-white/80">
              <div className="flex-1 space-y-4">
                <div className="flex items-center justify-between text-sm bg-white/5 px-3 py-2 rounded-lg">
                  <div className="flex items-center space-x-2">
                    <Clock className="h-4 w-4 text-orange-400" />
                    <span className="font-medium">{template.timeEstimate}</span>
                  </div>
                  <div className="flex items-center space-x-2">
                    <Layers className="h-4 w-4 text-emerald-400" />
                    <span className="font-medium">{(template as any).featureCount ?? template.features.length} features</span>
                  </div>
                </div>

                <div className="space-y-2">
                  <div>
                    <h4 className="font-semibold text-sm text-white mb-1 flex items-center">
                      <span className="w-2 h-2 bg-orange-500 rounded-full mr-2"></span>
                      Key Features
                    </h4>
                    <div className="flex flex-wrap gap-1">
                      {template.features.slice(0, 3).map((feature, index) => (
                        <Badge key={index} variant="outline" className="text-xs bg-white/5 border-white/10 text-white/80 px-3 py-2 rounded-full">
                          {feature}
                        </Badge>
                      ))}
                      {template.features.length > 3 && (
                        <Badge variant="outline" className="text-xs bg-white/5 border-white/10 text-white/70 px-3 py-2 rounded-full">
                          +{template.features.length - 3} more
                        </Badge>
                      )}
                    </div>
                  </div>

                  <div>
                    <h4 className="font-semibold text-sm text-white mb-1 flex items-center">
                      <span className="w-2 h-2 bg-emerald-500 rounded-full mr-2"></span>
                      Tech Stack
                    </h4>
                    <div className="flex flex-wrap gap-1">
                      {template.techStack.slice(0, 3).map((tech, index) => (
                        <Badge key={index} variant="secondary" className="text-xs bg-white/10 text-white px-3 py-1 rounded-full font-medium">
                          {tech}
                        </Badge>
                      ))}
                      {template.techStack.length > 3 && (
                        <Badge variant="secondary" className="text-xs bg-white/10 text-white px-3 py-1 rounded-full">
                          +{template.techStack.length - 3}
                        </Badge>
                      )}
                    </div>
                  </div>
                </div>
              </div>

              <div className="mt-4">
                <Button onClick={() => onNext(template)} className="w-full bg-orange-500 hover:bg-orange-400 text-black font-semibold py-2 rounded-lg shadow">
                  <span className="flex items-center justify-center cursor-pointer">
                    Select Template
                    <ArrowRight className="ml-2 h-4 w-4" />
                  </span>
                </Button>
              </div>
            </CardContent>
          </Card>
        ))}
      </div>

      {/* Custom Template Option */}
      <Card className="group border-dashed border-2 border-white/15 bg-white/5 hover:border-white/25 transition-all cursor-pointer" onClick={() => setShowCustomForm(true)}>
        <CardContent className="text-center py-16 px-8 text-white/80">
          <div className="w-20 h-20 bg-white/10 rounded-full flex items-center justify-center mx-auto mb-6">
            <Plus className="h-10 w-10 text-orange-400" />
          </div>
          <h3 className="text-2xl font-bold text-white mb-3">Create Custom Template</h3>
          <p className="mb-8 max-w-md mx-auto text-lg leading-relaxed">
            Don&apos;t see what you need? Create a custom project type with your specific requirements and tech stack.
          </p>
          <Button variant="outline" className="border-white/20 text-white hover:bg-white/10">
            <Plus className="mr-2 h-5 w-5" />
            Create Custom Template
          </Button>
        </CardContent>
      </Card>

      {/* Results Summary */}
      {searchQuery && (
        <div className="text-center py-4">
          <p className="text-white/70">
            Showing {filteredTemplates.length} template{filteredTemplates.length !== 1 ? "s" : ""}
            {searchQuery && ` matching "${searchQuery}"`}
          </p>
        </div>
      )}
    </div>
  )
}

// Feature Selection Step Component
function FeatureSelectionStep({
  template,
  onNext,
  onBack,
}: { template: Template; onNext: () => void; onBack: () => void }) {
  const { fetchFeatures, createFeature, updateFeature, deleteFeature } = useTemplates()
  const [features, setFeatures] = useState<TemplateFeature[]>([])
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)
  const [newFeature, setNewFeature] = useState({ name: '', description: '', complexity: 'medium' as 'low' | 'medium' | 'high' })

  const load = async () => {
    try {
      setLoading(true)
      const data = await fetchFeatures(template.id)
      setFeatures(data)
    } catch (e) {
      setError(e instanceof Error ? e.message : 'Failed to load features')
    } finally {
      setLoading(false)
    }
  }

  // Initial load
  useEffect(() => { load() }, [template.id])

  const handleAddCustom = async () => {
    if (!newFeature.name.trim()) return
    await createFeature(template.id, {
      name: newFeature.name,
      description: newFeature.description,
      feature_type: 'custom',
      complexity: newFeature.complexity,
      is_default: false,
      created_by_user: true,
    })
    setNewFeature({ name: '', description: '', complexity: 'medium' })
    await load()
  }

  const handleUpdate = async (f: TemplateFeature, updates: Partial<TemplateFeature>) => {
    await updateFeature(f.id, { ...updates, isCustom: f.feature_type === 'custom' })
    await load()
  }

  const handleDelete = async (f: TemplateFeature) => {
    await deleteFeature(f.id, { isCustom: f.feature_type === 'custom' })
    await load()
  }

  const section = (title: string, list: TemplateFeature[]) => (
    <div>
      <h3 className="text-lg font-semibold text-white mb-3">{title} ({list.length})</h3>
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        {list.map((f) => (
          <Card key={f.id} className="bg-white/5 border-white/10">
            <CardHeader className="pb-3">
              <CardTitle className="text-white flex items-center justify-between">
                <span>{f.name}</span>
                {f.feature_type === 'custom' && (
                  <div className="flex gap-2">
                    <Button size="sm" variant="outline" className="border-white/20 text-white hover:bg-white/10" onClick={async () => {
                      const newName = window.prompt('Update feature name', f.name || '')
                      if (newName === null) return
                      const newDesc = window.prompt('Update description', f.description || '')
                      await handleUpdate(f, { name: newName, description: newDesc ?? f.description })
                    }}>Edit</Button>
                    <Button size="sm" variant="outline" className="border-red-500 text-red-300 hover:bg-red-500/10" onClick={() => handleDelete(f)}>Delete</Button>
                  </div>
                )}
              </CardTitle>
            </CardHeader>
            <CardContent className="text-white/80 text-sm space-y-2">
              <p>{f.description || 'No description provided.'}</p>
              <div className="flex gap-2 text-xs">
                <Badge variant="outline" className="bg-white/5 border-white/10">{f.feature_type}</Badge>
                <Badge variant="outline" className="bg-white/5 border-white/10">{f.complexity}</Badge>
                {typeof f.usage_count === 'number' && <Badge variant="outline" className="bg-white/5 border-white/10">used {f.usage_count}</Badge>}
              </div>
            </CardContent>
          </Card>
        ))}
      </div>
    </div>
  )

  if (loading) {
    return <div className="text-center py-20 text-white/60">Loading features...</div>
  }
  if (error) {
    return <div className="text-center py-20 text-red-400">{error}</div>
  }

  const essentials = features.filter(f => f.feature_type === 'essential')
  const suggested = features.filter(f => f.feature_type === 'suggested')
  const custom = features.filter(f => f.feature_type === 'custom')

  return (
    <div className="max-w-7xl mx-auto space-y-8">
      <div className="text-center space-y-4">
        <h1 className="text-4xl font-bold text-white">Select Features for {template.title}</h1>
        <p className="text-xl text-white/60 max-w-3xl mx-auto">Choose defaults or add your own custom features.</p>
      </div>

      {section('Essential Features', essentials)}
      {section('Suggested Features', suggested)}

      {/* Add custom feature */}
      <div className="bg-white/5 border border-white/10 rounded-xl p-4 space-y-3">
        <h3 className="text-white font-semibold">Add Custom Feature</h3>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
          <Input placeholder="Feature name" value={newFeature.name} onChange={(e) => setNewFeature({ ...newFeature, name: e.target.value })} className="bg-white/5 border-white/10 text-white placeholder:text-white/40" />
          <Input placeholder="Description (optional)" value={newFeature.description} onChange={(e) => setNewFeature({ ...newFeature, description: e.target.value })} className="bg-white/5 border-white/10 text-white placeholder:text-white/40" />
          <select value={newFeature.complexity} onChange={(e) => setNewFeature({ ...newFeature, complexity: e.target.value as any })} className="bg-white/5 border-white/10 text-white rounded-md px-3">
            <option value="low">low</option>
            <option value="medium">medium</option>
            <option value="high">high</option>
          </select>
        </div>
        <div className="flex justify-between items-center">
          <div className="text-white/60 text-sm">Custom features are saved to this template.</div>
          <Button onClick={handleAddCustom} className="bg-orange-500 hover:bg-orange-400 text-black">Add Feature</Button>
        </div>
      </div>

      {section('Your Custom Features', custom)}

      <div className="text-center py-4">
        <div className="space-x-4">
          <Button variant="outline" onClick={onBack} className="border-white/20 text-white hover:bg-white/10">Back</Button>
          <Button onClick={onNext} className="bg-orange-500 hover:bg-orange-400 text-black font-semibold py-2 rounded-lg shadow">Continue</Button>
        </div>
      </div>
    </div>
  )
}

// Main Dashboard Component
export function MainDashboard() {
  const [currentStep, setCurrentStep] = useState(1)
  const [selectedTemplate, setSelectedTemplate] = useState<Template | null>(null)

  const steps = [
    { id: 1, name: "Project Type", description: "Choose template" },
    { id: 2, name: "Features", description: "Select features" },
    { id: 3, name: "Business Context", description: "Define requirements" },
    { id: 4, name: "Generate", description: "Create project" },
    { id: 5, name: "Architecture", description: "Review & deploy" },
  ]

  const renderStep = () => {
    switch (currentStep) {
      case 1:
        return (
          <TemplateSelectionStep
            onNext={(template) => {
              setSelectedTemplate(template)
              setCurrentStep(2)
            }}
          />
        )
      case 2:
        return selectedTemplate ? (
          <FeatureSelectionStep
            template={selectedTemplate}
            onNext={() => setCurrentStep(3)}
            onBack={() => setCurrentStep(1)}
          />
        ) : null
      case 3:
        return (
          <div className="text-center py-20 bg-white/5">
            <h2 className="text-2xl font-bold mb-4 text-white">Business Context Step</h2>
            <p className="text-white/60 mb-8">Coming soon - Define your business requirements and scaling needs</p>
            <div className="space-x-4">
              <Button variant="outline" onClick={() => setCurrentStep(2)} className="border-white/20 text-white hover:bg-white/10">
                Back
              </Button>
              <Button onClick={() => setCurrentStep(4)} className="bg-orange-500 hover:bg-orange-400 text-black font-semibold py-2 rounded-lg shadow">
                Continue
              </Button>
            </div>
          </div>
        )
      case 4:
        return (
          <div className="text-center py-20 bg-white/5">
            <h2 className="text-2xl font-bold mb-4 text-white">Generate Step</h2>
            <p className="text-white/60 mb-8">Coming soon - Generate your project architecture and code</p>
            <div className="space-x-4">
              <Button variant="outline" onClick={() => setCurrentStep(3)} className="border-white/20 text-white hover:bg-white/10">
                Back
              </Button>
              <Button onClick={() => setCurrentStep(5)} className="bg-orange-500 hover:bg-orange-400 text-black font-semibold py-2 rounded-lg shadow">
                Continue
              </Button>
            </div>
          </div>
        )
      case 5:
        return (
          <div className="text-center py-20 bg-white/5">
            <h2 className="text-2xl font-bold mb-4 text-white">Architecture Step</h2>
            <p className="text-white/60 mb-8">Coming soon - Review architecture and deploy your project</p>
            <div className="space-x-4">
              <Button variant="outline" onClick={() => setCurrentStep(4)} className="border-white/20 text-white hover:bg-white/10">
                Back
              </Button>
              <Button className="bg-orange-500 hover:bg-orange-400 text-black font-semibold py-2 rounded-lg shadow">
                Deploy Project
              </Button>
            </div>
          </div>
        )
      default:
        return null
    }
  }

  return (
    <div className="min-h-screen bg-black">

      {/* Progress Steps */}
      <div className="bg-white/5 border-b border-white/10">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="py-4">
            <nav className="flex justify-center">
              <ol className="flex items-center space-x-8 text-white/60">
                {steps.map((step, index) => (
                  <li key={step.id} className="flex items-center">
                    <div className="flex items-center">
                      <div
                        className={`flex items-center justify-center w-10 h-10 rounded-full border-2 transition-all ${
                          currentStep >= step.id
                            ? "bg-orange-500 border-orange-500 text-white shadow-lg"
                            : currentStep === step.id - 1
                              ? "border-orange-300 text-orange-400"
                              : "border-white/30 text-white/40"
                        }`}
                      >
                        <span className="text-sm font-semibold">{step.id}</span>
                      </div>
                      <div className="ml-4">
                        <p
                          className={`text-sm font-semibold ${
                            currentStep >= step.id ? "text-orange-400" : "text-white/60"
                          }`}
                        >
                          {step.name}
                        </p>
                        <p className="text-xs text-white/40">{step.description}</p>
                      </div>
                    </div>
                    {index < steps.length - 1 && (
                      <ArrowRight
                        className={`ml-8 h-5 w-5 ${currentStep > step.id ? "text-orange-400" : "text-white/40"}`}
                      />
                    )}
                  </li>
                ))}
              </ol>
            </nav>
          </div>
        </div>
      </div>

      {/* Main Content */}
      <main className="py-8">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">{renderStep()}</div>
      </main>
    </div>
  )
}