import { useState } from "react";
import { useLocation } from "wouter";
import { Button } from "@/components/ui/button";
import {
  ChevronLeft, ChevronDown, ChevronUp,
  QrCode, Smartphone, Monitor, CreditCard,
  Users, Clock, AlertCircle, Wifi, Printer,
  HelpCircle, BookOpen, Stethoscope
} from "lucide-react";

interface FaqItem {
  q: string;
  a: string;
  category: string;
}

const FAQ: FaqItem[] = [
  // Médecin
  {
    category: "Médecin",
    q: "Comment créer mon premier cabinet ?",
    a: "Depuis le tableau de bord, cliquez sur 'Mes cabinets' puis 'Nouveau cabinet'. Renseignez le nom, l'adresse optionnelle et les paramètres de la file (durée de consultation, taille maximale). Un QR code unique est généré automatiquement.",
  },
  {
    category: "Médecin",
    q: "Comment ouvrir et fermer la file d'attente ?",
    a: "Dans la page 'Gestion de la file', sélectionnez votre cabinet et cliquez sur 'Ouvrir la file'. Les patients peuvent alors rejoindre. En fin de journée, cliquez sur 'Fermer la file' puis 'Réinitialiser' pour repartir à zéro le lendemain.",
  },
  {
    category: "Médecin",
    q: "Comment appeler le prochain patient ?",
    a: "Cliquez sur 'Appeler le suivant' dans l'interface de gestion. Le numéro s'affiche automatiquement sur l'écran d'affichage en salle et le patient reçoit une notification push sur son téléphone.",
  },
  {
    category: "Médecin",
    q: "Que faire si un patient ne se présente pas ?",
    a: "Cliquez sur 'Absent' à côté du nom du patient. Il est retiré de la file et les positions des autres patients se mettent à jour automatiquement. Le patient devra rescanner le QR code pour rejoindre à nouveau.",
  },
  {
    category: "Médecin",
    q: "Puis-je gérer plusieurs cabinets ?",
    a: "Oui, avec le plan Pro vous pouvez créer un nombre illimité de cabinets. Chaque cabinet a son propre QR code, sa propre file d'attente et ses propres statistiques.",
  },
  // Patient
  {
    category: "Patient",
    q: "Comment rejoindre la file d'attente ?",
    a: "Ouvrez l'appareil photo de votre smartphone et pointez-le vers le QR code affiché à l'accueil du cabinet. Un lien s'affiche automatiquement — appuyez dessus. Aucune application à installer.",
  },
  {
    category: "Patient",
    q: "Puis-je quitter la salle d'attente physique ?",
    a: "Oui, c'est l'avantage principal de QueueMed ! Gardez la page ouverte sur votre téléphone et allez où vous le souhaitez. Vous recevrez une notification push quand votre tour approche. Restez à moins de 5 minutes du cabinet.",
  },
  {
    category: "Patient",
    q: "Je n'ai pas de smartphone, que faire ?",
    a: "Demandez un ticket imprimé au personnel d'accueil. Ce ticket comporte votre numéro de file. Restez en salle d'attente et surveillez l'écran d'affichage pour voir quand votre numéro est appelé.",
  },
  {
    category: "Patient",
    q: "Pourquoi le QR code ne fonctionne plus ?",
    a: "Le QR code se renouvelle automatiquement à intervalles réguliers pour éviter les abus. Si le lien ne fonctionne plus, rescannez le QR code affiché à l'accueil pour obtenir un nouveau lien valide.",
  },
  // Technique
  {
    category: "Technique",
    q: "Comment configurer l'écran d'affichage ?",
    a: "Dans la fiche de votre cabinet, copiez le 'Lien écran d'affichage'. Ouvrez ce lien sur votre tablette ou moniteur, puis activez le mode plein écran (F11 sur PC). L'écran se met à jour automatiquement via WebSocket.",
  },
  {
    category: "Technique",
    q: "Que se passe-t-il en cas de coupure internet ?",
    a: "L'écran d'affichage affiche un indicateur 'Reconnexion...' en rouge. Les patients déjà dans la file conservent leur position. Dès que la connexion est rétablie, la synchronisation reprend automatiquement.",
  },
  {
    category: "Technique",
    q: "Sur quels appareils fonctionne QueueMed ?",
    a: "QueueMed fonctionne sur tous les appareils avec un navigateur moderne : smartphones iOS et Android, tablettes, ordinateurs. Aucune application à installer. Recommandé : Chrome ou Safari.",
  },
  // Abonnement
  {
    category: "Abonnement",
    q: "Combien dure l'essai gratuit ?",
    a: "L'essai gratuit dure 30 jours à compter de votre première connexion. Toutes les fonctionnalités sont disponibles sans restriction pendant cette période.",
  },
  {
    category: "Abonnement",
    q: "Que se passe-t-il après l'essai gratuit ?",
    a: "L'accès aux fonctionnalités de gestion est bloqué jusqu'à souscription d'un plan payant. Vos données sont conservées. Les patients peuvent toujours voir leur position dans les files actives.",
  },
  {
    category: "Abonnement",
    q: "Puis-je annuler mon abonnement ?",
    a: "Oui, vous pouvez annuler à tout moment depuis la page 'Abonnement' de votre tableau de bord. L'accès reste actif jusqu'à la fin de la période payée.",
  },
];

const CATEGORIES = ["Tous", "Médecin", "Patient", "Technique", "Abonnement"];

const CATEGORY_ICONS: Record<string, React.ElementType> = {
  Médecin: Stethoscope,
  Patient: Users,
  Technique: Wifi,
  Abonnement: CreditCard,
};

