import { Group, SegmentedControl, Tooltip, Box } from '@tidbcloud/uikit'
import {
  Col,
  Table,
  Row,
  Tag,
  DatePicker,
  DatePickerProps,
  TableProps,
  Typography,
  Input
} from 'antd'
import { ColumnsType } from 'antd/lib/table'
import moment from 'moment'
import React, { useEffect, useRef, useState } from 'react'
import { Link, useHistory, useLocation } from 'react-router-dom'

import { useGetMonthlySummaryOfDedicatedSLA } from 'apiClient/services/devops'
import {
  GetMonthlySummaryOfDedicatedSLATidbInstanceMode,
  EntityDedicatedClusterSLABasic,
  GetMonthlySummaryOfDedicatedSLAStatusItem
} from 'apiClient/services/devops/interface'

export default function SLAMonthlySummaryPage() {
  return (
    <>
      <SLAMonthlySummary />
    </>
  )
}

function getStatusTagColor(status: GetMonthlySummaryOfDedicatedSLAStatusItem) {
  switch (status) {
    case GetMonthlySummaryOfDedicatedSLAStatusItem.breach:
      return 'red'
    case GetMonthlySummaryOfDedicatedSLAStatusItem.warning:
      return 'orange'
    case GetMonthlySummaryOfDedicatedSLAStatusItem.perfect:
      return 'green'
    default:
      return 'default'
  }
}

export const SLAMonthlySummary: React.FC<
  React.PropsWithChildren<unknown>
