import {
  Row,
  Col,
  Skeleton,
  Alert,
  Button,
  Collapse,
  Divider,
  Card,
  message
} from 'antd'
import { useCallback, useMemo } from 'react'
import { useParams } from 'react-router-dom'

import {
  remediationTicketControllerGenerateFinalDoc,
  useGetIncident,
  useRemediationTicketControllerGetApprovalFlow,
  useRemediationTicketControllerGetTicket,
  useRemediationTicketControllerGetTicketApprovals
} from 'apiClient/services/devops'
import {
  EntityRemediationApprovalFlow,
  EntityRemediationTicket,
  EntityRemediationTicketPhaseApproval
} from 'apiClient/services/devops/interface'

import { RemediationPageContext } from './PageContext'
import { RemediationApprovalFlowCard } from './RemediationApprovalFlow'
import { RemediationTicketDetailInfo } from './RemediationDetails'
import { RemediationTicketInteractPanel } from './RemediationInteractPanel'
import { RemediationTicketSteps } from './RemediationSteps'
import './style.less'
import { findTicketApprovalByID } from './utils'

const NewRemediationTicketUI = function () {
  const { ticket_id } = useParams<{ ticket_id: string }>()

  const ticketId = Number(ticket_id)
  const { data, refetch } = useRemediationTicketControllerGetTicket(ticketId)
  const ticketRecord = data?.data.ticket
  const incidentId = ticketRecord?.associated_incident_id || 0
  const { data: incidentData } = useGetIncident(incidentId)
  const incidentDescription = incidentData?.data.description
  const incidentPostmortemLink = incidentData?.data.feishu_url

  const { data: taData, refetch: refetchTa } =
    useRemediationTicketControllerGetTicketApprovals(ticketId)
  const ticketApprovals = taData?.data.phase_approvals

  const { data: flowData, refetch: refetchFlow } =
    useRemediationTicketControllerGetApprovalFlow(ticketId)
  const approvalFlow = flowData?.data.flow
  const showInteractPanel = ticketRecord?.phase !== 'succeed'

  // please wrap a 'try-catch' to catch the refetch errors.
  const reload = useCallback(() => {
    refetch()
    refetchTa()
    refetchFlow()
  }, [refetch, refetchTa, refetchFlow])

  const callout = useMemo(() => {
    if (ticketRecord?.phase === 'succeed')
      return <RemediationDocCallout ticket={ticketRecord} reload={reload} />

    if (
      ticketRecord?.status === 'rejected' &&
      ticketApprovals &&
      ticketRecord.appr_id
    ) {
      const ticketAppr = findTicketApprovalByID(
        ticketApprovals,
        ticketRecord.appr_id
      )
      return <RemediationRejectedCallout ticketApproval={ticketAppr!} />
    }
  }, [ticketRecord, ticketApprovals, reload])

  if (!!ticketRecord)
    return (
      <RemediationPageContext.Provider value={{ reload }}>
        {(ticketRecord.phase === 'succeed' ||
          ticketRecord.status === 'rejected') && (
          <Row gutter={[16, 24]}>
            <Col span={24}>
              <div className="remediation-section-container">{callout}</div>
            </Col>
          </Row>
        )}
        <Row gutter={[16, 24]}>
          <Col span={24}>
            <div className="remediation-section-container">
              <RemediationTicketSteps
                ticket={ticketRecord}
                ticketApprovals={ticketApprovals}
                approvalFlow={approvalFlow}
              />
            </div>
          </Col>
        </Row>
        <Row align="stretch" gutter={[16, 24]}>
          <Col flex={showInteractPanel ? '2 520px' : '1 100%'}>
            <div className="remediation-section-container">
              <RemediationTicketDetailInfo
                ticket={ticketRecord}
                approvalFlow={approvalFlow}
                ticketApprovals={ticketApprovals}
                incidentColumns={showInteractPanel ? 2 : 3}
                showPhaseDetails={false}
              />
            </div>
          </Col>
          {showInteractPanel ? (
            <Col flex="1 380px">
              <div className="remediation-section-container">
                <RemediationTicketInteractPanel
                  ticket={ticketRecord}
                  ticketApprovals={ticketApprovals}
                  approvalFlow={approvalFlow}
                  incidentDescription={incidentDescription}
                  incidentPostmortemLink={incidentPostmortemLink}
                />
              </div>
            </Col>
          ) : null}
        </Row>
        <Row gutter={[16, 24]}>
          <Col span={24}>
            <Divider className="remediation-content-divider remediation-divider-row" />
          </Col>
        </Row>
        <Row
          align="stretch"
          gutter={[16, 24]}
          className="remediation-bottom-panels-row"
        >
          <Col flex="1 420px">
            <div className="remediation-section-container remediation-stretch-container">
              <Collapse
                className="remediation-approval-collapse remediation-full-height remediation-unified-card"
                defaultActiveKey={['approval-flow']}
              >
                <Collapse.Panel header="Approval Flow" key="approval-flow">
                  <RemediationApprovalFlowCard approvalFlow={approvalFlow} />
                </Collapse.Panel>
              </Collapse>
            </div>
          </Col>
          <Col flex="2 520px">
            <div className="remediation-section-container">
              <Card
                className="remediation-phase-summary-card remediation-unified-card"
                title="Stage Info Timeline"
              >
                <RemediationTicketDetailInfo
                  ticket={ticketRecord}
                  approvalFlow={approvalFlow}
                  ticketApprovals={ticketApprovals}
                  showIncidentSummary={false}
                />
              </Card>
            </div>
          </Col>
        </Row>
      </RemediationPageContext.Provider>
    )
  else return <Skeleton></Skeleton>
}

const RemediationDocCallout = function ({
  ticket,
  reload
}: {
  ticket: EntityRemediationTicket
  reload: Function
}) {
  if (ticket.generated_doc_url)
    return (
      <>
        <Alert
          banner
          message={`Remediation document is created: ${ticket.generated_doc_url}`}
          type="success"
        />
      </>
    )
  else
    return (
      <>
        <Alert
          banner
          message={`Remediation ticket approved.`}
          // action={
          //   <Button
          //     size="small"
          //     type="text"
          //     onClick={async () => {
          //       try {
          //         await remediationTicketControllerGenerateFinalDoc(ticket.id, {
          //           forced_regenerate: false
          //         })
          //         reload()
          //       } catch (e) {
          //         console.log('call generate doc failed', e)
          //         message.error(
          //           'Encounter some error, please ask kaijie.chen@pingcap.com for help'
          //         )
          //       }
          //     }}
          //   >
          //     Generate
          //   </Button>
          // }
          type="success"
        />
      </>
    )
}

const RemediationRejectedCallout = function ({
  ticketApproval
}: {
  ticketApproval: EntityRemediationTicketPhaseApproval
}) {
  return (
    <>
      <Alert
        banner
        message={`Rejected for reason: ${ticketApproval.message}`}
        type="error"
      />
    </>
  )
}

export type RemediationApprovalFlowData = EntityRemediationApprovalFlow

export { NewRemediationTicketUI as default }