import {
  AppstoreOutlined,
  CheckCircleOutlined,
  CopyOutlined,
  ReloadOutlined,
  SyncOutlined
} from '@ant-design/icons'
import {
  Alert,
  Button,
  Card,
  Descriptions,
  Drawer,
  Empty,
  Input,
  notification,
  Select,
  Space,
  Table,
  Tabs,
  Tag,
  Tooltip,
  Typography
} from 'antd'
import type { ColumnsType, TablePaginationConfig } from 'antd/lib/table'
import { useEffect, useMemo, useState } from 'react'

import {
  useCloudConfigControllerListComponents,
  useKernelImageControllerGetRelease,
  useKernelImageControllerGetSelection,
  useKernelImageControllerListReleases,
  useKernelImageControllerRefreshAvailability
} from 'apiClient/services/devops'
import type {
  CloudConfigControllerListComponentsClusterType,
  GithubComTidbcloudDevopsApiKernelimageRelease as KernelImageRelease,
  GithubComTidbcloudDevopsApiKernelimageSelectionItem as SelectionItem,
  KernelimageAvailabilityStatus,
  KernelimagePlatformAvailability,
  KernelimagePlatformAvailabilityStatus,
  KernelimageReleaseStatus
} from 'apiClient/services/devops/interface'
import { getErrorMessage } from 'utils/error'

const { TabPane } = Tabs
const { Text, Title } = Typography

const CLUSTER_TYPES: Array<{
  label: string
  value: CloudConfigControllerListComponentsClusterType
}> = [
  { label: 'Resource Pool', value: 'SHARED_POOL' },
  { label: 'Dedicated', value: 'DEDICATED_TIDB' },
  { label: 'TiCDC', value: 'TICDC' },
  { label: 'Changefeed', value: 'CHANGEFEED' },
  { label: 'Logical Cluster', value: 'LOGICAL_CLUSTER' },
  { label: 'TiCDC NG', value: 'TICDC_NG' },
  { label: 'Changefeed NG', value: 'CHANGEFEED_NG' }
]

const PAGE_SIZE = 20

type SelectionRow = KernelImageRelease &
  SelectionItem & {
    key: string
    release: KernelImageRelease
  }

const releaseStatusColors: Record<KernelimageReleaseStatus, string> = {
  BUILT: 'blue',
  DELIVERY_OPERATION_CREATE_FAILED: 'red',
  DELIVERY_APPROVING: 'gold',
  SYNCING: 'processing',
  SYNC_FAILED: 'red',
  AVAILABLE: 'green',
  RETIRED: 'default'
}

const availabilityStatusColors: Record<KernelimageAvailabilityStatus, string> =
  {
    UNKNOWN: 'default',
    CHECKING: 'processing',
    AVAILABLE: 'green',
    PARTIAL: 'gold',
    UNAVAILABLE: 'red',
    CHECK_FAILED: 'red'
  }

const platformStatusColors: Record<
  KernelimagePlatformAvailabilityStatus,
  string
> = {
  AVAILABLE: 'green',
  MISSING: 'red',
  DIGEST_MISMATCH: 'volcano',
  CHECK_FAILED: 'red'
}

const CLOUD_PROVIDERS = ['AWS', 'ALIYUN', 'AZURE'] as const
type CloudProvider = (typeof CLOUD_PROVIDERS)[number]

const formatTime = (value?: string) => {
  if (!value) return '-'
  const date = new Date(value)
  return Number.isNaN(date.getTime()) ? value : date.toLocaleString()
}

const statusTag = (status?: KernelimageReleaseStatus) =>
  status ? <Tag color={releaseStatusColors[status]}>{status}</Tag> : '-'

const availabilityStatusTag = (status?: KernelimageAvailabilityStatus) =>
  status ? <Tag color={availabilityStatusColors[status]}>{status}</Tag> : '-'

const availabilityDetails = (availability: KernelimagePlatformAvailability) => (
  <Space direction="vertical" size={0}>
    <Text>{availability.image_ref || availability.registry || '-'}</Text>
    {availability.digest && (
      <Text type="secondary">Digest: {availability.digest}</Text>
    )}
    <Text type="secondary">Checked: {formatTime(availability.checked_at)}</Text>
    <Text type="secondary">Source: {availability.source || '-'}</Text>
    {availability.error_message && (
      <Text type="danger">{availability.error_message}</Text>
    )}
  </Space>
)

