import { useState, useRef } from "react";
import { motion } from "framer-motion";
import { Button } from "@/components/ui/button";
import { Sparkles, X, Plus, Clock, MapPin, Sun, Moon, Cloud, CloudRain, CloudSnow, CloudLightning, Palette } from 'lucide-react';
import { cn } from "@/public/lib/utils";
import ContentEditable from 'react-contenteditable';

interface SceneAttribute {
  key: string;
  label: string;
  value: string;
  type: 'text' | 'number' | 'select';
  options?: string[];
  icon?: any;
}

interface SceneEnvironment {
  time: {
    period: '清晨' | '上午' | '中午' | '下午' | '傍晚' | '夜晚' | '深夜';
    specific?: string;
  };
  location: {
    main: string;
    detail?: string;
  };
  weather: {
    type: '晴天' | '多云' | '雨天' | '雪天' | '雷暴' | '阴天';
    description?: string;
  };
  atmosphere: {
    lighting: string;
    mood: string;
  };
}

interface SceneEditorProps {
  initialDescription?: string;
  onDescriptionChange?: (description: string) => void;
  onAttributesChange?: (attributes: SceneAttribute[]) => void;
  onEnvironmentChange?: (environment: SceneEnvironment) => void;
  className?: string;
}

// 天气图标映射
const weatherIcons = {
  '晴天': Sun,
  '多云': Cloud,
  '雨天': CloudRain,
  '雪天': CloudSnow,
  '雷暴': CloudLightning,
  '阴天': Cloud
};

const mockParse = (text: string): { attributes: SceneAttribute[], environment: SceneEnvironment } => {
  // 模拟结构化解析结果
  const attributes: SceneAttribute[] = [];

  const environment: SceneEnvironment = {
    time: {
      period: "下午",
      specific: "午后2点左右"
    },
    location: {
      main: "教室",
      detail: "高中教室，靠窗的位置"
    },
    weather: {
      type: "晴天",
      description: "阳光明媚，微风轻拂"
    },
    atmosphere: {
      lighting: "自然光线充足，温暖的阳光从窗户斜射入室内",
      mood: "安静祥和，充满生机与活力"
    }
  };

  // 添加环境属性到结构化标签
  const environmentAttributes: SceneAttribute[] = [
    { 
      key: "time", 
      label: "时间", 
      value: `${environment.time.period}${environment.time.specific ? `，${environment.time.specific}` : ''}`,
      type: "text",
      icon: Clock
    },
    { 
      key: "location", 
      label: "地点", 
      value: `${environment.location.main}${environment.location.detail ? `，${environment.location.detail}` : ''}`,
      type: "text",
      icon: MapPin
    },
    { 
      key: "weather", 
      label: "天气", 
      value: `${environment.weather.type}${environment.weather.description ? `，${environment.weather.description}` : ''}`,
      type: "text",
      icon: weatherIcons[environment.weather.type as keyof typeof weatherIcons]
    },
    { 
      key: "atmosphere", 
      label: "氛围", 
      value: `${environment.atmosphere.lighting}，${environment.atmosphere.mood}`,
      type: "text",
      icon: Palette
    }
  ];

  return {
    attributes: [...attributes, ...environmentAttributes],
    environment
  };
};

