import { ResourceInfoTabKeys } from '@/pages/Dataset/components/ResourceInfo';
import { getGitUrl } from '@/utils';
import { formatDate } from '@/utils/date';
import { useNavigate } from '@umijs/max';
import classNames from 'classnames';
import { ModelDepsData, NodeType, ProjectDependency, TrainDataset } from '../ModelEvolution/utils';
import styles from './index.less';

type ModelInfoProps = {
  resourceId: number;
  data: ModelDepsData;
  onVersionChange: (version: string) => void;
};

function ModelInfo({ resourceId, data, onVersionChange }: ModelInfoProps) {
  const navigate = useNavigate();

  const gotoExperimentPage = () => {
    if (data.model_meta.train_task?.ins_id) {
      const { origin } = location;
      const url = `${origin}/pipeline/experiment/instance/${data.model_meta.train_task.workflow_id}/${data.model_meta.train_task.ins_id}`;
      window.open(url, '_blank');
    }
  };

  const gotoModelPage = () => {
    if (data.model_type === NodeType.Current) {
      return;
    }
    if (data.repo_id === resourceId) {
      onVersionChange?.(data.version);
    } else {
      const path = `/dataset/model/info/${data.repo_id}?tab=${ResourceInfoTabKeys.Evolution}&version=${data.version}&name=${data.model_name}&owner=${data.owner}&identifier=${data.identifier}`;
      navigate(path);
    }
  };

  return (
    <>
      <div className={styles['node-tooltips__title']}>模型信息</div>
      <div>
        <div className={styles['node-tooltips__row']}>
          <span className={styles['node-tooltips__row__title']}>模型名称：</span>
          {data.model_type === NodeType.Current ? (
            <span className={styles['node-tooltips__row__value']}>{data.model_name || '--'}</span>
          ) : (
            <ValueLink
              value={data.model_name}
              className={styles['node-tooltips__row__link']}
              nullClassName={styles['node-tooltips__row__value']}
              onClick={gotoModelPage}
            ></ValueLink>
          )}
        </div>
        <div className={styles['node-tooltips__row']}>
          <span className={styles['node-tooltips__row__title']}>模型版本：</span>
          <span className={styles['node-tooltips__row__value']}>{data.version || '--'}</span>
        </div>
        <div className={styles['node-tooltips__row']}>
          <span className={styles['node-tooltips__row__title']}>模型框架：</span>
          <span className={styles['node-tooltips__row__value']}>
            {data.model_meta.model_type || '--'}
          </span>
        </div>
        {/* <div className={styles['node-tooltips__row']}>
          <span className={styles['node-tooltips__row__title']}>模型大小：</span>
          <span className={styles['node-tooltips__row__value']}>
            {data.model_meta.file_size || '--'}
          </span>
        </div> */}
        <div className={styles['node-tooltips__row']}>
          <span className={styles['node-tooltips__row__title']}>创建时间：</span>
          <span className={styles['node-tooltips__row__value']}>
            {formatDate(data.model_meta.create_time || '--')}
          </span>
        </div>
        <div className={styles['node-tooltips__row']}>
          <span className={styles['node-tooltips__row__title']}>模型权限：</span>
          <span className={styles['node-tooltips__row__value']}>
            {data.model_meta.is_public ? '公开' : '私有'}
          </span>
        </div>
      </div>
      <div className={styles['node-tooltips__title']}>训练相关信息</div>
      <div>
        <div className={styles['node-tooltips__row']}>
          <span className={styles['node-tooltips__row__title']}>训练任务：</span>
          <ValueLink
            value={data.model_meta.train_task?.name}
            className={styles['node-tooltips__row__link']}
            nullClassName={styles['node-tooltips__row__value']}
            onClick={gotoExperimentPage}
          ></ValueLink>
        </div>
      </div>
    </>
  );
}

