"use client";

import React from "react";
import { Card } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import {
  BookOpen,
  Video,
  MessageCircle,
  Search,
  FileText,
  HelpCircle,
  Lightbulb,
  Phone,
  Mail,
  ExternalLink,
} from "lucide-react";
import Link from "next/link";

/**
 * Page principale du centre d'aide
 * Point d'entrée pour accéder à toute l'aide et la documentation
 */
export default function AidePage() {
  const categories = [
    {
      title: "Démarrage rapide",
      description: "Premiers pas avec BTPXpress",
      icon: Lightbulb,
      color: "bg-blue-100 text-blue-600",
      articles: 12,
    },
    {
      title: "Gestion des chantiers",
      description: "Créer et gérer vos chantiers",
      icon: FileText,
      color: "bg-green-100 text-green-600",
      articles: 25,
    },
    {
      title: "Facturation",
      description: "Devis, factures et paiements",
      icon: BookOpen,
      color: "bg-purple-100 text-purple-600",
      articles: 18,
    },
    {
      title: "Équipes et planning",
      description: "Gérer vos équipes et plannings",
      icon: Video,
      color: "bg-orange-100 text-orange-600",
      articles: 15,
    },
  ];

  const articlesPopulaires = [
    "Comment créer un nouveau chantier ?",
    "Gérer les devis et les factures",
    "Planifier l'utilisation du matériel",
    "Ajouter des membres à une équipe",
    "Générer des rapports d'activité",
  ];

  return (
    <div className="space-y-8 p-6">
      {/* En-tête */}
      <div className="text-center space-y-4">
        <h1 className="text-4xl font-bold text-gray-900">
          Comment pouvons-nous vous aider ?
        </h1>
        <p className="text-lg text-gray-600">
          Recherchez dans notre base de connaissances ou contactez notre support
        </p>
        <div className="max-w-2xl mx-auto">
          <div className="relative">
            <Search className="absolute left-4 top-1/2 -translate-y-1/2 h-5 w-5 text-gray-400" />
            <Input
              placeholder="Rechercher dans l'aide..."
              className="pl-12 h-12 text-lg"
            />
          </div>
        </div>
      </div>

      {/* Accès rapide */}
      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
        <Link href="/aide/documentation">
          <Card className="p-6 hover:shadow-lg transition-shadow cursor-pointer">
            <div className="flex items-start gap-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-2">Documentation</h3>
                <p className="text-sm text-gray-600">
                  Guides complets et documentation technique
                </p>
              </div>
            </div>
          </Card>
        </Link>

        <Link href="/aide/tutoriels">
          <Card className="p-6 hover:shadow-lg transition-shadow cursor-pointer">
            <div className="flex items-start gap-4">
              <div className="p-3 bg-green-100 rounded-lg">
                <Video className="h-6 w-6 text-green-600" />
              </div>
              <div className="flex-1">
                <h3 className="font-semibold text-lg mb-2">Tutoriels</h3>
                <p className="text-sm text-gray-600">
                  Vidéos et guides pas-à-pas
                </p>
              </div>
            </div>
          </Card>
        </Link>

        <Link href="/aide/support">
          <Card className="p-6 hover:shadow-lg transition-shadow cursor-pointer">
            <div className="flex items-start gap-4">
              <div className="p-3 bg-purple-100 rounded-lg">
                <MessageCircle className="h-6 w-6 text-purple-600" />
              </div>
              <div className="flex-1">
                <h3 className="font-semibold text-lg mb-2">Support</h3>
                <p className="text-sm text-gray-600">
                  Contactez notre équipe d'assistance
                </p>
              </div>
            </div>
          </Card>
        </Link>
      </div>

      {/* Catégories populaires */}
      <div>
        <h2 className="text-2xl font-bold text-gray-900 mb-6">
          Catégories populaires
        </h2>
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
          {categories.map((category) => (
            <Card
              key={category.title}
              className="p-6 hover:shadow-lg transition-shadow cursor-pointer"
            >
              <div className={`p-3 ${category.color} rounded-lg w-fit mb-4`}>
                <category.icon className="h-6 w-6" />
              </div>
              <h3 className="font-semibold text-lg mb-2">{category.title}</h3>
              <p className="text-sm text-gray-600 mb-4">{category.description}</p>
              <p className="text-sm text-blue-600 font-medium">
                {category.articles} articles
              </p>
            </Card>
          ))}
        </div>
      </div>

      {/* Articles populaires */}
      <div>
        <h2 className="text-2xl font-bold text-gray-900 mb-6">
          Articles populaires
        </h2>
        <Card>
          <div className="divide-y">
            {articlesPopulaires.map((article, index) => (
              <div
                key={index}
                className="p-4 hover:bg-gray-50 cursor-pointer flex items-center justify-between group"
              >
                <div className="flex items-center gap-3">
                  <HelpCircle className="h-5 w-5 text-gray-400" />
                  <span className="text-gray-900">{article}</span>
                </div>
                <ExternalLink className="h-4 w-4 text-gray-400 opacity-0 group-hover:opacity-100 transition-opacity" />
              </div>
            ))}
          </div>
        </Card>
      </div>

      {/* Contact direct */}
      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
        <Card className="p-6 bg-blue-50 border-blue-200">
          <div className="flex items-start gap-4">
            <div className="p-3 bg-blue-600 rounded-lg">
              <Phone className="h-6 w-6 text-white" />
            </div>
            <div className="flex-1">
              <h3 className="font-semibold text-lg mb-2 text-blue-900">
                Support téléphonique
              </h3>
              <p className="text-sm text-blue-700 mb-3">
                Disponible du lundi au vendredi de 9h à 18h
              </p>
              <Button className="bg-blue-600 hover:bg-blue-700">
                +33 1 23 45 67 89
              </Button>
            </div>
          </div>
        </Card>

        <Card className="p-6 bg-green-50 border-green-200">
          <div className="flex items-start gap-4">
            <div className="p-3 bg-green-600 rounded-lg">
              <Mail className="h-6 w-6 text-white" />
            </div>
            <div className="flex-1">
              <h3 className="font-semibold text-lg mb-2 text-green-900">
                Support par email
              </h3>
              <p className="text-sm text-green-700 mb-3">
                Réponse sous 24h ouvrées
              </p>
              <Button className="bg-green-600 hover:bg-green-700">
                support@btpxpress.fr
              </Button>
            </div>
          </div>
        </Card>
      </div>
    </div>
  );
}