export default function SceneEditor({
  initialDescription = "一个银白短发的精灵女性，大约20岁，肤色白皙，身材高挑，身着白色连衣裙。在教室里，阳光透过窗户洒在地板上，营造出温暖而安静的氛围。",
  onDescriptionChange,
  onAttributesChange,
  onEnvironmentChange,
  className
}: SceneEditorProps) {
  const [inputText, setInputText] = useState(initialDescription);
  const [isOptimizing, setIsOptimizing] = useState(false);
  const [customTags, setCustomTags] = useState<string[]>([]);
  const [newTag, setNewTag] = useState("");
  const parseResult = useRef(mockParse(initialDescription));
  const contentEditableRef = useRef<HTMLElement>(null);

  const handleTextChange = (e: { target: { value: string } }) => {
    // 移除 HTML 标签，保留换行
    const value = e.target.value;
    setInputText(value);
    onDescriptionChange?.(value);

    // 重新解析文本
    const newParseResult = mockParse(value);
    parseResult.current = newParseResult;
    onAttributesChange?.(newParseResult.attributes);
    onEnvironmentChange?.(newParseResult.environment);
  };

  // 格式化文本为 HTML
  const formatTextToHtml = (text: string) => {
    return text
      .split('\n')
      .map(line => line || '<br>')
      .join('<div>');
  };

  const handleSmartPolish = async () => {
    setIsOptimizing(true);
    try {
      const polishedText = "一位拥有银白短发、白皙肌肤的高挑精灵少女，年龄约二十岁，气质神秘优雅。在阳光明媚的午后，她站在教室靠窗的位置，温暖的阳光从窗户斜射入室内，为这个安静祥和的空间注入了生机与活力。";
      setInputText(polishedText);
      const newParseResult = mockParse(polishedText);
      parseResult.current = newParseResult;
      onDescriptionChange?.(polishedText);
      onAttributesChange?.(newParseResult.attributes);
      onEnvironmentChange?.(newParseResult.environment);
    } finally {
      setIsOptimizing(false);
    }
  };

  const handleAttributeChange = (attr: SceneAttribute, newValue: string) => {
    // 移除 HTML 标签
    newValue = newValue.replace(/<[^>]*>/g, '');
    
    // 更新描述文本
    let newText = inputText;
    if (attr.type === "number" && attr.key === "age") {
      newText = newText.replace(/\d+岁/, `${newValue}岁`);
    } else {
      newText = newText.replace(new RegExp(attr.value, 'g'), newValue);
    }
    
    // 更新属性值
    const newAttr = { ...attr, value: newValue };
    const newAttributes = parseResult.current.attributes.map(a => 
      a.key === attr.key ? newAttr : a
    );

    // 重新解析文本以更新环境信息
    const newParseResult = mockParse(newText);
    parseResult.current = newParseResult;

    setInputText(newText);
    onDescriptionChange?.(newText);
    onAttributesChange?.(newAttributes);
    onEnvironmentChange?.(newParseResult.environment);
  };

  return (
    <div className={cn("space-y-2", className)}>
      {/* 自由输入区域 */}
      <div className="relative">
        <ContentEditable
          innerRef={contentEditableRef}
          html={formatTextToHtml(inputText)}
          onChange={handleTextChange}
          className="block w-full min-h-[120px] bg-white/5 backdrop-blur-md p-4 text-white/90 
            rounded-lg border border-white/10 focus:outline-none focus:ring-2 focus:ring-blue-500 
            whitespace-pre-wrap break-words"
          placeholder="用自然语言描述场景，比如：阳光透过窗户洒在教室的地板上..."
        />
        
        {/* 智能润色按钮 */}
        <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>

      {/* 结构化属性标签 */}
      <div className="flex flex-wrap gap-2">
        {parseResult.current.attributes.map((attr) => (
          <motion.div
            key={attr.key}
            className="flex items-center gap-1.5 px-3 py-1.5 rounded-full 
              bg-white/5 hover:bg-white/10 transition-colors
              border border-white/20 group"
            whileHover={{ scale: 1.05 }}
            whileTap={{ scale: 0.95 }}
          >
            {attr.icon && <attr.icon className="w-3.5 h-3.5 text-white/70" />}
            <span className="text-sm text-white/90 flex-shrink-0">{attr.label}：</span>
            <ContentEditable
              html={attr.value}
              onChange={(e) => handleAttributeChange(attr, e.target.value)}
              className="text-sm text-white/90 min-w-[1em] focus:outline-none 
                border-b border-transparent focus:border-white/30
                hover:border-white/20"
              onKeyDown={(e) => {
                if (e.key === 'Enter') {
                  e.preventDefault();
                  (e.target as HTMLElement).blur();
                }
              }}
            />
          </motion.div>
        ))}
      </div>

      {/* 自定义标签区域 */}
      <div className="space-y-2">
        <div className="flex flex-wrap gap-2">
          {customTags.map((tag) => (
            <motion.div
              key={tag}
              initial={{ scale: 0 }}
              animate={{ scale: 1 }}
              className="group flex items-center gap-1 px-3 py-1.5 bg-white/5 
                rounded-full hover:bg-white/10 transition-colors"
            >
              <span className="text-sm text-white/90">{tag}</span>
              <button
                onClick={() => {
                  setCustomTags(tags => tags.filter(t => t !== tag));
                  setInputText((text: string) => text.replace(new RegExp(`[，。]?${tag}[，。]?`), ""));
                }}
                className="opacity-0 group-hover:opacity-100 transition-opacity"
              >
                <X className="w-3 h-3 text-white/70" />
              </button>
            </motion.div>
          ))}
        </div>
        <div className="flex gap-2">
          <input
            type="text"
            value={newTag}
            onChange={(e) => setNewTag(e.target.value)}
            onKeyPress={(e) => {
              if (e.key === 'Enter' && newTag.trim()) {
                setCustomTags(tags => [...tags, newTag.trim()]);
                setInputText((text: string) => text + (text.endsWith("。") ? "" : "，") + newTag.trim());
                setNewTag("");
              }
            }}
            placeholder="添加自定义标签..."
            className="flex-1 px-3 py-2 bg-white/5 border-none rounded-lg text-sm
              focus:outline-none focus:ring-2 focus:ring-blue-500 placeholder:text-white/30"
          />
          <button
            onClick={() => {
              if (newTag.trim()) {
                setCustomTags(tags => [...tags, newTag.trim()]);
                setInputText((text: string) => text + (text.endsWith("。") ? "" : "，") + newTag.trim());
                setNewTag("");
              }
            }}
            className="p-2 bg-white/5 rounded-lg hover:bg-white/10 transition-colors"
          >
            <Plus className="w-5 h-5 text-white/70" />
          </button>
        </div>
      </div>
    </div>
  );
}