import { PageContainer, ProCard } from '@ant-design/pro-components';
import {
  Table,
  Space,
  Button,
  notification,
  Modal,
  Select,
  Form,
  Input,
} from 'antd';
import { useEffect, useState } from 'react';
import type { ColumnsType } from 'antd/es/table';
import { Link } from 'umi';
import axios from 'axios';
import {formatTimestampMS} from "@/utils/utils";

type OptionType = {
  value: string;
  label: string;
};

interface TestPlan {
  key: number;
  id: number;
  name: string;
  type: string;
  creator: string;
  cases_count: number;
  runs_count: number;
  reports_count: number;
  last_run: string;
  ai_model: string;
  ai_model_id: number;
  avg_duration: number;
}

function openRequestErrorNotification(url: string, statusText: string) {
  notification.error({
    message: 'Error',
    description: 'fetch ' + url + ' got ' + statusText,
  });
}

function openBackendNotification(error: Error) {
  notification.error({
    message: 'Error',
    description: error,
  });
}
let selectedRunID = 0;
let selectedTemplateID = 0;
let selectedPlanID = 0;

export default () => {
  const [tableData, setTableData] = useState<TestPlan[]>([]);
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [itemsData, setItemsData] = useState<OptionType[]>();
  const [isPlanModalOpen, setIsPlanModalOpen] = useState(false);
  const [aiModelsData, setAIModelsData] = useState();
  const [templatesData, setTemplatesData] = useState<OptionType[]>();
  const [pagination, setPagination] = useState({
    pageSize: 20,
    current: 1,
    total: 100,
    onChange: onChange,
  });
  let planData = {
    ai_model_id: 0,
    name: '',
    description: '',
    creator: '',
  };

  async function onChange(page, pageSize) {
    pagination.pageSize = pageSize;
    pagination.current = page;
    setPagination(pagination);
    loadData();
  }

  const onFinish = (values: any) => {
    console.log('Success:', values);
  };

  const onFinishFailed = (errorInfo: any) => {
    console.log('Failed:', errorInfo);
  };

  async function handleRunPlan(recordID: number) {
    selectedPlanID = recordID;

    await axios.get(`/api/v1/runs`).then((resp) => {
      console.log('runs', resp.data.result.runs);
      let runs: any = [];
      for (let run of resp.data.result.runs) {
        runs.push({
          label: run.run.name,
          value: run.run.ID,
        });
      }

      setItemsData(runs);
      //setIsModalOpen(true);
    });
    await axios.get(`/api/v1/prompt_templates`).then((resp) => {
      console.log('prompt_templates', resp.data.result.templates);
      let templates: any = [];
      for (let i of resp.data.result.templates) {
        templates.push({
          label: i.version,
          value: i.ID,
        });
      }

      setTemplatesData(templates);
      setIsModalOpen(true);
    });
  }

  async function handleCreatePlan() {
    await axios.get(`/api/v1/ai_models`).then((resp) => {
      console.log('runs', resp.data.result.ai_models);
      let aiModels: any = [];
      for (let item of resp.data.result.ai_models) {
        aiModels.push({
          label: item.name,
          value: item.ID,
        });
      }

      setAIModelsData(aiModels);
      setIsPlanModalOpen(true);
    });
  }

  const columns: ColumnsType<TestPlan> = [
    {
      title: 'ID',
      dataIndex: 'id',
    },
    {
      title: 'Test Plan Name',
      dataIndex: 'name',
      render: (text, record) => (
        <Link to={{ pathname: '/plan/cases', query: { plan_id: record.id } }}>
          {text}
        </Link>
      ),
    },
    {
      title: 'Model',
      dataIndex: 'ai_model',
    },
    {
      title: 'Creator',
      dataIndex: 'creator',
    },
    {
      title: 'Cases',
      dataIndex: 'cases_count',
    },
    {
      title: 'Runs',
      dataIndex: 'runs_count',
    },
    {
      title: 'Reports',
      dataIndex: 'reports_count',
    },
    {
      title: 'AVG Duration',
      render: (_, record) => formatTimestampMS(record.avg_duration),
    },
    {
      title: 'Last Run',
      dataIndex: 'last_run',
    },
    {
      title: 'Action',
      key: 'action',
      render: (_, record) => (
        <Space size="middle">
          <Button type="primary" onClick={() => handleRunPlan(record.id)}>
            Run
          </Button>
          <Button type="info" onClick={() => handleCreatePlan()}>
            Create
          </Button>
        </Space>
      ),
    },
  ];

  const handleOk = () => {
    const data = {
      test_plan_id: selectedPlanID,
      prompt_template_id: selectedTemplateID,
      test_run_id: selectedRunID,
    };

    axios.post(`/api/v1/task`, data).then((resp) => {
      console.log('resp', resp);
      if (resp.status === 200) {
        notification.success({ message: '成功!' });
      }
    });

    setIsModalOpen(false);
  };

  const handlePlanOK = () => {
    axios
      .post(`/api/v1/plan`, planData)
      .then((resp) => {
        console.log('resp', resp);
        if (resp.status === 200) {
          notification.success({ message: '成功!' });
        }
      })
      .then(() => loadData());

    setIsPlanModalOpen(false);
  };

  const handleChange = (value: string) => {
    selectedRunID = Number(value);
  };
  const handleTemplateChange = (value: string) => {
    selectedTemplateID = Number(value);
  };

  function loadData() {
    fetch(
      `/api/v1/plans?page=${pagination.current}&per_page=${pagination.pageSize}`,
    )
      .then((res) => {
        if (res.status != 200) {
          res.json().then(
            (result) => {
              openBackendNotification(result.error);
            },
            (error) => {
              openRequestErrorNotification(res.url, res.statusText);
            },
          );
          throw new Error('Request Error');
        }
        return res.json();
      })
      .then(
        (result) => {
          let data: TestPlan[] = [];
          for (const i of result.result.plans) {
            data.push({
              key: i.plan.ID,
              id: i.plan.ID,
              name: i.plan.name,
              type: i.plan.type,
              creator: i.plan.creator,
              cases_count: i.stats.cases_count,
              runs_count: i.stats.runs_count,
              reports_count: i.stats.reports_count,
              last_run: i.last_run,
              ai_model: i.ai_model.model_type,
              ai_model_id: i.ai_model.ID,
              avg_duration: i.stats.avg_duration,
            });
          }

          pagination.total = result.result.total;
          console.log('set pagination', pagination);
          setPagination(pagination);
          setTableData(data);
          setTableData(data);
        },
        (error) => {
          console.log(error);
        },
      );
  }

  useEffect(() => {
    loadData();
  }, []);

  return (
    <PageContainer>
      <ProCard ghost gutter={8}>
        <ProCard
          style={{ minHeight: '90vh', height: '100px', overflowY: 'scroll' }}
          colSpan={24}
          bordered
        >
          <Table
            pagination={pagination}
            columns={columns}
            dataSource={tableData}
          />
        </ProCard>
        <Modal
          title="Run plan"
          open={isModalOpen}
          onOk={handleOk}
          onCancel={() => setIsModalOpen(false)}
        >
          <Form
            name="basic"
            labelCol={{ span: 8 }}
            wrapperCol={{ span: 16 }}
            initialValues={{ remember: true }}
            onFinish={onFinish}
            onFinishFailed={onFinishFailed}
            autoComplete="off"
          >
            <Form.Item
              label="Test Run"
              name="testrun"
              rules={[{ required: true, message: 'Please select a test run!' }]}
            >
              <Select
                defaultValue="Please Select Test Run"
                onChange={handleChange}
                options={itemsData}
              />
            </Form.Item>
            <Form.Item
              label="Prompt Template"
              name="template"
              rules={[
                { required: true, message: 'Please select a prompt template!' },
              ]}
            >
              <Select
                defaultValue="Please Select Prompt Template"
                onChange={handleTemplateChange}
                options={templatesData}
              />
            </Form.Item>
          </Form>
        </Modal>
        <Modal
          title="Create plan"
          open={isPlanModalOpen}
          onOk={handlePlanOK}
          onCancel={() => setIsPlanModalOpen(false)}
        >
          <Form
            name="basic"
            labelCol={{ span: 8 }}
            wrapperCol={{ span: 16 }}
            initialValues={{ remember: true }}
            onFinish={onFinish}
            onFinishFailed={onFinishFailed}
            autoComplete="off"
          >
            <Form.Item
              label="AI Model"
              name="ai_model"
              rules={[{ required: true, message: 'Please select a AI model!' }]}
            >
              <Select
                defaultValue="Please Select an AI Model"
                onChange={(event: String) => {
                  planData.ai_model_id = Number(event);
                }}
                options={aiModelsData}
              />
            </Form.Item>
            <Form.Item
              label="Name"
              name="name"
              rules={[{ required: true, message: 'Please set a plan name!' }]}
            >
              <Input
                onChange={(event: Event) => {
                  planData.name = event.target.value;
                }}
              />
            </Form.Item>
            <Form.Item
              label="Description"
              name="description"
              rules={[
                { required: true, message: 'Please set a plan description!' },
              ]}
            >
              <Input
                onChange={(event: Event) => {
                  planData.description = event.target.value;
                }}
              />
            </Form.Item>
            <Form.Item
              label="Creator"
              name="creator"
              rules={[{ required: true, message: 'Please set creator name!' }]}
            >
              <Input
                onChange={(event: Event) => {
                  planData.creator = event.target.value;
                }}
              />
            </Form.Item>
          </Form>
        </Modal>
      </ProCard>
    </PageContainer>
  );
};