import {
  Alert,
  Button,
  Card,
  Descriptions,
  Drawer,
  Progress,
  Table
} from 'antd'
import type { ColumnsType } from 'antd/lib/table'
import React, { useState } from 'react'

import { useListImportIntoTasks, useListImports } from '../hooks'
import { strings } from '../strings'
import { useToolsPage } from '../ToolsPageContext'
import {
  isDedicatedDeployType,
  isNextGenDeployType,
  type DedicatedImport,
  type PremiumImportIntoTask
} from '../types'
import { formatBytes, formatTs, statusBadge } from '../utils'

const PAGE_SIZE_OPTS = ['10', '20', '50', '100']

function DedicatedImportDetail({
  record,
  open,
  onClose
}: {
  record: DedicatedImport | undefined
  open: boolean
  onClose: () => void
}) {
  return (
    <Drawer
      open={open}
      onClose={onClose}
      width={520}
      title={record ? `Import: ${record.name || record.id}` : 'Import Detail'}
    >
      {record && (
        <Descriptions size="small" column={1} bordered>
          <Descriptions.Item label="ID">{record.id}</Descriptions.Item>
          <Descriptions.Item label="Status">
            {statusBadge(record.status)}
          </Descriptions.Item>
          <Descriptions.Item label="Source Type">
            {record.source_type}
          </Descriptions.Item>
          <Descriptions.Item label="File Type">
            {record.file_type}
          </Descriptions.Item>
          <Descriptions.Item label="Filter">
            {(() => {
              const f =
                record.filter && record.filter !== '.'
                  ? record.filter
                  : `${record.target_database}.${record.target_table}`
              return f && f !== '.' ? f : '—'
            })()}
          </Descriptions.Item>
          <Descriptions.Item label="Conn Method">
            {record.conn_method || '—'}
          </Descriptions.Item>
          <Descriptions.Item label="Size">
            {formatBytes(record.size_bytes)}
          </Descriptions.Item>
          <Descriptions.Item label="Rows">
            {record.imported_rows.toLocaleString()} /{' '}
            {record.total_rows.toLocaleString()}
          </Descriptions.Item>
          <Descriptions.Item label="Total Tables">
            {record.total_tables_count ?? '—'}
          </Descriptions.Item>
          <Descriptions.Item label="Completed Tables">
            {record.completed_tables ?? '—'}
          </Descriptions.Item>
          <Descriptions.Item label="Pending Tables">
            {record.pending_tables ?? '—'}
          </Descriptions.Item>
          <Descriptions.Item label="Completed %">
            {record.completed_percent !== undefined
              ? `${record.completed_percent}%`
              : '—'}
          </Descriptions.Item>
          <Descriptions.Item label="Post-import %">
            {record.post_import_completed_percent !== undefined
              ? `${record.post_import_completed_percent}%`
              : '—'}
          </Descriptions.Item>
          <Descriptions.Item label="Created">
            {formatTs(record.created_at)}
          </Descriptions.Item>
          {record.finished_at && (
            <Descriptions.Item label="Finished">
              {formatTs(record.finished_at)}
            </Descriptions.Item>
          )}
          {record.error_msg && (
            <Descriptions.Item label="Error">
              <span style={{ color: '#f5222d' }}>{record.error_msg}</span>
            </Descriptions.Item>
          )}
        </Descriptions>
      )}
    </Drawer>
  )
}

function PremiumImportDetail({
  record,
  open,
  onClose
}: {
  record: PremiumImportIntoTask | undefined
  open: boolean
  onClose: () => void
}) {
  return (
    <Drawer
      open={open}
      onClose={onClose}
      width={520}
      title={
        record
          ? `Import Task: ${record.name || record.id}`
          : 'Import Task Detail'
      }
    >
      {record && (
        <Descriptions size="small" column={1} bordered>
          <Descriptions.Item label="ID">{record.id}</Descriptions.Item>
          <Descriptions.Item label="Status">
            {statusBadge(record.status)}
          </Descriptions.Item>
          <Descriptions.Item label="Source URI">
            {record.source_uri}
          </Descriptions.Item>
          <Descriptions.Item label="Progress %">
            {record.status === 'succeeded' && record.progress_percent === 0
              ? '100%'
              : `${record.progress_percent}%`}
          </Descriptions.Item>
          <Descriptions.Item label="Total Tables">
            {record.total_tables_count ?? '—'}
          </Descriptions.Item>
          <Descriptions.Item label="Completed Tables">
            {record.completed_tables ?? '—'}
          </Descriptions.Item>
          <Descriptions.Item label="Pending Tables">
            {record.pending_tables ?? '—'}
          </Descriptions.Item>
          <Descriptions.Item label="Created">
            {formatTs(record.created_at)}
          </Descriptions.Item>
          {record.finished_at && (
            <Descriptions.Item label="Finished">
              {formatTs(record.finished_at)}
            </Descriptions.Item>
          )}
          {record.error_msg && (
            <Descriptions.Item label="Error">
              <span style={{ color: '#f5222d' }}>{record.error_msg}</span>
            </Descriptions.Item>
          )}
        </Descriptions>
      )}
    </Drawer>
  )
}

