"use client";
import React, { useState, useEffect, useRef } from 'react';
import { ColorPicker, useColor } from 'react-color-palette';
import 'react-color-palette/css';
import { IoColorPaletteOutline } from "react-icons/io5";
import { RiFontSizeAi } from "react-icons/ri";
import { Check } from "lucide-react";
import TextTranslate from "@/app/utils/TextTranslate";
import "react-color-palette/css";

const fontStyles = [
  { name: 'Default', fontFamily: 'Arial, sans-serif' },
  { name: 'Cursive', fontFamily: 'cursive' },
  { name: 'Monospace', fontFamily: "'Courier New', monospace" },
  { name: 'Serif', fontFamily: 'serif' },
  { name: 'Fancy', fontFamily: "'Great Vibes', cursive" },
];

interface TextEditorProps {
  storyText: string;
  setStoryText: (text: string) => void;
  selectedFont: string;
  setSelectedFont: (font: string) => void;
  selectedColor: string;
  setSelectedColor: (color: string) => void;
}

const TextEditor: React.FC<TextEditorProps> = ({
  storyText,
  setStoryText,
  selectedFont,
  setSelectedFont,
  selectedColor,
  setSelectedColor,
}) => {
  const [showTextInput, setShowTextInput] = useState(false);
  const [showColorPicker, setShowColorPicker] = useState(false);
  const [showFontDropdown, setShowFontDropdown] = useState(false);
  const [color, setColor] = useColor(selectedColor);

  const [position, setPosition] = useState({ x: 0, y: 0 });
  const [dragging, setDragging] = useState(false);

  const dropdownRef = useRef<HTMLDivElement>(null);
  const colorPickerRef = useRef<HTMLDivElement>(null);

  const handleColorChange = (newColor: any) => {
    setColor(newColor);
    setSelectedColor(newColor.hex);
  };

  const handleMouseDown = (e: React.MouseEvent) => {
    // When editing, don't drag if clicking inside textarea to type
    if (showTextInput && (e.target as HTMLElement).tagName === 'TEXTAREA') return;
    setDragging(true);
  };

  const handleMouseMove = (e: MouseEvent) => {
    if (!dragging) return;
    setPosition(prev => ({
      x: prev.x + e.movementX,
      y: prev.y + e.movementY,
    }));
  };

  const handleMouseUp = () => setDragging(false);

  useEffect(() => {
    if (dragging) {
      window.addEventListener("mousemove", handleMouseMove);
      window.addEventListener("mouseup", handleMouseUp);
    } else {
      window.removeEventListener("mousemove", handleMouseMove);
      window.removeEventListener("mouseup", handleMouseUp);
    }
    return () => {
      window.removeEventListener("mousemove", handleMouseMove);
      window.removeEventListener("mouseup", handleMouseUp);
    };
  }, [dragging]);

  useEffect(() => {
    const handleClickOutside = (event: MouseEvent) => {
      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
        setShowFontDropdown(false);
      }
      if (colorPickerRef.current && !colorPickerRef.current.contains(event.target as Node)) {
        setShowColorPicker(false);
      }
    };
    document.addEventListener('mousedown', handleClickOutside);
    return () => document.removeEventListener('mousedown', handleClickOutside);
  }, []);

  return (
    <>
      {/* Aa Button - Top Right (Only shows when not in active edit mode) */}
      {!showTextInput && (
        <div className="absolute top-4 right-4 z-[70]">
          <button
            onClick={() => setShowTextInput(true)}
            className="bg-black/40 backdrop-blur-md text-white w-10 h-10 flex items-center justify-center rounded-full text-lg font-bold border border-white/20 hover:scale-110 transition-transform shadow-lg"
          >
            Aa
          </button>
        </div>
      )}

      {/* 1. EDIT MODE: Controls and Textarea Overlay */}
      {showTextInput && (
        <div className="absolute inset-0 flex flex-col items-center justify-center z-[80] bg-black/30 backdrop-blur-[2px]">
          {/* Top Controls */}
          <div className="absolute top-6 flex gap-3 z-[90]" onClick={e => e.stopPropagation()}>
            <div className="relative" ref={dropdownRef}>
              <button
                onClick={() => setShowFontDropdown(prev => !prev)}
                className="bg-[var(--modal-color)] text-[var(--text-primary)] p-2.5 rounded-xl shadow-xl border border-[var(--border-color)] flex items-center justify-center"
              >
                <RiFontSizeAi className="w-6 h-6" />
              </button>

              {showFontDropdown && (
                <div className="absolute top-full left-1/2 -translate-x-1/2 mt-2 bg-[var(--modal-color)] text-[var(--text-primary)] border border-[var(--border-color)] rounded-2xl shadow-2xl p-2 w-40 animate-in fade-in slide-in-from-top-2">
                  {fontStyles.map(style => (
                    <div
                      key={style.name}
                      onClick={() => {
                        setSelectedFont(style.fontFamily);
                        setShowFontDropdown(false);
                      }}
                      className="cursor-pointer px-4 py-2 rounded-xl text-sm hover:bg-[color-mix(in_srgb,var(--text-primary),transparent_90%)] flex justify-between items-center"
                      style={{ fontFamily: style.fontFamily }}
                    >
                      {style.name}
                      {selectedFont === style.fontFamily && <Check size={14} />}
                    </div>
                  ))}
                </div>
              )}
            </div>

            <div className="relative" ref={colorPickerRef}>
              <button
                onClick={() => setShowColorPicker(prev => !prev)}
                className="bg-[var(--modal-color)] text-[var(--text-primary)] p-2.5 rounded-xl shadow-xl border border-[var(--border-color)] flex items-center justify-center"
              >
                <IoColorPaletteOutline className="w-6 h-6" />
              </button>

              {showColorPicker && (
               <div className="absolute top-full left-1/2 -translate-x-1/2 mt-2 z-[100] bg-[var(--modal-color)] rounded-[10px] border border-[var(--border-color)] shadow-2xl">

  <div className="w-[180px] rcp-dark">
    <ColorPicker 
      color={color} 
      onChange={handleColorChange} 
      hideInput={true} // Replaces hideHSV/hideRGB in newer versions
    />
  </div>
</div>
              )}
            </div>

            <button
              onClick={() => setShowTextInput(false)}
              className="bg-[#341F60] text-white px-5 py-2.5 rounded-xl font-bold shadow-lg hover:bg-[#6C47B7] transition-colors"
            >
              <TextTranslate text="Done" />
            </button>
          </div>

          {/* Active Edit Textarea */}
          <div
            onMouseDown={handleMouseDown}
            style={{
              transform: `translate(${position.x}px, ${position.y}px)`,
              cursor: dragging ? 'grabbing' : 'grab',
            }}
            className="flex items-center justify-center w-full"
          >
            <textarea
              value={storyText}
              onChange={e => setStoryText(e.target.value)}
              style={{ fontFamily: selectedFont, color: selectedColor }}
              className="w-full max-w-[320px] min-h-[100px] bg-transparent text-center text-2xl font-bold resize-none border-none focus:outline-none placeholder:text-white/40 drop-shadow-[0_2px_4px_rgba(0,0,0,0.8)]"
              placeholder="Type your story..."
              autoFocus
            />
          </div>
        </div>
      )}

      {/* 2. PREVIEW MODE: Stayed up there after Done */}
      {!showTextInput && storyText.trim() !== "" && (
        <div 
          className="absolute inset-0 pointer-events-none flex items-center justify-center z-[60]"
        >
          <div
            onMouseDown={handleMouseDown}
            style={{
              transform: `translate(${position.x}px, ${position.y}px)`,
              cursor: 'grab',
              pointerEvents: 'auto' // Allow re-dragging even after done
            }}
            className="flex items-center justify-center w-full"
          >
            <p
              style={{ fontFamily: selectedFont, color: selectedColor }}
              className="max-w-[320px] text-center text-2xl font-bold break-words drop-shadow-[0_2px_4px_rgba(0,0,0,0.8)] whitespace-pre-wrap select-none"
            >
              {storyText}
            </p>
          </div>
        </div>
      )}
    </>
  );
};

export default TextEditor;