import React, { useRef, useEffect, useState, useImperativeHandle, forwardRef, useMemo } from 'react';
import {
  Bold, Italic, Underline, AlignLeft, AlignCenter, AlignRight, List, Heading1, Heading2,
  Copy, Wand2, Check, RefreshCw, Maximize2, Loader2, MousePointerClick, History, RotateCcw,
  ChevronDown, ChevronUp, Layers
} from 'lucide-react';

export interface RichTextEditorHandle {
  insertHtml: (html: string) => void;
}

interface RichTextEditorProps {
  initialContent: string;
  onChange?: (html: string) => void;
  onSave?: (html: string) => void;
  onSelectionChange?: (text: string) => void;
  onAiTransform?: (text: string, mode: 'correct' | 'rewrite' | 'expand' | 'continue') => Promise<string>;
}

interface Version {
  id: string;
  timestamp: number;
  type: string;
  content: string; // Full HTML snapshot
  snippet: string; // Selected text snippet before change
  topOffset: number; // Y position relative to editor top
}

interface VersionGroup {
  id: string;
  topOffset: number;
  versions: Version[];
}

const RichTextEditor = forwardRef<RichTextEditorHandle, RichTextEditorProps>(({ initialContent, onChange, onSave, onSelectionChange, onAiTransform }, ref) => {
  const contentRef = useRef<HTMLDivElement>(null);
  const scrollContainerRef = useRef<HTMLDivElement>(null);
  const [isFocused, setIsFocused] = useState(false);

  // Auto-Save State
  const [saveStatus, setSaveStatus] = useState<'saved' | 'saving' | 'unsaved'>('saved');
  const saveTimeoutRef = useRef<NodeJS.Timeout | null>(null);

  // Context Menu State
  const [contextMenu, setContextMenu] = useState<{ x: number; y: number } | null>(null);
  const [isAiLoading, setIsAiLoading] = useState(false);

  // History State
  const [versions, setVersions] = useState<Version[]>([]);
  const [showHistoryMargin, setShowHistoryMargin] = useState(true);
  const [expandedGroupIds, setExpandedGroupIds] = useState<Set<string>>(new Set());

  // Refs to track selection
  const savedRange = useRef<Range | null>(null);
  const lastCursorPosition = useRef<Range | null>(null);

  // --- Helpers ---

  // Group versions by proximity (within 60px) to stack them
  const versionGroups = useMemo(() => {
    const sortedVersions = [...versions].sort((a, b) => b.timestamp - a.timestamp);
    const groups: VersionGroup[] = [];

    sortedVersions.forEach(v => {
      // Find an existing group close to this version
      const existingGroup = groups.find(g => Math.abs(g.topOffset - v.topOffset) < 60);

      if (existingGroup) {
        existingGroup.versions.push(v);
        // Keep the group timestamp sorted
        existingGroup.versions.sort((a, b) => b.timestamp - a.timestamp);
      } else {
        groups.push({
          id: `group-${v.id}`,
          topOffset: v.topOffset,
          versions: [v]
        });
      }
    });

    return groups;
  }, [versions]);

  const toggleGroup = (groupId: string) => {
    const newSet = new Set(expandedGroupIds);
    if (newSet.has(groupId)) {
      newSet.delete(groupId);
    } else {
      newSet.add(groupId);
    }
    setExpandedGroupIds(newSet);
  };

  const getSelectionTopOffset = () => {
    const sel = window.getSelection();
    if (sel && sel.rangeCount > 0 && contentRef.current) {
      const range = sel.getRangeAt(0);
      const rect = range.getBoundingClientRect();
      // We need offset relative to the content container (contentRef)
      // contentRef is the white page div.
      const containerRect = contentRef.current.getBoundingClientRect();
      return rect.top - containerRect.top;
    }
    return 0;
  };

  const saveVersion = (type: string, textSnippet: string) => {
    if (!contentRef.current) return;

    const topOffset = getSelectionTopOffset();

    const newVersion: Version = {
      id: Date.now().toString(),
      timestamp: Date.now(),
      type: type,
      content: contentRef.current.innerHTML,
      snippet: textSnippet.substring(0, 80) + (textSnippet.length > 80 ? '...' : ''),
      topOffset
    };

    setVersions(prev => [newVersion, ...prev]);
    setShowHistoryMargin(true);
  };

  const restoreVersion = (version: Version) => {
    if (!contentRef.current) return;
    if (confirm('Restaurer cette version ? Le contenu actuel sera remplacé.')) {
      contentRef.current.innerHTML = version.content;
      handleInput();
    }
  };

  // --- Exposed Methods ---

  useImperativeHandle(ref, () => ({
    insertHtml: (text: string) => {
      saveVersion('Insertion Chat', 'Insertion depuis le panneau IA');

      contentRef.current?.focus();

      const sel = window.getSelection();
      if (lastCursorPosition.current) {
        sel?.removeAllRanges();
        sel?.addRange(lastCursorPosition.current);
      } else if (contentRef.current) {
        const range = document.createRange();
        range.selectNodeContents(contentRef.current);
        range.collapse(false);
        sel?.removeAllRanges();
        sel?.addRange(range);
      }

      const htmlToInsert = text.includes('<') ? text : text.replace(/\n/g, '<br>');
      document.execCommand('insertHTML', false, htmlToInsert);
      handleInput();
    }
  }));

  // --- Effects ---

  useEffect(() => {
    if (contentRef.current && contentRef.current.innerHTML !== initialContent) {
      // Only update if difference is significant to avoid cursor jumps on small re-renders?
      // OR better: Only update if NOT focused?
      if (!isFocused && Math.abs(contentRef.current.innerHTML.length - initialContent.length) > 5) {
        contentRef.current.innerHTML = initialContent;
      }
    }
  }, [initialContent, isFocused]);

  // --- Event Handlers ---

  const execCommand = (command: string, value: string | undefined = undefined) => {
    document.execCommand(command, false, value);
    handleInput();
    contentRef.current?.focus();
  };

  const handleInput = () => {
    if (contentRef.current) {
      if (onChange) onChange(contentRef.current.innerHTML);

      // Auto-Save Debounce
      if (onSave) {
        setSaveStatus('unsaved');
        if (saveTimeoutRef.current) clearTimeout(saveTimeoutRef.current);

        saveTimeoutRef.current = setTimeout(async () => {
          setSaveStatus('saving');
          await onSave(contentRef.current?.innerHTML || "");
          setSaveStatus('saved');
        }, 2000); // 2 seconds
      }
    }
  };

  const saveSelection = () => {
    const sel = window.getSelection();
    if (sel && sel.rangeCount > 0 && contentRef.current?.contains(sel.anchorNode)) {
      lastCursorPosition.current = sel.getRangeAt(0).cloneRange();
    }
  };

  const handleSelection = () => {
    const selection = window.getSelection();
    saveSelection();

    if (selection && selection.toString().length > 0 && onSelectionChange) {
      onSelectionChange(selection.toString());
    } else if (onSelectionChange) {
      onSelectionChange("");
    }
  };

  const handleContextMenu = (e: React.MouseEvent) => {
    e.preventDefault();
    const selection = window.getSelection();

    if (selection && selection.rangeCount > 0) {
      const range = selection.getRangeAt(0);
      if (contentRef.current?.contains(range.commonAncestorContainer)) {
        savedRange.current = range.cloneRange();
        setContextMenu({ x: e.clientX, y: e.clientY });
        return;
      }
    }

    savedRange.current = null;
    setContextMenu({ x: e.clientX, y: e.clientY });
  };

  const handleAiAction = async (mode: 'correct' | 'rewrite' | 'expand' | 'continue') => {
    if (!onAiTransform) return;

    const range = savedRange.current;
    const text = range?.toString() || "";

    if (!text && mode !== 'continue') return;

    const typeLabels: Record<string, string> = {
      correct: 'Correction',
      rewrite: 'Reformulation',
      expand: 'Développement',
      continue: 'Continuation'
    };
    saveVersion(typeLabels[mode], text || "Position curseur");

    setIsAiLoading(true);
    try {
      const result = await onAiTransform(text, mode);

      if (result) {
        contentRef.current?.focus();
        const sel = window.getSelection();
        sel?.removeAllRanges();

        if (range) {
          sel?.addRange(range);
        }

        if (mode === 'continue') {
          sel?.collapseToEnd();
          document.execCommand('insertText', false, " " + result);
        } else {
          document.execCommand('insertText', false, result);
        }

        handleInput();
      }
    } catch (e) {
      console.error("AI Action failed", e);
    } finally {
      setIsAiLoading(false);
      setContextMenu(null);
    }
  };

  const handleCopy = () => {
    if (savedRange.current) {
      const sel = window.getSelection();
      sel?.removeAllRanges();
      sel?.addRange(savedRange.current);
      document.execCommand('copy');
    }
    setContextMenu(null);
  };

  const handleSelectAll = () => {
    contentRef.current?.focus();
    document.execCommand('selectAll');
    handleSelection();
    setContextMenu(null);
  }

  const ToolbarButton = ({ icon: Icon, cmd, arg, label, onClick, isActive }: any) => (
    <button
      onMouseDown={(e) => {
        if (onClick) {
          e.preventDefault();
          onClick();
        } else {
          e.preventDefault();
          execCommand(cmd, arg);
        }
      }}
      className={`p-1.5 rounded transition-colors ${isActive ? 'bg-indigo-100 text-indigo-700' : 'text-slate-500 hover:text-slate-800 hover:bg-slate-200'}`}
      title={label}
    >
      <Icon size={18} />
    </button>
  );

  const hasSelection = savedRange.current && !savedRange.current.collapsed;

  return (
    <div className="flex flex-col h-full bg-white rounded-lg shadow-sm border border-slate-200 overflow-hidden relative">
      <style>{`
        .editor-content:empty::before {
            content: attr(data-placeholder);
            color: #cbd5e1;
            font-style: italic;
            cursor: text;
        }
      `}</style>

      {/* Toolbar */}
      <div className="flex items-center gap-1 p-2 bg-slate-50 border-b border-slate-200 flex-wrap relative z-20 shadow-sm">
        <ToolbarButton icon={Bold} cmd="bold" label="Gras" />
        <ToolbarButton icon={Italic} cmd="italic" label="Italique" />
        <ToolbarButton icon={Underline} cmd="underline" label="Souligné" />
        <div className="w-px h-6 bg-slate-300 mx-1" />
        <ToolbarButton icon={Heading1} cmd="formatBlock" arg="H1" label="Titre 1" />
        <ToolbarButton icon={Heading2} cmd="formatBlock" arg="H2" label="Titre 2" />
        <div className="w-px h-6 bg-slate-300 mx-1" />
        <ToolbarButton icon={AlignLeft} cmd="justifyLeft" label="Aligner à gauche" />
        <ToolbarButton icon={AlignCenter} cmd="justifyCenter" label="Centrer" />
        <ToolbarButton icon={AlignRight} cmd="justifyRight" label="Aligner à droite" />
        <div className="w-px h-6 bg-slate-300 mx-1" />
        <ToolbarButton icon={List} cmd="insertUnorderedList" label="Liste" />

        <div className="flex-1" />

        {/* Save Status Indicator */}
        <div className="flex items-center gap-2 mr-4 text-xs font-medium text-slate-400">
          {saveStatus === 'saving' && <><Loader2 size={12} className="animate-spin" /> Sauvegarde...</>}
          {saveStatus === 'saved' && <><Check size={12} className="text-green-500" /> Sauvegardé</>}
          {saveStatus === 'unsaved' && <span className="text-amber-500">Modifications non enregistrées...</span>}
        </div>

        <div className="w-px h-6 bg-slate-300 mx-1" />
        <ToolbarButton
          icon={History}
          label="Marge d'historique"
          onClick={() => setShowHistoryMargin(!showHistoryMargin)}
          isActive={showHistoryMargin}
        />
      </div>

      {/* Main Container - Scrollable Area */}
      <div
        className="flex-1 overflow-y-auto relative bg-slate-100"
        ref={scrollContainerRef}
      >
        <div className="flex justify-center relative min-h-full py-8">

          {/* Editor Content Page */}
          <div
            ref={contentRef}
            contentEditable
            suppressContentEditableWarning
            className="bg-white shadow-sm w-[800px] min-h-[1000px] p-12 outline-none font-serif text-lg leading-relaxed text-slate-900 editor-content"
            onInput={handleInput}
            onBlur={() => { setIsFocused(false); saveSelection(); }}
            onFocus={() => setIsFocused(true)}
            onKeyUp={saveSelection}
            onMouseUp={saveSelection}
            onSelect={handleSelection}
            onClick={() => contentRef.current?.focus()}
            onContextMenu={handleContextMenu}
            data-placeholder="Commencez à écrire votre chef-d'œuvre... (Clic droit pour outils IA)"
          />

          {/* History Track - Moving with the page */}
          {showHistoryMargin && (
            <div className="absolute left-[calc(50%+420px)] top-0 bottom-0 w-80 pt-8 pointer-events-none">
              {/* Placeholder for empty history */}
              {versionGroups.length === 0 && (
                <div className="sticky top-10 text-center text-slate-300 p-4">
                  <History size={48} className="mx-auto mb-2 opacity-20" />
                  <p className="text-xs">L'historique des modifications IA apparaîtra ici, aligné avec votre texte.</p>
                </div>
              )}

              {/* Render Groups */}
              {versionGroups.map((group) => {
                const isExpanded = expandedGroupIds.has(group.id);
                const isStack = group.versions.length > 1;
                const latest = group.versions[0];

                return (
                  <div
                    key={group.id}
                    className="absolute w-72 pointer-events-auto transition-all duration-300 ease-in-out"
                    style={{ top: `${group.topOffset + 32}px` }} // +32 for padding
                  >
                    <div className={`relative bg-white rounded-lg border shadow-sm transition-all duration-200 ${isStack && !isExpanded ? 'border-indigo-200 shadow-md translate-x-1 translate-y-1' : 'border-slate-200'}`}>

                      {/* Stack Effect Background Card */}
                      {isStack && !isExpanded && (
                        <div className="absolute inset-0 bg-white border border-indigo-100 rounded-lg transform -translate-x-1 -translate-y-1 -z-10 shadow-sm" />
                      )}

                      {/* Main Card Header */}
                      <div
                        className="p-2 border-b border-slate-100 flex justify-between items-center bg-slate-50 rounded-t-lg cursor-pointer hover:bg-slate-100"
                        onClick={() => isStack && toggleGroup(group.id)}
                      >
                        <div className="flex items-center gap-2">
                          {isStack && (
                            <Layers size={14} className="text-indigo-500" />
                          )}
                          <span className={`text-[10px] font-bold px-1.5 py-0.5 rounded uppercase tracking-wide ${latest.type.includes('Correction') ? 'bg-green-100 text-green-700' :
                              latest.type.includes('Insertion') ? 'bg-blue-100 text-blue-700' :
                                'bg-purple-100 text-purple-700'
                            }`}>
                            {latest.type}
                          </span>
                        </div>
                        <div className="flex items-center gap-1">
                          <span className="text-[10px] text-slate-400">
                            {new Date(latest.timestamp).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
                          </span>
                          {isStack && (
                            isExpanded ? <ChevronUp size={14} className="text-slate-400" /> : <ChevronDown size={14} className="text-slate-400" />
                          )}
                        </div>
                      </div>

                      {/* Card Content (Latest) */}
                      {!isExpanded && (
                        <div className="p-2">
                          <div className="text-xs text-slate-500 italic line-clamp-2">
                            "{latest.snippet}"
                          </div>
                          <button
                            onClick={() => restoreVersion(latest)}
                            className="mt-2 w-full flex items-center justify-center gap-1 text-[10px] bg-slate-50 hover:bg-indigo-50 text-slate-600 hover:text-indigo-700 py-1 rounded transition-colors"
                          >
                            <RotateCcw size={10} /> Restaurer
                          </button>
                        </div>
                      )}

                      {/* Expanded Stack View */}
                      {isExpanded && (
                        <div className="divide-y divide-slate-100 max-h-64 overflow-y-auto">
                          {group.versions.map((v, i) => (
                            <div key={v.id} className="p-2 bg-white hover:bg-slate-50 transition-colors">
                              <div className="flex justify-between items-center mb-1">
                                <span className="text-[10px] font-semibold text-slate-600">
                                  {i === 0 ? 'Dernière version' : `Version -${i}`}
                                </span>
                                <span className="text-[9px] text-slate-400">
                                  {new Date(v.timestamp).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', second: '2-digit' })}
                                </span>
                              </div>
                              <div className="text-xs text-slate-500 italic bg-slate-50 p-1.5 rounded mb-2 border border-slate-100">
                                "{v.snippet}"
                              </div>
                              <button
                                onClick={() => restoreVersion(v)}
                                className="w-full flex items-center justify-center gap-1 text-[10px] bg-white border border-slate-200 text-slate-600 hover:text-indigo-600 hover:border-indigo-200 py-1 rounded transition-colors"
                              >
                                <RotateCcw size={10} /> Restaurer cette version
                              </button>
                            </div>
                          ))}
                        </div>
                      )}
                    </div>
                  </div>
                );
              })}
            </div>
          )}
        </div>
      </div>

      {/* Context Menu Overlay */}
      {contextMenu && (
        <>
          <div
            className="fixed inset-0 z-40 bg-transparent"
            onClick={() => setContextMenu(null)}
            onContextMenu={(e) => { e.preventDefault(); setContextMenu(null); }}
          />
          <div
            className="fixed z-50 bg-white border border-slate-200 rounded-lg shadow-xl py-1 w-56 animate-in fade-in zoom-in-95 duration-100 flex flex-col"
            style={{ top: Math.min(contextMenu.y, window.innerHeight - 200), left: Math.min(contextMenu.x, window.innerWidth - 224) }}
          >
            {isAiLoading ? (
              <div className="flex flex-col items-center justify-center py-4 text-indigo-600 gap-2">
                <Loader2 className="animate-spin" size={24} />
                <span className="text-xs font-medium">L'IA travaille...</span>
              </div>
            ) : (
              <>
                <div className="px-3 py-1 text-[10px] font-bold text-slate-400 uppercase tracking-wider">
                  Outils IA
                </div>

                <button
                  onClick={() => handleAiAction('correct')}
                  disabled={!hasSelection}
                  className={`flex items-center gap-2 px-3 py-2 text-sm text-left transition-colors ${!hasSelection ? 'text-slate-300 cursor-not-allowed' : 'text-slate-700 hover:bg-indigo-50 hover:text-indigo-700'}`}
                >
                  <Check size={14} /> Corriger l'orthographe
                </button>

                <button
                  onClick={() => handleAiAction('rewrite')}
                  disabled={!hasSelection}
                  className={`flex items-center gap-2 px-3 py-2 text-sm text-left transition-colors ${!hasSelection ? 'text-slate-300 cursor-not-allowed' : 'text-slate-700 hover:bg-indigo-50 hover:text-indigo-700'}`}
                >
                  <RefreshCw size={14} /> Reformuler
                </button>

                <button
                  onClick={() => handleAiAction('expand')}
                  disabled={!hasSelection}
                  className={`flex items-center gap-2 px-3 py-2 text-sm text-left transition-colors ${!hasSelection ? 'text-slate-300 cursor-not-allowed' : 'text-slate-700 hover:bg-indigo-50 hover:text-indigo-700'}`}
                >
                  <Maximize2 size={14} /> Développer
                </button>

                <button
                  onClick={() => handleAiAction('continue')}
                  className="flex items-center gap-2 px-3 py-2 text-sm text-slate-700 hover:bg-indigo-50 hover:text-indigo-700 text-left transition-colors"
                >
                  <Wand2 size={14} /> Continuer l'écriture
                </button>

                <div className="h-px bg-slate-100 my-1" />

                <div className="px-3 py-1 text-[10px] font-bold text-slate-400 uppercase tracking-wider">
                  Édition
                </div>

                <button
                  onClick={handleCopy}
                  disabled={!hasSelection}
                  className={`flex items-center gap-2 px-3 py-2 text-sm text-left transition-colors ${!hasSelection ? 'text-slate-300 cursor-not-allowed' : 'text-slate-700 hover:bg-slate-50'}`}
                >
                  <Copy size={14} /> Copier
                </button>

                <button
                  onClick={handleSelectAll}
                  className="flex items-center gap-2 px-3 py-2 text-sm text-slate-700 hover:bg-slate-50 text-left transition-colors"
                >
                  <MousePointerClick size={14} /> Tout sélectionner
                </button>
              </>
            )}
          </div>
        </>
      )}
    </div>
  );
});

export default RichTextEditor;