const platformAvailabilityTag = (
  release: KernelImageRelease,
  provider: CloudProvider
) => {
  if (release.availability_status === 'CHECKING') {
    return <Tag color="processing">CHECKING</Tag>
  }
  const items = (release.availability || []).filter(
    (item) => item.cloud_provider === provider
  )
  if (!items.length) return <Text type="secondary">-</Text>
  return (
    <Space direction="vertical" size={2}>
      {items.map((item, index) => (
        <Tooltip
          key={`${item.image_ref || item.registry || provider}-${index}`}
          title={availabilityDetails(item)}
        >
          {item.status ? (
            <Tag color={platformStatusColors[item.status]}>{item.status}</Tag>
          ) : (
            <Tag>UNKNOWN</Tag>
          )}
        </Tooltip>
      ))}
    </Space>
  )
}

const shortValue = (value?: string, length = 12) => {
  if (!value) return '-'
  return value.length > length ? `${value.slice(0, length)}…` : value
}

const CopyableValue = ({ value }: { value?: string }) => {
  if (!value) return <>-</>
  return (
    <Tooltip title={value}>
      <Text
        copyable={{ text: value, icon: <CopyOutlined /> }}
        style={{ maxWidth: 260 }}
        ellipsis
      >
        {value}
      </Text>
    </Tooltip>
  )
}

const releaseColumns = (
  onView: (release: KernelImageRelease) => void,
  onRefreshAvailability: (release: KernelImageRelease) => void,
  refreshingArtifactUID?: string,
  inventory = false
): ColumnsType<KernelImageRelease> => [
  {
    title: 'Version',
    dataIndex: 'version',
    width: 120,
    fixed: 'left'
  },
  {
    title: 'Image Tag',
    dataIndex: 'source_tag',
    width: 260,
    render: (value: string) => <CopyableValue value={value} />
  },
  {
    title: 'Status',
    dataIndex: 'status',
    width: 150,
    render: statusTag
  },
  ...CLOUD_PROVIDERS.map((provider) => ({
    title: provider === 'ALIYUN' ? 'Aliyun' : provider,
    key: `availability-${provider}`,
    width: 145,
    render: (_: unknown, release: KernelImageRelease) =>
      platformAvailabilityTag(release, provider)
  })),
  {
    title: 'Last Checked',
    dataIndex: 'availability_checked_at',
    width: 180,
    render: formatTime
  },
  {
    title: 'Commit',
    dataIndex: 'commit_sha',
    width: 140,
    render: (value: string) => (
      <Tooltip title={value}>{shortValue(value)}</Tooltip>
    )
  },
  {
    title: 'Source Repository',
    dataIndex: 'source_repository',
    width: 280,
    render: (value: string) => <CopyableValue value={value} />
  },
  {
    title: 'Applicant',
    dataIndex: 'source_applicant',
    width: 190
  },
  {
    title: 'Build Finished',
    dataIndex: 'build_finished_at',
    width: 180,
    render: formatTime
  },
  ...(inventory
    ? [
        {
          title: 'Masked',
          dataIndex: 'masked',
          width: 110,
          render: (_: boolean, release: KernelImageRelease) => (
            <Tooltip title={release.mask_reason || undefined}>
              <Tag color={release.masked ? 'red' : 'green'}>
                {release.masked ? 'Yes' : 'No'}
              </Tag>
            </Tooltip>
          )
        } as ColumnsType<KernelImageRelease>[number]
      ]
    : []),
  {
    title: 'Action',
    key: 'action',
    width: inventory ? 210 : 150,
    fixed: 'right',
    render: (_, record) => (
      <Space size={0}>
        <Button type="link" size="small" onClick={() => onView(record)}>
          Detail
        </Button>
        <Button
          type="link"
          size="small"
          icon={<SyncOutlined />}
          disabled={
            record.status !== 'AVAILABLE' ||
            !record.delivery_target_images?.length ||
            record.availability_status === 'CHECKING'
          }
          loading={refreshingArtifactUID === record.artifact_uid}
          onClick={() => onRefreshAvailability(record)}
        >
          Check
        </Button>
        {inventory && (
          <Tooltip title="Mask/Unmask is a preview only and is not connected to DevOps yet">
            <span>
              <Button type="link" size="small" disabled>
                {record.masked ? 'Unmask' : 'Mask'}
              </Button>
            </span>
          </Tooltip>
        )}
      </Space>
    )
  }
]

