import { Card, Descriptions, Skeleton, Typography } from 'antd'
import Link from 'antd/lib/typography/Link'
import clsx from 'clsx'
import { useCallback } from 'react'

import { useGetIncident } from 'apiClient/services/devops'
import {
  EntityRemediationApprovalFlow,
  EntityRemediationApprovalFlowNodeStatus,
  EntityRemediationTicket,
  EntityRemediationTicketPhaseApproval
} from 'apiClient/services/devops/interface'
import { renderTTR } from 'pages/Incidents/Util'

import {
  getConfiguredPhaseSequence,
  getPhaseNo,
  getPhaseSequence,
  PhaseInstance
} from './phases'

interface StringIndexableEntityTicket extends EntityRemediationTicket {
  [key: string]: any
}

const isPresent = (value: unknown) => {
  if (value === null || value === undefined) return false
  if (typeof value === 'string') return value.trim().length > 0
  return true
}

const isLongContent = (value: unknown) =>
  typeof value === 'string' && (value.includes('\n') || value.length > 120)

const renderFieldValue = (value: unknown) => {
  if (!isPresent(value))
    return <span className="remediation-phase-empty">-</span>

  if (typeof value === 'string' && /^https?:\/\//.test(value)) {
    return (
      <Typography.Link href={value} target="_blank">
        {value}
      </Typography.Link>
    )
  }

  return <>{String(value)}</>
}

const RemediationTicketDetailInfo = function ({
  ticket,
  approvalFlow,
  incidentColumns = 2,
  showIncidentSummary = true,
  showPhaseDetails = true
}: {
  ticket: EntityRemediationTicket
  approvalFlow?: EntityRemediationApprovalFlow
  ticketApprovals?: EntityRemediationTicketPhaseApproval[]
  incidentColumns?: number
  showIncidentSummary?: boolean
  showPhaseDetails?: boolean
}) {
  const phaseSequence = approvalFlow
    ? getConfiguredPhaseSequence(approvalFlow)
    : getPhaseSequence()

  const renderDescriptionForSinglePhase = useCallback(
    (ticket: EntityRemediationTicket, phaseInstance: PhaseInstance) => {
      const fields = phaseInstance.fieldList ?? []
      if (fields.length === 0) return null

      return (
        <section className="remediation-phase-panel">
          <div className="remediation-phase-rail">
            <span className="remediation-phase-dot" />
          </div>
          <div className="remediation-phase-main">
            <div className="remediation-phase-header">
              <div className="remediation-phase-heading">
                <span className="remediation-phase-card-step">
                  Step {getPhaseNo(phaseInstance.name, approvalFlow)}
                </span>
                <h3 className="remediation-phase-name">
                  {phaseInstance.label}
                </h3>
              </div>
              <div className="remediation-phase-subtitle">
                Info submitted in this stage
              </div>
            </div>
            {fields.length > 0 && (
              <div className="remediation-phase-items">
                {fields.map((field) => {
                  const isLongField = isLongContent(
                    (ticket as StringIndexableEntityTicket)[field.name]
                  )

                  return (
                    <div
                      className={clsx(
                        'remediation-phase-item',
                        isLongField && 'remediation-phase-item-full'
                      )}
                      key={field.name}
                    >
                      <div className="remediation-phase-item-label">
                        {field.label}
                      </div>
                      {isLongField ? (
                        <Typography.Paragraph className="remediation-phase-item-value remediation-phase-item-value-long">
                          {renderFieldValue(
                            (ticket as StringIndexableEntityTicket)[field.name]
                          )}
                        </Typography.Paragraph>
                      ) : (
                        <div className="remediation-phase-item-value">
                          {renderFieldValue(
                            (ticket as StringIndexableEntityTicket)[field.name]
                          )}
                        </div>
                      )}
                    </div>
                  )
                })}
              </div>
            )}
          </div>
        </section>
      )
    },
    []
  )

  return (
    <div className="remediation-detail-stack">
      {showIncidentSummary && (
        <IncidentSummary
          incidentColumns={incidentColumns}
          incidentId={ticket.associated_incident_id!}
        />
      )}
      {showPhaseDetails &&
        phaseSequence
          .filter((phaseInstance) => {
            const hasFields = (phaseInstance.fieldList?.length ?? 0) > 0
            if (!hasFields || phaseInstance.name === 'created') return false

            if (!approvalFlow?.nodes?.length) {
              return getPhaseNo(phaseInstance.name) <= getPhaseNo(ticket.phase!)
            }

            const node = approvalFlow.nodes.find(
              (entry) => entry.phase === phaseInstance.name
            )
            if (!node) return false

            return (
              node.status !==
                EntityRemediationApprovalFlowNodeStatus.unreached &&
              node.status !== EntityRemediationApprovalFlowNodeStatus.skipped
            )
          })
          .map((phaseInstance) => (
            <div key={phaseInstance.name}>
              {renderDescriptionForSinglePhase(ticket, phaseInstance)}
            </div>
          ))}
    </div>
  )
}

const IncidentSummary = function ({
  incidentId,
  incidentColumns = 2
}: {
  incidentId: number
  incidentColumns?: number
}) {
  const incidentRecord = useGetIncident(incidentId).data?.data
  if (incidentRecord) {
    return (
      <Card
        className="remediation-phase-card remediation-incident-card"
        title={
          <div className="remediation-phase-card-title">
            <span className="remediation-phase-card-step">Incident</span>
            <span>
              Incident Meta for incident{' '}
              <Link href={`/incidents/${incidentId}`} target="_blank">
                #{incidentId}
              </Link>
            </span>
          </div>
        }
      >
        <Descriptions
          className="remediation-phase-descriptions"
          labelStyle={{ fontWeight: 'bold' }}
          layout="vertical"
          column={incidentColumns}
        >
          <Descriptions.Item label="Incident Start Time">
            {incidentRecord.incident_start_time}
          </Descriptions.Item>
          <Descriptions.Item label="Incident Resolve Time">
            {incidentRecord.incident_resolve_time}
          </Descriptions.Item>
          <Descriptions.Item label="TTR">
            {renderTTR(incidentRecord)}
          </Descriptions.Item>
          <Descriptions.Item label="Incident Tier">
            {incidentRecord.tier}
          </Descriptions.Item>
          <Descriptions.Item label="Status">
            {incidentRecord.status}
          </Descriptions.Item>
          <Descriptions.Item label="Biz Regions">
            {incidentRecord.biz_regions}
          </Descriptions.Item>
          <Descriptions.Item label="Component(s)">
            {incidentRecord.components}
          </Descriptions.Item>
          <Descriptions.Item span={incidentColumns} label="Description">
            {incidentRecord.description}
          </Descriptions.Item>
        </Descriptions>
      </Card>
    )
  } else {
    return <Skeleton></Skeleton>
  }
}

export { RemediationTicketDetailInfo }