import { ReloadOutlined } from '@ant-design/icons'
import {
  Button,
  Card,
  Descriptions,
  Space,
  Spin,
  Typography,
  Layout,
  Menu
} from 'antd'
import type { MenuProps } from 'antd'
import Title from 'antd/lib/typography/Title'
import { useEffect, useState } from 'react'
import { useHistory, useLocation, useParams } from 'react-router-dom'

import { jiraControllerGetIssueFromJira } from 'apiClient/services/devops'
import {
  JiraIssueInJira,
  JiraIssueCustomerEnvironment
} from 'apiClient/services/devops/interface'
import { ClusterDetailLinkPopover } from 'components/DetailLinkPopover/ClusterDetailLinkPopover'
import { TenantDetailLinkPopover } from 'components/DetailLinkPopover/TenantDetailLinkPopover'
import { toLocal } from 'utils/time'

import GuardianInsight from './GuardianInsight'
import { IssueStatusDisplay } from './utils'

type AlertDetailTabKey = 'overview' | 'insight'

const ALERT_DETAIL_MENU_ITEMS: { key: AlertDetailTabKey; label: string }[] = [
  {
    key: 'overview',
    label: 'Overview'
  },
  {
    key: 'insight',
    label: 'Guardian Insight'
  }
]

const DEFAULT_ALERT_TAB: AlertDetailTabKey = 'overview'

const getValidTabKey = (maybeKey: string | null): AlertDetailTabKey => {
  if (!maybeKey) {
    return DEFAULT_ALERT_TAB
  }

  const matched = ALERT_DETAIL_MENU_ITEMS.find((item) => item.key === maybeKey)
  return matched ? matched.key : DEFAULT_ALERT_TAB
}

const getActiveKeyFromSearch = (search: string): AlertDetailTabKey =>
  getValidTabKey(new URLSearchParams(search).get('tab'))

export default function AlertDetail() {
  const history = useHistory()
  const location = useLocation()
  const { issue_key } = useParams<{ issue_key: string }>()
  const [issueInJira, setIssueInJira] = useState<JiraIssueInJira>()
  const [loading, setLoading] = useState(true)
  const [reload, setReload] = useState(false)
  const [activeMenuKey, setActiveMenuKey] = useState<AlertDetailTabKey>(() =>
    getActiveKeyFromSearch(location.search)
  )

  useEffect(() => {
    const nextKey = getActiveKeyFromSearch(location.search)
    setActiveMenuKey(nextKey)
  }, [location.search])

  const handleMenuSelect: MenuProps['onClick'] = ({ key }) => {
    const nextKey = key as AlertDetailTabKey
    setActiveMenuKey(nextKey)

    const params = new URLSearchParams(location.search)

    if (nextKey === 'overview') {
      params.delete('tab')
    } else {
      params.set('tab', nextKey)
    }

    const nextSearchString = params.toString()

    history.replace({
      ...location,
      search: nextSearchString ? `?${nextSearchString}` : ''
    })
  }

  async function fetch() {
    setLoading(true)
    setIssueInJira(undefined)

    try {
      const data = (
        await jiraControllerGetIssueFromJira(issue_key, {
          with_comments: false
        })
      ).data.issue
      setIssueInJira(data)
    } catch (error: any) {
      console.error('Failed to fetch issue triage', error)
    } finally {
      setLoading(false)
    }
  }

  useEffect(() => {
    fetch()
  }, [reload])

  const renderOverview = () => {
    return (
      <Card
        title={<Title level={4}>{`Issue Overview`}</Title>}
        extra={
          <Space>
            <Button
              onClick={() => {
                setReload((pre) => !pre)
              }}
              icon={<ReloadOutlined />}
            ></Button>
          </Space>
        }
      >
        <Descriptions column={3}>
          <Descriptions.Item label="Key">
            <Typography.Link
              href={`https://tidb.atlassian.net/browse/${issueInJira?.key}`}
              target="_blank"
            >
              {issueInJira?.key}
            </Typography.Link>
          </Descriptions.Item>
          <Descriptions.Item label="Created At">
            {toLocal(issueInJira?.created_at)}
          </Descriptions.Item>
          <Descriptions.Item label="Updated At">
            {toLocal(issueInJira?.updated_at)}
          </Descriptions.Item>
          <Descriptions.Item label="Status">
            <IssueStatusDisplay status={issueInJira?.status!} />
          </Descriptions.Item>
          <Descriptions.Item label="Priority" span={2}>
            {issueInJira?.priority}
          </Descriptions.Item>
          <Descriptions.Item label="Summary" span={3}>
            {issueInJira?.summary}
          </Descriptions.Item>
        </Descriptions>

        <Title level={5}>Descrption</Title>
        <Typography.Paragraph style={{ whiteSpace: 'pre-wrap' }}>
          {issueInJira?.description}
        </Typography.Paragraph>

        {issueInJira?.customer_info && (
          <div>
            <Title level={5}>Customer Information</Title>
            <Descriptions column={1}>
              <Descriptions.Item label="Environment">
                {issueInJira.customer_info.environment}
              </Descriptions.Item>

              {issueInJira.customer_info.environment !==
                JiraIssueCustomerEnvironment.cloud && (
                <Descriptions.Item label="Tenant">
                  {issueInJira.customer_info.tenant_id}
                </Descriptions.Item>
              )}

              {issueInJira.customer_info.environment ===
                JiraIssueCustomerEnvironment.cloud &&
                issueInJira.customer_info.tenant_id && (
                  <Descriptions.Item label="Tenant">
                    <TenantDetailLinkPopover
                      tenantId={issueInJira.customer_info.tenant_id}
                      text={issueInJira.customer_info.tenant_id}
                    />
                  </Descriptions.Item>
                )}

              {issueInJira.customer_info.environment ===
                JiraIssueCustomerEnvironment.cloud &&
                issueInJira.customer_info.cluster_id && (
                  <Descriptions.Item label="Cluster">
                    <ClusterDetailLinkPopover
                      clusterId={issueInJira.customer_info.cluster_id}
                      text={issueInJira.customer_info.cluster_id}
                    />
                  </Descriptions.Item>
                )}
            </Descriptions>
          </div>
        )}
      </Card>
    )
  }

  const contentList: Record<AlertDetailTabKey, React.ReactNode> = {
    overview: renderOverview(),
    insight: (
      <GuardianInsight
        issueKey={issueInJira?.key ?? issue_key}
        issueCreatedAt={issueInJira?.created_at}
      />
    )
  }

  if (loading) {
    return (
      <div
        style={{
          display: 'flex',
          justifyContent: 'center',
          alignItems: 'center',
          height: '300px'
        }}
      >
        <Spin tip="Loading..." />
      </div>
    )
  }

  return (
    <Layout style={{ background: 'transparent' }}>
      <Layout.Sider
        theme="light"
        style={{ background: 'transparent', borderRight: '1px solid #f0f0f0' }}
        width={180}
      >
        <Menu
          mode="inline"
          selectedKeys={[activeMenuKey]}
          onClick={handleMenuSelect}
          style={{ height: '100%', borderRight: 0 }}
          items={ALERT_DETAIL_MENU_ITEMS}
        />
      </Layout.Sider>
      <Layout.Content style={{ padding: '0 24px', minHeight: 280 }}>
        {contentList[activeMenuKey] ?? contentList.overview}
      </Layout.Content>
    </Layout>
  )
}