import React, { useCallback, useState } from 'react'

import { Modal } from 'antd'

import { healthReportTelemetry } from '~/telemetry'

import { DetailItemCard } from '../../components/DetailItemCard'
import { type TimeRange } from '../../components/TimeWindowSelect'
import HealthReportList from './List'

const LINK_TITLE = 'Health Report'

interface HealthReportLinkProps {
  orgId: string
  clusterId: string
  timeRange?: TimeRange
}

export const HealthReportLink: React.FC<HealthReportLinkProps> = ({
  orgId,
  clusterId,
  timeRange
}) => {
  const [modalVisible, setModalVisible] = useState(false)

  const openModal = useCallback(() => {
    setModalVisible(true)
    healthReportTelemetry.openHealthReportModal()
  }, [])
  const closeModal = useCallback(() => setModalVisible(false), [])

  return (
    <>
      <DetailItemCard
        name={LINK_TITLE}
        desc='Will be replaced by Benchmark Report'
        onClick={openModal}
      />
      <Modal
        visible={modalVisible}
        destroyOnClose
        title={LINK_TITLE}
        footer={null}
        width={800}
        onCancel={closeModal}
      >
        <>
          <p>
            Clinic will keep improving the check rules, details in{' '}
            <a
              href='https://clinic-docs-en.vercel.app/docs/health-rule-release-note'
              target='_blank'
              onClick={() => healthReportTelemetry.viewReleaseNote()}
            >
              health rule release note
            </a>
          </p>
          <HealthReportList
            orgId={orgId}
            clusterId={clusterId}
            startTime={timeRange?.start ?? 0}
            endTime={timeRange?.end ?? 0}
          />
        </>
      </Modal>
    </>
  )
}