import { useState, useRef } from "react";
import { motion } from "framer-motion";
import { Sparkles, X, Plus, RefreshCw } from 'lucide-react';
import MainEditor from "./main-editor/MainEditor";
import { cn } from "@/public/lib/utils";

interface CharacterEditorProps {
  className?: string;
}

const mockContent = [
  {
    type: 'paragraph',
    content: [
      { type: 'highlightText', attrs: { text: 'Hello, world!', color: 'blue' } },
      { type: 'text', text: 'Hello, world!' },
      { type: 'highlightText', attrs: { text: 'Hello, world!', color: 'red' } },
      { type: 'text', text: 'Hello, world!' },
      { type: 'highlightText', attrs: { text: 'Hello, world!', color: 'green' } },
      { type: 'text', text: 'Hello, world!' },
      { type: 'highlightText', attrs: { text: 'Hello, world!', color: 'yellow' } },
      { type: 'text', text: 'Hello, world!' },
      { type: 'highlightText', attrs: { text: 'Hello, world!', color: 'purple' } },
      { type: 'text', text: 'Hello, world!' },
      { type: 'highlightText', attrs: { text: 'Hello, world!', color: 'orange' } },
      { type: 'text', text: 'Hello, world!' },
      { type: 'highlightText', attrs: { text: 'Hello, world!', color: 'pink' } },
      { type: 'text', text: 'Hello, world!' },
    ],
  },
];


export default function CharacterEditor({
  className,
}: CharacterEditorProps) {
  const [isOptimizing, setIsOptimizing] = useState(false);

  const handleSmartPolish = async () => {
    
  };

  return (
    <div className={cn("space-y-2 border border-white/10 relative p-2 rounded-[0.5rem] pb-12", className)}>
      {/* 自由输入区域 */}
      <MainEditor content={mockContent} />

      {/* 智能润色按钮 */}
      <motion.button
        onClick={handleSmartPolish}
        disabled={isOptimizing}
        className="absolute bottom-3 right-3 flex items-center gap-1.5 px-3 py-1.5 
          bg-purple-500/10 hover:bg-purple-500/20 text-purple-500 rounded-full 
          transition-colors text-xs disabled:opacity-50"
        whileHover={{ scale: 1.05 }}
        whileTap={{ scale: 0.95 }}
      >
        <Sparkles className="w-3.5 h-3.5" />
        <span>{isOptimizing ? "优化中..." : "智能优化"}</span>
      </motion.button>
    </div>
  );
}