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 PromptTemplate {
  key: number;
  id: number;
  version: string;
  content: string;
}

interface ReleasePrompt {
  id: number;
  ai_model: string;
  deployment: string;
}

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<PromptTemplate[]>([]);
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [isReleaseModalOpen, setIsReleaseModalOpen] = useState(false);
  const [selectedTemplateData, setSelectedTemplateData] =
    useState<PromptTemplate>();
  const [isReadOnly, setIsReadOnly] = useState(false);
  const [aiModelsData, setAiModelsData] = useState<OptionType[]>([]);
  const [releaseAIModel, setReleaseAIModel] = useState<ReleasePrompt>({
    id: 0,
    ai_model: "",
    deployment: "",
  });

  const onEditVersion = (event: any) =>
    (selectedTemplateData.version = event.target.value);

  const onEditTemplate = (event: any) =>
    (selectedTemplateData.content = event.target.value);

  async function handleCloneTemplate(record: PromptTemplate) {
    setIsReadOnly(false);
    setSelectedTemplateData(record);
    setIsModalOpen(true);
  }

  async function handleReleaseTemplate(record: PromptTemplate) {
    setSelectedTemplateData(record);
    releaseAIModel.id = record.id;
    setReleaseAIModel(releaseAIModel);

    const aiModelsResp = await axios.get(`/api/v1/ai_models`);
    console.log("ai model resp", aiModelsResp.data.result.ai_models);

    let ai_models = [];
    for (let i of aiModelsResp.data.result.ai_models) {
      console.log("i in ai_models", i);
      ai_models.push({
        "label": i.model_type,
        "value": i.model_type,
      })
    }

    setAiModelsData(ai_models);

    setIsReleaseModalOpen(true);
  }

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

  const columns: ColumnsType<PromptTemplate> = [
    {
      title: 'ID',
      dataIndex: 'id',
    },
    {
      title: 'Version',
      dataIndex: 'version',
    },
    {
      title: 'Content',
      dataIndex: 'content',
      render: (text) => <TextArea disabled defaultValue={text} />,
    },
    {
      title: 'Action',
      key: 'action',
      render: (_, record) => (
        <Space size="middle">
          <Button type="primary" onClick={() => showTemplateDetail(record)}>
            Detail
          </Button>
          <Button type="info" onClick={() => handleCloneTemplate(record)}>
            Clone
          </Button>
          <Button type="danger" onClick={() => handleReleaseTemplate(record)}>
            Release
          </Button>
        </Space>
      ),
    },
  ];

  const handleOk = () => {
    if (isReadOnly) {
      setIsModalOpen(false);
      return;
    }

    const data = {
      version: selectedTemplateData?.version,
      content: selectedTemplateData?.content,
    };

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

    setIsModalOpen(false);
  };

  async function handleReleaseOk() {
    console.log("handleReleaseOk, releaseAIModel", releaseAIModel);
    setIsReleaseModalOpen(false);

    const resp = await axios.post(`/api/v1/aipower/prompts/release`, releaseAIModel);
    if (resp.status === 200) {
      notification.success({ message: '成功!' });
    }
  }

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

  useEffect(() => {
    fetch('/api/v1/prompt_templates')
      .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: PromptTemplate[] = [];
          for (const i of result.result.templates) {
            data.push({
              key: i.ID,
              id: i.ID,
              version: i.version,
              content: i.content,
            });
          }

          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="Clone Template"
          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="Version"
              name="version"
              rules={[{ required: true, message: 'Please set a version' }]}
            >
              <Input
                disabled={isReadOnly ? true : false}
                defaultValue={selectedTemplateData?.version}
                onChange={onEditVersion}
                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={isReadOnly ? true : false}
                onChange={onEditTemplate}
                defaultValue={selectedTemplateData?.content}
                value={selectedTemplateData?.content}
              />
            </Form.Item>
          </Form>
        </Modal>
        <Modal
          title="Release Template"
          open={isReleaseModalOpen}
          onOk={handleReleaseOk}
          onCancel={() => setIsReleaseModalOpen(false)}
          width="50%"
        >
          <Form
            name="basic"
            labelCol={{ span: 6 }}
            wrapperCol={{ span: 18 }}
            initialValues={{ remember: true }}
            autoComplete="off"
          >
            <Form.Item
              label="Prompt Template"
              name="template"
              rules={[
                { required: true, message: 'Please select a AI Model!' },
              ]}
            >
              <Input
                disabled={true}
                defaultValue={selectedTemplateData?.version}
                value={selectedTemplateData?.version}
              ></Input>
            </Form.Item>
            <Form.Item
              label="AI Model"
              name="ai_model"
              rules={[
                { required: true, message: 'Please select a AI Model!' },
              ]}
            >
              <Select
                onChange={(v) => {
                  releaseAIModel.ai_model = v;
                  setReleaseAIModel(releaseAIModel);
                }}

                options={aiModelsData}
              />
            </Form.Item>
            <Form.Item
              label="Deployment"
              name="deployment"
              rules={[
                { required: true, message: 'Please select a Deployment!' },
              ]}
            >
              <Select
                onChange={(v) => {
                  releaseAIModel.deployment = v;
                  setReleaseAIModel(releaseAIModel);
                }}

                options={[
                  { value: 'offline', label: 'offline' },
                  { value: 'online', label: 'online' },
                ]}
              />
            </Form.Item>
          </Form>
        </Modal>
      </ProCard>
    </PageContainer>
  );
};