import { PlusOutlined, SafetyCertificateOutlined } from '@ant-design/icons'
import {
  Alert,
  Button,
  Card,
  Input,
  Select,
  Space,
  Table,
  Tag,
  Typography
} from 'antd'
import type { ColumnsType } from 'antd/lib/table'
import { useCallback, useMemo, useState } from 'react'
import { Link } from 'react-router-dom'

import { premiumUpgradeControllerListPlans as listPremiumUpgradePlans } from 'apiClient/services/devops'
import type { PremiumupgradeUpgradePlan as PremiumUpgradePlan } from 'apiClient/services/devops/interface'
import { ListToolBar, useTable } from 'components/Table'

import {
  componentSelectorName,
  executionModeName,
  formatDateTime,
  renderUpgradeStatus
} from './utils'

import './index.less'

const { Text } = Typography

const PLAN_STATUSES = [
  'approval_pending_create',
  'approval_creating',
  'approval_reconcile_required',
  'pending_approval',
  'approved',
  'running',
  'cancelling',
  'completed',
  'partial_failed',
  'failed',
  'rejected',
  'cancelled'
]

type PlanFilters = {
  applicant?: string
  tenantId?: string
  statuses?: string[]
}

const PremiumUpgradePlanList = () => {
  const [draftApplicant, setDraftApplicant] = useState('')
  const [draftTenantId, setDraftTenantId] = useState('')
  const [draftStatuses, setDraftStatuses] = useState<string[]>([])
  const [filters, setFilters] = useState<PlanFilters>({})
  const [requestError, setRequestError] = useState('')

  const getData = useCallback(
    (pageInfo?: Partial<PageInfo>) =>
      listPremiumUpgradePlans(
        {
          page: pageInfo?.page,
          per_page: pageInfo?.pageSize,
          applicant: filters.applicant || undefined,
          tenant_id: filters.tenantId || undefined,
          statuses: filters.statuses?.length ? filters.statuses : undefined
        },
        { isShowMessage: true }
      ),
    [filters]
  )

  const {
    dataSource,
    loading,
    onTableChange,
    paginationProps,
    reload,
    resetPageIndex
  } = useTable<ListData<PremiumUpgradePlan>>(getData, [], {
    pagination: true,
    defaultPageSize: 20,
    deps: [filters],
    onRequestError: (error) => {
      setRequestError(error.message || 'Failed to load Premium upgrade plans')
    }
  })

  const applyFilters = () => {
    if (draftTenantId.trim() && !/^\d+$/.test(draftTenantId.trim())) {
      setRequestError('Tenant ID must be numeric')
      return
    }
    setRequestError('')
    resetPageIndex()
    setFilters({
      applicant: draftApplicant.trim() || undefined,
      tenantId: draftTenantId.trim() || undefined,
      statuses: draftStatuses.length ? draftStatuses : undefined
    })
  }

  const resetFilters = () => {
    setDraftApplicant('')
    setDraftTenantId('')
    setDraftStatuses([])
    setRequestError('')
    resetPageIndex()
    setFilters({})
  }

  const columns = useMemo<ColumnsType<PremiumUpgradePlan>>(
    () => [
      {
        title: 'Plan',
        dataIndex: 'name',
        fixed: 'left',
        width: 280,
        render: (name: string, plan) => (
          <Space direction="vertical" size={0}>
            <Link to={`/premiumUpgradePlans/${plan.id}`}>
              <Text strong>{name}</Text>
            </Link>
            <Text type="secondary">#{plan.id}</Text>
          </Space>
        )
      },
      {
        title: 'Status',
        dataIndex: 'status',
        width: 180,
        render: renderUpgradeStatus
      },
      {
        title: 'Target Version',
        dataIndex: 'desired_version',
        width: 140,
        render: (version: string) => <Text strong>{version}</Text>
      },
      {
        title: 'Scope',
        dataIndex: 'scope_mode',
        width: 150,
        render: (mode: string) => (
          <Tag color={mode === 'all_present' ? 'purple' : 'blue'}>
            {mode === 'all_present' ? 'All present' : 'Selected'}
          </Tag>
        )
      },
      {
        title: 'Execution Mode',
        dataIndex: 'execution_mode',
        width: 180,
        render: (mode?: string) => (
          <Tag color={mode === 'step_by_step' ? 'cyan' : 'blue'}>
            {executionModeName(mode)}
          </Tag>
        )
      },
      {
        title: 'Clusters',
        dataIndex: 'requested_cluster_ids',
        width: 100,
        render: (ids: string[] = []) => ids.length
      },
      {
        title: 'Components',
        dataIndex: 'requested_components',
        width: 360,
        render: (components: string[] = [], plan) =>
          plan.scope_mode === 'all_present' ? (
            <Tag color="purple">All components present on each target</Tag>
          ) : (
            <Space size={[4, 4]} wrap>
              {components.slice(0, 4).map((component) => (
                <Tag key={component}>{componentSelectorName(component)}</Tag>
              ))}
              {components.length > 4 && <Tag>+{components.length - 4}</Tag>}
            </Space>
          )
      },
      {
        title: 'Approval',
        dataIndex: 'approval_id',
        width: 150,
        render: (approvalId?: number) =>
          approvalId ? (
            <Space size={4}>
              <SafetyCertificateOutlined />
              <Text>#{approvalId}</Text>
            </Space>
          ) : (
            <Text type="secondary">Pending creation</Text>
          )
      },
      {
        title: 'Applicant',
        dataIndex: 'applicant',
        width: 220,
        ellipsis: true
      },
      {
        title: 'Created At',
        dataIndex: 'created_at',
        width: 180,
        render: formatDateTime
      },
      {
        title: 'Action',
        key: 'action',
        fixed: 'right',
        width: 90,
        render: (_, plan) => (
          <Link to={`/premiumUpgradePlans/${plan.id}`}>Detail</Link>
        )
      }
    ],
    []
  )

  return (
    <div className="premium-upgrade-plan-page">
      <ListToolBar
        title="Premium Upgrade Plans"
        reload={async () => {
          setRequestError('')
          await reload()
        }}
        actions={[
          <Link key="create" to="/premiumUpgradePlans/new">
            <Button
              type="primary"
              icon={<PlusOutlined />}
              data-mp-event="premium-upgrade-plan-create"
            >
              Create Plan
            </Button>
          </Link>
        ]}
      />

      <Card size="small" className="premium-upgrade-plan__list-intro">
        <SafetyCertificateOutlined />
        <span>
          <Text strong>One plan · one parent approval</Text>
          <Text type="secondary">
            Each executable Apply Group creates its own managed
            ConfigurationChange.
          </Text>
        </span>
      </Card>

      <Card size="small" className="premium-upgrade-plan__filters">
        <div className="premium-upgrade-plan__filter-fields">
          <div className="premium-upgrade-plan__filter-field">
            <Text strong>Tenant ID</Text>
            <Input
              value={draftTenantId}
              placeholder="Numeric tenant ID"
              allowClear
              onChange={(event) => setDraftTenantId(event.target.value)}
              onPressEnter={applyFilters}
            />
          </div>
          <div className="premium-upgrade-plan__filter-field">
            <Text strong>Applicant</Text>
            <Input
              value={draftApplicant}
              placeholder="Email"
              allowClear
              onChange={(event) => setDraftApplicant(event.target.value)}
              onPressEnter={applyFilters}
            />
          </div>
          <div className="premium-upgrade-plan__filter-field premium-upgrade-plan__filter-status">
            <Text strong>Status</Text>
            <Select
              mode="multiple"
              value={draftStatuses}
              placeholder="All statuses"
              maxTagCount="responsive"
              options={PLAN_STATUSES.map((status) => ({
                label: status.replaceAll('_', ' '),
                value: status
              }))}
              onChange={setDraftStatuses}
            />
          </div>
        </div>
        <Space className="premium-upgrade-plan__filter-actions">
          <Button type="primary" onClick={applyFilters}>
            Search
          </Button>
          <Button onClick={resetFilters}>Reset</Button>
        </Space>
      </Card>

      {requestError && (
        <Alert
          className="premium-upgrade-plan__request-error"
          type="error"
          showIcon
          message="Unable to load plans"
          description={requestError}
          closable
          onClose={() => setRequestError('')}
        />
      )}

      <Table<PremiumUpgradePlan>
        rowKey="id"
        size="small"
        loading={loading}
        columns={columns}
        dataSource={dataSource}
        pagination={{ ...paginationProps, showSizeChanger: true }}
        scroll={{ x: 1750 }}
        onChange={onTableChange}
      />
    </div>
  )
}

export default PremiumUpgradePlanList