'use client';

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

interface VideoAnalyzerRendererProps {
    data: AppNodeData;
    update: (data: Partial<AppNodeData>) => void;
    isWorking: boolean;
    onExpand?: () => void;
    loadingAccent?: NodeLoadingAccent;
}

export const VideoAnalyzerRenderer = ({ data, update, isWorking, onExpand, loadingAccent = 'emerald' }: VideoAnalyzerRendererProps) => {
    const fileInputRef = useRef<HTMLInputElement>(null);

    const safePlay = (e: any) => {
        const vid = e.currentTarget || e;
        if (vid && vid.play) vid.play().catch(() => {});
    };
    const safePause = (e: any) => {
        const vid = e.currentTarget || e;
        if (vid && vid.pause) vid.pause();
    };

    return (
        <div className="w-full h-full p-5 flex flex-col gap-3">
            <div className="relative w-full h-32 rounded-xl bg-black/20 border border-white/5 overflow-hidden flex items-center justify-center cursor-pointer hover:bg-black/30 transition-colors group/upload" onClick={() => !data.videoUri && fileInputRef.current?.click()}>
                {data.videoUri ? (
                    <SecureVideo src={data.videoUri} className="w-full h-full object-cover opacity-80" muted onMouseEnter={safePlay} onMouseLeave={safePause} onClick={onExpand} />
                ) : (
                    <div className="flex flex-col items-center gap-2 text-muted-foreground group-hover/upload:text-muted-foreground">
                        <Upload size={20} />
                        <span className="text-[10px] font-bold uppercase tracking-wider">上传视频</span>
                    </div>
                )}
                {data.videoUri && <button className="absolute top-2 right-2 p-1 bg-black/50 rounded-full text-muted-foreground hover:text-white backdrop-blur-md" onClick={(e) => { e.stopPropagation(); fileInputRef.current?.click(); }}><Edit size={10} /></button>}
                <input type="file" ref={fileInputRef} className="hidden" accept="video/*" onChange={(e) => {
                    const file = e.target.files?.[0];
                    if (file) {
                        const reader = new FileReader();
                        reader.onload = (e) => update({ videoUri: e.target?.result as string });
                        reader.readAsDataURL(file);
                    }
                }} />
            </div>
            <div className="flex-1 bg-black/10 rounded-xl border border-white/5 overflow-hidden relative group/analysis">
                <textarea 
                    className="w-full h-full bg-transparent p-3 resize-none focus:outline-none text-xs text-muted-foreground font-mono leading-relaxed custom-scrollbar select-text placeholder:italic placeholder:text-foreground" 
                    value={data.analysis || ''} 
                    placeholder="等待分析结果，或在此粘贴文本..." 
                    onChange={(e) => update({ analysis: e.target.value })} 
                    spellCheck={false} 
                />
                {data.analysis && <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/analysis:opacity-100 backdrop-blur-md z-10" onClick={(e) => { e.stopPropagation(); navigator.clipboard.writeText(data.analysis || ''); }} title="复制全部"><Copy size={12} /></button>}
            </div>
            {isWorking && <NodeLoadingOverlay message="分析中..." accent={loadingAccent} />}
        </div>
    );
};
