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

interface AIPowerPrompt {
  key: string;
  ai_model: string;
  deployment: string;
  version: string;
  content: string;
  is_latest: boolean;
}

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

export default () => {
  const [tableData, setTableData] = useState<AIPowerPrompt[]>([]);
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [selectedTemplateData, setSelectedTemplateData] =
    useState<AIPowerPrompt>();

  async function showTemplateDetail(record: AIPowerPrompt) {
    console.log('set readOnly to true');
    setSelectedTemplateData(record);
    setIsModalOpen(true);
  }

  const columns: ColumnsType<AIPowerPrompt> = [
    {
      title: 'AI Model',
      dataIndex: 'ai_model',
    },
    {
      title: 'Deployment',
      dataIndex: 'deployment',
    },
    {
      title: 'Version',
      dataIndex: 'version',
    },
    {
      title: 'Content',
      dataIndex: 'content',
      render: (text) => <TextArea disabled defaultValue={text} />,
    },
    {
      title: 'Currently Using',
      dataIndex: 'is_latest',
      render: (is_latest) => is_latest ? "True" : "",
    },
    {
      title: 'Action',
      key: 'action',
      render: (_, record) => (
        <Space size="middle">
          <Button type="primary" onClick={() => showTemplateDetail(record)}>
            Detail
          </Button>
        </Space>
      ),
    },
  ];

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

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

  useEffect(() => {
    fetch('/api/v1/aipower/prompts')
      .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: AIPowerPrompt[] = [];
          for (const i of result.result.prompts) {
            data.push({
              key: i.ai_model,
              ai_model: i.ai_model,
              deployment: i.deployment,
              version: i.version,
              content: i.content,
              is_latest: i.is_latest,
            });
          }

          setTableData(data);
        },
        (error) => {
          console.log(error);
        },
      );
  }, []);

  return (
    <PageContainer>
      <ProCard ghost gutter={8}>
        <ProCard
          style={{ minHeight: '90vh', height: '100px', overflowY: 'scroll' }}
          colSpan={24}
          bordered
        >
          <Table
            pagination={{ defaultPageSize: 20 }}
            columns={columns}
            dataSource={tableData}
          />
        </ProCard>
        <Modal
          title="Prompt Detail"
          open={isModalOpen}
          onOk={handleOk}
          onCancel={handleCancel}
          width="80%"
        >
          <Form
            name="basic"
            labelCol={{ span: 6 }}
            wrapperCol={{ span: 18 }}
            initialValues={{ remember: true }}
            autoComplete="off"
          >
            <Form.Item
              label="AI Model"
              name="ai_model"
            >
              <Input
                disabled={true}
                defaultValue={selectedTemplateData?.ai_model}
                value={selectedTemplateData?.ai_model}
              ></Input>
            </Form.Item>
            <Form.Item
              label="Deployment"
              name="deployment"
            >
              <Input
                disabled={true}
                defaultValue={selectedTemplateData?.deployment}
                value={selectedTemplateData?.deployment}
              ></Input>
            </Form.Item>
            <Form.Item
              label="Version"
              name="version"
              rules={[{ required: true, message: 'Please set a version' }]}
            >
              <Input
                disabled={true}
                defaultValue={selectedTemplateData?.version}
                value={selectedTemplateData?.version}
              ></Input>
            </Form.Item>
            <Form.Item
              label="Prompt Template"
              name="template"
              rules={[
                { required: true, message: 'Please select a prompt template!' },
              ]}
            >
              <TextArea
                autoSize
                disabled={true}
                defaultValue={selectedTemplateData?.content}
                value={selectedTemplateData?.content}
              />
            </Form.Item>
          </Form>
        </Modal>
      </ProCard>
    </PageContainer>
  );
};