const selectionColumns = (
  onView: (release: KernelImageRelease) => void,
  onRefreshAvailability: (release: KernelImageRelease) => void,
  refreshingArtifactUID?: string,
  excluded = false
): ColumnsType<SelectionRow> => {
  const columns = releaseColumns(
    onView,
    onRefreshAvailability,
    refreshingArtifactUID
  ) as ColumnsType<SelectionRow>
  const versionColumn = columns[0]

  return [
    versionColumn,
    ...(excluded
      ? [
          {
            title: 'Exclusion Reason',
            dataIndex: 'exclusion_reason',
            width: 210,
            render: (reason?: string) =>
              reason ? <Tag color="orange">{reason}</Tag> : '-'
          } as ColumnsType<SelectionRow>[number]
        ]
      : [
          {
            title: 'Default',
            dataIndex: 'is_default',
            width: 90,
            render: (isDefault?: boolean) =>
              isDefault ? (
                <Tag color="green" icon={<CheckCircleOutlined />}>
                  Yes
                </Tag>
              ) : (
                '-'
              )
          } as ColumnsType<SelectionRow>[number]
        ]),
    ...columns.slice(1)
  ]
}

const platformAvailabilityColumns: ColumnsType<KernelimagePlatformAvailability> =
  [
    {
      title: 'Platform',
      dataIndex: 'cloud_provider',
      width: 100
    },
    {
      title: 'Status',
      dataIndex: 'status',
      width: 155,
      render: (status?: KernelimagePlatformAvailabilityStatus) =>
        status ? <Tag color={platformStatusColors[status]}>{status}</Tag> : '-'
    },
    {
      title: 'Image',
      dataIndex: 'image_ref',
      width: 320,
      render: (value?: string) => <CopyableValue value={value} />
    },
    {
      title: 'Digest',
      dataIndex: 'digest',
      width: 180,
      render: (value?: string) => <CopyableValue value={value} />
    },
    {
      title: 'Platforms',
      dataIndex: 'oci_platforms',
      width: 190,
      render: (platforms?: string[]) => platforms?.join(', ') || '-'
    },
    {
      title: 'Checked At',
      dataIndex: 'checked_at',
      width: 180,
      render: formatTime
    },
    {
      title: 'Evidence',
      key: 'evidence',
      width: 130,
      render: (_, item) =>
        item.workflow_run_url ? (
          <Typography.Link
            href={item.workflow_run_url}
            target="_blank"
            rel="noreferrer"
          >
            Workflow #{item.workflow_run_id || '-'}
          </Typography.Link>
        ) : (
          item.source || '-'
        )
    }
  ]

