import React, { useState } from 'react'

import {
  Text,
  Grid,
  Group,
  Modal,
  Textarea,
  Button,
  Skeleton,
  Divider,
  Card
} from '@mantine/core'
import { useForm } from '@mantine/form'
import {
  IconChevronsLeft,
  IconSettings,
  IconChartAreaLine
} from '@tabler/icons-react'
import { useNavigate, useParams } from 'react-router-dom'

import { ApiExperiment, ApiTargetModeEnum } from '@drill-test/client'
import { useCurCluster, useCurOrg } from '~/hooks/state'
import { formatDateTimeWithTz } from '~/utils/date-time'

import MetricsChart from './components/metricsChart'
import { useGetChaosExperimentDetail, useUpdateExperimentInfo } from './helpers'

interface experimentDetailProps {
  experimentDetail: ApiExperiment
}

const ExperimentDetail = ({ experimentDetail }: experimentDetailProps) => {
  const { curOrg } = useCurOrg()
  const { curCluster } = useCurCluster()
  return (
    <Card shadow='sm' p='lg' radius='md' withBorder>
      {experimentDetail && (
        <Grid>
          <Grid.Col span={6}>Cluster Name: {curCluster!.name}</Grid.Col>
          <Grid.Col span={6}>Tenant Name: {curOrg!.name}</Grid.Col>
          <Grid.Col span={6}>
            Experiment Status: {experimentDetail.status}
          </Grid.Col>
          <Grid.Col span={6}>
            Action Type:{' '}
            {experimentDetail.action?.pod_shutdown?.target?.component}_
            {experimentDetail.action?.kind}
          </Grid.Col>
          <Grid.Col span={6}>
            Create time: {formatDateTimeWithTz(experimentDetail.created_at!)}
          </Grid.Col>
          <Grid.Col span={6}>
            Creator: {experimentDetail.created_by?.email}
          </Grid.Col>
          {/* <Grid.Col span={6}>Approver: {experimentDetail.approved_by.name}</Grid.Col> */}
          <Grid.Col span={6}>
            Start time: {formatDateTimeWithTz(experimentDetail.started_at!)}
          </Grid.Col>
          <Grid.Col span={6}>
            End time:{' '}
            {experimentDetail.completed_at
              ? formatDateTimeWithTz(experimentDetail.completed_at!)
              : '--'}
          </Grid.Col>
          <Grid.Col span={6}>
            Report link:{' '}
            {experimentDetail.report_link?.startsWith('http') ? (
              <a href={experimentDetail.report_link} target='_blank'>
                {experimentDetail.report_link}
              </a>
            ) : (
              experimentDetail.report_link
            )}
          </Grid.Col>
          <Grid.Col span={6}>Summary: {experimentDetail.summary}</Grid.Col>
        </Grid>
      )}
    </Card>
  )
}

const Page: React.FC = () => {
  const { orgId, cid, eid } = useParams<'orgId' | 'cid' | 'eid'>()
  const [openSettingModal, setOpenSettingModal] = useState(false)
  const {
    data: chaosExperimentDetailResp,
    isLoading: loadingExperimentDetail
  } = useGetChaosExperimentDetail({ oid: orgId!, cid: cid!, eid: eid! })
  const experimentDetail = chaosExperimentDetailResp?.data

  const navigate = useNavigate()

  const handleBackwardClick = () => {
    navigate(`/orgs/${orgId}/clusters/${cid}/drill-test`)
  }

  return (
    <>
      <Skeleton visible={loadingExperimentDetail}>
        <Group position='apart' align='center' mb={20}>
          <Group>
            <IconChevronsLeft onClick={handleBackwardClick} />
            {experimentDetail && (
              <Text fz='md'>
                Drill Test:{' '}
                {experimentDetail.action?.pod_shutdown?.target?.component}_
                {experimentDetail.action?.kind} -{' '}
                {experimentDetail.action?.pod_shutdown?.target?.mode ===
                ApiTargetModeEnum.specified
                  ? experimentDetail.action?.pod_shutdown?.target?.name
                  : 'random'}
              </Text>
            )}
          </Group>
          <IconSettings onClick={() => setOpenSettingModal(true)} />
        </Group>

        <Modal
          onClose={() => setOpenSettingModal(false)}
          title='Drill Test Setting'
          opened={openSettingModal}
          centered
        >
          {openSettingModal && (
            <FromModal
              onHandleOpenSettingModal={(open: boolean) =>
                setOpenSettingModal(open)
              }
              experimentDetail={experimentDetail!}
            />
          )}
        </Modal>

        <ExperimentDetail experimentDetail={experimentDetail!} />
      </Skeleton>
      <Divider
        label={
          <>
            <IconChartAreaLine />
            <Text fz={15} ml='lg'>
              Monitoring
            </Text>
          </>
        }
        mt={25}
      />

      {experimentDetail && (
        <MetricsChart
          startTime={experimentDetail?.started_at!}
          completeTime={experimentDetail?.completed_at!}
          actionComponent={
            experimentDetail?.action?.pod_shutdown?.target?.component!
          }
        />
      )}
    </>
  )
}

const FromModal = ({
  onHandleOpenSettingModal,
  experimentDetail
}: {
  onHandleOpenSettingModal: (visible: boolean) => void
  experimentDetail: ApiExperiment
}) => {
  const { orgId, cid, eid } = useParams<'orgId' | 'cid' | 'eid'>()
  const form = useForm({
    initialValues: {
      info: {
        summary: `${experimentDetail.summary}`,
        report_link: `${experimentDetail.report_link}`
      }
    }
  })

  const { mutate: updateExperimentInfoMut } = useUpdateExperimentInfo()

  const { mutate: getChaosExperimentDetailMut } = useGetChaosExperimentDetail({
    oid: orgId!,
    cid: cid!,
    eid: eid!
  })

  const handleOnSubmit = async (values: any) => {
    await updateExperimentInfoMut(
      {
        oid: orgId!,
        cid: cid!,
        eid: eid!,
        info: values.info
      },
      // onSuccess
      () => {
        onHandleOpenSettingModal(false)
      }
    )

    // reviliadate
    getChaosExperimentDetailMut()
  }

  return (
    <form onSubmit={form.onSubmit(handleOnSubmit)}>
      <Textarea
        mt='md'
        label='Summary'
        placeholder='Enter Summary'
        {...form.getInputProps('info.summary')}
      />
      <Textarea
        mt='md'
        label='Report Link'
        placeholder='Enter Report Link'
        {...form.getInputProps('info.report_link')}
      />
      <Button type='submit' mt='md'>
        Submit
      </Button>
    </form>
  )
}

const DrillTestDetailPage: React.FC = () => {
  return <Page />
}

export default DrillTestDetailPage