'use client'

import { useState } from 'react'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
import { Badge } from '@/components/ui/badge'
import { Button } from '@/components/ui/button'
import { CourseFiltersToolbar } from '@/components/course-filters'
import { Globe, Users, Clock, Video, ArrowRight, Zap } from 'lucide-react'

const onlineCourses = [
  {
    id: 1,
    title: 'Digital Leadership in a Remote World',
    category: 'Leadership',
    startDate: 'July 20, 2025',
    duration: '2 weeks, 2 hours/week',
    timezone: 'GMT',
    participants: 30,
    price: '£595',
    level: 'Executive',
    description: 'Lead distributed teams with confidence in the digital workplace.',
    features: ['Live interactive sessions', 'Q&A with experts', 'Certificate included']
  },
  {
    id: 2,
    title: 'Agile Project Management Online',
    category: 'Project Management',
    startDate: 'August 1, 2025',
    duration: '3 weeks, 3 hours/week',
    timezone: 'GMT',
    participants: 40,
    price: '£795',
    level: 'Intermediate',
    description: 'Master Agile methodologies from anywhere in the world.',
    features: ['Live workshops', 'Group activities', 'Hands-on exercises', 'Certificate']
  },
  {
    id: 3,
    title: 'Business Communication Excellence',
    category: 'Communication',
    startDate: 'August 8, 2025',
    duration: '2 weeks, 2.5 hours/week',
    timezone: 'GMT',
    participants: 25,
    price: '£495',
    level: 'All Levels',
    description: 'Enhance your communication impact in the digital environment.',
    features: ['Interactive sessions', 'Breakout groups', 'Peer feedback', 'Certificate']
  },
  {
    id: 4,
    title: 'Data-Driven Decision Making',
    category: 'Analytics',
    startDate: 'August 15, 2025',
    duration: '3 weeks, 2 hours/week',
    timezone: 'GMT',
    participants: 35,
    price: '£695',
    level: 'Intermediate',
    description: 'Learn to use data insights for strategic business decisions.',
    features: ['Live tutorials', 'Case studies', 'Tools training', 'Certificate']
  },
  {
    id: 5,
    title: 'Emotional Intelligence for Leaders',
    category: 'Leadership',
    startDate: 'September 1, 2025',
    duration: '2 weeks, 2 hours/week',
    timezone: 'GMT',
    participants: 28,
    price: '£595',
    level: 'Executive',
    description: 'Develop emotional intelligence to enhance leadership effectiveness.',
    features: ['Interactive sessions', 'Self-assessments', 'Group discussions', 'Certificate']
  },
  {
    id: 6,
    title: 'Customer Experience Strategy Online',
    category: 'Strategy',
    startDate: 'September 8, 2025',
    duration: '3 weeks, 2.5 hours/week',
    timezone: 'GMT',
    participants: 32,
    price: '£795',
    level: 'Intermediate',
    description: 'Create customer-centric strategies for sustainable growth.',
    features: ['Live case studies', 'Expert sessions', 'Templates', 'Certificate']
  }
]

const categories = ['All', 'Leadership', 'Project Management', 'Communication', 'Analytics', 'Strategy']

const categoryFilters = [
  { name: 'All', slug: null, count: onlineCourses.length },
  ...categories.slice(1).map((name) => ({
    name,
    slug: null,
    count: onlineCourses.filter((course) => course.category === name).length,
  })),
]

