import React from 'react';
import { Copy, ScrollText } from 'lucide-react';
import { AppNodeData } from '../../types/node';
import { NodeLoadingOverlay, NodeLoadingAccent } from '../components/NodeLoadingOverlay';

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

export const LyricsGeneratorRenderer = ({ data, isWorking, loadingAccent = 'indigo' }: LyricsGeneratorRendererProps) => {
    const content = (data.lyrics || '');
    const isGenerated = data.status === 'SUCCESS' && !!content;

    return (
        <div className="w-full h-full p-6 flex flex-col group/text min-h-0">
            <div className="flex-1 min-h-0 bg-black/10 rounded-2xl p-4 relative overflow-hidden backdrop-blur-sm transition-colors group-hover/text:bg-black/20">
                {!content && !isWorking && (
                    <div className="absolute inset-0 flex flex-col items-center justify-center pointer-events-none gap-2">
                        <ScrollText className="w-8 h-8 text-indigo-500/30" />
                        <span className="text-foreground/50 text-xs font-medium">输入主题后点击执行生成歌词</span>
                    </div>
                )}

                {content && (
                    <div className="w-full h-full min-h-0 overflow-y-auto custom-scrollbar">
                        <div className={`flex items-center gap-2 mb-3 text-[10px] font-medium ${isGenerated ? 'text-emerald-400/70' : 'text-slate-400/70'}`}>
                            <span className={`px-2 py-0.5 rounded-full border ${isGenerated ? 'bg-emerald-500/10 border-emerald-500/20' : 'bg-slate-500/10 border-slate-500/20'}`}>
                                {isGenerated ? '已生成歌词' : '待生成主题'}
                            </span>
                        </div>
                        <div className="text-sm text-foreground/90 font-medium leading-relaxed whitespace-pre-wrap break-words">
                            {content}
                        </div>
                    </div>
                )}

                {content && (
                    <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(content);
                        }}
                        title="复制歌词"
                    >
                        <Copy size={12} />
                    </button>
                )}

                {isWorking && <NodeLoadingOverlay message="正在生成歌词..." accent={loadingAccent} />}
            </div>
        </div>
    );
};
