import dayjs from 'dayjs';
import axios from 'axios';
import { Fragment, useEffect, useState } from 'react';
import {
  App,
  Badge,
  Button,
  Card,
  Col,
  DatePicker,
  Divider,
  Flex,
  Form,
  Input,
  InputNumber,
  List,
  Modal,
  notification,
  Pagination,
  Row,
  Tag,
  Tooltip,
} from 'antd';
import { capitalizeEachWord, makeColorStatus, STATUS_DATA } from '@pos/base';

import { DeleteOutlined, EditOutlined, LockOutlined, PlusOutlined, UnlockOutlined } from '@ant-design/icons';
import { makeColorTextValue } from '../helpers';

export default function SchedulingData() {
  const [formModal] = Form.useForm();
  const { modal } = App.useApp();
  const [openModalForm, setOpenModalForm] = useState(false);

  const [loadingTable, setLoadingTable] = useState(false);
  const [schedulingData, setSchedulingData] = useState<any[]>([]);
  const [schedulingMeta, setSchedulingMeta] = useState<any>();

  const [loadingForm, setLoadingForm] = useState(false);

  const handleGetData = async (page: number) => {
    setLoadingTable(true);
    await axios
      .get('v1/data-scheduling', {
        params: {
          page: page,
          limit: 10,
          order_type: 'ASC',
          order_by: 'schedule_date_from',
          schedule_date_from: dayjs().format('YYYY-MM-DD'),
        },
      })
      .then((resp: any) => {
        const data = resp?.data?.data ?? [];
        const meta = resp?.data?.meta;
        setSchedulingMeta(meta);
        setSchedulingData(data);
        setLoadingTable(false);
      })
      .catch(() => {
        setLoadingTable(false);
      });
  };

  const handleActivate = async (id: string) => {
    await axios
      .patch(`v1/data-scheduling/${id}/active`)
      .then(() => {
        handleGetData(schedulingMeta?.currentPage);
      })
      .catch((err: any) => {
        notification.error({
          message: 'Gagal mengaktifkan data.',
          description:
            err?.message ?? err?.response?.data?.message ?? 'Terjadi kesalahan saat mengaktifkan konfigurasi',
        });
      });
  };

  const handleDeactivate = async (id: string) => {
    await axios
      .patch(`v1/data-scheduling/${id}/inactive`)
      .then(() => {
        handleGetData(schedulingMeta?.currentPage);
      })
      .catch((err: any) => {
        notification.error({
          message: 'Gagal menonaktifkan data.',
          description:
            err?.message ?? err?.response?.data?.message ?? 'Terjadi kesalahan saat menonaktifkan konfigurasi',
        });
      });
  };

  const handleDelete = async (id: string) => {
    await axios
      .delete(`v1/data-scheduling/${id}`)
      .then(() => {
        handleGetData(schedulingMeta?.currentPage);
      })
      .catch((err: any) => {
        notification.error({
          message: 'Gagal menghapus data.',
          description: err?.message ?? err?.response?.data?.message ?? 'Terjadi kesalahan saat menghapus konfigurasi',
        });
      });
  };

  const handleClickUpdate = async (item: any) => {
    await formModal.setFieldsValue({
      id: item.id,
      name: item.name,
      indexing_key: item.indexing_key,
      schedule_date_from: dayjs(item.schedule_date_from),
      schedule_date_to: dayjs(item.schedule_date_from),
    });
    setOpenModalForm(true);
  };

  const handleClickCreate = async () => {
    await formModal.resetFields();
    setOpenModalForm(true);
  };

  const handleCloseModal = async () => {
    await formModal.resetFields();
    setOpenModalForm(false);
  };

  const handleSubmitModal = async () => {
    const formValues = await formModal.validateFields();
    const dataID = formValues.id;

    const payload = {
      name: formValues.name,
      indexing_key: formValues.indexing_key,
      schedule_date_from: formValues.schedule_date_from && dayjs(formValues.schedule_date_from).format('YYYY-MM-DD'),
      schedule_date_to: formValues.schedule_date_from && dayjs(formValues.schedule_date_from).format('YYYY-MM-DD'),
    };

    if (dataID) handleEdit(dataID, payload);
    else handleCreate(payload);
  };

  const handleCreate = async (payload: any) => {
    setLoadingForm(true);
    await axios
      .post(`v1/data-scheduling`, payload)
      .then(async () => {
        await handleGetData(1);
        await handleCloseModal();
      })
      .catch((err: any) => {
        notification.error({
          message: 'Gagal menyimpan data.',
          description:
            err?.message ?? err?.response?.data?.message ?? 'Terjadi kesalahan saat mengaktifkan konfigurasi',
        });
      })
      .finally(() => {
        setLoadingForm(false);
      });
  };

  const handleEdit = async (id: string, payload: any) => {
    setLoadingForm(true);
    await axios
      .put(`v1/data-scheduling/${id}`, payload)
      .then(async () => {
        await handleGetData(schedulingMeta?.currentPage);
        await handleCloseModal();
      })
      .catch((err: any) => {
        notification.error({
          message: 'Gagal menyimpan data.',
          description:
            err?.message ?? err?.response?.data?.message ?? 'Terjadi kesalahan saat mengaktifkan konfigurasi',
        });
      })
      .finally(() => {
        setLoadingForm(false);
      });
  };

  useEffect(() => {
    handleGetData(1);
  }, []);

  return (
    <div>
      <Modal
        open={openModalForm}
        onCancel={handleCloseModal}
        cancelButtonProps={{ disabled: loadingForm }}
        okText="Simpan"
        okButtonProps={{ loading: loadingForm }}
        onOk={handleSubmitModal}
        title="FORM KONFIGURASI PENJADWALAN"
      >
        <Form form={formModal} layout="vertical">
          <Form.Item name={['id']} noStyle></Form.Item>
          <Row gutter={[12, 1]}>
            <Col xs={24} sm={12} span={12}>
              <Form.Item name={['name']} label="Label" rules={[{ required: true, message: 'Label harus diisi!' }]}>
                <Input placeholder="Input label" size="large" />
              </Form.Item>
            </Col>
            <Col xs={24} sm={12} span={12}>
              <Form.Item
                name={['indexing_key']}
                label="Total Data"
                rules={[
                  { required: true, message: 'Total data harus diisi!' },
                  { type: 'number', max: 100, message: 'Total data maksimal 100%!' },
                  {
                    validator(_, value) {
                      if (value <= 0) return Promise.reject(new Error('Total data harus lebih dari 0!'));
                      return Promise.resolve();
                    },
                  },
                ]}
              >
                <InputNumber style={{ width: '100%' }} addonAfter="%" placeholder="Input value" size="large" />
              </Form.Item>
            </Col>
            <Col xs={24} sm={12} span={12}>
              <Form.Item shouldUpdate noStyle>
                {({ getFieldsValue }) => {
                  const values = getFieldsValue();
                  const endDate = values?.schedule_date_to;

                  return (
                    <Form.Item
                      label="Start Date"
                      name={'schedule_date_from'}
                      rules={[{ required: true, message: 'Start date harus diisi!' }]}
                    >
                      <DatePicker
                        showNow={false}
                        style={{ width: '100%' }}
                        size="large"
                        disabledDate={(date) => {
                          if (endDate)
                            return (
                              (!date.isBefore(endDate) && !date.isSame(endDate)) ||
                              date.isBefore(dayjs().subtract(1, 'day'))
                            );
                          else return date.isBefore(dayjs().subtract(1, 'day'));
                        }}
                      />
                    </Form.Item>
                  );
                }}
              </Form.Item>
            </Col>
            <Col xs={24} sm={12} span={12}>
              <Form.Item shouldUpdate noStyle>
                {({ getFieldsValue }) => {
                  const values = getFieldsValue();
                  const startDate = values?.schedule_date_from;

                  return (
                    <Form.Item
                      label="End Date"
                      name={'schedule_date_to'}
                      rules={[{ required: true, message: 'End date harus diisi!' }]}
                    >
                      <DatePicker
                        showNow={false}
                        style={{ width: '100%' }}
                        size="large"
                        disabledDate={(date) => {
                          if (startDate) return !date.isAfter(startDate) && !date.isSame(startDate);
                          else return date.isBefore(dayjs().subtract(1, 'day'));
                        }}
                      />
                    </Form.Item>
                  );
                }}
              </Form.Item>
            </Col>
          </Row>
        </Form>
      </Modal>
      <div>
        <Flex justify="end">
          <Button type="primary" onClick={handleClickCreate} icon={<PlusOutlined />}>
            Tambah Jadwal
          </Button>
        </Flex>
        {schedulingData?.length > 0 && (
          <Fragment>
            <Divider style={{ margin: 10 }} />
          </Fragment>
        )}
        <div style={{ marginBottom: 10 }}></div>
        <List
          bordered={!schedulingData || schedulingData?.length <= 0}
          style={{ maxHeight: 500, overflow: 'auto' }}
          dataSource={schedulingData}
          loading={loadingTable}
          renderItem={(item) => (
            <List.Item key={item.id} style={{ borderBlockEnd: 'none', padding: 5 }}>
              <Card className="w-full">
                <Flex className="w-full" justify="space-between">
                  <Row className="w-full" gutter={[4, 8]}>
                    <Col xs={18} sm={12} span={12}>
                      <Flex align="center" className="h-full" gap={4}>
                        <div>
                          <div className="text-xs mb-2" style={{ color: makeColorStatus(item.status) }}>
                            {capitalizeEachWord(item.status)}
                          </div>
                          <div className="text-[#00000099]">{item.name}</div>
                          <div className="text-[#00000099]">{`${dayjs(item?.schedule_date_from).format('DD MMM YYYY')} - ${dayjs(item?.schedule_date_to).format('DD MMM YYYY')}`}</div>
                        </div>
                      </Flex>
                    </Col>
                    <Col xs={18} sm={12} span={12}>
                      <Flex align="center" className="h-full" gap={8}>
                        <div
                          className={`text-xl font-bold ${makeColorTextValue(item.indexing_key)}`}
                        >{`${item.indexing_key} %`}</div>
                      </Flex>
                    </Col>
                  </Row>
                  <Flex align="center" gap={4}>
                    <Tooltip title="Edit" trigger={'hover'} placement="bottom">
                      <Button icon={<EditOutlined />} onClick={() => handleClickUpdate(item)} />
                    </Tooltip>

                    {item.status === STATUS_DATA.ACTIVE && (
                      <Tooltip title="Inactive" trigger={'hover'} placement="bottom">
                        <Button
                          icon={<LockOutlined />}
                          onClick={() => {
                            modal.confirm({
                              icon: null,
                              cancelText: 'Batal',
                              title: 'Nonaktifkan Konfigurasi Penjadwalan?',
                              cancelButtonProps: { style: { width: 100 } },
                              okButtonProps: { style: { width: 100 } },
                              content: (
                                <div>
                                  <div className="font-semibold italic">{`Perhatian: `}</div>
                                  <div className="italic">{`Konfigurasi yang dinonaktifkan tidak akan diikutsertakan dalam proses penjadwalan hingga Anda mengaktifkannya kembali. Ini berguna untuk menjeda proses penjadwalan tertentu tanpa menghapus konfigurasi.`}</div>
                                </div>
                              ),
                              onOk: () => handleDeactivate(item.id),
                            });
                          }}
                        />
                      </Tooltip>
                    )}

                    {item.status === STATUS_DATA.INACTIVE && (
                      <Tooltip title="Active" trigger={'hover'} placement="bottom">
                        <Button
                          icon={<UnlockOutlined />}
                          onClick={() => {
                            modal.confirm({
                              icon: null,
                              cancelText: 'Batal',
                              title: 'Aktifkan Konfigurasi Penjadwalan?',
                              cancelButtonProps: { style: { width: 100 } },
                              okButtonProps: { style: { width: 100 } },
                              content: (
                                <div>
                                  <div className="font-semibold italic">{`Perhatian: `}</div>
                                  <div className="italic">{`Dengan mengaktifkannya, konfigurasi ini akan kembali diperhitungkan dan digunakan dalam proses penjadwalan selanjutnya, sesuai dengan kriteria yang telah ditetapkan.`}</div>
                                </div>
                              ),
                              onOk: () => handleActivate(item.id),
                            });
                          }}
                        />
                      </Tooltip>
                    )}

                    <Tooltip title="Delete" trigger={'hover'} placement="bottom">
                      <Button
                        icon={<DeleteOutlined />}
                        onClick={() => {
                          modal.confirm({
                            icon: null,
                            cancelText: 'Batal',
                            title: 'Hapus Konfigurasi Penjadwalan?',
                            cancelButtonProps: { style: { width: 100 } },
                            okButtonProps: { style: { width: 100 } },
                            content: (
                              <div>
                                <div className="font-semibold italic">{`Perhatian: `}</div>
                                <div className="italic">{`Tindakan ini bersifat permanen. Konfigurasi yang terhapus tidak akan lagi disertakan dalam perhitungan atau proses penjadwalan di masa mendatang dan tidak dapat dipulihkan.`}</div>
                              </div>
                            ),
                            onOk: () => handleDelete(item.id),
                          });
                        }}
                      />
                    </Tooltip>
                  </Flex>
                </Flex>
              </Card>
            </List.Item>
          )}
        />
        <div style={{ marginBottom: 10 }}></div>
        {schedulingData?.length > 0 && (
          <Fragment>
            <Divider style={{}} />
            <Flex justify="end" className="mt-2">
              <Pagination
                current={schedulingMeta?.currentPage}
                total={schedulingMeta?.totalItems}
                pageSize={10}
                onChange={async (page) => {
                  await handleGetData(page);
                }}
              />
            </Flex>
          </Fragment>
        )}
        <div className="mt-2">
          <div className="italic font-semibold">Informasi Penting: </div>
          <div className="italic text-[#00000066]">
            {`Daftar konfigurasi penjadwalan diurutkan otomatis berdasarkan Waktu Mulai. Konfigurasi baru akan muncul sesuai urutan tanggalnya, dan jadwal yang sudah terlewat tidak akan ditampilkan.`}
          </div>
        </div>
      </div>
    </div>
  );
}