const ReleaseDrawer = ({
  release,
  onClose,
  onRefreshAvailability,
  refreshingArtifactUID
}: {
  release?: KernelImageRelease
  onClose: () => void
  onRefreshAvailability: (release: KernelImageRelease) => void
  refreshingArtifactUID?: string
}) => {
  return (
    <Drawer
      title={`Kernel Image: ${release?.source_tag || '-'}`}
      width={860}
      visible={!!release}
      onClose={onClose}
      destroyOnClose
      extra={
        release ? (
          <Button
            icon={<SyncOutlined />}
            disabled={
              release.status !== 'AVAILABLE' ||
              !release.delivery_target_images?.length ||
              release.availability_status === 'CHECKING'
            }
            loading={refreshingArtifactUID === release.artifact_uid}
            onClick={() => onRefreshAvailability(release)}
          >
            Check availability
          </Button>
        ) : null
      }
    >
      {release && (
        <Space direction="vertical" size="large" style={{ width: '100%' }}>
          <Descriptions bordered size="small" column={2}>
            <Descriptions.Item label="Artifact UID" span={2}>
              <CopyableValue value={release.artifact_uid} />
            </Descriptions.Item>
            <Descriptions.Item label="Version">
              {release.version || '-'}
            </Descriptions.Item>
            <Descriptions.Item label="Status">
              {statusTag(release.status)}
            </Descriptions.Item>
            <Descriptions.Item label="Platform Availability">
              {availabilityStatusTag(release.availability_status)}
            </Descriptions.Item>
            <Descriptions.Item label="Availability Checked">
              {formatTime(release.availability_checked_at)}
            </Descriptions.Item>
            <Descriptions.Item label="Masked">
              {release.masked ? 'Yes' : 'No'}
            </Descriptions.Item>
            <Descriptions.Item label="Mask Reason">
              {release.mask_reason || '-'}
            </Descriptions.Item>
            <Descriptions.Item label="Image Tag" span={2}>
              <CopyableValue value={release.source_tag} />
            </Descriptions.Item>
            <Descriptions.Item label="Source Repository" span={2}>
              <CopyableValue value={release.source_repository} />
            </Descriptions.Item>
            <Descriptions.Item label="Source Digest" span={2}>
              <CopyableValue value={release.source_digest} />
            </Descriptions.Item>
            <Descriptions.Item label="Commit SHA" span={2}>
              <CopyableValue value={release.commit_sha} />
            </Descriptions.Item>
            <Descriptions.Item label="Repository">
              {release.repo || '-'}
            </Descriptions.Item>
            <Descriptions.Item label="Branch">
              {release.branch || '-'}
            </Descriptions.Item>
            <Descriptions.Item label="Git Tag" span={2}>
              <CopyableValue value={release.git_tag} />
            </Descriptions.Item>
            <Descriptions.Item label="Applicant">
              {release.source_applicant || '-'}
            </Descriptions.Item>
            <Descriptions.Item label="DevOps Environment">
              {release.local_devops_environment || '-'}
            </Descriptions.Item>
            <Descriptions.Item label="Build Finished">
              {formatTime(release.build_finished_at)}
            </Descriptions.Item>
            <Descriptions.Item label="Available At">
              {formatTime(release.available_at)}
            </Descriptions.Item>
            <Descriptions.Item label="Source Release / Change" span={2}>
              {[release.source_release_id, release.source_change_id]
                .filter(Boolean)
                .join(' / ') || '-'}
            </Descriptions.Item>
            <Descriptions.Item label="Formal Delivery UID" span={2}>
              <CopyableValue value={release.formal_delivery_uid} />
            </Descriptions.Item>
            <Descriptions.Item label="Delivery Operation" span={2}>
              {release.delivery_operation_instance_id ? (
                <Typography.Link
                  href={`/operations/${release.delivery_operation_instance_id}`}
                  target="_blank"
                  rel="noreferrer"
                >
                  Operation #{release.delivery_operation_instance_id}
                </Typography.Link>
              ) : (
                '-'
              )}
            </Descriptions.Item>
          </Descriptions>
          <div>
            <Title level={5}>Platform availability</Title>
            <Table<KernelimagePlatformAvailability>
              rowKey={(item) =>
                `${item.cloud_provider || 'unknown'}-${
                  item.image_ref || item.registry || 'image'
                }`
              }
              columns={platformAvailabilityColumns}
              dataSource={release.availability || []}
              pagination={false}
              size="small"
              scroll={{ x: 1255 }}
              locale={{
                emptyText: (
                  <Empty description="No FID platform evidence is available yet" />
                )
              }}
            />
          </div>
          {release.availability_last_error && (
            <Alert
              type="warning"
              showIcon
              message="Availability check did not fully pass"
              description={release.availability_last_error}
            />
          )}
          {release.last_error_message && (
            <Alert
              type="error"
              showIcon
              message={
                release.last_error_code ||
                'Release delivery operation creation failed'
              }
              description={release.last_error_message}
            />
          )}
          {!release.delivery_operation_instance_id && (
            <Alert
              type="info"
              showIcon
              message="Release delivery operation has not been created"
            />
          )}
        </Space>
      )}
    </Drawer>
  )
}

