import {
  CheckCircleOutlined,
  ClockCircleOutlined,
  CloseCircleOutlined,
  MinusCircleOutlined
} from '@ant-design/icons'
import { Card, Empty, Space, Tag, Timeline, Typography } from 'antd'

import {
  EntityRemediationApprovalFlow,
  EntityRemediationApprovalFlowNode,
  EntityRemediationApprovalFlowNodeStatus
} from 'apiClient/services/devops/interface'

const statusMeta: Record<
  EntityRemediationApprovalFlowNodeStatus,
  { color: string; text: string; accent: string }
> = {
  pending: { color: 'gold', text: 'Pending Input', accent: 'warning' },
  approving: { color: 'processing', text: 'Approving', accent: 'active' },
  approved: { color: 'success', text: 'Approved', accent: 'success' },
  rejected: { color: 'error', text: 'Rejected', accent: 'danger' },
  unreached: { color: 'default', text: 'Unreached', accent: 'default' },
  skipped: { color: 'default', text: 'Skipped', accent: 'default' }
}

const renderStatusIcon = (status?: EntityRemediationApprovalFlowNodeStatus) => {
  switch (status) {
    case 'approved':
      return (
        <CheckCircleOutlined className="remediation-flow-status-icon success" />
      )
    case 'rejected':
      return (
        <CloseCircleOutlined className="remediation-flow-status-icon danger" />
      )
    case 'pending':
    case 'approving':
      return (
        <ClockCircleOutlined className="remediation-flow-status-icon warning" />
      )
    default:
      return (
        <MinusCircleOutlined className="remediation-flow-status-icon muted" />
      )
  }
}

const renderNodeMeta = (node: EntityRemediationApprovalFlowNode) => {
  const meta = node.status ? statusMeta[node.status] : undefined

  return (
    <Space size={[8, 8]} wrap className="remediation-flow-meta-tags">
      {meta ? <Tag color={meta.color}>{meta.text}</Tag> : null}
      {node.conditional ? <Tag color="purple">Conditional</Tag> : null}
      {node.approval_id ? <Tag>Approval #{node.approval_id}</Tag> : null}
    </Space>
  )
}

const renderNodeContent = (node: EntityRemediationApprovalFlowNode) => {
  const approvers = node.approvers || []
  const isCreatorPhase = node.phase === 'created'
  const meta = node.status ? statusMeta[node.status] : undefined
  const approverText = approvers
    .map((approver) => {
      const label = approver.name || approver.email || approver.id
      const source =
        approver.source === 'approval'
          ? 'Actual'
          : approver.source === 'configured'
          ? 'Configured'
          : approver.source

      return label ? `${label}${source ? ` · ${source}` : ''}` : ''
    })
    .filter(Boolean)
    .join(', ')

  return (
    <div className="remediation-flow-node-body">
      {!isCreatorPhase ? (
        <div className="remediation-flow-node-summary">
          <div className="remediation-flow-status-row">
            {renderStatusIcon(node.status)}
            <Typography.Text strong>
              {meta?.text || node.status || 'Unknown'}
            </Typography.Text>
          </div>
          <div className="remediation-flow-node-meta">
            {renderNodeMeta(node)}
          </div>
        </div>
      ) : null}

      <div className="remediation-flow-keyvals">
        {isCreatorPhase ? (
          <div className="remediation-flow-keyval-row">
            <Typography.Text type="secondary" className="remediation-flow-key">
              Creator
            </Typography.Text>
            <div className="remediation-flow-value">
              <Typography.Text>{node.operator || '-'}</Typography.Text>
            </div>
          </div>
        ) : (
          <div className="remediation-flow-keyval-row">
            <Typography.Text type="secondary" className="remediation-flow-key">
              Approver
            </Typography.Text>
            <div className="remediation-flow-value">
              {approverText || (
                <Typography.Text type="secondary">Not assigned</Typography.Text>
              )}
            </div>
          </div>
        )}
        <div className="remediation-flow-keyval-row">
          <Typography.Text type="secondary" className="remediation-flow-key">
            Time
          </Typography.Text>
          <div className="remediation-flow-value">
            <Typography.Text>{node.operated_at || '-'}</Typography.Text>
          </div>
        </div>
        {node.message ? (
          <div className="remediation-flow-keyval-row">
            <Typography.Text type="secondary" className="remediation-flow-key">
              Note
            </Typography.Text>
            <Typography.Paragraph className="remediation-flow-node-line remediation-flow-value">
              {node.message}
            </Typography.Paragraph>
          </div>
        ) : null}
      </div>
    </div>
  )
}

const getNodeClassName = (node: EntityRemediationApprovalFlowNode) => {
  const accent = node.status ? statusMeta[node.status].accent : 'default'

  return [
    'remediation-flow-node',
    `remediation-flow-node-${accent}`,
    node.current ? 'remediation-flow-node-current' : ''
  ]
    .filter(Boolean)
    .join(' ')
}

const RemediationApprovalFlowCard = function ({
  approvalFlow
}: {
  approvalFlow?: EntityRemediationApprovalFlow
}) {
  const nodes = (approvalFlow?.nodes || []).filter(
    (node) =>
      node.phase !== 'succeed' &&
      node.phase !== 'closed' &&
      node.status !== EntityRemediationApprovalFlowNodeStatus.skipped
  )

  return (
    <Card bordered={false} bodyStyle={{ padding: 0 }}>
      {nodes.length === 0 ? (
        <Empty
          image={Empty.PRESENTED_IMAGE_SIMPLE}
          description="No approval flow data"
        />
      ) : (
        <Timeline className="remediation-flow-timeline">
          {nodes.map((node, index) => (
            <Timeline.Item
              className="remediation-flow-timeline-item"
              color={node.current ? 'blue' : 'gray'}
              key={`${node.phase || 'phase'}-${index}`}
            >
              <Card
                className={getNodeClassName(node)}
                size="small"
                title={
                  <div className="remediation-flow-node-header">
                    <div className="remediation-flow-node-title">
                      <Typography.Text strong>
                        {index + 1}. {node.label || node.phase}
                      </Typography.Text>
                      {node.current ? <Tag color="blue">Current</Tag> : null}
                    </div>
                  </div>
                }
                headStyle={{ backgroundColor: '#fafafa' }}
                bodyStyle={{ padding: 16 }}
              >
                {renderNodeContent(node)}
              </Card>
            </Timeline.Item>
          ))}
        </Timeline>
      )}
    </Card>
  )
}

export { RemediationApprovalFlowCard }