"use client";

import { useEffect } from "react";
import { X, FilePlus, Play, PackagePlus, ArrowRight, BookOpen, Layers, CheckCircle2 } from "lucide-react";

interface WorkspaceHelpModalProps {
  isOpen: boolean;
  onClose: () => void;
}

export default function WorkspaceHelpModal({ isOpen, onClose }: WorkspaceHelpModalProps) {
  useEffect(() => {
    const onKey = (e: KeyboardEvent) => {
      if (e.key === "Escape") onClose();
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [onClose]);

  if (!isOpen) return null;

  return (
    <div
      className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-xs p-4 overscroll-contain"
      role="dialog"
      aria-modal="true"
      aria-label="Aide"
    >
      <div className="relative w-full max-w-2xl rounded-xl border border-slate-200 bg-white p-6 shadow-2xl animate-in fade-in zoom-in-95">
        {/* Close Button */}
        <button
          onClick={onClose}
          className="absolute right-4 top-4 rounded-lg p-1.5 text-slate-400 hover:bg-slate-100 hover:text-slate-600"
        >
          <X size={18} />
        </button>

        {/* Header */}
        <div className="flex items-center gap-2.5 border-b border-slate-100 pb-4">
          <div className="grid h-10 w-10 place-items-center rounded-lg bg-indigo-50 text-indigo-600">
            <BookOpen size={20} />
          </div>
          <div>
            <h3 className="mono text-base font-bold text-slate-900">
              Guide Workspace & Création de Modèles (Style Dymola / Modelica)
            </h3>
            <p className="text-xs text-slate-500">
              Comment construire, simuler, sauvegarder et réutiliser des sous-systèmes dans Entropyk.
            </p>
          </div>
        </div>

        {/* Body Content */}
        <div className="mt-5 space-y-4 text-xs text-slate-600 max-h-[70vh] overflow-y-auto pr-1">
          {/* Step 1: Create a Model */}
          <div className="rounded-lg border border-slate-100 bg-slate-50/70 p-3.5">
            <div className="flex items-center gap-2 font-bold text-slate-800 text-[13px] mb-1">
              <FilePlus size={16} className="text-indigo-600" />
              1. Créer un Nouveau Modèle ou Charger un Exemple
            </div>
            <p className="leading-relaxed">
              Pour démarrer un modèle vierge, cliquez sur le bouton <span className="mono font-semibold text-slate-800">Eraser 🧹</span> dans la barre d&apos;outils.
              Pour explorer un modèle pré-construit, choisissez un exemple dans le menu déroulant (ex: <span className="mono font-semibold">Chiller flooded</span>, <span className="mono font-semibold">HX air-water</span>) et cliquez sur <span className="mono font-semibold text-indigo-600">Load</span>.
            </p>
          </div>

          {/* Step 2: Build & Connect */}
          <div className="rounded-lg border border-slate-100 bg-slate-50/70 p-3.5">
            <div className="flex items-center gap-2 font-bold text-slate-800 text-[13px] mb-1">
              <Layers size={16} className="text-blue-600" />
              2. Placer des Composants & Relier les Conduits
            </div>
            <p className="leading-relaxed">
              Glissez-déposez des composants depuis l&apos;onglet <span className="mono font-semibold text-slate-800">Composants</span> ou cliquez sur <span className="mono font-semibold text-indigo-600">+ Poser sur canvas</span> depuis la <span className="mono font-semibold text-slate-800">Bibliothèque</span>.
              Reliez les handles colorés (entrées bleues, sorties vertes) pour fermer votre cycle thermodynamique.
            </p>
          </div>

          {/* Step 3: Save as Module (.ekmod) */}
          <div className="rounded-lg border border-slate-100 bg-slate-50/70 p-3.5">
            <div className="flex items-center gap-2 font-bold text-slate-800 text-[13px] mb-1">
              <PackagePlus size={16} className="text-emerald-600" />
              3. Sauvegarder un Sous-Système (Module .ekmod)
            </div>
            <p className="leading-relaxed">
              Une fois votre sous-système assemblé (ex: groupe froid, centrale de traitement d&apos;air), cliquez sur <span className="mono font-semibold text-emerald-600">Save as Module</span>. Saisissez le nom du module et définissez les ports exposés (ex: <span className="mono font-semibold">chw_in</span>, <span className="mono font-semibold">chw_out</span>). Le module apparaît immédiatement dans l&apos;onglet <span className="mono font-semibold text-slate-800">Bibliothèque (.ekmod)</span>.
            </p>
          </div>

          {/* Step 4: Dual Modes Dymola */}
          <div className="rounded-lg border border-slate-100 bg-slate-50/70 p-3.5">
            <div className="flex items-center gap-2 font-bold text-slate-800 text-[13px] mb-1">
              <CheckCircle2 size={16} className="text-amber-600" />
              4. Utiliser les Deux Modes Dymola / Modelica
            </div>
            <p className="leading-relaxed">
              Sur chaque module déposé sur le canvas, le bouton <span className="mono font-semibold text-indigo-600">📐 Mode Schéma</span> bascule entre le <span className="mono font-semibold">Mode Icône</span> (symbole CAD vectoriel du Chiller) et le <span className="mono font-semibold">Mode Schéma Interne</span> (vue miniature des composants internes). Double-cliquez pour ouvrir l&apos;éditeur plein écran du sous-système.
            </p>
          </div>

          {/* Step 5: Simulate */}
          <div className="rounded-lg border border-slate-100 bg-slate-50/70 p-3.5">
            <div className="flex items-center gap-2 font-bold text-slate-800 text-[13px] mb-1">
              <Play size={16} className="text-[#3b82f6]" />
              5. Simuler le Cycle & Résoudre
            </div>
            <p className="leading-relaxed">
              Choisissez le fluide thermodynamique (ex: <span className="mono font-semibold">R410A</span>, <span className="mono font-semibold">R134a</span>) et cliquez sur <span className="mono font-semibold text-indigo-600">Solve</span>. Le résolveur Newton-Raphson de Rust calcule l&apos;état stationnaire complet (pressions, enthalpies, débits, COP, puissances).
            </p>
          </div>
        </div>

        {/* Footer */}
        <div className="mt-6 flex justify-end border-t border-slate-100 pt-4">
          <button
            onClick={onClose}
            className="flex items-center gap-1.5 rounded-lg bg-indigo-600 px-4 py-2 text-xs font-semibold text-white shadow-sm hover:bg-indigo-500 active:scale-95"
          >
            Compris <ArrowRight size={14} />
          </button>
        </div>
      </div>
    </div>
  );
}
