'use client';

import React, { memo } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { AutoResizeTextarea } from '../controls/interaction-input/AutoResizeTextarea';
import { InputFooter } from '../controls/interaction-input/InputFooter';
import { InputThumbnails } from '../nodes/components/InputThumbnails';
import { GenerationSettings, GenerationType } from '../controls/interaction-input/types';
import { InputAsset } from '../types/node';
import { AppNodeData } from '../types/node';

interface InputContentProps {
  inputText: string;
  isExpanded: boolean;
  isEditMode: boolean;
  isGenerating: boolean;
  activeTab: GenerationType;
  settings: GenerationSettings;
  availableModels: Record<string, any>;
  lyricsModels: Record<string, any>;
  musicModels: Record<string, any>;
  inputAssets: InputAsset[];
  selectedNodeData?: AppNodeData | null;
  inputPlaceholder: string;
  onInputChange: (value: string) => void;
  onGenerate: () => void;
  onUpdateSettings: (settings: GenerationSettings) => void;
  onCancel?: () => void;
}

function InputContentComponent({
  inputText,
  isExpanded,
  isEditMode,
  isGenerating,
  activeTab,
  settings,
  availableModels,
  lyricsModels,
  musicModels,
  inputAssets,
  selectedNodeData,
  inputPlaceholder,
  onInputChange,
  onGenerate,
  onUpdateSettings,
  onCancel,
}: InputContentProps) {
  return (
    <>
      {/* Input Assets Display (Collapsed Mode) */}
      <AnimatePresence>
        {!isExpanded && inputAssets.length > 0 && (
          <motion.div
            initial={{ opacity: 0, y: 10 }}
            animate={{ opacity: 1, y: 0 }}
            exit={{ opacity: 0, y: 10 }}
            className="mb-2 pointer-events-auto"
          >
            <InputThumbnails assets={inputAssets} onReorder={() => {}} />
          </motion.div>
        )}
      </AnimatePresence>

      {/* Expanded Input Area */}
      <AnimatePresence>
        {isExpanded && (
          <motion.div
            initial={{ opacity: 0, height: 0 }}
            animate={{ opacity: 1, height: 'auto' }}
            exit={{ opacity: 0, height: 0 }}
            className="w-full"
          >
            <div className="flex flex-row w-full">
              <div className="flex-1 flex flex-col px-2.5 pb-2.5 pt-4 min-h-[100px]">
                {/* Edit mode indicator */}
                {isEditMode && selectedNodeData && (
                  <div className="flex items-center gap-2 mb-2 px-1">
                    <div className="flex items-center gap-1.5 px-2.5 py-1 rounded-full bg-cyan-500/10 border border-cyan-500/20 text-[10px] font-bold text-cyan-400">
                      <span className="truncate max-w-[120px]">{selectedNodeData.title}</span>
                    </div>
                    <span className="text-[10px] text-muted-foreground">编辑节点</span>
                  </div>
                )}

                <AutoResizeTextarea
                  value={inputText}
                  onChange={onInputChange}
                  onEnter={onGenerate}
                  isExpanded={isExpanded}
                  placeholder={inputPlaceholder}
                  inputAssets={inputAssets}
                />

                <InputFooter
                  isGenerating={isGenerating}
                  canGenerate={!!inputText.trim()}
                  onGenerate={onGenerate}
                  currentTaskId={isEditMode ? selectedNodeData?.taskId : undefined}
                  onCancel={onCancel}
                  activeTab={activeTab}
                  settings={settings}
                  availableModels={availableModels}
                  lyricsModels={lyricsModels}
                  musicModels={musicModels}
                  onUpdateSettings={onUpdateSettings}
                  isEditMode={isEditMode}
                  editNodeType={selectedNodeData?.type}
                />
              </div>
            </div>
          </motion.div>
        )}
      </AnimatePresence>
    </>
  );
}

export const InputContent = memo(InputContentComponent);
