import React, { useState } from 'react';
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from './ui/card';
import { Badge } from './ui/badge';
import { Button } from './ui/button';
import { Input } from './ui/input';
import { Tabs, TabsContent, TabsList, TabsTrigger } from './ui/tabs';
import { 
  Search, 
  Clock, 
  Users, 
  BookOpen, 
  Award, 
  Calendar,
  Filter,
  GraduationCap,
  TrendingUp,
  Code,
  Palette,
  BarChart,
  Globe
} from 'lucide-react';

interface Training {
  id: number;
  title: string;
  description: string;
  category: string;
  level: 'Débutant' | 'Intermédiaire' | 'Avancé';
  duration: string;
  participants: number;
  instructor: string;
  price: string;
  dates: string[];
  icon: React.ReactNode;
  features: string[];
}

const trainings: Training[] = [
  {
    id: 1,
    title: "Développement Web Full-Stack",
    description: "Maîtrisez le développement web moderne avec React, Node.js et les dernières technologies",
    category: "Développement",
    level: "Intermédiaire",
    duration: "12 semaines",
    participants: 45,
    instructor: "Marie Dupont",
    price: "2 490€",
    dates: ["15 Mars 2024", "10 Mai 2024"],
    icon: <Code className="w-6 h-6" />,
    features: ["React & TypeScript", "Node.js & Express", "Bases de données", "Déploiement Cloud"]
  },
  {
    id: 2,
    title: "Design UX/UI Avancé",
    description: "Créez des interfaces utilisateur exceptionnelles et des expériences mémorables",
    category: "Design",
    level: "Avancé",
    duration: "8 semaines",
    participants: 32,
    instructor: "Thomas Martin",
    price: "1 890€",
    dates: ["20 Mars 2024", "15 Juin 2024"],
    icon: <Palette className="w-6 h-6" />,
    features: ["Design Systems", "Prototypage Figma", "Tests utilisateurs", "Accessibilité"]
  },
  {
    id: 3,
    title: "Data Science & Machine Learning",
    description: "Explorez l'analyse de données et les algorithmes d'apprentissage automatique",
    category: "Data",
    level: "Avancé",
    duration: "16 semaines",
    participants: 28,
    instructor: "Sophie Bernard",
    price: "3 290€",
    dates: ["1 Avril 2024", "1 Septembre 2024"],
    icon: <BarChart className="w-6 h-6" />,
    features: ["Python & Pandas", "Machine Learning", "Deep Learning", "Projets réels"]
  },
  {
    id: 4,
    title: "Marketing Digital",
    description: "Maîtrisez les stratégies marketing digital et l'acquisition de clients",
    category: "Marketing",
    level: "Débutant",
    duration: "6 semaines",
    participants: 58,
    instructor: "Lucas Petit",
    price: "1 290€",
    dates: ["25 Mars 2024", "5 Mai 2024"],
    icon: <TrendingUp className="w-6 h-6" />,
    features: ["SEO & SEA", "Social Media", "Email Marketing", "Analytics"]
  },
  {
    id: 5,
    title: "Développement Mobile iOS & Android",
    description: "Créez des applications mobiles natives et cross-platform performantes",
    category: "Développement",
    level: "Intermédiaire",
    duration: "10 semaines",
    participants: 38,
    instructor: "Emma Rousseau",
    price: "2 190€",
    dates: ["10 Avril 2024", "15 Juin 2024"],
    icon: <Globe className="w-6 h-6" />,
    features: ["React Native", "Swift & Kotlin", "API Integration", "App Store Deploy"]
  },
  {
    id: 6,
    title: "Gestion de Projet Agile",
    description: "Pilotez vos projets avec les méthodologies Scrum et Kanban",
    category: "Management",
    level: "Débutant",
    duration: "4 semaines",
    participants: 65,
    instructor: "Pierre Dubois",
    price: "890€",
    dates: ["5 Avril 2024", "20 Mai 2024"],
    icon: <Users className="w-6 h-6" />,
    features: ["Scrum Master", "Kanban", "Jira & Trello", "Leadership"]
  }
];