> = () => {
  const history = useHistory()
  const location = useLocation()
  const query = new URLSearchParams(location.search)
  let month = query.get('month')
  const currentMonth = moment().utc().format('YYYY/M')

  useEffect(() => {
    if (!month) {
      history.replace(`/sla/summary?month=${currentMonth}`)
    }
  }, [month, history, currentMonth])

  // const [month, setMonth] = useState<string>(currentMonth)
  const [status, setStatus] = useState<
    GetMonthlySummaryOfDedicatedSLAStatusItem[]
  >([
    GetMonthlySummaryOfDedicatedSLAStatusItem.warning,
    GetMonthlySummaryOfDedicatedSLAStatusItem.breach
  ])
  const [tidbInstanceMode, setTidbInstanceMode] =
    useState<GetMonthlySummaryOfDedicatedSLATidbInstanceMode>(
      GetMonthlySummaryOfDedicatedSLATidbInstanceMode.multi
    )
  const [includeDeleted, setIncludeDeleted] = useState(false)
  const [search, setSearch] = useState('')
  const slaTarget =
    tidbInstanceMode === GetMonthlySummaryOfDedicatedSLATidbInstanceMode.multi
      ? 0.9999
      : 0.999

  const onTidbInstanceModeChange = (value: string) => {
    setTidbInstanceMode(
      value as GetMonthlySummaryOfDedicatedSLATidbInstanceMode
    )
    setSearch('')
  }

  const onTableChange: TableProps<EntityDedicatedClusterSLABasic>['onChange'] =
    (pagination, filters, sorter) => {
      setStatus(
        filters.slaStatus as GetMonthlySummaryOfDedicatedSLAStatusItem[]
      )
      setIncludeDeleted(
        filters.deleted ? (filters.deleted[0] as boolean) : false
      )
    }

  const onDatePickerChange: DatePickerProps['onChange'] = (
    date,
    dateString
  ) => {
    if (date) {
      history.push(`/sla/summary?month=${date.format('YYYY/M')}`)
      // setMonth(date.format('YYYY/M'))
    }
  }

  const { data, isLoading, refetch } = useGetMonthlySummaryOfDedicatedSLA({
    month: month || currentMonth,
    status,
    tidbInstanceMode,
    includeDeleted,
    search
  })

  const columns: ColumnsType<EntityDedicatedClusterSLABasic> = [
    {
      title: 'Tenant',
      render: (_, record) => (
        <Row>
          <Col span={24}>
            {record.tenantName ? (
              <Typography.Text ellipsis={{ tooltip: record.tenantName }}>
                {record.tenantName}
              </Typography.Text>
            ) : (
              <span style={{ color: '#aaa' }}>-</span>
            )}
          </Col>
          <Col span={24}>
            <Typography.Text type="secondary">
              {record.tenantID}
            </Typography.Text>
          </Col>
        </Row>
      )
    },
    {
      title: 'Cluster',
      render: (_, record) => (
        <Row>
          <Col span={24}>
            {record.clusterName ? (
              <Typography.Text ellipsis={{ tooltip: record.clusterName }}>
                {record.clusterName}
              </Typography.Text>
            ) : (
              <span style={{ color: '#aaa' }}>-</span>
            )}
          </Col>
          <Col span={24}>
            <Typography.Text type="secondary">
              {record.clusterID}
            </Typography.Text>
          </Col>
        </Row>
      )
    },
    {
      title: 'Status',
      dataIndex: 'slaStatus',
      filters: [
        {
          text: 'Breach',
          value: GetMonthlySummaryOfDedicatedSLAStatusItem.breach
        },
        {
          text: 'Warning',
          value: GetMonthlySummaryOfDedicatedSLAStatusItem.warning
        },
        {
          text: 'Perfect',
          value: GetMonthlySummaryOfDedicatedSLAStatusItem.perfect
        }
      ],
      filterMultiple: true,
      defaultFilteredValue: [
        GetMonthlySummaryOfDedicatedSLAStatusItem.warning,
        GetMonthlySummaryOfDedicatedSLAStatusItem.breach
      ],
      render(value, record, index) {
        return <Tag color={getStatusTagColor(value)}>{value}</Tag>
      }
    },
    {
      title: `SLA Value (should >= ${slaTarget})`,
      render(value, record, index) {
        if (moment(month, 'YYYY/M') < moment('2024/5', 'YYYY/M')) {
          return record.slaValue?.toFixed(5)
        }
        return (
          <Link
            to={`/sla/${record.clusterID}/detail?month=${month}`}
            target="_blank"
          >
            {record.slaValue?.toFixed(5)}
          </Link>
        )
      }
    },
    {
      title: 'Jira Issue',
      render(value, record, index) {
        return record.issueKey ? (
          // <div>
          <a
            href={`https://tidb.atlassian.net/browse/${record.issueKey}`}
            target="_blank"
            rel="noreferrer"
          >
            {record.issueKey}
          </a>
        ) : (
          '-'
        )
      }
    },
    {
      title: 'Jira Issue Status',
      render(value, record, index) {
        return record.issueKey ? record.issueStatus : '-'
      }
    },
    {
      title: 'IsDeleted',
      dataIndex: 'deleted',
      render(value, record, index) {
        return record.deleted ? 'Yes' : 'No'
      },
      filters: [
        {
          text: 'Include Deleted',
          value: true
        },
        {
          text: 'Exclude Deleted',
          value: false
        }
      ],
      filterMultiple: false,
      defaultFilteredValue: [false]
    }
  ]
  return (
    <>
      <Group justify="space-between" py="md">
        <DatePicker
          onChange={onDatePickerChange}
          picker="month"
          defaultValue={moment(month || currentMonth, 'YYYY/M')}
          allowClear={false}
          disabledDate={(current) =>
            current < moment().subtract(1, 'year') || current > moment()
          }
        />
        <Group>
          <SegmentedControl
            value={tidbInstanceMode}
            onChange={onTidbInstanceModeChange}
            data={[
              {
                label: 'Multiple TiDB Nodes',
                value: GetMonthlySummaryOfDedicatedSLATidbInstanceMode.multi
              },
              {
                label: 'Single TiDB Node',
                value: GetMonthlySummaryOfDedicatedSLATidbInstanceMode.single
              }
            ]}
            size="sm"
          />
          <Input.Search
            placeholder="Search by Cluseter ID/Name or Tenant ID/Name"
            // defaultValue={searchParams.search || ''}
            style={{ width: 380 }}
            onSearch={(value: string) => {
              setSearch(value ? value.trim() : '')
            }}
            allowClear
          />
        </Group>
      </Group>
      <Table
        columns={columns}
        size="small"
        loading={isLoading}
        dataSource={data?.data.items || []}
        pagination={{
          pageSize: 20,
          showTotal: (total) => `Total ${total} items`
        }}
        onChange={onTableChange}
      ></Table>
    </>
  )
}