'use client';

import React, { useState, memo } from 'react';
import { FolderPlus, Download, Maximize2 } from 'lucide-react';
import { cn } from '@/utils';
import { AppNodeData } from '../../types/node';

interface NodeToolbarProps {
    title: string;
    type: string;
    hasMedia: boolean;
    isWorking: boolean;
    selected: boolean;
    isHovered: boolean;
    updateTitle: (title: string) => void;
    onSave?: () => void;
    onDownload?: () => void;
    onExpand?: () => void;
}

export const NodeToolbar = memo(({ 
    title, 
    type, 
    hasMedia, 
    isWorking, 
    selected, 
    isHovered, 
    updateTitle,
    onSave, 
    onDownload, 
    onExpand 
}: NodeToolbarProps) => {
    const [isEditingTitle, setIsEditingTitle] = useState(false);
    const [tempTitle, setTempTitle] = useState(title);

    const handleTitleSave = () => { 
        setIsEditingTitle(false); 
        if (tempTitle.trim() && tempTitle !== title) {
            updateTitle(tempTitle);
        } else {
            setTempTitle(title);
        }
    };

    const showTopBar = selected || isHovered;

    return (
        <div className={cn(
            "absolute -top-10 left-0 w-full flex items-center justify-between px-1 transition-all duration-300 z-40",
            showTopBar ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-2 pointer-events-none'
        )}>
            <div className="flex items-center gap-1.5 pointer-events-auto">
                    {hasMedia && type !== 'PROMPT_INPUT' && (
                    <div className="flex items-center gap-1 relative">
                        <button onClick={onSave} className="p-1.5 bg-black/40 border border-white/10 backdrop-blur-md rounded-md text-muted-foreground hover:text-white hover:border-white/30 transition-colors" title="添加到项目"><FolderPlus size={14} /></button>
                        <button onClick={onDownload} className="p-1.5 bg-black/40 border border-white/10 backdrop-blur-md rounded-md text-muted-foreground hover:text-white hover:border-white/30 transition-colors" title="下载"><Download size={14} /></button>
                        {type !== 'AUDIO_GENERATOR' && <button onClick={onExpand} className="p-1.5 bg-black/40 border border-white/10 backdrop-blur-md rounded-md text-muted-foreground hover:text-white hover:border-white/30 transition-colors" title="全屏预览"><Maximize2 size={14} /></button>}
                    </div>
                )}
            </div>
            <div className="flex items-center gap-2 pointer-events-auto">
                <div className={`px-2 py-1 flex items-center gap-2`}>
                    {isEditingTitle ? (
                        <input 
                            className="bg-transparent border-none outline-none text-muted-foreground text-[10px] font-bold uppercase tracking-wider w-24 text-right" 
                            value={tempTitle} 
                            onChange={(e) => setTempTitle(e.target.value)} 
                            onBlur={handleTitleSave}
                            onKeyDown={(e) => e.key === 'Enter' && handleTitleSave()}
                            autoFocus 
                        />
                    ) : (
                        <span 
                            className="text-[10px] font-bold uppercase tracking-wider text-muted-foreground hover:text-foreground cursor-text text-right" 
                            onClick={() => setIsEditingTitle(true)}
                        >
                            {title}
                        </span>
                    )}
                </div>
            </div>
        </div>
    );
});

NodeToolbar.displayName = 'NodeToolbar';