const TrainingCatalog: React.FC = () => {
  const [searchQuery, setSearchQuery] = useState('');
  const [selectedCategory, setSelectedCategory] = useState('Toutes');

  const categories = ['Toutes', 'Développement', 'Design', 'Data', 'Marketing', 'Management'];

  const filteredTrainings = trainings.filter(training => {
    const matchesSearch = training.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
                         training.description.toLowerCase().includes(searchQuery.toLowerCase());
    const matchesCategory = selectedCategory === 'Toutes' || training.category === selectedCategory;
    return matchesSearch && matchesCategory;
  });

  const getLevelColor = (level: string) => {
    switch (level) {
      case 'Débutant': return 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200';
      case 'Intermédiaire': return 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200';
      case 'Avancé': return 'bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-200';
      default: return 'bg-gray-100 text-gray-800';
    }
  };

  return (
    <div className="min-h-screen bg-gradient-to-br from-background via-background to-muted">
      {/* Header */}
      <header className="border-b bg-card/50 backdrop-blur-sm sticky top-0 z-50">
        <div className="container mx-auto px-4 py-6">
          <div className="flex items-center justify-between mb-6">
            <div className="flex items-center gap-3">
              <div className="bg-primary text-primary-foreground p-3 rounded-lg">
                <GraduationCap className="w-8 h-8" />
              </div>
              <div>
                <h1 className="text-3xl font-heading font-bold text-foreground">Catalogue de Formations</h1>
                <p className="text-muted-foreground">Développez vos compétences avec nos experts</p>
              </div>
            </div>
            <div className="hidden md:flex items-center gap-4">
              <Badge variant="secondary" className="text-sm">
                <Award className="w-4 h-4 mr-1" />
                Certifié
              </Badge>
            </div>
          </div>

          {/* Search Bar */}
          <div className="relative">
            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground w-5 h-5" />
            <Input
              type="text"
              placeholder="Rechercher une formation..."
              value={searchQuery}
              onChange={(e) => setSearchQuery(e.target.value)}
              className="pl-10 py-6 text-lg"
            />
          </div>
        </div>
      </header>

      {/* Main Content */}
      <main className="container mx-auto px-4 py-8">
        {/* Category Tabs */}
        <Tabs defaultValue="Toutes" className="mb-8" onValueChange={setSelectedCategory}>
          <TabsList className="w-full justify-start overflow-x-auto flex-wrap h-auto gap-2 bg-muted/50 p-2">
            {categories.map(category => (
              <TabsTrigger 
                key={category} 
                value={category}
                className="data-[state=active]:bg-primary data-[state=active]:text-primary-foreground"
              >
                <Filter className="w-4 h-4 mr-2" />
                {category}
              </TabsTrigger>
            ))}
          </TabsList>
        </Tabs>

        {/* Stats */}
        <div className="mb-8">
          <Card className="bg-gradient-to-br from-blue-50 to-blue-100 dark:from-blue-950 dark:to-blue-900 border-blue-200 dark:border-blue-800 max-w-xs">
            <CardContent className="p-6">
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-sm text-muted-foreground font-medium">Formations disponibles</p>
                  <p className="text-3xl font-bold text-foreground">{filteredTrainings.length}</p>
                </div>
                <BookOpen className="w-10 h-10 text-blue-600 dark:text-blue-400" />
              </div>
            </CardContent>
          </Card>
        </div>

        {/* Training Cards Grid */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          {filteredTrainings.map(training => (
            <Card 
              key={training.id} 
              className="hover:shadow-xl transition-all duration-300 hover:-translate-y-1 flex flex-col"
            >
              <CardHeader>
                <div className="flex items-start justify-between mb-3">
                  <div className="bg-primary/10 text-primary p-3 rounded-lg">
                    {training.icon}
                  </div>
                  <Badge className={getLevelColor(training.level)}>
                    {training.level}
                  </Badge>
                </div>
                <CardTitle className="text-xl mb-2">{training.title}</CardTitle>
                <CardDescription className="text-sm line-clamp-2">
                  {training.description}
                </CardDescription>
              </CardHeader>

              <CardContent className="flex-grow">
                <div className="space-y-3 mb-4">
                  <div className="flex items-center text-sm text-muted-foreground">
                    <Clock className="w-4 h-4 mr-2" />
                    <span>{training.duration}</span>
                  </div>
                  <div className="flex items-center text-sm text-muted-foreground">
                    <Users className="w-4 h-4 mr-2" />
                    <span>{training.participants} participants</span>
                  </div>
                  <div className="flex items-center text-sm text-muted-foreground">
                    <GraduationCap className="w-4 h-4 mr-2" />
                    <span>{training.instructor}</span>
                  </div>
                  <div className="flex items-center text-sm text-muted-foreground">
                    <Calendar className="w-4 h-4 mr-2" />
                    <span>{training.dates[0]}</span>
                  </div>
                </div>

                <div className="border-t pt-4">
                  <p className="text-xs text-muted-foreground mb-2 font-medium">Ce que vous apprendrez :</p>
                  <div className="flex flex-wrap gap-1">
                    {training.features.map((feature, idx) => (
                      <Badge key={idx} variant="outline" className="text-xs">
                        {feature}
                      </Badge>
                    ))}
                  </div>
                </div>
              </CardContent>

              <CardFooter className="flex items-center justify-between pt-4 border-t">
                <div>
                  <p className="text-2xl font-bold text-primary">{training.price}</p>
                  <p className="text-xs text-muted-foreground">par personne</p>
                </div>
                <Button className="bg-primary text-primary-foreground hover:bg-primary/90">
                  S'inscrire
                </Button>
              </CardFooter>
            </Card>
          ))}
        </div>

        {/* No Results */}
        {filteredTrainings.length === 0 && (
          <div className="text-center py-16">
            <BookOpen className="w-16 h-16 mx-auto text-muted-foreground mb-4" />
            <h3 className="text-xl font-semibold mb-2">Aucune formation trouvée</h3>
            <p className="text-muted-foreground">
              Essayez de modifier vos critères de recherche
            </p>
          </div>
        )}
      </main>

      {/* Footer */}
      <footer className="border-t bg-card/50 mt-16">
        <div className="container mx-auto px-4 py-8">
          <div className="text-center text-sm text-muted-foreground">
            <p className="mb-2">© 2024 Catalogue de Formations. Tous droits réservés.</p>
            <p>Développez vos compétences avec les meilleurs experts du marché</p>
          </div>
        </div>
      </footer>
    </div>
  );
};

export default TrainingCatalog;