export default function LiveOnlineCoursesPage() {
  const [selectedCategory, setSelectedCategory] = useState('All')

  const filteredCourses = onlineCourses.filter(course => 
    selectedCategory === 'All' || course.category === selectedCategory
  )

  return (
    <main>
      
      {/* Hero Section */}
      <section className="bg-gradient-to-r from-primary to-secondary py-16 md:py-24 text-white">
        <div className="container mx-auto px-4">
          <h1 className="text-4xl md:text-5xl font-bold mb-4 text-balance">Live Online Courses</h1>
          <p className="text-xl text-white/90 max-w-2xl">
            Join interactive live sessions from anywhere in the world. Learn from expert facilitators while collaborating with professionals globally.
          </p>
        </div>
      </section>

      {/* Benefits Section */}
      <section className="py-12 md:py-16 bg-muted/50">
        <div className="container mx-auto px-4">
          <h2 className="text-3xl font-bold mb-8 text-center">Why Choose Live Online Learning?</h2>
          <div className="grid md:grid-cols-4 gap-6">
            <Card>
              <CardContent className="pt-6">
                <Globe className="w-10 h-10 text-primary mb-4" />
                <h3 className="font-semibold mb-2">Learn Anywhere</h3>
                <p className="text-sm text-muted-foreground">Join from your home or office with flexible scheduling.</p>
              </CardContent>
            </Card>
            <Card>
              <CardContent className="pt-6">
                <Video className="w-10 h-10 text-secondary mb-4" />
                <h3 className="font-semibold mb-2">Interactive Live Sessions</h3>
                <p className="text-sm text-muted-foreground">Real-time engagement with instructors and peers.</p>
              </CardContent>
            </Card>
            <Card>
              <CardContent className="pt-6">
                <Users className="w-10 h-10 text-accent mb-4" />
                <h3 className="font-semibold mb-2">Global Network</h3>
                <p className="text-sm text-muted-foreground">Connect with professionals from around the world.</p>
              </CardContent>
            </Card>
            <Card>
              <CardContent className="pt-6">
                <Zap className="w-10 h-10 text-primary mb-4" />
                <h3 className="font-semibold mb-2">Immediate Application</h3>
                <p className="text-sm text-muted-foreground">Apply learnings directly to your current role.</p>
              </CardContent>
            </Card>
          </div>
        </div>
      </section>

      <CourseFiltersToolbar
        categories={categoryFilters}
        selectedCategory={selectedCategory}
        onCategoryChange={setSelectedCategory}
        resultCount={filteredCourses.length}
        showSearch={false}
        sticky={false}
      />

      {/* Courses Grid */}
      <section className="py-12 md:py-16 bg-background">
        <div className="container mx-auto px-4">
          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
            {filteredCourses.map(course => (
              <Card key={course.id} className="hover:shadow-lg transition-shadow flex flex-col">
                <CardHeader>
                  <div className="flex items-start justify-between gap-2 mb-2">
                    <Badge variant="outline">{course.category}</Badge>
                    <Badge className="bg-secondary text-white">{course.level}</Badge>
                  </div>
                  <CardTitle className="text-lg">{course.title}</CardTitle>
                  <CardDescription>{course.description}</CardDescription>
                </CardHeader>
                <CardContent className="space-y-4 flex-grow">
                  <div className="space-y-2 text-sm">
                    <div className="flex items-center gap-2 text-foreground">
                      <Clock className="w-4 h-4" />
                      <span>{course.duration}</span>
                    </div>
                    <div className="flex items-center gap-2 text-foreground">
                      <Users className="w-4 h-4" />
                      <span>{course.participants} participants</span>
                    </div>
                    <div className="flex items-center gap-2 text-foreground">
                      <Globe className="w-4 h-4" />
                      <span>Timezone: {course.timezone}</span>
                    </div>
                  </div>

                  <div className="pt-2 border-t border-border">
                    <div className="flex items-center justify-between mb-4">
                      <span className="text-2xl font-bold text-primary">{course.price}</span>
                      <span className="text-sm text-muted-foreground">Starts {course.startDate}</span>
                    </div>

                    <div className="space-y-2">
                      <div className="space-y-1">
                        {course.features.map(feature => (
                          <div key={feature} className="text-xs text-muted-foreground flex items-center gap-1">
                            <span className="text-primary">✓</span> {feature}
                          </div>
                        ))}
                      </div>
                      <Button className="w-full" variant="default">
                        Enroll Now <ArrowRight className="w-4 h-4 ml-2" />
                      </Button>
                    </div>
                  </div>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      </section>

      {/* CTA Section */}
      <section className="py-12 md:py-16 bg-primary text-white">
        <div className="container mx-auto px-4 text-center">
          <h2 className="text-3xl font-bold mb-4">Ready to Upskill Your Team?</h2>
          <p className="text-lg text-white/90 mb-8 max-w-2xl mx-auto">
            Contact us to discuss group bookings or customize a course for your organization.
          </p>
          <Button size="lg" className="bg-white text-primary hover:bg-white/90">
            Get in Touch with Our Team
          </Button>
        </div>
      </section>

    </main>
  )
}