'use client';

import React, { memo } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { Film, Image as ImageIcon, MessageSquare, Mic2, Music2 } from 'lucide-react';
import { TabButton } from '../controls/interaction-input/TabButton';
import { styles as uiStyles } from '@/styles/constants';
import { GenerationType } from '../controls/interaction-input/types';

interface InputHeaderProps {
  activeTab: GenerationType;
  isExpanded: boolean;
  isEditMode: boolean;
  onTabChange: (tab: GenerationType) => void;
  onShowChat: () => void;
  onCollapse: () => void;
}

function InputHeaderComponent({
  activeTab,
  isExpanded,
  isEditMode,
  onTabChange,
  onShowChat,
  onCollapse,
}: InputHeaderProps) {
  return (
    <AnimatePresence>
      {isExpanded && (
        <motion.div
          layout
          initial={{ opacity: 0, y: 10 }}
          animate={{ opacity: 1, y: 0 }}
          exit={{ opacity: 0, y: 10 }}
          transition={{ duration: 0.2 }}
          className={`flex items-center gap-1 ${uiStyles.glassPanel} p-1.5 ${uiStyles.roundedFull} pointer-events-auto mb-3`}
        >
          <TabButton
            isActive={activeTab === 'text'}
            onClick={() => {
              onTabChange('text');
              onShowChat();
              onCollapse();
            }}
            icon={<MessageSquare className="w-3.5 h-3.5" />}
            label="助手"
            disabled={isEditMode}
          />
          <TabButton
            isActive={activeTab === 'image'}
            onClick={() => onTabChange('image')}
            icon={<ImageIcon className="w-3.5 h-3.5" />}
            label="图片"
            disabled={isEditMode}
          />
          <TabButton
            isActive={activeTab === 'video'}
            onClick={() => onTabChange('video')}
            icon={<Film className="w-3.5 h-3.5" />}
            label="视频"
            disabled={isEditMode}
          />
          <TabButton
            isActive={activeTab === 'audio'}
            onClick={() => onTabChange('audio')}
            icon={<Mic2 className="w-3.5 h-3.5" />}
            label="音频"
            disabled={isEditMode}
          />
          <TabButton
            isActive={activeTab === 'music'}
            onClick={() => onTabChange('music')}
            icon={<Music2 className="w-3.5 h-3.5" />}
            label="音乐"
            disabled={isEditMode}
          />
        </motion.div>
      )}
    </AnimatePresence>
  );
}

export const InputHeader = memo(InputHeaderComponent);
