'use client';

import React, { memo } from 'react';
import { cn } from '@/utils';
import { Loader2 } from 'lucide-react';
import { GenerationSettings, GenerationType } from '../controls/interaction-input/types';
import { InputAsset } from '../types/node';

interface InputFooterProps {
  isGenerating: boolean;
  canGenerate: boolean;
  onGenerate: () => void;
  currentTaskId?: string;
  onCancel?: () => void;
  activeTab: GenerationType;
  settings: GenerationSettings;
  availableModels: Record<string, any>;
  lyricsModels: Record<string, any>;
  musicModels: Record<string, any>;
  onUpdateSettings: (settings: GenerationSettings) => void;
  isEditMode: boolean;
  editNodeType?: string;
  inputAssets?: InputAsset[];
}

function InputFooterComponent({
  isGenerating,
  canGenerate,
  onGenerate,
  currentTaskId,
  onCancel,
  activeTab,
  settings,
  availableModels,
  lyricsModels,
  musicModels,
  onUpdateSettings,
  isEditMode,
  editNodeType,
  inputAssets,
}: InputFooterProps) {
  return (
    <div className="flex items-center justify-between mt-2 px-1">
      <div className="flex items-center gap-2">
        {/* Additional controls can be added here */}
      </div>

      <div className="flex items-center gap-2">
        {isGenerating ? (
          <button
            onClick={onCancel}
            className={cn(
              "flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium",
              "bg-red-500/10 text-red-400 hover:bg-red-500/20 transition-colors"
            )}
          >
            <Loader2 className="w-3 h-3 animate-spin" />
            <span>取消</span>
          </button>
        ) : (
          <button
            onClick={onGenerate}
            disabled={!canGenerate}
            className={cn(
              "flex items-center gap-1.5 px-4 py-1.5 rounded-lg text-xs font-medium transition-all",
              canGenerate
                ? "bg-cyan-500/20 text-cyan-400 hover:bg-cyan-500/30"
                : "bg-white/5 text-muted-foreground cursor-not-allowed"
            )}
          >
            <span>{isEditMode ? '更新' : '生成'}</span>
          </button>
        )}
      </div>
    </div>
  );
}

export const InputFooter = memo(InputFooterComponent);
