"use client"

import { useState } 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 } from "lucide-react"

interface Template {
  id: string
  title: string
  description: string
  category: string
  features: string[]
  complexity: number
  timeEstimate: string
  techStack: string[]
  popularity?: number
  lastUpdated?: string
}

function TemplateSelectionStep({ onNext }: { onNext: (template: Template) => void }) {
  const [selectedCategory, setSelectedCategory] = useState("all")
  const [searchQuery, setSearchQuery] = useState("")

  const templates: Template[] = [
    // Marketing Templates (10)
    {
      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: "landing-page",
      title: "Landing Page",
      description: "High-converting landing page with A/B testing capabilities",
      category: "marketing",
      features: ["A/B Testing", "Conversion Tracking", "Lead Capture", "Mobile Optimization"],
      complexity: 2,
      timeEstimate: "3-5 days",
      techStack: ["Next.js", "Tailwind CSS", "Google Analytics", "Mailchimp"],
      popularity: 88,
      lastUpdated: "2024-01-10",
    },
    {
      id: "blog-platform",
      title: "Blog Platform",
      description: "Content-rich blog with SEO optimization and social sharing",
      category: "marketing",
      features: ["Content Management", "SEO Tools", "Social Sharing", "Comment System"],
      complexity: 3,
      timeEstimate: "1-2 weeks",
      techStack: ["Next.js", "MDX", "Tailwind CSS", "Disqus"],
      popularity: 82,
      lastUpdated: "2024-01-12",
    },
    {
      id: "portfolio-site",
      title: "Portfolio Website",
      description: "Personal or agency portfolio with project showcase",
      category: "marketing",
      features: ["Project Gallery", "Contact Forms", "Blog", "Responsive Design"],
      complexity: 2,
      timeEstimate: "1-2 weeks",
      techStack: ["Next.js", "MDX", "Tailwind CSS", "Framer Motion"],
      popularity: 79,
      lastUpdated: "2024-01-08",
    },
    {
      id: "agency-website",
      title: "Agency Website",
      description: "Full-service agency site with team profiles and case studies",
      category: "marketing",
      features: ["Team Profiles", "Case Studies", "Service Pages", "Client Testimonials"],
      complexity: 3,
      timeEstimate: "2-3 weeks",
      techStack: ["Next.js", "Strapi", "Tailwind CSS", "Framer Motion"],
      popularity: 76,
      lastUpdated: "2024-01-14",
    },
    {
      id: "event-website",
      title: "Event Website",
      description: "Event promotion site with registration and ticketing",
      category: "marketing",
      features: ["Event Registration", "Ticketing", "Speaker Profiles", "Schedule Management"],
      complexity: 4,
      timeEstimate: "2-3 weeks",
      techStack: ["Next.js", "Stripe", "Calendar API", "Email Integration"],
      popularity: 73,
      lastUpdated: "2024-01-11",
    },
    {
      id: "restaurant-website",
      title: "Restaurant Website",
      description: "Restaurant site with menu, reservations, and online ordering",
      category: "marketing",
      features: ["Menu Display", "Online Reservations", "Order System", "Location Info"],
      complexity: 3,
      timeEstimate: "1-2 weeks",
      techStack: ["Next.js", "Reservation API", "Payment Processing", "Google Maps"],
      popularity: 70,
      lastUpdated: "2024-01-09",
    },
    {
      id: "nonprofit-website",
      title: "Nonprofit Website",
      description: "Nonprofit organization site with donation and volunteer management",
      category: "marketing",
      features: ["Donation Processing", "Volunteer Registration", "Event Management", "Impact Tracking"],
      complexity: 3,
      timeEstimate: "2-3 weeks",
      techStack: ["Next.js", "Stripe", "Volunteer API", "Analytics"],
      popularity: 67,
      lastUpdated: "2024-01-13",
    },
    {
      id: "real-estate-website",
      title: "Real Estate Website",
      description: "Property listing site with search and contact features",
      category: "marketing",
      features: ["Property Listings", "Search Filters", "Contact Forms", "Virtual Tours"],
      complexity: 4,
      timeEstimate: "2-4 weeks",
      techStack: ["Next.js", "Property API", "Map Integration", "Image Gallery"],
      popularity: 64,
      lastUpdated: "2024-01-07",
    },
    {
      id: "personal-brand",
      title: "Personal Brand Site",
      description: "Personal branding site for professionals and creators",
      category: "marketing",
      features: ["About Page", "Services", "Testimonials", "Contact Integration"],
      complexity: 2,
      timeEstimate: "1 week",
      techStack: ["Next.js", "Tailwind CSS", "Contact Forms", "Social Links"],
      popularity: 61,
      lastUpdated: "2024-01-06",
    },

    // Software Templates (10)
    {
      id: "saas-platform",
      title: "SaaS Platform",
      description: "Complete SaaS application with user management, billing, and analytics",
      category: "software",
      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",
    },
    {
      id: "dashboard-app",
      title: "Analytics Dashboard",
      description: "Data visualization dashboard with real-time updates",
      category: "software",
      features: ["Data Visualization", "Real-time Updates", "User Authentication", "Export Features"],
      complexity: 4,
      timeEstimate: "3-4 weeks",
      techStack: ["Next.js", "Chart.js", "WebSockets", "PostgreSQL"],
      popularity: 89,
      lastUpdated: "2024-01-14",
    },
    {
      id: "mobile-app",
      title: "Mobile App (PWA)",
      description: "Progressive web app with mobile-first design",
      category: "software",
      features: ["Offline Support", "Push Notifications", "Mobile Optimization", "App Install"],
      complexity: 4,
      timeEstimate: "2-3 weeks",
      techStack: ["Next.js", "PWA", "Service Workers", "Push API"],
      popularity: 86,
      lastUpdated: "2024-01-13",
    },
    {
      id: "project-management",
      title: "Project Management Tool",
      description: "Team collaboration and project tracking application",
      category: "software",
      features: ["Task Management", "Team Collaboration", "Time Tracking", "Reporting"],
      complexity: 5,
      timeEstimate: "4-5 weeks",
      techStack: ["Next.js", "PostgreSQL", "Real-time Updates", "File Upload"],
      popularity: 83,
      lastUpdated: "2024-01-12",
    },
    {
      id: "crm-system",
      title: "CRM System",
      description: "Customer relationship management with sales pipeline",
      category: "software",
      features: ["Contact Management", "Sales Pipeline", "Email Integration", "Reporting"],
      complexity: 5,
      timeEstimate: "3-5 weeks",
      techStack: ["Next.js", "PostgreSQL", "Email API", "Calendar Integration"],
      popularity: 80,
      lastUpdated: "2024-01-11",
    },
    {
      id: "inventory-management",
      title: "Inventory Management",
      description: "Stock tracking and warehouse management system",
      category: "software",
      features: ["Stock Tracking", "Barcode Scanning", "Supplier Management", "Reports"],
      complexity: 4,
      timeEstimate: "3-4 weeks",
      techStack: ["Next.js", "PostgreSQL", "Barcode API", "PDF Generation"],
      popularity: 77,
      lastUpdated: "2024-01-10",
    },
    {
      id: "learning-platform",
      title: "Learning Management System",
      description: "Online education platform with courses and assessments",
      category: "software",
      features: ["Course Management", "Video Streaming", "Assessments", "Progress Tracking"],
      complexity: 5,
      timeEstimate: "4-6 weeks",
      techStack: ["Next.js", "Video API", "PostgreSQL", "Payment Processing"],
      popularity: 74,
      lastUpdated: "2024-01-09",
    },
    {
      id: "booking-system",
      title: "Booking System",
      description: "Appointment and reservation management platform",
      category: "software",
      features: ["Calendar Integration", "Payment Processing", "Notifications", "Customer Management"],
      complexity: 4,
      timeEstimate: "2-4 weeks",
      techStack: ["Next.js", "Calendar API", "Stripe", "Email Integration"],
      popularity: 71,
      lastUpdated: "2024-01-08",
    },
    {
      id: "chat-application",
      title: "Chat Application",
      description: "Real-time messaging platform with file sharing",
      category: "software",
      features: ["Real-time Messaging", "File Sharing", "Group Chats", "User Presence"],
      complexity: 4,
      timeEstimate: "2-3 weeks",
      techStack: ["Next.js", "WebSockets", "File Storage", "Real-time DB"],
      popularity: 68,
      lastUpdated: "2024-01-07",
    },
    {
      id: "api-platform",
      title: "API Platform",
      description: "RESTful API with documentation and rate limiting",
      category: "software",
      features: ["API Documentation", "Rate Limiting", "Authentication", "Monitoring"],
      complexity: 4,
      timeEstimate: "2-3 weeks",
      techStack: ["Next.js", "Swagger", "Redis", "Monitoring Tools"],
      popularity: 65,
      lastUpdated: "2024-01-06",
    },

    // SEO Templates (10)
    {
      id: "seo-optimized-blog",
      title: "SEO-Optimized Blog",
      description: "Blog platform with advanced SEO features and schema markup",
      category: "seo",
      features: ["Schema Markup", "Meta Optimization", "Sitemap Generation", "Performance Optimization"],
      complexity: 3,
      timeEstimate: "2-3 weeks",
      techStack: ["Next.js", "SEO Tools", "Schema.org", "Google Search Console"],
      popularity: 90,
      lastUpdated: "2024-01-15",
    },
    {
      id: "local-business-site",
      title: "Local Business Website",
      description: "Local SEO optimized site with Google My Business integration",
      category: "seo",
      features: ["Local SEO", "Google My Business", "Review Management", "Location Pages"],
      complexity: 3,
      timeEstimate: "1-2 weeks",
      techStack: ["Next.js", "Google APIs", "Review APIs", "Local Schema"],
      popularity: 87,
      lastUpdated: "2024-01-14",
    },
    {
      id: "ecommerce-seo",
      title: "E-commerce SEO Site",
      description: "Product-focused e-commerce with advanced SEO optimization",
      category: "seo",
      features: ["Product Schema", "Category Optimization", "Review Rich Snippets", "Performance"],
      complexity: 4,
      timeEstimate: "3-4 weeks",
      techStack: ["Next.js", "Product APIs", "Review Systems", "CDN"],
      popularity: 84,
      lastUpdated: "2024-01-13",
    },
    {
      id: "news-website",
      title: "News Website",
      description: "News platform with article SEO and AMP support",
      category: "seo",
      features: ["Article Schema", "AMP Support", "Breaking News", "Social Sharing"],
      complexity: 4,
      timeEstimate: "2-4 weeks",
      techStack: ["Next.js", "AMP", "News APIs", "Social APIs"],
      popularity: 81,
      lastUpdated: "2024-01-12",
    },
    {
      id: "directory-website",
      title: "Business Directory",
      description: "Local business directory with search and listings",
      category: "seo",
      features: ["Business Listings", "Search Optimization", "Category Pages", "Review System"],
      complexity: 4,
      timeEstimate: "3-4 weeks",
      techStack: ["Next.js", "Search APIs", "Location Services", "Review APIs"],
      popularity: 78,
      lastUpdated: "2024-01-11",
    },
    {
      id: "recipe-website",
      title: "Recipe Website",
      description: "Recipe platform with rich snippets and cooking schema",
      category: "seo",
      features: ["Recipe Schema", "Nutrition Info", "Cooking Times", "User Ratings"],
      complexity: 3,
      timeEstimate: "2-3 weeks",
      techStack: ["Next.js", "Recipe APIs", "Nutrition APIs", "Rating System"],
      popularity: 75,
      lastUpdated: "2024-01-10",
    },
    {
      id: "job-board",
      title: "Job Board",
      description: "Job listing platform with structured data for search engines",
      category: "seo",
      features: ["Job Schema", "Search Filters", "Application Tracking", "Company Profiles"],
      complexity: 4,
      timeEstimate: "3-4 weeks",
      techStack: ["Next.js", "Job APIs", "Application System", "Company APIs"],
      popularity: 72,
      lastUpdated: "2024-01-09",
    },
    {
      id: "review-website",
      title: "Review Website",
      description: "Product/service review platform with rich snippets",
      category: "seo",
      features: ["Review Schema", "Rating System", "Comparison Tools", "User Profiles"],
      complexity: 4,
      timeEstimate: "2-4 weeks",
      techStack: ["Next.js", "Review APIs", "Rating System", "Comparison Tools"],
      popularity: 69,
      lastUpdated: "2024-01-08",
    },
    {
      id: "travel-website",
      title: "Travel Website",
      description: "Travel guide with location-based SEO and booking integration",
      category: "seo",
      features: ["Location Schema", "Travel Guides", "Booking Integration", "Photo Galleries"],
      complexity: 4,
      timeEstimate: "3-4 weeks",
      techStack: ["Next.js", "Travel APIs", "Booking APIs", "Map Integration"],
      popularity: 66,
      lastUpdated: "2024-01-07",
    },
    {
      id: "healthcare-website",
      title: "Healthcare Website",
      description: "Medical practice website with health-focused SEO",
      category: "seo",
      features: ["Medical Schema", "Appointment Booking", "Health Articles", "Doctor Profiles"],
      complexity: 3,
      timeEstimate: "2-3 weeks",
      techStack: ["Next.js", "Medical APIs", "Booking System", "Content Management"],
      popularity: 63,
      lastUpdated: "2024-01-06",
    },
  ]

  const categories = [
    { id: "all", name: "All Templates", icon: Globe, count: templates.length },
    {
      id: "marketing",
      name: "Marketing & Branding",
      icon: Zap,
      count: templates.filter((t) => t.category === "marketing").length,
    },
    {
      id: "software",
      name: "Software & Tools",
      icon: Code,
      count: templates.filter((t) => t.category === "software").length,
    },
    { id: "seo", name: "SEO & Content", icon: BarChart3, count: templates.filter((t) => t.category === "seo").length },
  ]

  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-green-100 text-green-800"
    if (complexity <= 3) return "bg-yellow-100 text-yellow-800"
    return "bg-red-100 text-red-800"
  }

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

  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-gray-900">Choose Your Project Template</h1>
        <p className="text-xl text-gray-600 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 transform -translate-y-1/2 text-gray-400 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-2 border-gray-200 hover:border-blue-300 focus:border-blue-500 focus:ring-2 focus:ring-blue-200 rounded-xl shadow-sm transition-all duration-300"
          />
        </div>

        {/* Category Filters */}
        <div className="flex flex-wrap justify-center gap-3">
          {categories.map((category) => {
            const Icon = category.icon
            return (
              <button
                key={category.id}
                onClick={() => setSelectedCategory(category.id)}
                className={`flex items-center space-x-3 px-6 py-4 rounded-xl border-2 transition-all duration-300 hover:scale-105 ${
                  selectedCategory === category.id
                    ? "bg-gradient-to-r from-blue-600 to-blue-700 text-white border-blue-600 shadow-lg"
                    : "bg-white text-gray-700 border-gray-200 hover:border-blue-300 hover:shadow-md hover:bg-blue-50"
                }`}
              >
                <div className={`p-2 rounded-lg ${
                  selectedCategory === category.id 
                    ? "bg-white/20" 
                    : "bg-blue-100 text-blue-600"
                }`}>
                  <Icon className="h-5 w-5" />
                </div>
                <div className="text-left">
                  <div className="font-semibold">{category.name}</div>
                  <div className={`text-sm ${selectedCategory === category.id ? "opacity-90" : "opacity-75"}`}>
                    {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 cursor-pointer transition-all duration-300 hover:scale-[1.02] bg-white border border-gray-300 hover:border-blue-400 rounded-xl shadow-md hover:shadow-xl overflow-hidden"
            >
            {/* Card Header with gradient background */}
            <div className="bg-white px-4 py-4 border-b border-gray-100">
              <div className="flex items-start justify-between mb-2">
                <div className="space-y-2 flex-1">
                  <CardTitle className="text-xl font-bold text-gray-900 group-hover:text-blue-700 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/70 px-2 py-1 rounded-full">
                        <Star className="h-4 w-4 text-yellow-500 fill-current" />
                        <span className="text-sm font-semibold text-gray-700">{template.popularity}%</span>
                      </div>
                    )}
                  </div>
                </div>
              </div>
              <p className="text-gray-700 text-sm leading-relaxed font-medium">{template.description}</p>
            </div>

            <CardContent className="p-4 flex flex-col h-full">
              <div className="flex-1 space-y-4">
                {/* Stats Row */}
                <div className="flex items-center justify-between text-sm text-gray-600 bg-gray-50 px-3 py-2 rounded-lg">
                  <div className="flex items-center space-x-2">
                    <Clock className="h-4 w-4 text-blue-500" />
                    <span className="font-medium">{template.timeEstimate}</span>
                  </div>
                  <div className="flex items-center space-x-2">
                    <Layers className="h-4 w-4 text-green-500" />
                    <span className="font-medium">{template.features.length} features</span>
                  </div>
                </div>

                {/* Features Section */}
                <div className="space-y-2">
                  <div>
                    <h4 className="font-semibold text-sm text-gray-800 mb-1 flex items-center">
                      <span className="w-2 h-2 bg-blue-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-blue-50 border-blue-200 text-blue-700 px-3 py-2 rounded-full">
                          {feature}
                        </Badge>
                      ))}
                      {template.features.length > 3 && (
                        <Badge variant="outline" className="text-xs bg-gray-50 border-gray-200 text-gray-600 px-3 py-2 rounded-full">
                          +{template.features.length - 3} more
                        </Badge>
                      )}
                    </div>
                  </div>

                  {/* Tech Stack Section */}
                  <div>
                    <h4 className="font-semibold text-sm text-gray-800 mb-1 flex items-center">
                      <span className="w-2 h-2 bg-green-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-green-50 text-green-700 px-3 py-1 rounded-full font-medium">
                          {tech}
                        </Badge>
                      ))}
                      {template.techStack.length > 3 && (
                        <Badge variant="secondary" className="text-xs bg-gray-50 text-gray-600 px-3 py-1 rounded-full">
                          +{template.techStack.length - 3}
                        </Badge>
                      )}
                    </div>
                  </div>
                </div>
              </div>

              {/* Action Button - Always at bottom */}
              <div className="mt-4">
                <Button
                  onClick={() => onNext(template)}
                  className="w-full bg-gradient-to-r from-blue-600 to-blue-700 hover:from-blue-700 hover:to-blue-800 text-white font-semibold py-2 rounded-lg shadow-lg hover:shadow-xl transition-all duration-300 group-hover:shadow-2xl"
                >
                  <span className="flex items-center justify-center cursor-pointer">
                    Select Template
                    <ArrowRight className="ml-2 h-4 w-4 group-hover:translate-x-1 transition-transform" />
                  </span>
                </Button>
              </div>
            </CardContent>
          </Card>
        ))}
      </div>

      {/* Custom Template Option */}
      <Card className="group border-dashed border-2 border-gray-300 hover:border-blue-400 transition-all duration-300 hover:scale-[1.02] bg-gradient-to-br from-gray-50 to-blue-50 overflow-hidden">
        <CardContent className="text-center py-16 px-8">
          <div className="w-20 h-20 bg-gradient-to-br from-blue-100 to-indigo-100 rounded-full flex items-center justify-center mx-auto mb-6 group-hover:from-blue-200 group-hover:to-indigo-200 transition-all duration-300">
            <Plus className="h-10 w-10 text-blue-600 group-hover:text-blue-700 transition-colors" />
          </div>
          <h3 className="text-2xl font-bold text-gray-800 mb-3 group-hover:text-blue-700 transition-colors">Create Custom Template</h3>
          <p className="text-gray-600 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-2 border-blue-300 text-blue-700 hover:bg-blue-50 bg-white hover:border-blue-400 px-8 py-3 text-lg font-semibold rounded-lg shadow-md hover:shadow-lg transition-all duration-300 group-hover:shadow-xl"
          >
            <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-gray-600">
            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 }) {
  return (
    <div className="max-w-7xl mx-auto space-y-8">
      {/* Header */}
      <div className="text-center space-y-4">
        <h1 className="text-4xl font-bold text-gray-900">Select Features for {template.title}</h1>
        <p className="text-xl text-gray-600 max-w-3xl mx-auto">
          Choose the features that best fit your project requirements.
        </p>
      </div>

      {/* Features List */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
        {template.features.map((feature, index) => (
          <Card
            key={index}
            className="hover:shadow-xl transition-all duration-300 cursor-pointer group border-2 hover:border-blue-200"
          >
            <CardHeader className="pb-4">
              <CardTitle className="text-xl group-hover:text-blue-600 transition-colors line-clamp-2">
                {feature}
              </CardTitle>
            </CardHeader>

            <CardContent className="space-y-4">
              <p className="text-gray-600 text-sm leading-relaxed">
                This feature enhances your project with {feature} capabilities.
              </p>
            </CardContent>
          </Card>
        ))}
      </div>

      {/* Navigation Buttons */}
      <div className="text-center py-4">
        <div className="space-x-4">
          <Button variant="outline" onClick={onBack}>
            Back
          </Button>
          <Button onClick={onNext}>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">
            <h2 className="text-2xl font-bold mb-4">Business Context Step</h2>
            <p className="text-gray-600 mb-8">Coming soon - Define your business requirements and scaling needs</p>
            <div className="space-x-4">
              <Button variant="outline" onClick={() => setCurrentStep(2)}>
                Back
              </Button>
              <Button onClick={() => setCurrentStep(4)}>Continue</Button>
            </div>
          </div>
        )
      case 4:
        return (
          <div className="text-center py-20">
            <h2 className="text-2xl font-bold mb-4">Generate Step</h2>
            <p className="text-gray-600 mb-8">Coming soon - Generate your project architecture and code</p>
            <div className="space-x-4">
              <Button variant="outline" onClick={() => setCurrentStep(3)}>
                Back
              </Button>
              <Button onClick={() => setCurrentStep(5)}>Continue</Button>
            </div>
          </div>
        )
      case 5:
        return (
          <div className="text-center py-20">
            <h2 className="text-2xl font-bold mb-4">Architecture Step</h2>
            <p className="text-gray-600 mb-8">Coming soon - Review architecture and deploy your project</p>
            <div className="space-x-4">
              <Button variant="outline" onClick={() => setCurrentStep(4)}>
                Back
              </Button>
              <Button>Deploy Project</Button>
            </div>
          </div>
        )
      default:
        return null
    }
  }

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

      {/* Progress Steps */}
      <div className="bg-white border-b border-gray-200">
        <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">
                {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-blue-600 border-blue-600 text-white shadow-lg"
                            : currentStep === step.id - 1
                              ? "border-blue-300 text-blue-600"
                              : "border-gray-300 text-gray-500"
                        }`}
                      >
                        <span className="text-sm font-semibold">{step.id}</span>
                      </div>
                      <div className="ml-4">
                        <p
                          className={`text-sm font-semibold ${
                            currentStep >= step.id ? "text-blue-600" : "text-gray-500"
                          }`}
                        >
                          {step.name}
                        </p>
                        <p className="text-xs text-gray-500">{step.description}</p>
                      </div>
                    </div>
                    {index < steps.length - 1 && (
                      <ArrowRight
                        className={`ml-8 h-5 w-5 ${currentStep > step.id ? "text-blue-600" : "text-gray-400"}`}
                      />
                    )}
                  </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>
  )
}