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

const { TextArea } = Input;

interface TestCaseResult {
  key: number;
  id: number;
  database: string;
  question: string;
  std_sql: string;
  output_sql: string;
  result_a: number;
  return_sum: string;
  return_col_count: string;
  full_input: string;
  token_used: number;
  error_log: string;
  duration: number;
}

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

export default () => {
  const [tableData, setTableData] = useState<TestCaseResult[]>([]);
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [currentCaseResult, setCurrentCaseResult] = useState<TestCaseResult>();
  const location: any = useLocation();
  let reportID = location.query.report_id;
  const statusData: OptionType[] = [
    { value: -1, label: 'All' },
    { value: 0, label: 'Failed' },
    { value: 1, label: 'Succeed' },
  ];
  const [pagination, setPagination] = useState({
    pageSize: 20,
    current: 1,
    total: 100,
    resultAStatus: -1,
    onChange: onChange,
  });

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

  const handleOk = () => {
    setIsModalOpen(false);
  };

  const handleCancel = () => {
    setIsModalOpen(false);
  };

  const handleStatusChange = (value: string) => {
    pagination.resultAStatus = Number(value);
    setPagination(pagination);
    loadData();
  };

  const columns: ColumnsType<TestCaseResult> = [
    {
      title: 'ID',
      dataIndex: 'id',
    },
    {
      title: 'Database',
      dataIndex: 'database',
    },
    {
      title: 'Question',
      dataIndex: 'question',
    },
    {
      title: 'SQL',
      dataIndex: 'std_sql',
    },
    {
      title: 'OutputSQL',
      dataIndex: 'output_sql',
    },
    {
      title: 'Duration',
      render: (_, record) => formatTimestampMS(record.duration),
    },
    {
      title: 'Error',
      dataIndex: 'error_log',
    },
    {
      title: 'Result-A',
      dataIndex: 'result_a',
    },
    {
      title: 'Return-sum',
      render: (_, record) =>
        record.return_sum + 'R/' + record.return_col_count + 'C',
    },
    {
      title: 'Return Detail',
      render: (_, record) => (
        <Space size="middle">
          <Button type="primary" onClick={() => handleShowReportDetail(record)}>
            Detail
          </Button>
        </Space>
      ),
    },
  ];

  function handleShowReportDetail(record: TestCaseResult) {
    console.log('set current case result to', record);
    setCurrentCaseResult(record);
    setIsModalOpen(true);
  }

  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,
    });
  }

  function loadData() {
    fetch(
      `/api/v1/report/${reportID}?resulta_status=${pagination.resultAStatus}&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: TestCaseResult[] = [];

          for (const i of result.result.results || []) {
            data.push({
              key: i.case_result.ID,
              id: i.case_result.ID,
              database: i.case.database,
              question: i.case.question,
              std_sql: i.case.sql,
              output_sql: i.case_result.output,
              result_a: i.case_result.result_a,
              return_sum: i.case_result.return_sum,
              return_col_count: i.case_result.return_col_count,
              full_input: i.case_result.input,
              token_used: i.case_result.token_used,
              error_log: i.case_result.error_log,
              duration: i.case_result.duration,
            });
          }

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

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

  return (
    <PageContainer>
      <Space direction="vertical" size="middle" style={{ display: 'flex' }}>
        <Breadcrumb>
          <Breadcrumb.Item>
            <Link to="/test_report">Test Report</Link>
          </Breadcrumb.Item>
          <Breadcrumb.Item>
            <Link to="/test_report">Test Report {reportID}</Link>
          </Breadcrumb.Item>
          <Breadcrumb.Item>Test Case Results</Breadcrumb.Item>
        </Breadcrumb>

        <Select
          style={{ width: 200 }}
          defaultValue="Status"
          onChange={handleStatusChange}
          options={statusData}
        />

        <ProCard ghost gutter={8}>
          <ProCard
            style={{ minHeight: '90vh', height: '100px', overflowY: 'scroll' }}
            colSpan={24}
            bordered
          >
            <Table
              pagination={pagination}
              columns={columns}
              dataSource={tableData}
            />
          </ProCard>
        </ProCard>
      </Space>
      <Modal
        title="Report Detail"
        open={isModalOpen}
        onOk={handleOk}
        onCancel={handleCancel}
        width="50%"
      >
        <Form
          name="basic"
          labelCol={{ span: 6 }}
          wrapperCol={{ span: 18 }}
          initialValues={{ remember: true }}
          autoComplete="off"
        >
          <Form.Item label="Full Input">
            <TextArea disabled autoSize value={currentCaseResult?.full_input} />
          </Form.Item>
        </Form>
      </Modal>
    </PageContainer>
  );
};