import { DataTable, withColumnResizing, withSearch, withSorting, type DataTableColumn } from './internal/DataTable'
import type { RemoteJob } from './offload-types'

export interface RemoteJobsTableProps { jobs: RemoteJob[]; hostLabel?: string }

function formatBytes(bytes: number): string {
  if (bytes >= 1_000_000_000) return `${(bytes / 1_000_000_000).toFixed(1)} GB`
  if (bytes >= 1_000_000) return `${Math.round(bytes / 1_000_000)} MB`
  return `${bytes} B`
}
function formatDuration(seconds: number): string { return seconds < 60 ? `${Math.round(seconds)}s` : `${(seconds / 60).toFixed(1)}m` }
function formatPull(job: RemoteJob): string { return job.pullBytes === null || job.pullDurationSeconds === null ? '—' : `${formatBytes(job.pullBytes)} · ${formatDuration(job.pullDurationSeconds)}` }
function stageClass(stage: string): string {
  if (stage === 'building') return 'bg-accent/15 text-accent'
  if (stage === 'pull-back') return 'bg-teal/15 text-teal'
  if (stage === 'published') return 'bg-success/15 text-success'
  return 'bg-surface-raised text-fg-muted'
}
function publishDot(state: string): 'green' | 'amber' | 'red' | 'none' {
  if (state === 'promoted') return 'green'
  if (state === 'staged') return 'amber'
  if (state === 'blocked' || state === 'discarded') return 'red'
  return 'none'
}

const COLUMNS: DataTableColumn<RemoteJob>[] = [
  { id: 'job', header: 'Job', minWidth: 110, sortable: true, sortValue: (job) => job.id.toLowerCase(), searchValue: (job) => job.id, cell: (job) => <span className="font-mono text-[11px] text-fg-muted">{job.id}</span> },
  { id: 'repo', header: 'Repo', minWidth: 160, sortable: true, sortValue: (job) => job.repo.toLowerCase(), searchValue: (job) => job.repo, cell: (job) => job.repo },
  { id: 'snapshot', header: 'Snapshot', minWidth: 110, sortable: true, sortValue: (job) => job.snapshot.toLowerCase(), searchValue: (job) => job.snapshot, cell: (job) => <span className="font-mono text-[11px] text-fg-muted">{job.snapshot}</span> },
  { id: 'stage', header: 'Stage', minWidth: 110, sortable: true, sortValue: (job) => job.stage.toLowerCase(), searchValue: (job) => job.stage, cell: (job) => <span className={`rounded-[20px] px-[7px] py-0.5 text-[10.5px] ${stageClass(job.stage)}`}>{job.stage}</span> },
  { id: 'rc', header: 'rc', minWidth: 60, sortable: true, sortValue: (job) => job.rc ?? 0, cell: (job) => <span className={`tabular-nums ${job.rc === null ? 'text-fg-subtle' : job.rc === 0 ? 'text-success' : 'text-danger'}`}>{job.rc ?? '—'}</span> },
  { id: 'pulled', header: 'Pulled', minWidth: 130, sortable: true, sortValue: (job) => job.pullBytes ?? 0, cell: (job) => <span className="tabular-nums text-fg-subtle">{formatPull(job)}</span> },
  { id: 'publish', header: 'Publish', minWidth: 130, sortable: true, sortValue: (job) => (job.publication.reason ?? job.publication.state).toLowerCase(), searchValue: (job) => job.publication.reason ?? job.publication.state, cell: (job) => { const pub = publishDot(job.publication.state); return pub === 'none' ? <span className="text-fg-subtle">—</span> : <span className="inline-flex items-center gap-1.5"><i className={`h-[7px] w-[7px] rounded-full ${pub === 'green' ? 'bg-success' : pub === 'amber' ? 'bg-warning' : 'bg-danger'}`} /><span className={pub === 'red' ? 'text-danger' : ''}>{job.publication.reason ?? job.publication.state}</span></span> } },
  { id: 'actions', header: '', minWidth: 60, cell: () => <span className="text-[11px] text-accent">log ↗</span> },
]

export function RemoteJobsTable({ jobs, hostLabel }: RemoteJobsTableProps) {
  return <div data-testid="remote-jobs-table">{hostLabel ? <div className="mb-2 text-[11px] text-fg-subtle">host: {hostLabel}</div> : null}<DataTable caption="Remote jobs" columns={COLUMNS} rows={jobs} getRowId={(job) => job.id} capabilities={[withSorting(), withSearch({ label: 'Search remote jobs' }), withColumnResizing()]} /></div>
}