function DatasetInfo({ data }: { data: TrainDataset }) {
  const gotoDatasetPage = () => {
    const { origin } = location;
    const url = `${origin}/dataset/dataset/info/${data.repo_id}?tab=${ResourceInfoTabKeys.Version}&version=${data.version}&name=${data.name}&owner=${data.owner}&identifier=${data.identifier}`;
    window.open(url, '_blank');
  };

  return (
    <>
      <div className={styles['node-tooltips__title']}>数据集信息</div>
      <div>
        <div className={styles['node-tooltips__row']}>
          <span className={styles['node-tooltips__row__title']}>数据集名称：</span>
          <ValueLink
            value={data.name}
            className={styles['node-tooltips__row__link']}
            nullClassName={styles['node-tooltips__row__value']}
            onClick={gotoDatasetPage}
          ></ValueLink>
        </div>
        <div className={styles['node-tooltips__row']}>
          <span className={styles['node-tooltips__row__title']}>数据集版本：</span>
          <span className={styles['node-tooltips__row__value']}>{data.version || '--'}</span>
        </div>
      </div>
    </>
  );
}

function ProjectInfo({ data }: { data: ProjectDependency }) {
  const gotoProjectPage = () => {
    const { url, branch } = data;
    const projectUrl = getGitUrl(url, branch);
    window.open(projectUrl, '_blank');
  };

  return (
    <>
      <div className={styles['node-tooltips__title']}>项目信息</div>
      <div>
        <div className={styles['node-tooltips__row']}>
          <span className={styles['node-tooltips__row__title']}>项目名称：</span>
          <ValueLink
            value={data.name}
            className={styles['node-tooltips__row__link']}
            nullClassName={styles['node-tooltips__row__value']}
            onClick={gotoProjectPage}
          ></ValueLink>
        </div>
        <div className={styles['node-tooltips__row']}>
          <span className={styles['node-tooltips__row__title']}>项目分支：</span>
          <span className={styles['node-tooltips__row__value']}>{data.branch || '--'}</span>
        </div>
        <div className={styles['node-tooltips__row']}>
          <span className={styles['node-tooltips__row__title']}>项目地址：</span>
          <span className={styles['node-tooltips__row__value']}>{data.url || '--'}</span>
        </div>
      </div>
    </>
  );
}

type ValueLinkProps = {
  value: string | undefined;
  onClick?: () => void;
  className?: string;
  nullClassName?: string;
};

const ValueLink = ({ value, onClick, className, nullClassName }: ValueLinkProps) => {
  return value ? (
    <a className={className} onClick={onClick}>
      {value}
    </a>
  ) : (
    <span className={nullClassName}>--</span>
  );
};

type NodeTooltipsProps = {
  resourceId: number;
  data: ModelDepsData | ProjectDependency | TrainDataset;
  x: number;
  y: number;
  isLeft: boolean;
  onMouseEnter?: () => void;
  onMouseLeave?: () => void;
  onVersionChange: (version: string) => void;
};

function NodeTooltips({
  resourceId,
  data,
  x,
  y,
  isLeft,
  onMouseEnter,
  onMouseLeave,
  onVersionChange,
}: NodeTooltipsProps) {
  if (!data) return null;
  let Component = null;
  const { model_type } = data;
  if (model_type === NodeType.TestDataset || model_type === NodeType.TrainDataset) {
    Component = <DatasetInfo data={data} />;
  } else if (model_type === NodeType.Project) {
    Component = <ProjectInfo data={data} />;
  } else if (
    model_type === NodeType.Children ||
    model_type === NodeType.Parent ||
    model_type === NodeType.Current
  ) {
    Component = <ModelInfo resourceId={resourceId} data={data} onVersionChange={onVersionChange} />;
  }
  const style = isLeft
    ? { left: `${x}px`, bottom: `${y}px` }
    : { right: `${x}px`, bottom: `${y}px` };
  return (
    <div
      className={classNames(styles['node-tooltips'], { [styles['node-tooltips--right']]: !isLeft })}
      style={style}
      onMouseEnter={onMouseEnter}
      onMouseLeave={onMouseLeave}
    >
      {Component}
    </div>
  );
}

export default NodeTooltips;
