import React from 'react';
import { Layout, Button, Typography, Divider, Flex } from 'antd';
import { ArrowLeftOutlined } from '@ant-design/icons';
import { useDispatch, useSelector } from 'react-redux';
import { switchToOperationPanel } from '../../../states/panelSwitchSliceForView';
import {
  selectAllViewers,
  selectAllViewerUrls,
  selectSelectedViewers,
  setSelectedViewers,
} from '@/states/view/viewerContainerSlice';
import { RootState } from '@/states/store';
import Icon from '@/components/Icon';
import '@/themes/truncateText.css';

const { Header, Content } = Layout;
const { Title, Text } = Typography;

const FunctionButton = ({
  title,
  action,
  iconName,
  onClick,
}: {
  title: string;
  action: string;
  iconName: string;
  onClick: () => void;
}) => {
  return (
    <Button
      onClick={onClick}
      icon={
        <Icon
          module="module-process"
          name={iconName}
          userId="base"
          theme="default"
          size="2x"
          state="normal"
        />
      }
      style={{
        width: '1.5rem',
        height: '1.5rem',
        padding: 0,
      }}
      title={title}
      className="truncate-text"
    />
  );
};

const MorePanel = () => {
  const dispatch = useDispatch();

  // 获取所有 viewer URLs 和当前选中的 viewer URLs
  const allViewers = useSelector(selectAllViewerUrls);
  const selectedViewers = useSelector(selectSelectedViewers);

  const handleReturn = () => {
    dispatch(switchToOperationPanel());
  };

  // 全选处理函数
  const handleSelectAll = () => {
    dispatch(selectAllViewers());
  };

  // 反选处理函数
  const handleInvertSelection = () => {
    // 获取未选中的 viewers
    const invertedSelection = allViewers.filter(
      (url) => !selectedViewers.includes(url)
    );
    
    // 如果反选后为空，则保持至少一个选中项（选中第一个）
    if (invertedSelection.length === 0 && allViewers.length > 0) {
      dispatch(setSelectedViewers([allViewers[0]]));
    } else {
      dispatch(setSelectedViewers(invertedSelection));
    }
  };

  // 图像详情按钮处理函数（待实现）
  const handleImageDetails = () => {
    // TODO: 实现图像详情功能
    console.log('图像详情功能待实现');
  };

  // tag信息按钮处理函数（待实现）
  const handleTagInfo = () => {
    // TODO: 实现tag信息功能
    console.log('tag信息功能待实现');
  };

  return (
    <Layout className="h-full">
      {/* 顶部导航栏 */}
      <Header
        style={{
          display: 'flex',
          alignItems: 'center',
          padding: '0 16px',
        }}
      >
        <Button
          type="text"
          icon={<ArrowLeftOutlined />}
          onClick={handleReturn}
        />
        <Title level={5} style={{ margin: 0, lineHeight: '48px' }}>
          更多功能
        </Title>
      </Header>

      {/* 主体内容 */}
      <Content
        style={{ padding: '16px', maxHeight: '100%', overflowY: 'auto' }}
      >
        {/* 选择操作组 */}
        <div style={{ marginBottom: '24px' }}>
          <Text
            strong
            style={{ fontSize: '14px', marginBottom: '12px', display: 'block' }}
          >
            选择操作
          </Text>
          <Flex wrap gap="small" align="center" justify="start" className="p-1">
            <FunctionButton
              title="全选"
              action="全选"
              iconName="RejectImage"
              onClick={handleSelectAll}
            />
            <FunctionButton
              title="反选"
              action="反选"
              iconName="RejectImage"
              onClick={handleInvertSelection}
            />
          </Flex>
          <div style={{ marginTop: '8px', fontSize: '12px', color: '#666' }}>
            说明：全选或反选所有 viewer 中的图像
          </div>
        </div>

        <Divider />

        {/* 信息查看组 */}
        <div style={{ marginBottom: '24px' }}>
          <Text
            strong
            style={{ fontSize: '14px', marginBottom: '12px', display: 'block' }}
          >
            信息查看
          </Text>
          <Flex wrap gap="small" align="center" justify="start" className="p-1">
            <FunctionButton
              title="图像详情"
              action="图像详情"
              iconName="RejectImage"
              onClick={handleImageDetails}
            />
            <FunctionButton
              title="tag信息"
              action="tag信息"
              iconName="RejectImage"
              onClick={handleTagInfo}
            />
          </Flex>
          <div style={{ marginTop: '8px', fontSize: '12px', color: '#666' }}>
            说明：查看图像详细信息和tag相关信息（功能待实现）
          </div>
        </div>
      </Content>
    </Layout>
  );
};

export default MorePanel;