export default function KernelImages() {
  const [activeView, setActiveView] = useState('selection')
  const [clusterType, setClusterType] =
    useState<CloudConfigControllerListComponentsClusterType>('SHARED_POOL')
  const [component, setComponent] = useState('')
  const [repository, setRepository] = useState<string>()
  const [repositoryInput, setRepositoryInput] = useState('')
  const [version, setVersion] = useState<string>()
  const [versionInput, setVersionInput] = useState('')
  const [releaseStatuses, setReleaseStatuses] = useState<string[]>([])
  const [masked, setMasked] = useState<boolean>()
  const [page, setPage] = useState(1)
  const [selectedRelease, setSelectedRelease] = useState<KernelImageRelease>()
  const [refreshingArtifactUID, setRefreshingArtifactUID] = useState<string>()
  const availabilityMutation = useKernelImageControllerRefreshAvailability()

  const componentsQuery = useCloudConfigControllerListComponents(
    { cluster_type: clusterType },
    {
      query: {
        enabled: activeView === 'selection',
        refetchOnWindowFocus: false
      }
    }
  )
  const components = useMemo(
    () => componentsQuery.data?.data?.components || [],
    [componentsQuery.data]
  )

  useEffect(() => {
    setComponent('')
    setPage(1)
  }, [clusterType])

  useEffect(() => {
    if (components.length > 0) {
      setComponent((current) =>
        components.includes(current) ? current : components[0]
      )
    }
  }, [components])

  const selectionQuery = useKernelImageControllerGetSelection(
    { cluster_type: clusterType, component },
    {
      query: {
        enabled: activeView === 'selection' && !!component,
        refetchOnWindowFocus: false,
        refetchInterval: 15000
      }
    }
  )
  const releasesQuery = useKernelImageControllerListReleases(
    {
      repository,
      version,
      statuses: releaseStatuses.length ? releaseStatuses : undefined,
      masked,
      page,
      per_page: PAGE_SIZE
    },
    {
      query: {
        enabled: activeView === 'inventory',
        keepPreviousData: true,
        refetchOnWindowFocus: false,
        refetchInterval: 15000
      }
    }
  )

  const selectedReleaseQuery = useKernelImageControllerGetRelease(
    selectedRelease?.artifact_uid || '',
    {
      query: {
        enabled: !!selectedRelease?.artifact_uid,
        refetchOnWindowFocus: false,
        refetchInterval: 5000
      }
    }
  )

  const selection = selectionQuery.data?.data
  const releases = releasesQuery.data?.data
  const detailedRelease = selectedRelease
    ? selectedReleaseQuery.data?.data?.release || selectedRelease
    : undefined

  const selectedRows = useMemo<SelectionRow[]>(
    () =>
      (selection?.versions || []).flatMap((versionGroup) =>
        (versionGroup.images || [])
          .filter(
            (item): item is SelectionItem & { release: KernelImageRelease } =>
              Boolean(item.release)
          )
          .map((item) => ({
            ...item.release,
            ...item,
            key:
              item.release.artifact_uid ||
              `${versionGroup.version}-${item.release.id}`,
            version: versionGroup.version,
            release: item.release
          }))
      ),
    [selection]
  )

  const excludedRows = useMemo<SelectionRow[]>(
    () =>
      (selection?.excluded || [])
        .filter(
          (item): item is SelectionItem & { release: KernelImageRelease } =>
            Boolean(item.release)
        )
        .map((item) => ({
          ...item.release,
          ...item,
          key: item.release.artifact_uid || `excluded-${item.release.id}`,
          version: item.release.version,
          release: item.release
        })),
    [selection]
  )

  const resetPage = () => setPage(1)
  const refreshSelection = () => {
    componentsQuery.refetch()
    selectionQuery.refetch()
  }
  const refreshInventory = () => {
    releasesQuery.refetch()
  }

  const refreshAvailability = async (release: KernelImageRelease) => {
    const artifactUID = release.artifact_uid
    if (!artifactUID) return
    setRefreshingArtifactUID(artifactUID)
    try {
      const response = await availabilityMutation.mutateAsync({
        artifactUid: artifactUID
      })
      const checkingRelease = response.data.release
      if (selectedRelease?.artifact_uid === artifactUID && checkingRelease) {
        setSelectedRelease(checkingRelease)
      }
      notification.success({
        message: 'Platform availability check started',
        description:
          'The page will refresh the cached result while FID queries each registry.'
      })
      await Promise.all([
        activeView === 'selection'
          ? selectionQuery.refetch()
          : releasesQuery.refetch(),
        selectedRelease?.artifact_uid === artifactUID
          ? selectedReleaseQuery.refetch()
          : Promise.resolve()
      ])
    } catch (error) {
      notification.error({
        message: 'Failed to start platform availability check',
        description: getErrorMessage(error)
      })
    } finally {
      setRefreshingArtifactUID(undefined)
    }
  }

  const policy = selection?.policy
  const selectionHasError = componentsQuery.isError || selectionQuery.isError

  return (
    <Space direction="vertical" size="large" style={{ width: '100%' }}>
      <div>
        <Title level={3} style={{ marginBottom: 4 }}>
          Kernel Image Versions
        </Title>
        <Text type="secondary">
          Inspect the environment-local M×N image selection and immutable build
          records, including availability in each cloud registry.
        </Text>
      </div>

      <Tabs
        activeKey={activeView}
        onChange={(key) => setActiveView(key)}
        animated={false}
      >
        <TabPane tab="Component Selection" key="selection">
          <Space direction="vertical" size="large" style={{ width: '100%' }}>
            <Card size="small">
              <Space size="middle" align="end" wrap>
                <span>
                  <Text type="secondary">Cluster Type</Text>
                  <br />
                  <Select
                    style={{ width: 190 }}
                    value={clusterType}
                    options={CLUSTER_TYPES}
                    onChange={(value) => setClusterType(value)}
                  />
                </span>
                <span>
                  <Text type="secondary">Component</Text>
                  <br />
                  <Select
                    showSearch
                    style={{ width: 180 }}
                    loading={
                      componentsQuery.isLoading || componentsQuery.isFetching
                    }
                    placeholder="Select component"
                    value={component || undefined}
                    options={components.map((value) => ({
                      value,
                      label: value
                    }))}
                    onChange={setComponent}
                  />
                </span>
                <Button
                  icon={<ReloadOutlined />}
                  loading={
                    componentsQuery.isFetching || selectionQuery.isFetching
                  }
                  onClick={refreshSelection}
                >
                  Refresh
                </Button>
              </Space>
            </Card>

            {selectionHasError && (
              <Alert
                type="error"
                showIcon
                message="Failed to load component image selection"
                description="Check the selected cluster type/component and your DevOps API access, then retry."
              />
            )}

            <Alert
              type="info"
              showIcon
              icon={<AppstoreOutlined />}
              message={
                policy
                  ? `Selection policy: ${
                      policy.version_count || 0
                    } versions × ${policy.image_tag_count || 0} image tags`
                  : 'M×N selection policy'
              }
              description={
                <Space size="large" wrap>
                  <span>
                    DevOps environment:{' '}
                    <Text strong>
                      {policy?.local_devops_environment || '-'}
                    </Text>
                  </span>
                  <span>
                    Calculated at:{' '}
                    <Text>{formatTime(selection?.calculated_at)}</Text>
                  </span>
                </Space>
              }
            />

            <Tabs defaultActiveKey="selected" animated={false}>
              <TabPane
                tab={`Current M×N (${selectedRows.length})`}
                key="selected"
              >
                <Table<SelectionRow>
                  rowKey="key"
                  columns={selectionColumns(
                    setSelectedRelease,
                    refreshAvailability,
                    refreshingArtifactUID
                  )}
                  dataSource={selectedRows}
                  loading={selectionQuery.isLoading}
                  pagination={false}
                  size="small"
                  scroll={{ x: 1500 }}
                  locale={{
                    emptyText: (
                      <Empty description="No image currently satisfies the selection policy" />
                    )
                  }}
                />
              </TabPane>
              <TabPane tab={`Excluded (${excludedRows.length})`} key="excluded">
                <Table<SelectionRow>
                  rowKey="key"
                  columns={selectionColumns(
                    setSelectedRelease,
                    refreshAvailability,
                    refreshingArtifactUID,
                    true
                  )}
                  dataSource={excludedRows}
                  loading={selectionQuery.isLoading}
                  pagination={false}
                  size="small"
                  scroll={{ x: 1650 }}
                />
              </TabPane>
            </Tabs>
          </Space>
        </TabPane>

        <TabPane
          tab={`Image Inventory (${releases?.total || 0})`}
          key="inventory"
        >
          <Space direction="vertical" size="large" style={{ width: '100%' }}>
            <Card size="small">
              <Space size="middle" align="end" wrap>
                <span>
                  <Text type="secondary">Repository</Text>
                  <br />
                  <Input.Search
                    allowClear
                    placeholder="Filter by repository"
                    style={{ width: 260 }}
                    value={repositoryInput}
                    onChange={(event) => {
                      const value = event.target.value
                      setRepositoryInput(value)
                      if (!value) {
                        setRepository(undefined)
                        resetPage()
                      }
                    }}
                    onSearch={(value) => {
                      setRepository(value.trim() || undefined)
                      resetPage()
                    }}
                  />
                </span>
                <span>
                  <Text type="secondary">Version</Text>
                  <br />
                  <Input.Search
                    allowClear
                    placeholder="Filter by version"
                    style={{ width: 200 }}
                    value={versionInput}
                    onChange={(event) => {
                      const value = event.target.value
                      setVersionInput(value)
                      if (!value) {
                        setVersion(undefined)
                        resetPage()
                      }
                    }}
                    onSearch={(value) => {
                      setVersion(value.trim() || undefined)
                      resetPage()
                    }}
                  />
                </span>
                <span>
                  <Text type="secondary">Delivery Status</Text>
                  <br />
                  <Select
                    mode="multiple"
                    allowClear
                    placeholder="All statuses"
                    style={{ minWidth: 260 }}
                    value={releaseStatuses}
                    onChange={(value) => {
                      setReleaseStatuses(value)
                      resetPage()
                    }}
                    options={Object.keys(releaseStatusColors).map((status) => ({
                      value: status,
                      label: status
                    }))}
                  />
                </span>
                <span>
                  <Text type="secondary">Mask Status</Text>
                  <br />
                  <Select
                    style={{ width: 140 }}
                    value={
                      masked === undefined
                        ? 'all'
                        : masked
                        ? 'masked'
                        : 'unmasked'
                    }
                    options={[
                      { value: 'all', label: 'All' },
                      { value: 'unmasked', label: 'Unmasked' },
                      { value: 'masked', label: 'Masked' }
                    ]}
                    onChange={(value) => {
                      setMasked(
                        value === 'all' ? undefined : value === 'masked'
                      )
                      resetPage()
                    }}
                  />
                </span>
                <Button
                  icon={<ReloadOutlined />}
                  loading={releasesQuery.isFetching}
                  onClick={refreshInventory}
                >
                  Refresh
                </Button>
              </Space>
            </Card>

            <Alert
              type="info"
              showIcon
              message="Mask management preview"
              description="Mask and Unmask controls are placeholders for this demo and do not update DevOps."
            />

            {releasesQuery.isError && (
              <Alert
                type="error"
                showIcon
                message="Failed to load image inventory"
                description="Check your DevOps API access and retry."
              />
            )}

            <Table<KernelImageRelease>
              rowKey={(release) => release.artifact_uid || String(release.id)}
              columns={releaseColumns(
                setSelectedRelease,
                refreshAvailability,
                refreshingArtifactUID,
                true
              )}
              dataSource={releases?.items || []}
              loading={releasesQuery.isLoading || releasesQuery.isFetching}
              size="small"
              scroll={{ x: 1700 }}
              pagination={{
                current: page,
                pageSize: PAGE_SIZE,
                total: releases?.total || 0,
                showSizeChanger: false,
                showTotal: (total) => `${total} images`
              }}
              onChange={(pagination: TablePaginationConfig) =>
                setPage(pagination.current || 1)
              }
            />
          </Space>
        </TabPane>
      </Tabs>

      <ReleaseDrawer
        release={detailedRelease}
        onClose={() => setSelectedRelease(undefined)}
        onRefreshAvailability={refreshAvailability}
        refreshingArtifactUID={refreshingArtifactUID}
      />
    </Space>
  )
}