function DedicatedImportsTable() {
  const { clusterId } = useToolsPage()
  const [page, setPage] = useState(1)
  const [pageSize, setPageSize] = useState(20)
  const { data, isLoading, isError } = useListImports(clusterId, {
    page,
    page_size: pageSize
  })
  const [selected, setSelected] = useState<DedicatedImport | undefined>()

  const columns: ColumnsType<DedicatedImport> = [
    { title: 'ID', dataIndex: 'id', width: 100 },
    { title: 'Name', dataIndex: 'name', render: (v, r) => v || r.id },
    {
      title: 'Status',
      dataIndex: 'status',
      render: (v) => statusBadge(v)
    },
    {
      title: 'Filter',
      dataIndex: 'filter',
      render: (v, r) => {
        // '.' is the TiDB wildcard meaning 'all tables'; fall back to target_database.target_table
        const f = v && v !== '.' ? v : `${r.target_database}.${r.target_table}`
        return f && f !== '.' ? f : '—'
      }
    },
    { title: 'Source', dataIndex: 'source_type' },
    { title: 'Format', dataIndex: 'file_type' },
    { title: 'Conn Method', dataIndex: 'conn_method', render: (v) => v || '—' },
    {
      title: 'Progress',
      render: (_, r) => {
        // completed_percent is populated by the backend; fall back to row-based calc.
        // For succeeded tasks without percent data, treat as 100%.
        let pct = r.completed_percent ?? 0
        if (pct === 0 && r.total_rows > 0) {
          pct = Math.round((r.imported_rows / r.total_rows) * 100)
        }
        if (pct === 0 && r.status === 'succeeded') {
          pct = 100
        }
        return <Progress percent={pct} size="small" />
      }
    },
    {
      title: 'Size',
      dataIndex: 'size_bytes',
      render: (v) => formatBytes(v)
    },
    {
      title: 'Error',
      dataIndex: 'error_msg',
      render: (v) => (v ? <span style={{ color: '#f5222d' }}>{v}</span> : '—')
    },
    {
      title: 'Created',
      dataIndex: 'created_at',
      render: (v) => formatTs(v)
    },
    {
      title: 'Action',
      key: 'action',
      render: (_, record) => (
        <Button
          type="link"
          size="small"
          style={{ padding: '0 4px' }}
          onClick={() => setSelected(record)}
        >
          Detail
        </Button>
      )
    }
  ]

  return (
    <>
      {isError && <Alert type="error" message={strings.common.errorPanel} />}
      <Table<DedicatedImport>
        rowKey="id"
        size="small"
        loading={isLoading}
        dataSource={(data?.items || []) as DedicatedImport[]}
        columns={columns}
        pagination={{
          current: page,
          pageSize,
          total: data?.total || 0,
          pageSizeOptions: PAGE_SIZE_OPTS,
          showSizeChanger: true,
          onChange: (p, ps) => {
            setPage(p)
            setPageSize(ps || pageSize)
          }
        }}
      />
      <DedicatedImportDetail
        record={selected}
        open={!!selected}
        onClose={() => setSelected(undefined)}
      />
    </>
  )
}

function PremiumImportIntoTable() {
  const { clusterId } = useToolsPage()
  // The upstream IMPORT INTO API is page-token based, but devops does not expose its token.
  // Fetch its maximum supported page instead of offering duplicate numbered pages.
  const { data, isLoading, isError } = useListImportIntoTasks(clusterId, {
    page: 1,
    page_size: 100
  })
  const [selected, setSelected] = useState<PremiumImportIntoTask | undefined>()

  const columns: ColumnsType<PremiumImportIntoTask> = [
    { title: 'ID', dataIndex: 'id', width: 100 },
    { title: 'Name', dataIndex: 'name', render: (v, r) => v || r.id },
    {
      title: 'Status',
      dataIndex: 'status',
      render: (v) => statusBadge(v)
    },
    {
      title: 'Source URI',
      dataIndex: 'source_uri'
    },
    {
      title: 'Progress',
      render: (_, r) => {
        let pct = r.progress_percent ?? 0
        if (pct === 0 && r.status === 'succeeded') {
          pct = 100
        }
        return <Progress percent={pct} size="small" />
      }
    },
    {
      title: 'Error',
      dataIndex: 'error_msg',
      render: (v) => (v ? <span style={{ color: '#f5222d' }}>{v}</span> : '—')
    },
    {
      title: 'Created',
      dataIndex: 'created_at',
      render: (v) => formatTs(v)
    },
    {
      title: 'Action',
      key: 'action',
      render: (_, record) => (
        <Button
          type="link"
          size="small"
          style={{ padding: '0 4px' }}
          onClick={() => setSelected(record)}
        >
          Detail
        </Button>
      )
    }
  ]

  return (
    <>
      {isError && <Alert type="error" message={strings.common.errorPanel} />}
      <Table<PremiumImportIntoTask>
        rowKey="id"
        size="small"
        loading={isLoading}
        dataSource={(data?.items || []) as PremiumImportIntoTask[]}
        columns={columns}
        pagination={false}
      />
      <PremiumImportDetail
        record={selected}
        open={!!selected}
        onClose={() => setSelected(undefined)}
      />
    </>
  )
}

export default function ImportPanel() {
  const { deployType } = useToolsPage()

  let content: React.ReactNode
  if (isDedicatedDeployType(deployType)) {
    content = <DedicatedImportsTable />
  } else if (isNextGenDeployType(deployType)) {
    content = <PremiumImportIntoTable />
  } else {
    content = (
      <Alert
        type="info"
        message={strings.tooltips.importOnlyDedicatedNextGen}
        showIcon
      />
    )
  }

  return (
    <Card
      title="Imports"
      size="small"
      bordered={false}
      headStyle={{ backgroundColor: '#fafafa' }}
    >
      {content}
    </Card>
  )
}