import { Button, Input, message, Popconfirm, Select, Table } from 'antd'
import { ColumnsType } from 'antd/lib/table'
import { useState } from 'react'

import {
  useDeleteApiV1DevopsBillingProxyApiV1BillingSkuGroupsGroupId,
  useGetApiV1DevopsBillingProxyApiV1BillingSkuGroups
} from 'apiClient/services/billing'
import { FormsSKUGroup } from 'apiClient/services/billing/interface'
import { ListToolBar } from 'components/Table'

import { SKUGroupModal, SKUGroupModalType } from './SKUGroupModal'
import { SKUPreviewModal } from './SKUPreviewModal'
import { UnitTemplateModal } from './UnitTemplateModal'
import {
  DEFAULT_SKU_GROUP_TYPE,
  SKU_GROUP_TYPE_FORMULA_PRICE,
  SKU_GROUP_TYPE_MANUAL_PRICE
} from './utils'

const SKU_GROUP_TYPE_ALL = 'all'

const SKU_GROUP_TYPE_LABELS: Record<string, string> = {
  [SKU_GROUP_TYPE_ALL]: 'All',
  [SKU_GROUP_TYPE_FORMULA_PRICE]: 'Formula Price',
  [SKU_GROUP_TYPE_MANUAL_PRICE]: 'Manual Price'
}

const getSKUGroupType = (skuGroup: FormsSKUGroup) =>
  skuGroup.sku_group_type || DEFAULT_SKU_GROUP_TYPE

export const SKUList = () => {
  const { data, refetch } = useGetApiV1DevopsBillingProxyApiV1BillingSkuGroups({
    query: {
      refetchOnMount: false
    }
  })
  const [search, setSearch] = useState('')
  const [skuGroupTypeFilter, setSKUGroupTypeFilter] =
    useState(SKU_GROUP_TYPE_ALL)
  const filteredData = data?.data?.filter((item) => {
    const matchedName = search ? item.name?.includes(search) : true
    const matchedType =
      skuGroupTypeFilter === SKU_GROUP_TYPE_ALL ||
      getSKUGroupType(item) === skuGroupTypeFilter

    return matchedName && matchedType
  })
  const [openModal, setOpenModal] = useState(false)
  const [openPreviewModal, setOpenPreviewModal] = useState(false)
  const [openTemplateModal, setOpenTemplateModal] = useState(false)
  const [skuGroupType, setSKUGroupType] = useState<SKUGroupModalType>('create')
  const [skuGroup, setSKUGroup] = useState<FormsSKUGroup>()
  const { mutateAsync: deleteSKU } =
    useDeleteApiV1DevopsBillingProxyApiV1BillingSkuGroupsGroupId()

  const COLUMNS: ColumnsType<FormsSKUGroup> = [
    {
      title: 'Name',
      dataIndex: 'name',
      width: 300,
      render(value, record) {
        return (
          <Button
            type="link"
            onClick={() => {
              setSKUGroupType('view')
              setSKUGroup(record)
              setOpenModal(true)
            }}
          >
            {value}
          </Button>
        )
      }
    },
    {
      title: 'Unit key pattern',
      dataIndex: 'unit_key_pattern',
      width: 400
    },
    {
      title: 'Category',
      dataIndex: 'category',
      width: 300
    },
    {
      title: 'SKU Group Type',
      dataIndex: 'sku_group_type',
      width: 180,
      render(value, record) {
        return SKU_GROUP_TYPE_LABELS[getSKUGroupType(record)] || value
      }
    },
    {
      title: 'Price Formula',
      dataIndex: 'price_formula',
      width: 400
    },
    {
      title: 'Price Type',
      dataIndex: 'price_type'
    },
    {
      title: 'Price Expression',
      dataIndex: 'price_expression'
    },
    {
      title: 'Measure Unit',
      dataIndex: 'measure_unit'
    },
    {
      title: 'Action',
      fixed: 'right',
      width: 180,
      render(value, record, index) {
        return (
          <>
            <Button
              type="link"
              onClick={() => {
                setSKUGroupType('edit')
                setSKUGroup(record)
                setOpenModal(true)
              }}
            >
              Edit
            </Button>
            {/* <Popconfirm
              title="Are you sure delete this SKU?"
              onConfirm={async () => {
                try {
                  await deleteSKU({ groupId: String(record.group_id!) })
                  await refetch()
                  message.success('Deleted successfully.')
                } catch (e: any) {
                  message.error(e.response?.data?.message)
                }
              }}
              okText="Yes"
              cancelText="No"
            >
              <Button type="link">Delete</Button>
            </Popconfirm> */}
          </>
        )
      }
    }
  ]

  return (
    <>
      <ListToolBar
        actions={[
          <Input.Group compact className="list-search-bar-container">
            <Select
              value={skuGroupTypeFilter}
              style={{ width: 180 }}
              onChange={setSKUGroupTypeFilter}
            >
              <Select.Option value={SKU_GROUP_TYPE_ALL}>All</Select.Option>
              <Select.Option value={SKU_GROUP_TYPE_FORMULA_PRICE}>
                Formula Price
              </Select.Option>
              <Select.Option value={SKU_GROUP_TYPE_MANUAL_PRICE}>
                Manual Price
              </Select.Option>
            </Select>
            <Input.Search
              placeholder="Search by Name"
              defaultValue={search}
              style={{ width: 300 }}
              onSearch={(value: string) => {
                setSearch(value ? value.trim() : '')
              }}
              allowClear
            />
          </Input.Group>,
          <Button
            type="primary"
            onClick={() => {
              setSKUGroupType('create')
              setSKUGroup(undefined)
              setOpenModal(true)
            }}
          >
            Add a new SKU Group
          </Button>,
          <Button onClick={() => setOpenPreviewModal(true)}>
            Billing Item Tree
          </Button>,
          <Button onClick={() => setOpenTemplateModal(true)}>
            Unit Templates
          </Button>
        ]}
      />

      <SKUGroupModal
        data={skuGroup}
        type={skuGroupType}
        open={openModal}
        onClose={() => setOpenModal(false)}
      />
      <SKUPreviewModal
        open={openPreviewModal}
        onClose={() => setOpenPreviewModal(false)}
      />
      <UnitTemplateModal
        open={openTemplateModal}
        onClose={() => setOpenTemplateModal(false)}
      />

      <Table<FormsSKUGroup> columns={COLUMNS} dataSource={filteredData} />
    </>
  )
}