import React, { useState } from 'react';
import styles from './style/index.module.less';
import { Button, Input, Radio, Space, Tag, Divider, Breadcrumb } from '@arco-design/web-react';
import { IconSearch } from '@arco-design/web-react/icon';
import SideBar from '@/pages/componentDevelopment/componentTest/sideBar';
import InstanceList from '@/pages/componentDevelopment/componentTest/instanceList';
import TestInstance from '@/pages/componentDevelopment/componentTest/testInstance';

const Group = Radio.Group;
const BreadcrumbItem = Breadcrumb.Item;

const ComponentTest = () => {
  const [selectedIdentifier, setSelectedIdentifier] = useState<string>('');
  const [selectedParentId, setSelectedParentId] = useState<string>('');
  const [refreshKey, setRefreshKey] = useState<number>(0);
  const [count, setCount] = useState({ total: 0, passed: 0, failed: 0 });
  const [currentView, setCurrentView] = useState<'list' | 'test'>('list');
  const [selectedInstance, setSelectedInstance] = useState<any>(null);
  const [searchValue, setSearchValue] = useState<string>('');

  // 标签配置
  const tagList = [
    { label: '总数', value: count.total, color: 'purple' },
    { label: '已测试', value: count.passed, color: 'arcoblue' },
    { label: '未测试', value: count.failed, color: 'orangered' }
  ];

  // 处理子节点选择
  const handleNodeSelect = (identifier: string, parentId: string) => {
    setSelectedIdentifier(identifier);
    setSelectedParentId(parentId);
    // 每次选择都更新 refreshKey,确保即使选择同一个节点也会触发刷新
    setRefreshKey(prev => prev + 1);
  };

  // 处理前往测试
  const handleGoToTest = (instance: any) => {
    setSelectedInstance(instance);
    setCurrentView('test');
  };

  // 返回列表
  const handleBackToList = () => {
    setCurrentView('list');
    setSelectedInstance(null);
  };

  return (
    <div className={styles['component-test']}>
      {/* 面包屑导航 */}
      {currentView === 'test' && (
        <div style={{ background: '#fff', marginBottom: 16 }}>
          <Breadcrumb>
            <BreadcrumbItem style={{ cursor: 'pointer' }} onClick={handleBackToList}>
              组件测试
            </BreadcrumbItem>
            <BreadcrumbItem>
              {selectedInstance?.name || '测试实例'}
            </BreadcrumbItem>
          </Breadcrumb>
        </div>
      )}

      {currentView === 'list' ? (
        <>
          <div className={styles['header']}>
            <Group name="button-radio-group">
              {tagList.map((item) => {
                return (
                  <Radio key={item.label} value={item.label}>
                    {({ checked }) => {
                      return (
                        <Tag size="large" tabIndex={-1} color={item.color}>
                          {item.label}{item.value}
                        </Tag>
                      );
                    }}
                  </Radio>
                );
              })}
            </Group>

            <Space split={<Divider type="vertical" />}>
              <Input
                prefix={<IconSearch />}
                placeholder={'搜索实例标识或实例名'}
                style={{ width: 236 }}
                value={searchValue}
                onChange={(value) => setSearchValue(value)}
                allowClear
              />
            </Space>
          </div>
          <div className={styles['content']}>
            <div className={styles['left']}>
              <SideBar onNodeSelect={handleNodeSelect} getCount={(value) => setCount(value)} />
            </div>
            <div className={styles['right']}>
              <InstanceList
                identifier={selectedIdentifier}
                refreshKey={refreshKey}
                onGoToTest={handleGoToTest}
                searchValue={searchValue}
              />
            </div>
          </div>
        </>
      ) : (
        <TestInstance
          parentId={selectedParentId}
          instance={selectedInstance}
          onBack={handleBackToList}
        />
      )}
    </div>
  );
};

export default ComponentTest;