import {
  CalendarOutlined,
  CloudOutlined,
  FieldTimeOutlined,
  LinkOutlined,
  UserOutlined
} from '@ant-design/icons'
import { Button, Col, Divider, Modal, Row, Spin, Tag, Typography } from 'antd'
import React from 'react'
import { Link } from 'react-router-dom'

import type { K8supgradeplanPlannedUpgrade } from 'apiClient/services/devops/interface'

import { toLocal } from '../Maintenance/Detail'

import {
  EosVersionHighlight,
  formatEosDate,
  renderPlanStatusTag
} from './utils'

const { Text, Title } = Typography

type DetailFieldProps = {
  label: string
  children: React.ReactNode
  span?: number
}

const DetailField = ({ label, children, span = 12 }: DetailFieldProps) => (
  <Col xs={24} sm={span}>
    <div className="k8s-upgrade-plan-detail__field">
      <Text type="secondary" className="k8s-upgrade-plan-detail__label">
        {label}
      </Text>
      <div className="k8s-upgrade-plan-detail__value">{children}</div>
    </div>
  </Col>
)

type DetailSectionProps = {
  icon: React.ReactNode
  title: string
  children: React.ReactNode
}

const DetailSection = ({ icon, title, children }: DetailSectionProps) => (
  <section className="k8s-upgrade-plan-detail__section">
    <div className="k8s-upgrade-plan-detail__section-title">
      {icon}
      <span>{title}</span>
    </div>
    <Row gutter={[16, 12]}>{children}</Row>
  </section>
)

const formatCloudLabel = (cloud?: string) => {
  if (!cloud) return '-'
  return cloud.toUpperCase()
}

type PlanDetailModalProps = {
  plan: K8supgradeplanPlannedUpgrade | null
  loading: boolean
  footerActions: React.ReactNode
  onClose: () => void
}

const PlanDetailModal = ({
  plan,
  loading,
  footerActions,
  onClose
}: PlanDetailModalProps) => {
  const modalTitle = plan ? (
    <div className="k8s-upgrade-plan-detail__title">
      <div>
        <Text type="secondary" className="k8s-upgrade-plan-detail__title-id">
          Plan #{plan.id}
        </Text>
        <Title level={4} className="k8s-upgrade-plan-detail__title-name">
          {plan.name ?? 'Untitled plan'}
        </Title>
      </div>
      <div className="k8s-upgrade-plan-detail__title-tags">
        {renderPlanStatusTag(plan.status)}
        {plan.cloud_provider ? (
          <Tag>{formatCloudLabel(plan.cloud_provider)}</Tag>
        ) : null}
      </div>
    </div>
  ) : (
    'Plan Detail'
  )

  return (
    <Modal
      className="k8s-upgrade-plan-detail-modal"
      visible={!!plan}
      title={modalTitle}
      width={800}
      destroyOnClose
      onCancel={onClose}
      footer={
        <div className="k8s-upgrade-plan-detail__footer">
          <div className="k8s-upgrade-plan-detail__footer-actions">
            {footerActions}
          </div>
          <Button onClick={onClose}>Close</Button>
        </div>
      }
    >
      <Spin spinning={loading}>
        {plan ? (
          <div className="k8s-upgrade-plan-detail">
            <div className="k8s-upgrade-plan-detail__highlights">
              <div className="k8s-upgrade-plan-detail__highlight">
                <Text type="secondary">EOS Version</Text>
                <div className="k8s-upgrade-plan-detail__highlight-value">
                  {plan.eos_version ? (
                    <EosVersionHighlight version={plan.eos_version} />
                  ) : (
                    '-'
                  )}
                </div>
              </div>
              <div className="k8s-upgrade-plan-detail__highlight">
                <Text type="secondary">EOS Date</Text>
                <div className="k8s-upgrade-plan-detail__highlight-value k8s-upgrade-plan-detail__highlight-date">
                  {formatEosDate(plan.eos_date)}
                </div>
              </div>
              <div className="k8s-upgrade-plan-detail__highlight">
                <Text type="secondary">Est. Clusters</Text>
                <div className="k8s-upgrade-plan-detail__highlight-value k8s-upgrade-plan-detail__highlight-number">
                  {plan.estimated_clusters ?? '-'}
                </div>
              </div>
            </div>

            <Divider className="k8s-upgrade-plan-detail__divider" />

            <DetailSection icon={<CloudOutlined />} title="Upgrade Target">
              <DetailField label="Cloud Provider">
                {formatCloudLabel(plan.cloud_provider)}
              </DetailField>
              <DetailField label="EOS Version">
                {plan.eos_version ? (
                  <EosVersionHighlight version={plan.eos_version} />
                ) : (
                  '-'
                )}
              </DetailField>
              <DetailField label="EOS Date">
                {formatEosDate(plan.eos_date)}
              </DetailField>
              <DetailField label="Max Restart Times">
                {plan.max_restart_times ?? '-'}
              </DetailField>
              <DetailField label="Selector Type">
                {plan.selector_type || 'none'}
              </DetailField>
              <DetailField label="Selector Value" span={24}>
                {plan.selector_value ? (
                  <Text className="k8s-upgrade-plan-detail__mono" copyable>
                    {plan.selector_value}
                  </Text>
                ) : (
                  '-'
                )}
              </DetailField>
            </DetailSection>

            <DetailSection icon={<CalendarOutlined />} title="Schedule">
              <DetailField label="Deadline">
                {toLocal(plan.deadline) || '-'}
              </DetailField>
              <DetailField label="Trigger Time">
                {toLocal(plan.trigger_time) || '-'}
              </DetailField>
            </DetailSection>

            <DetailSection icon={<LinkOutlined />} title="Relations">
              <DetailField label="Linked Task">
                {plan.linked_task_id ? (
                  <Link
                    className="k8s-upgrade-plan-detail__link"
                    to={`/k8sUpgradeTask/${
                      plan.linked_task_id
                    }?name=${encodeURIComponent(plan.name ?? '')}`}
                  >
                    Task #{plan.linked_task_id}
                  </Link>
                ) : (
                  <Text type="secondary">Not created</Text>
                )}
              </DetailField>
              <DetailField label="Approval ID">
                {plan.approval_id ?? <Text type="secondary">-</Text>}
              </DetailField>
              <DetailField label="Source Event ID">
                {plan.source_event_id ?? <Text type="secondary">-</Text>}
              </DetailField>
            </DetailSection>

            <DetailSection icon={<UserOutlined />} title="Audit">
              <DetailField label="Created By">
                {plan.created_by ? (
                  <Text copyable={{ text: plan.created_by }}>
                    {plan.created_by}
                  </Text>
                ) : (
                  '-'
                )}
              </DetailField>
              <DetailField label="Created At">
                <span className="k8s-upgrade-plan-detail__time">
                  <FieldTimeOutlined />
                  {toLocal(plan.created_at) || '-'}
                </span>
              </DetailField>
              <DetailField label="Updated At">
                <span className="k8s-upgrade-plan-detail__time">
                  <FieldTimeOutlined />
                  {toLocal(plan.updated_at) || '-'}
                </span>
              </DetailField>
            </DetailSection>
          </div>
        ) : null}
      </Spin>
    </Modal>
  )
}

export default PlanDetailModal