"use client";

import React, { useState } from "react";
import { Card } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Badge } from "@/components/ui/badge";
import {
  Video,
  Search,
  Play,
  Clock,
  Star,
  ThumbsUp,
  Eye,
  ArrowLeft,
  Filter,
} from "lucide-react";
import Link from "next/link";

/**
 * Page des tutoriels
 * Vidéos et guides pas-à-pas
 */
export default function TutorielsPage() {
  const [searchTerm, setSearchTerm] = useState("");
  const [selectedCategory, setSelectedCategory] = useState<string>("all");

  const tutoriels = [
    {
      id: "1",
      title: "Créer votre premier chantier",
      description:
        "Apprenez à créer et configurer un nouveau chantier de A à Z",
      duration: "8:45",
      views: 1234,
      likes: 89,
      rating: 4.8,
      category: "Démarrage",
      level: "Débutant",
      thumbnail: "https://via.placeholder.com/400x225?text=Tutoriel+1",
    },
    {
      id: "2",
      title: "Gérer les phases de chantier",
      description: "Comment planifier et suivre les différentes phases d'un projet",
      duration: "12:30",
      views: 956,
      likes: 72,
      rating: 4.9,
      category: "Chantiers",
      level: "Intermédiaire",
      thumbnail: "https://via.placeholder.com/400x225?text=Tutoriel+2",
    },
    {
      id: "3",
      title: "Créer et envoyer un devis",
      description: "Créez des devis professionnels et envoyez-les à vos clients",
      duration: "10:15",
      views: 1567,
      likes: 124,
      rating: 4.7,
      category: "Facturation",
      level: "Débutant",
      thumbnail: "https://via.placeholder.com/400x225?text=Tutoriel+3",
    },
    {
      id: "4",
      title: "Planifier les équipes efficacement",
      description:
        "Optimisez la gestion de vos équipes avec le planning intelligent",
      duration: "15:20",
      views: 823,
      likes: 65,
      rating: 4.6,
      category: "Équipes",
      level: "Avancé",
      thumbnail: "https://via.placeholder.com/400x225?text=Tutoriel+4",
    },
    {
      id: "5",
      title: "Maintenance préventive du matériel",
      description: "Mettez en place un programme de maintenance efficace",
      duration: "11:45",
      views: 645,
      likes: 51,
      rating: 4.5,
      category: "Matériel",
      level: "Intermédiaire",
      thumbnail: "https://via.placeholder.com/400x225?text=Tutoriel+5",
    },
    {
      id: "6",
      title: "Générer des rapports personnalisés",
      description: "Créez des rapports adaptés à vos besoins spécifiques",
      duration: "9:30",
      views: 734,
      likes: 58,
      rating: 4.8,
      category: "Rapports",
      level: "Avancé",
      thumbnail: "https://via.placeholder.com/400x225?text=Tutoriel+6",
    },
  ];

  const categories = ["all", "Démarrage", "Chantiers", "Facturation", "Équipes", "Matériel", "Rapports"];
  const levels = ["all", "Débutant", "Intermédiaire", "Avancé"];

  const filteredTutoriels = tutoriels.filter((tuto) => {
    const matchesSearch =
      tuto.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
      tuto.description.toLowerCase().includes(searchTerm.toLowerCase());
    const matchesCategory =
      selectedCategory === "all" || tuto.category === selectedCategory;
    return matchesSearch && matchesCategory;
  });

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

  return (
    <div className="space-y-6 p-6">
      {/* En-tête */}
      <div className="flex items-center justify-between">
        <div className="flex items-center gap-4">
          <Link href="/aide">
            <Button variant="ghost" size="sm">
              <ArrowLeft className="h-4 w-4 mr-2" />
              Retour à l'aide
            </Button>
          </Link>
          <div>
            <h1 className="text-3xl font-bold text-gray-900">Tutoriels vidéo</h1>
            <p className="text-gray-500 mt-1">
              {filteredTutoriels.length} tutoriel{filteredTutoriels.length > 1 ? "s" : ""}{" "}
              disponible{filteredTutoriels.length > 1 ? "s" : ""}
            </p>
          </div>
        </div>
      </div>

      {/* Barre de recherche et filtres */}
      <div className="flex gap-4 flex-wrap">
        <div className="flex-1 min-w-[300px]">
          <div className="relative">
            <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-gray-400" />
            <Input
              placeholder="Rechercher un tutoriel..."
              className="pl-10"
              value={searchTerm}
              onChange={(e) => setSearchTerm(e.target.value)}
            />
          </div>
        </div>
        <div className="flex gap-2 flex-wrap">
          {categories.map((category) => (
            <Button
              key={category}
              variant={selectedCategory === category ? "default" : "outline"}
              size="sm"
              onClick={() => setSelectedCategory(category)}
            >
              {category === "all" ? "Toutes les catégories" : category}
            </Button>
          ))}
        </div>
      </div>

      {/* Grid de tutoriels */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        {filteredTutoriels.map((tutoriel) => (
          <Card
            key={tutoriel.id}
            className="overflow-hidden hover:shadow-lg transition-shadow cursor-pointer"
          >
            {/* Thumbnail */}
            <div className="relative">
              <img
                src={tutoriel.thumbnail}
                alt={tutoriel.title}
                className="w-full h-48 object-cover"
              />
              <div className="absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center opacity-0 hover:opacity-100 transition-opacity">
                <div className="p-4 bg-white rounded-full">
                  <Play className="h-8 w-8 text-blue-600" />
                </div>
              </div>
              <div className="absolute bottom-2 right-2 bg-black bg-opacity-75 text-white px-2 py-1 rounded text-xs flex items-center gap-1">
                <Clock className="h-3 w-3" />
                {tutoriel.duration}
              </div>
            </div>

            {/* Contenu */}
            <div className="p-4">
              <div className="flex items-start justify-between gap-2 mb-2">
                <Badge className={getLevelColor(tutoriel.level)}>
                  {tutoriel.level}
                </Badge>
                <Badge variant="outline">{tutoriel.category}</Badge>
              </div>

              <h3 className="font-semibold text-lg mb-2">{tutoriel.title}</h3>
              <p className="text-sm text-gray-600 mb-4 line-clamp-2">
                {tutoriel.description}
              </p>

              {/* Stats */}
              <div className="flex items-center justify-between text-sm text-gray-500">
                <div className="flex items-center gap-4">
                  <div className="flex items-center gap-1">
                    <Eye className="h-4 w-4" />
                    {tutoriel.views.toLocaleString()}
                  </div>
                  <div className="flex items-center gap-1">
                    <ThumbsUp className="h-4 w-4" />
                    {tutoriel.likes}
                  </div>
                </div>
                <div className="flex items-center gap-1">
                  <Star className="h-4 w-4 fill-yellow-400 text-yellow-400" />
                  <span className="font-medium">{tutoriel.rating}</span>
                </div>
              </div>
            </div>
          </Card>
        ))}
      </div>

      {filteredTutoriels.length === 0 && (
        <Card className="p-12">
          <div className="text-center">
            <Video className="h-12 w-12 text-gray-400 mx-auto mb-4" />
            <p className="text-gray-500">Aucun tutoriel trouvé</p>
          </div>
        </Card>
      )}

      {/* Section suggestions */}
      <Card className="p-6 bg-gradient-to-r from-purple-50 to-blue-50">
        <div className="flex items-start gap-4">
          <div className="p-3 bg-purple-600 rounded-lg">
            <Video className="h-6 w-6 text-white" />
          </div>
          <div className="flex-1">
            <h3 className="font-semibold text-lg mb-2">
              Vous ne trouvez pas ce que vous cherchez ?
            </h3>
            <p className="text-sm text-gray-700 mb-4">
              Suggérez-nous un nouveau tutoriel ! Nous sommes toujours à l'écoute de
              vos besoins pour améliorer notre contenu pédagogique.
            </p>
            <Button className="bg-purple-600 hover:bg-purple-700">
              Suggérer un tutoriel
            </Button>
          </div>
        </div>
      </Card>
    </div>
  );
}