"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 {
  BookOpen,
  Search,
  ChevronRight,
  FileText,
  Download,
  ExternalLink,
  ArrowLeft,
} from "lucide-react";
import Link from "next/link";

/**
 * Page de documentation
 * Guides complets et documentation technique
 */
export default function DocumentationPage() {
  const [searchTerm, setSearchTerm] = useState("");
  const [selectedCategory, setSelectedCategory] = useState<string | null>(null);

  const categories = [
    {
      id: "getting-started",
      title: "Démarrage",
      description: "Premiers pas avec BTPXpress",
      articles: [
        "Installation et configuration",
        "Créer votre premier chantier",
        "Comprendre l'interface",
        "Configuration du profil entreprise",
      ],
    },
    {
      id: "chantiers",
      title: "Gestion des chantiers",
      description: "Tout sur la gestion des chantiers",
      articles: [
        "Créer un nouveau chantier",
        "Gérer les phases de chantier",
        "Suivi en temps réel",
        "Clôturer un chantier",
      ],
    },
    {
      id: "factures",
      title: "Facturation",
      description: "Devis, factures et paiements",
      articles: [
        "Créer un devis",
        "Convertir un devis en facture",
        "Gérer les paiements",
        "Relances automatiques",
      ],
    },
    {
      id: "equipes",
      title: "Équipes et planning",
      description: "Gérer vos équipes",
      articles: [
        "Créer une équipe",
        "Affecter des employés",
        "Planifier les interventions",
        "Gérer les disponibilités",
      ],
    },
    {
      id: "materiel",
      title: "Matériel",
      description: "Gestion du matériel BTP",
      articles: [
        "Ajouter du matériel",
        "Planifier l'utilisation",
        "Maintenance préventive",
        "Historique d'utilisation",
      ],
    },
    {
      id: "rapports",
      title: "Rapports et analyses",
      description: "Générer des rapports",
      articles: [
        "Rapports d'activité",
        "Analyse financière",
        "Rapports personnalisés",
        "Export des données",
      ],
    },
  ];

  const filteredCategories = selectedCategory
    ? categories.filter((cat) => cat.id === selectedCategory)
    : categories;

  const allArticles = categories.flatMap((cat) =>
    cat.articles.map((article) => ({ category: cat.title, article }))
  );

  const searchResults = searchTerm
    ? allArticles.filter((item) =>
        item.article.toLowerCase().includes(searchTerm.toLowerCase())
      )
    : [];

  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">Documentation</h1>
            <p className="text-gray-500 mt-1">
              Guides complets et documentation technique
            </p>
          </div>
        </div>
        <Button variant="outline">
          <Download className="mr-2 h-4 w-4" />
          Télécharger PDF
        </Button>
      </div>

      {/* Barre de recherche */}
      <Card className="p-4">
        <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 dans la documentation..."
            className="pl-10"
            value={searchTerm}
            onChange={(e) => setSearchTerm(e.target.value)}
          />
        </div>

        {/* Résultats de recherche */}
        {searchTerm && searchResults.length > 0 && (
          <div className="mt-4 border-t pt-4">
            <p className="text-sm text-gray-600 mb-3">
              {searchResults.length} résultat{searchResults.length > 1 ? "s" : ""}{" "}
              trouvé{searchResults.length > 1 ? "s" : ""}
            </p>
            <div className="space-y-2">
              {searchResults.map((result, index) => (
                <div
                  key={index}
                  className="p-3 hover:bg-gray-50 rounded cursor-pointer flex items-center justify-between"
                >
                  <div>
                    <p className="font-medium">{result.article}</p>
                    <p className="text-sm text-gray-500">{result.category}</p>
                  </div>
                  <ChevronRight className="h-4 w-4 text-gray-400" />
                </div>
              ))}
            </div>
          </div>
        )}
      </Card>

      {/* Catégories de documentation */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        {filteredCategories.map((category) => (
          <Card
            key={category.id}
            className="p-6 hover:shadow-lg transition-shadow"
          >
            <div className="flex items-start gap-4 mb-4">
              <div className="p-3 bg-blue-100 rounded-lg">
                <BookOpen className="h-6 w-6 text-blue-600" />
              </div>
              <div className="flex-1">
                <h3 className="font-semibold text-lg mb-1">{category.title}</h3>
                <p className="text-sm text-gray-600">{category.description}</p>
              </div>
            </div>

            <div className="space-y-2">
              {category.articles.map((article, index) => (
                <div
                  key={index}
                  className="flex items-center gap-2 p-2 hover:bg-gray-50 rounded cursor-pointer group"
                >
                  <FileText className="h-4 w-4 text-gray-400" />
                  <span className="text-sm flex-1">{article}</span>
                  <ExternalLink className="h-3 w-3 text-gray-400 opacity-0 group-hover:opacity-100 transition-opacity" />
                </div>
              ))}
            </div>

            <Button
              variant="link"
              className="mt-4 p-0 h-auto text-blue-600"
              onClick={() => setSelectedCategory(category.id)}
            >
              Voir tous les articles
              <ChevronRight className="ml-1 h-4 w-4" />
            </Button>
          </Card>
        ))}
      </div>

      {/* Guides de démarrage rapide */}
      <Card className="p-6 bg-gradient-to-r from-blue-50 to-purple-50">
        <div className="flex items-start gap-4">
          <div className="p-3 bg-blue-600 rounded-lg">
            <BookOpen className="h-6 w-6 text-white" />
          </div>
          <div className="flex-1">
            <h3 className="font-semibold text-lg mb-2">
              Guide de démarrage rapide
            </h3>
            <p className="text-sm text-gray-700 mb-4">
              Téléchargez notre guide PDF complet pour démarrer rapidement avec
              BTPXpress. Il contient tous les concepts essentiels et les meilleures
              pratiques.
            </p>
            <div className="flex gap-3">
              <Button className="bg-blue-600 hover:bg-blue-700">
                <Download className="mr-2 h-4 w-4" />
                Télécharger le guide (PDF)
              </Button>
              <Button variant="outline">
                Voir la version en ligne
              </Button>
            </div>
          </div>
        </div>
      </Card>
    </div>
  );
}