import { FileText, Loader2, Sparkles } from "lucide-react";

interface ScriptEditorProps {
  text: string;
  onChangeText: (value: string) => void;
  onOpenExtractModal: () => void;
  onGenerateMeta: () => void;
  isGeneratingMeta: boolean;
}

export function ScriptEditor({
  text,
  onChangeText,
  onOpenExtractModal,
  onGenerateMeta,
  isGeneratingMeta,
}: ScriptEditorProps) {
  return (
    <div className="bg-white/5 rounded-2xl p-4 sm:p-6 border border-white/10 backdrop-blur-sm">
      <div className="flex flex-wrap justify-between items-center gap-2 mb-4">
        <h2 className="text-base sm:text-lg font-semibold text-white flex items-center gap-2 whitespace-nowrap">
          ✍️ 文案提取与编辑
        </h2>
        <div className="flex gap-2 flex-shrink-0">
          <button
            onClick={onOpenExtractModal}
            className="px-2 py-1 text-xs rounded transition-all whitespace-nowrap bg-purple-600 hover:bg-purple-700 text-white flex items-center gap-1"
          >
            <FileText className="h-3.5 w-3.5" />
            文案提取助手
          </button>
          <button
            onClick={onGenerateMeta}
            disabled={isGeneratingMeta || !text.trim()}
            className={`px-2 py-1 text-xs rounded transition-all whitespace-nowrap ${isGeneratingMeta || !text.trim()
              ? "bg-gray-600 cursor-not-allowed text-gray-400"
              : "bg-gradient-to-r from-blue-600 to-cyan-600 hover:from-blue-700 hover:to-cyan-700 text-white"
              }`}
          >
            {isGeneratingMeta ? (
              <span className="flex items-center gap-1">
                <Loader2 className="h-3.5 w-3.5 animate-spin" />
                生成中...
              </span>
            ) : (
              <span className="flex items-center gap-1">
                <Sparkles className="h-3.5 w-3.5" />
                AI生成标题标签
              </span>
            )}
          </button>
        </div>
      </div>
      <textarea
        value={text}
        onChange={(e) => onChangeText(e.target.value)}
        placeholder="请输入你想说的话..."
        className="w-full h-40 bg-black/30 border border-white/10 rounded-xl p-4 text-white placeholder-gray-500 resize-none focus:outline-none focus:border-purple-500 transition-colors hide-scrollbar"
      />
      <div className="flex justify-between mt-2 text-sm text-gray-400">
        <span>{text.length} 字</span>
        <span>预计时长: ~{Math.ceil(text.length / 4)} 秒</span>
      </div>
    </div>
  );
}