"use client";

import React, { useState } from "react";
import { Card } from "primereact/card";
import { Button } from "primereact/button";
import { InputText } from "primereact/inputtext";
import Link from "next/link";
import { useRouter } from "next/navigation";

/**
 * Page principale du centre d'aide
 * Point d'entrée pour accéder à toute l'aide et la documentation
 */
export default function AidePage() {
  const router = useRouter();
  const [searchTerm, setSearchTerm] = useState("");

  const categories = [
    {
      title: "Démarrage rapide",
      description: "Premiers pas avec BTPXpress",
      icon: "pi pi-lightbulb",
      color: "bg-blue-100 text-blue-600",
      articles: 12,
      link: "/aide/documentation",
    },
    {
      title: "Gestion des chantiers",
      description: "Créer et gérer vos chantiers",
      icon: "pi pi-file",
      color: "bg-green-100 text-green-600",
      articles: 25,
      link: "/aide/documentation",
    },
    {
      title: "Facturation",
      description: "Devis, factures et paiements",
      icon: "pi pi-book",
      color: "bg-purple-100 text-purple-600",
      articles: 18,
      link: "/aide/documentation",
    },
    {
      title: "Équipes et planning",
      description: "Gérer vos équipes et plannings",
      icon: "pi pi-users",
      color: "bg-yellow-100 text-yellow-600",
      articles: 15,
      link: "/aide/documentation",
    },
    {
      title: "Matériel",
      description: "Gestion du matériel et stock",
      icon: "pi pi-box",
      color: "bg-red-100 text-red-600",
      articles: 10,
      link: "/aide/documentation",
    },
    {
      title: "Rapports",
      description: "Générer et analyser vos rapports",
      icon: "pi pi-chart-bar",
      color: "bg-indigo-100 text-indigo-600",
      articles: 8,
      link: "/aide/documentation",
    },
  ];

  const resources = [
    {
      title: "Documentation complète",
      description: "Guides détaillés et tutoriels pas à pas",
      icon: "pi pi-book",
      color: "bg-blue-600",
      link: "/aide/documentation",
    },
    {
      title: "Tutoriels vidéo",
      description: "Apprenez en vidéo avec nos tutoriels",
      icon: "pi pi-video",
      color: "bg-red-600",
      link: "/aide/tutoriels",
    },
    {
      title: "Support technique",
      description: "Contactez notre équipe d'assistance",
      icon: "pi pi-headphones",
      color: "bg-green-600",
      link: "/aide/support",
    },
  ];

  const popularArticles = [
    {
      title: "Comment créer votre premier chantier ?",
      views: 1543,
      category: "Chantiers",
    },
    {
      title: "Gérer les phases et sous-phases",
      views: 1234,
      category: "Chantiers",
    },
    {
      title: "Créer un devis rapidement",
      views: 1156,
      category: "Facturation",
    },
    {
      title: "Planifier les équipes efficacement",
      views: 987,
      category: "Équipes",
    },
    {
      title: "Exporter vos données",
      views: 876,
      category: "Rapports",
    },
  ];

  const handleSearch = (e: React.FormEvent) => {
    e.preventDefault();
    if (searchTerm.trim()) {
      router.push(`/aide/documentation?search=${encodeURIComponent(searchTerm)}`);
    }
  };

  return (
    <div className="space-y-6 p-6">
      {/* En-tête */}
      <div className="text-center mb-8">
        <h1 className="text-4xl font-bold text-gray-900 mb-3">
          <i className="pi pi-question-circle mr-3"></i>
          Centre d'aide
        </h1>
        <p className="text-xl text-gray-600">
          Comment pouvons-nous vous aider aujourd'hui ?
        </p>
      </div>

      {/* Barre de recherche */}
      <Card className="mb-6">
        <form onSubmit={handleSearch}>
          <div className="p-inputgroup flex-1">
            <span className="p-inputgroup-addon">
              <i className="pi pi-search"></i>
            </span>
            <InputText
              placeholder="Rechercher dans l'aide..."
              value={searchTerm}
              onChange={(e) => setSearchTerm(e.target.value)}
              className="w-full"
              style={{ fontSize: '1.1rem', padding: '1rem' }}
            />
            <Button
              label="Rechercher"
              type="submit"
              icon="pi pi-search"
              className="bg-blue-600 hover:bg-blue-700"
            />
          </div>
        </form>
      </Card>

      {/* Ressources principales */}
      <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
        {resources.map((resource, index) => (
          <Link key={index} href={resource.link}>
            <Card className="hover:shadow-lg transition-shadow cursor-pointer h-full">
              <div className="flex flex-column align-items-center text-center">
                <div
                  className={`${resource.color} text-white border-round`}
                  style={{ padding: '1.5rem', marginBottom: '1rem' }}
                >
                  <i className={`${resource.icon} text-4xl`}></i>
                </div>
                <h3 className="text-xl font-bold mb-2">{resource.title}</h3>
                <p className="text-gray-600">{resource.description}</p>
                <Button
                  label="Accéder"
                  icon="pi pi-arrow-right"
                  className="mt-3"
                  outlined
                />
              </div>
            </Card>
          </Link>
        ))}
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
        {/* Catégories */}
        <div className="lg:col-span-2">
          <Card>
            <h2 className="text-2xl font-semibold mb-4">
              <i className="pi pi-th-large mr-2"></i>
              Parcourir par catégorie
            </h2>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              {categories.map((category, index) => (
                <Link key={index} href={category.link}>
                  <div className="p-4 border border-gray-200 rounded hover:shadow-md transition-shadow cursor-pointer">
                    <div className="flex align-items-start gap-3">
                      <div className={`${category.color} border-round p-3`}>
                        <i className={`${category.icon} text-2xl`}></i>
                      </div>
                      <div className="flex-1">
                        <h3 className="font-semibold text-lg mb-1">
                          {category.title}
                        </h3>
                        <p className="text-sm text-gray-600 mb-2">
                          {category.description}
                        </p>
                        <span className="text-xs text-gray-500">
                          {category.articles} articles
                        </span>
                      </div>
                      <i className="pi pi-chevron-right text-gray-400"></i>
                    </div>
                  </div>
                </Link>
              ))}
            </div>
          </Card>
        </div>

        {/* Sidebar */}
        <div className="space-y-6">
          {/* Articles populaires */}
          <Card>
            <h3 className="text-xl font-semibold mb-4">
              <i className="pi pi-star mr-2"></i>
              Articles populaires
            </h3>
            <div className="space-y-3">
              {popularArticles.map((article, index) => (
                <div
                  key={index}
                  className="p-3 bg-gray-50 rounded hover:bg-gray-100 cursor-pointer transition-colors"
                >
                  <h4 className="font-medium text-sm mb-1">{article.title}</h4>
                  <div className="flex justify-content-between align-items-center text-xs text-gray-500">
                    <span className="bg-gray-200 px-2 py-1 rounded">
                      {article.category}
                    </span>
                    <span>
                      <i className="pi pi-eye mr-1"></i>
                      {article.views.toLocaleString()}
                    </span>
                  </div>
                </div>
              ))}
            </div>
          </Card>

          {/* Contact */}
          <Card className="bg-gradient-to-br from-blue-50 to-blue-100">
            <div className="text-center">
              <div className="bg-blue-600 text-white border-round inline-block p-3 mb-3">
                <i className="pi pi-phone text-2xl"></i>
              </div>
              <h3 className="font-semibold text-lg mb-2">Besoin d'aide ?</h3>
              <p className="text-sm text-gray-700 mb-3">
                Notre équipe est disponible pour vous assister
              </p>
              <div className="space-y-2">
                <div className="text-sm">
                  <i className="pi pi-phone mr-2"></i>
                  <span className="font-semibold">+33 1 23 45 67 89</span>
                </div>
                <div className="text-sm">
                  <i className="pi pi-envelope mr-2"></i>
                  <span className="font-semibold">support@btpxpress.fr</span>
                </div>
              </div>
              <Button
                label="Contacter le support"
                icon="pi pi-send"
                className="mt-3 w-full"
                onClick={() => router.push('/aide/support')}
              />
            </div>
          </Card>
        </div>
      </div>
    </div>
  );
}