import React, { useMemo } from 'react';
import { Copy, Sparkles } from 'lucide-react';
import { AppNodeData } from '../../types/node';
import { NodeLoadingOverlay, NodeLoadingAccent } from '../components/NodeLoadingOverlay';
import { buildPromptWithTemplate, getTemplateLabel } from '../../utils/promptTemplates';

interface PromptGeneratorRendererProps {
    data: AppNodeData;
    isWorking: boolean;
    loadingAccent?: NodeLoadingAccent;
}

export const PromptGeneratorRenderer = ({ data, isWorking, loadingAccent = 'fuchsia' }: PromptGeneratorRendererProps) => {
    const { prompt, userPrompt, template, targetType, inputAssets, inputPrompt } = data;
    const hasInputs = inputAssets && inputAssets.length > 0;
    
    // Get template label for display | 获取模板标签用于显示
    const templateLabel = useMemo(() => {
        return getTemplateLabel(template, (targetType as 'image' | 'video') || 'image');
    }, [template, targetType]);
    
    // Build preview content | 构建预览内容
    // If we have generated prompt (after execution), show it
    // Otherwise show template preview based on user input
    const displayContent = useMemo(() => {
        // If there's a generated prompt result, show it
        if (prompt && data.status === 'SUCCESS') {
            return prompt;
        }
        
        // For 'general' template, just show user input without formatting
        if (!template || template === 'general') {
            return userPrompt || '';
        }
        
        // For specific templates, show formatted preview
        if (userPrompt || inputPrompt) {
            return buildPromptWithTemplate(
                userPrompt || '', 
                template, 
                (targetType as 'image' | 'video') || 'image',
                inputPrompt // upstream context
            );
        }
        
        return '';
    }, [prompt, userPrompt, inputPrompt, template, targetType, data.status]);
    
    const isPreviewMode = !prompt || data.status !== 'SUCCESS';
    const hasContent = !!displayContent;
    const isGeneralTemplate = !template || template === 'general';

    return (
        <div className="w-full h-full p-6 flex flex-col group/text">
            <div className="flex-1 bg-black/10 rounded-2xl p-4 relative overflow-hidden backdrop-blur-sm transition-colors group-hover/text:bg-black/20">
                {/* Empty state | 空状态 */}
                {!hasContent && !hasInputs && !isWorking && (
                    <div className="absolute inset-0 flex flex-col items-center justify-center pointer-events-none gap-2">
                        <Sparkles className="w-8 h-8 text-fuchsia-500/30" />
                        <span className="text-foreground/50 text-xs font-medium">输入提示词或连接上游节点</span>
                    </div>
                )}
                
                {/* Content display | 内容显示 */}
                {hasContent && (
                    <div className="w-full h-full overflow-y-auto custom-scrollbar">
                        {/* Mode indicator | 模式指示器 */}
                        {isPreviewMode && !isGeneralTemplate && (
                            <div className="flex items-center gap-2 mb-3 text-[10px] text-fuchsia-400/70 font-medium">
                                <span className="px-2 py-0.5 bg-fuchsia-500/10 rounded-full border border-fuchsia-500/20">
                                    预览 · {templateLabel}
                                </span>
                            </div>
                        )}
                        {isPreviewMode && isGeneralTemplate && userPrompt && (
                            <div className="flex items-center gap-2 mb-3 text-[10px] text-slate-400/70 font-medium">
                                <span className="px-2 py-0.5 bg-slate-500/10 rounded-full border border-slate-500/20">
                                    待生成 · {templateLabel}
                                </span>
                            </div>
                        )}
                        {!isPreviewMode && (
                            <div className="flex items-center gap-2 mb-3 text-[10px] text-emerald-400/70 font-medium">
                                <span className="px-2 py-0.5 bg-emerald-500/10 rounded-full border border-emerald-500/20">
                                    已生成 · {templateLabel}
                                </span>
                            </div>
                        )}
                        
                        {/* Prompt content | 提示词内容 */}
                        <div className="text-sm text-foreground/90 font-medium leading-relaxed whitespace-pre-wrap break-words">
                            {displayContent}
                        </div>
                    </div>
                )}
                
                {/* Copy button | 复制按钮 */}
                {hasContent && (
                    <button 
                        className="absolute top-2 right-2 p-1.5 bg-black/60 hover:bg-black/80 border border-white/10 rounded-md text-muted-foreground hover:text-white transition-all opacity-0 group-hover/text:opacity-100 backdrop-blur-md z-10" 
                        onClick={(e) => { 
                            e.stopPropagation(); 
                            navigator.clipboard.writeText(displayContent);
                        }} 
                        title="复制提示词"
                    >
                        <Copy size={12} />
                    </button>
                )}
                
                {isWorking && <NodeLoadingOverlay message="正在优化提示词..." accent={loadingAccent} />}
            </div>
        </div>
    );
};