export default function Help() {
  const [, navigate] = useLocation();
  const [activeCategory, setActiveCategory] = useState("Tous");
  const [openIndex, setOpenIndex] = useState<number | null>(null);

  const filtered = activeCategory === "Tous"
    ? FAQ
    : FAQ.filter(f => f.category === activeCategory);

  return (
    <div className="min-h-screen">
      {/* Background */}
      <div className="fixed inset-0 pointer-events-none overflow-hidden">
        <div className="absolute top-1/4 left-1/4 w-96 h-96 rounded-full bg-primary/8 blur-3xl" />
        <div className="absolute bottom-1/4 right-1/4 w-80 h-80 rounded-full bg-secondary/8 blur-3xl" />
      </div>

      <div className="relative z-10 max-w-3xl mx-auto px-4 py-12">
        {/* Back */}
        <button
          onClick={() => navigate(-1 as any)}
          className="flex items-center gap-2 text-muted-foreground hover:text-foreground transition-colors mb-8 text-sm"
        >
          <ChevronLeft className="w-4 h-4" />
          Retour
        </button>

        {/* Header */}
        <div className="text-center mb-12">
          <div className="w-16 h-16 rounded-2xl bg-primary/20 border border-primary/40 flex items-center justify-center mx-auto mb-4 glow-teal">
            <HelpCircle className="w-8 h-8 text-primary" />
          </div>
          <h1 className="font-display text-4xl font-bold mb-3">Centre d'aide</h1>
          <p className="text-muted-foreground text-lg">
            Trouvez rapidement les réponses à vos questions sur QueueMed.
          </p>
        </div>

        {/* Quick links */}
        <div className="grid grid-cols-2 md:grid-cols-4 gap-3 mb-10">
          {[
            { icon: QrCode, label: "QR Code", cat: "Médecin" },
            { icon: Smartphone, label: "Patient", cat: "Patient" },
            { icon: Monitor, label: "Écran", cat: "Technique" },
            { icon: CreditCard, label: "Abonnement", cat: "Abonnement" },
          ].map(item => {
            const Icon = item.icon;
            return (
              <button
                key={item.cat}
                onClick={() => setActiveCategory(item.cat)}
                className={`glass-card rounded-2xl p-4 flex flex-col items-center gap-2 transition-all hover:border-primary/50 ${
                  activeCategory === item.cat ? "border-primary/60 glow-teal" : ""
                }`}
              >
                <Icon className="w-6 h-6 text-primary" />
                <span className="text-sm font-medium">{item.label}</span>
              </button>
            );
          })}
        </div>

        {/* Category filter */}
        <div className="flex gap-2 flex-wrap mb-6">
          {CATEGORIES.map(cat => (
            <button
              key={cat}
              onClick={() => setActiveCategory(cat)}
              className={`px-4 py-1.5 rounded-full text-sm font-medium border transition-all ${
                activeCategory === cat
                  ? "bg-primary text-primary-foreground border-primary"
                  : "bg-muted/50 border-border/60 text-muted-foreground hover:border-primary/40"
              }`}
            >
              {cat}
            </button>
          ))}
        </div>

        {/* FAQ */}
        <div className="space-y-3">
          {filtered.map((item, i) => {
            const CatIcon = CATEGORY_ICONS[item.category] || BookOpen;
            const isOpen = openIndex === i;
            return (
              <div
                key={i}
                className={`glass-card rounded-2xl overflow-hidden transition-all duration-200 ${isOpen ? "border-primary/40" : ""}`}
              >
                <button
                  onClick={() => setOpenIndex(isOpen ? null : i)}
                  className="w-full flex items-center gap-4 p-5 text-left hover:bg-white/5 transition-colors"
                >
                  <div className="w-8 h-8 rounded-lg bg-primary/15 border border-primary/30 flex items-center justify-center flex-shrink-0">
                    <CatIcon className="w-4 h-4 text-primary" />
                  </div>
                  <span className="flex-1 font-medium text-sm leading-snug">{item.q}</span>
                  {isOpen
                    ? <ChevronUp className="w-4 h-4 text-muted-foreground flex-shrink-0" />
                    : <ChevronDown className="w-4 h-4 text-muted-foreground flex-shrink-0" />
                  }
                </button>
                {isOpen && (
                  <div className="px-5 pb-5 pt-0">
                    <div className="ml-12 text-sm text-muted-foreground leading-relaxed border-t border-border/40 pt-4">
                      {item.a}
                    </div>
                  </div>
                )}
              </div>
            );
          })}
        </div>

        {/* Contact CTA */}
        <div className="mt-12 glass-card rounded-3xl p-8 text-center border-primary/20">
          <AlertCircle className="w-10 h-10 text-secondary mx-auto mb-4" />
          <h3 className="font-display text-xl font-bold mb-2">Vous ne trouvez pas votre réponse ?</h3>
          <p className="text-muted-foreground text-sm mb-6">
            Notre équipe est disponible pour vous aider à configurer et utiliser QueueMed dans votre cabinet.
          </p>
          <div className="flex gap-3 justify-center flex-wrap">
            <Button
              variant="outline"
              onClick={() => navigate("/dashboard")}
              className="border-border/60"
            >
              <Stethoscope className="w-4 h-4 mr-2" />
              Tableau de bord
            </Button>
            <Button
              onClick={() => window.open("mailto:support@queuemed.fr", "_blank")}
              className="bg-primary text-primary-foreground hover:bg-primary/90 glow-teal"
            >
              Contacter le support
            </Button>
          </div>
        </div>
      </div>
    </div>
  );
}