import React, { useState, useRef } from 'react';
import { Textarea } from './ui/Textarea';
import { Button } from './ui/Button';
import { useAppStore } from '../store/useAppStore';
import { useImageGeneration, useImageEditing } from '../hooks/useImageGeneration';
import { Upload, Wand2, Edit3, MousePointer, HelpCircle, Menu, ChevronDown, ChevronRight, RotateCcw } from 'lucide-react';
import { blobToBase64 } from '../utils/imageUtils';
import { PromptHints } from './PromptHints';
import { cn } from '../utils/cn';

export const PromptComposer: React.FC = () => {
  const {
    currentPrompt,
    setCurrentPrompt,
    selectedTool,
    setSelectedTool,
    temperature,
    setTemperature,
    seed,
    setSeed,
    isGenerating,
    uploadedImages,
    addUploadedImage,
    removeUploadedImage,
    clearUploadedImages,
    editReferenceImages,
    addEditReferenceImage,
    removeEditReferenceImage,
    clearEditReferenceImages,
    canvasImage,
    setCanvasImage,
    showPromptPanel,
    setShowPromptPanel,
    clearBrushStrokes,
  } = useAppStore();

  const { generate, cancelGeneration } = useImageGeneration();
  const { edit, cancelEdit } = useImageEditing();
  const [showAdvanced, setShowAdvanced] = useState(false);
  const [showClearConfirm, setShowClearConfirm] = useState(false);
  const [showHintsModal, setShowHintsModal] = useState(false);
  const [isDragOver, setIsDragOver] = useState(false);
  const fileInputRef = useRef<HTMLInputElement>(null);

  const handleGenerate = () => {
    if (!currentPrompt.trim()) return;
    
    if (selectedTool === 'generate') {
      const referenceImages = uploadedImages
        .filter(img => img.includes('base64,'))
        .map(img => img.split('base64,')[1]);
        
      generate({
        prompt: currentPrompt,
        referenceImages: referenceImages.length > 0 ? referenceImages : undefined,
        temperature,
        seed: seed || undefined
      });
    } else if (selectedTool === 'edit' || selectedTool === 'mask') {
      edit(currentPrompt);
    }
  };

  const handleFileUpload = async (file: File) => {
    if (file && file.type.startsWith('image/')) {
      try {
        const base64 = await blobToBase64(file);
        const dataUrl = `data:${file.type};base64,${base64}`;
        
        if (selectedTool === 'generate') {
          // 添加到参考图像（最多2张）
          if (uploadedImages.length < 2) {
            addUploadedImage(dataUrl);
          }
        } else if (selectedTool === 'edit') {
          // 编辑模式下，添加到单独的编辑参考图像（最多2张）
          if (editReferenceImages.length < 2) {
            addEditReferenceImage(dataUrl);
          }
          // 如果没有画布图像，则设置为画布图像
          if (!canvasImage) {
            setCanvasImage(dataUrl);
          }
        } else if (selectedTool === 'mask') {
          // 遮罩模式下，立即设置为画布图像
          clearUploadedImages();
          addUploadedImage(dataUrl);
          setCanvasImage(dataUrl);
        }
      } catch (error) {
        console.error('上传图像失败:', error);
      }
    }
  };

  const handleFileInputChange = async (event: React.ChangeEvent<HTMLInputElement>) => {
    const file = event.target.files?.[0];
    if (file) {
      await handleFileUpload(file);
    }
  };

  const handleDragOver = (event: React.DragEvent<HTMLDivElement>) => {
    event.preventDefault();
    setIsDragOver(true);
  };

  const handleDragLeave = () => {
    setIsDragOver(false);
  };

  const handleDrop = async (event: React.DragEvent<HTMLDivElement>) => {
    event.preventDefault();
    setIsDragOver(false);
    
    const file = event.dataTransfer.files?.[0];
    if (file) {
      await handleFileUpload(file);
    }
  };

  const handleClearSession = () => {
    setCurrentPrompt('');
    clearUploadedImages();
    clearEditReferenceImages();
    clearBrushStrokes();
    setCanvasImage(null);
    setSeed(null);
    setTemperature(0.7);
    setShowClearConfirm(false);
  };

  const tools = [
    { id: 'generate', icon: Wand2, label: '生成', description: '从文本创建' },
    { id: 'edit', icon: Edit3, label: '编辑', description: '修改现有图像' },
    { id: 'mask', icon: MousePointer, label: '选择', description: '点击选择' },
  ] as const;

  if (!showPromptPanel) {
    return (
      <div className="w-8 bg-white flex flex-col items-center justify-center rounded-l-xl">
        <button
          onClick={() => setShowPromptPanel(true)}
          className="w-6 h-16 bg-gray-100 hover:bg-gray-200 rounded-r-lg flex items-center justify-center transition-colors group"
          title="显示提示面板"
        >
          <div className="flex flex-col space-y-1">
            <div className="w-1 h-1 bg-gray-500 group-hover:bg-gray-400 rounded-full"></div>
            <div className="w-1 h-1 bg-gray-500 group-hover:bg-gray-400 rounded-full"></div>
            <div className="w-1 h-1 bg-gray-500 group-hover:bg-gray-400 rounded-full"></div>
          </div>
        </button>
      </div>
    );
  }

  return (
    <>
    <div className="w-72 h-full bg-white p-4 flex flex-col space-y-5 overflow-y-auto">
      <div>
        <div className="flex items-center justify-between mb-2">
          <h3 className="text-xs font-medium text-gray-500 uppercase tracking-wide">模式</h3>
          <div className="flex items-center space-x-0.5">
            <Button
              variant="ghost"
              size="icon"
              onClick={() => setShowHintsModal(true)}
              className="h-6 w-6 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded-full card"
            >
              <HelpCircle className="h-3.5 w-3.5" />
            </Button>
            <Button
              variant="ghost"
              size="icon"
              onClick={() => setShowPromptPanel(false)}
              className="h-6 w-6 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded-full card"
              title="隐藏面板"
            >
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                <line x1="18" y1="6" x2="6" y2="18"></line>
                <line x1="6" y1="6" x2="18" y2="18"></line>
              </svg>
            </Button>
          </div>
        </div>
        <div className="grid grid-cols-3 gap-1.5">
          {tools.map((tool) => (
            <button
              key={tool.id}
              onClick={() => setSelectedTool(tool.id)}
              className={cn(
                'flex flex-col items-center p-2 rounded-lg border transition-all duration-200',
                selectedTool === tool.id
                  ? 'bg-yellow-50 border-yellow-300 text-yellow-700 shadow-sm'
                  : 'bg-gray-50 border-gray-200 text-gray-500 hover:bg-yellow-50 hover:border-yellow-300 hover:text-yellow-700'
              )}
            >
              <tool.icon className="h-4 w-4 mb-1" />
              <span className="text-xs font-medium">{tool.label}</span>
            </button>
          ))}
        </div>
      </div>

      {/* 文件上传 */}
      <div>
        <div
            onDragOver={handleDragOver}
            onDragLeave={handleDragLeave}
            onDrop={handleDrop}
            className={cn(
              "border border-dashed rounded-md p-4 text-center transition-colors",
              isDragOver 
                ? "border-yellow-400 bg-yellow-400/10" 
                : "border-gray-300 hover:border-yellow-400"
            )}
          >
            <label className="text-sm font-medium text-gray-700 mb-1 block">
              {selectedTool === 'generate' ? '参考图像' : selectedTool === 'edit' ? '样式参考' : '上传图像'}
            </label>
            {selectedTool === 'mask' && (
              <p className="text-xs text-gray-500 mb-2">使用遮罩编辑图像</p>
            )}
            {selectedTool === 'generate' && (
              <p className="text-xs text-gray-500 mb-2">可选，最多2张图像</p>
            )}
            {selectedTool === 'edit' && (
              <p className="text-xs text-gray-500 mb-2">
                {canvasImage ? '可选样式参考，最多2张图像' : '上传要编辑的图像，最多2张图像'}
              </p>
            )}
            
            <input
              ref={fileInputRef}
              type="file"
              accept="image/*"
              onChange={handleFileInputChange}
              className="hidden"
            />
            
            <div className="flex flex-col items-center justify-center space-y-2">
              <Upload className={cn("h-6 w-6", isDragOver ? "text-yellow-500" : "text-gray-400")} />
              <div>
                <p className={cn(
                  "text-sm font-medium",
                  isDragOver ? "text-yellow-700" : "text-gray-600"
                )}>
                  {isDragOver ? "释放文件以上传" : "拖拽或点击上传"}
                </p>
                <p className="text-xs text-gray-500 mt-1">
                  支持 JPG, PNG, GIF
                </p>
              </div>
              <Button
                variant="outline"
                size="sm"
                onClick={() => fileInputRef.current?.click()}
                className="mt-1 card"
                disabled={
                  (selectedTool === 'generate' && uploadedImages.length >= 2) ||
                  (selectedTool === 'edit' && editReferenceImages.length >= 2)
                }
              >
                <Upload className="h-3 w-3 mr-1" />
                选择文件
              </Button>
            </div>
          </div>
          
          {/* Show uploaded images preview */}
          {((selectedTool === 'generate' && uploadedImages.length > 0) || 
            (selectedTool === 'edit' && editReferenceImages.length > 0)) && (
            <div className="mt-2 space-y-2">
              {(selectedTool === 'generate' ? uploadedImages : editReferenceImages).map((image, index) => (
                <div key={index} className="relative">
                  <img
                    src={image}
                    alt={`参考图像 ${index + 1}`}
                    className="w-full h-16 object-cover rounded border border-gray-300"
                  />
                  <button
                    onClick={() => selectedTool === 'generate' ? removeUploadedImage(index) : removeEditReferenceImage(index)}
                    className="absolute top-1 right-1 bg-gray-100/80 text-gray-600 hover:text-gray-800 rounded-full p-1 transition-colors"
                  >
                    ×
                  </button>
                  <div className="absolute bottom-1 left-1 bg-gray-100/80 text-xs px-1 py-0.5 rounded text-gray-700">
                    参考 {index + 1}
                  </div>
                </div>
              ))}
            </div>
          )}
      </div>

      {/* 提示输入 */}
      <div>
        <label className="text-xs font-medium text-gray-500 mb-2 block uppercase tracking-wide">
          {selectedTool === 'generate' ? '提示词' : '编辑指令'}
        </label>
        <Textarea
          value={currentPrompt}
          onChange={(e) => setCurrentPrompt(e.target.value)}
          placeholder={
            selectedTool === 'generate'
              ? '描述您想要创建的内容...'
              : '描述您想要的修改...'
          }
          className="min-h-[100px] resize-none text-sm"
        />
        
        {/* 提示质量指示器 */}
        <button 
          onClick={() => setShowHintsModal(true)}
          className="mt-2 flex items-center text-xs hover:text-gray-700 transition-colors group"
        >
          {currentPrompt.length < 20 ? (
            <HelpCircle className="h-3 w-3 mr-2 text-red-400 group-hover:text-red-500" />
          ) : (
            <div className={cn(
              'h-2 w-2 rounded-full mr-2',
              currentPrompt.length < 50 ? 'bg-yellow-400' : 'bg-green-400'
            )} />
          )}
          <span className="text-gray-500 group-hover:text-gray-700">
            {currentPrompt.length < 20 ? '添加更多细节' :
             currentPrompt.length < 50 ? '细节良好' : '细节优秀'}
          </span>
        </button>
      </div>


      {/* 生成按钮 */}
      {isGenerating ? (
        <div className="flex gap-2">
          <Button
            onClick={() => selectedTool === 'generate' ? cancelGeneration() : cancelEdit()}
            className="flex-1 h-12 text-sm font-medium bg-red-500 hover:bg-red-600 rounded-lg card"
          >
            <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white mr-2" />
            中断
          </Button>
        </div>
      ) : (
        <Button
          onClick={handleGenerate}
          disabled={!currentPrompt.trim()}
          className="w-full h-12 text-sm font-medium rounded-lg shadow-sm hover:shadow-md transition-shadow card"
        >
          <Wand2 className="h-4 w-4 mr-2" />
          {selectedTool === 'generate' ? '生成图像' : '应用编辑'}
        </Button>
      )}

      {/* 高级控制 */}
      <div className="pt-2 border-t border-gray-100">
        <button
          onClick={() => setShowAdvanced(!showAdvanced)}
          className="flex items-center text-xs text-gray-500 hover:text-gray-700 transition-colors duration-200"
        >
          {showAdvanced ? <ChevronDown className="h-3 w-3 mr-1" /> : <ChevronRight className="h-3 w-3 mr-1" />}
          高级选项
        </button>
        
        {showAdvanced && (
          <div className="mt-3 space-y-3">
            {/* 创造力 */}
            <div>
              <label className="text-xs text-gray-500 mb-1.5 block flex justify-between">
                <span>创造力</span>
                <span className="font-mono">{temperature}</span>
              </label>
              <input
                type="range"
                min="0"
                max="1"
                step="0.1"
                value={temperature}
                onChange={(e) => setTemperature(parseFloat(e.target.value))}
                className="w-full h-1.5 bg-gray-200 rounded-full appearance-none cursor-pointer slider"
              />
            </div>
            
            {/* 种子 */}
            <div>
              <label className="text-xs text-gray-500 mb-1.5 block">
                种子 (可选)
              </label>
              <input
                type="number"
                value={seed || ''}
                onChange={(e) => setSeed(e.target.value ? parseInt(e.target.value) : null)}
                placeholder="随机"
                className="w-full h-8 px-2.5 bg-gray-50 border border-gray-200 rounded-md text-xs text-gray-700 focus:outline-none focus:ring-1 focus:ring-yellow-400"
              />
            </div>
          </div>
        )}
        
        <button
          onClick={() => setShowClearConfirm(!showClearConfirm)}
          className="flex items-center text-xs text-gray-500 hover:text-red-500 transition-colors duration-200 mt-3"
        >
          <RotateCcw className="h-3 w-3 mr-1.5" />
          清除会话
        </button>
        
        {showClearConfirm && (
          <div className="mt-2 p-3 bg-red-50 rounded-lg border border-red-100">
            <p className="text-xs text-red-700 mb-3">
              确定要清除此会话吗？这将删除所有内容。
            </p>
            <div className="flex space-x-2">
              <Button
                variant="destructive"
                size="sm"
                onClick={handleClearSession}
                className="flex-1 h-8 text-xs card"
              >
                确认
              </Button>
              <Button
                variant="outline"
                size="sm"
                onClick={() => setShowClearConfirm(false)}
                className="flex-1 h-8 text-xs border-gray-200 card"
              >
                取消
              </Button>
            </div>
          </div>
        )}
      </div>

      {/* 键盘快捷键 */}
      <div className="pt-3 border-t border-gray-100">
        <h4 className="text-xs font-medium text-gray-500 mb-2 uppercase tracking-wide">快捷键</h4>
        <div className="space-y-1.5 text-xs text-gray-600">
          <div className="flex justify-between">
            <span className="text-gray-500">生成</span>
            <span className="font-mono bg-gray-100 px-1.5 py-0.5 rounded text-gray-700">⌘ + Enter</span>
          </div>
          <div className="flex justify-between">
            <span className="text-gray-500">重新生成</span>
            <span className="font-mono bg-gray-100 px-1.5 py-0.5 rounded text-gray-700">⇧ + R</span>
          </div>
          <div className="flex justify-between">
            <span className="text-gray-500">编辑模式</span>
            <span className="font-mono bg-gray-100 px-1.5 py-0.5 rounded text-gray-700">E</span>
          </div>
          <div className="flex justify-between">
            <span className="text-gray-500">历史记录</span>
            <span className="font-mono bg-gray-100 px-1.5 py-0.5 rounded text-gray-700">H</span>
          </div>
          <div className="flex justify-between">
            <span className="text-gray-500">切换面板</span>
            <span className="font-mono bg-gray-100 px-1.5 py-0.5 rounded text-gray-700">P</span>
          </div>
        </div>
      </div>
    </div>
    {/* 提示提示模态框 */}
    <PromptHints open={showHintsModal} onOpenChange={setShowHintsModal} />
    </>
  );
};