btpxpress-frontend/app/(main)/aide/tutoriels/page.tsx

"use client";

import React, { useState } from "react";
import { Card } from "primereact/card";
import { Button } from "primereact/button";
import { InputText } from "primereact/inputtext";
import { Tag } from "primereact/tag";
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 getLevelSeverity = (level: string): "success" | "info" | "warning" | undefined => {
    switch (level) {
      case "Débutant":
        return "success";
      case "Intermédiaire":
        return "info";
      case "Avancé":
        return "warning";
      default:
        return undefined;
    }
  };

  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 text size="small">
              <i className="pi pi-arrow-left mr-2"></i>
              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]">
          <span className="p-input-icon-left w-full">
            <i className="pi pi-search" />
            <InputText
              placeholder="Rechercher un tutoriel..."
              className="w-full"
              value={searchTerm}
              onChange={(e) => setSearchTerm(e.target.value)}
            />
          </span>
        </div>
        <div className="flex gap-2 flex-wrap">
          {categories.map((category) => (
            <Button
              key={category}
              outlined={selectedCategory !== category}
              size="small"
              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">
                  <i className="pi pi-play text-blue-600" style={{ fontSize: '2rem' }}></i>
                </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">
                <i className="pi pi-clock" style={{ fontSize: '0.75rem' }}></i>
                {tutoriel.duration}
              </div>
            </div>

            {/* Contenu */}
            <div className="p-4">
              <div className="flex items-start justify-between gap-2 mb-2">
                <Tag severity={getLevelSeverity(tutoriel.level)} value={tutoriel.level} />
                <Tag severity="secondary" value={tutoriel.category} />
              </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">
                    <i className="pi pi-eye"></i>
                    {tutoriel.views.toLocaleString()}
                  </div>
                  <div className="flex items-center gap-1">
                    <i className="pi pi-thumbs-up"></i>
                    {tutoriel.likes}
                  </div>
                </div>
                <div className="flex items-center gap-1">
                  <i className="pi pi-star-fill text-yellow-400"></i>
                  <span className="font-medium">{tutoriel.rating}</span>
                </div>
              </div>
            </div>
          </Card>
        ))}
      </div>

      {filteredTutoriels.length === 0 && (
        <Card className="p-12">
          <div className="text-center">
            <i className="pi pi-video text-gray-400 mx-auto mb-4" style={{ fontSize: '3rem' }}></i>
            <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">
            <i className="pi pi-video text-white" style={{ fontSize: '1.5rem' }}></i>
          </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>
  );
}