imap-copier/web/src/pages/TaskDetail.tsx

import { useEffect, useRef, useState, type ChangeEvent, type FormEvent } from 'react'
import { cancelAccount, createAccount, deleteAccount, getTask, importCSV, runTask, testAccounts, type TaskDetail as TaskDetailData } from '../api'
import { connectTaskWS, type TaskEvent } from '../ws'
import { StatusBadge } from '../components/StatusBadge'
import { useConfirm } from '../components/ConfirmProvider'

const emptyAccount = { src_login: '', src_pass: '', dst_login: '', dst_pass: '' }

// Human-readable one-line description of a task event for the log panel.
function describeEvent(ev: TaskEvent): string {
  const d = (ev.data ?? {}) as Record<string, unknown>
  const at = d.host ? `${d.login ?? ''}@${d.host}:${d.port}` : ''
  switch (ev.type) {
    case 'account_test': {
      const where = d.side === 'src' ? 'SOURCE' : 'DEST'
      const base = `${where} test ${String(d.status).toUpperCase()} — ${at}`
      return d.error ? `${base} — ${d.error}` : base
    }
    case 'account_started':
      return `START #${d.account_id}: ${d.src_login}@${d.src_host}:${d.src_port} → ${d.dst_login}@${d.dst_host}:${d.dst_port}`
    case 'account_done':
      return `DONE #${d.account_id} (${d.src_login} → ${d.dst_login}): copied ${d.copied}, skipped ${d.skipped}, errors ${d.errors}`
    case 'progress':
      return `progress #${d.account_id}: copied ${d.copied}, skipped ${d.skipped}`
    case 'folder': {
      const route = d.dst_folder && d.dst_folder !== d.folder ? ` → "${d.dst_folder}"` : ''
      return `folder "${d.folder}"${route}: ${d.messages ?? 0} messages — fetching (#${d.account_id})`
    }
    case 'cancelled':
      return `CANCELLED #${d.account_id} (${d.src_login}): copied ${d.copied ?? 0}, skipped ${d.skipped ?? 0}`
    case 'error': {
      const where = d.folder ? ` folder "${d.folder}"` : d.side ? ` (${d.side} ${at})` : ''
      return `ERROR #${d.account_id}${where}: ${d.error}`
    }
    case 'run_started':
      return `RUN started (run #${d.run_id})`
    case 'run_done':
      return `RUN finished: copied ${d.copied}, skipped ${d.skipped}, errors ${d.errors}`
    default:
      return JSON.stringify(ev.data)
  }
}

export function TaskDetail({ id }: { id: number }) {
  const [data, setData] = useState<TaskDetailData | null>(null)
  const [notFound, setNotFound] = useState(false)
  const [log, setLog] = useState<{ type: string; text: string }[]>([])
  const [form, setForm] = useState(emptyAccount)
  const [busy, setBusy] = useState<'test' | 'run' | 'add' | 'import' | 'delete' | null>(null)
  const confirm = useConfirm()
  const [error, setError] = useState<string | null>(null)
  const fileInputRef = useRef<HTMLInputElement>(null)

  function reload() {
    getTask(id)
      .then((d) => {
        setData(d)
        setNotFound(false)
      })
      .catch(() => setNotFound(true))
  }

  useEffect(reload, [id])

  useEffect(
    () =>
      connectTaskWS(id, (ev: TaskEvent) => {
        setLog((l) => [{ type: ev.type, text: describeEvent(ev) }, ...l].slice(0, 300))
        if (['account_started', 'account_test', 'account_done', 'progress', 'run_started', 'run_done', 'error', 'folder', 'cancelled'].includes(ev.type)) {
          reload()
        }
      }),
    [id],
  )

  async function submitAccount(e: FormEvent) {
    e.preventDefault()
    setBusy('add')
    setError(null)
    try {
      await createAccount(id, form)
      setForm(emptyAccount)
      reload()
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Failed to add account')
    } finally {
      setBusy(null)
    }
  }

  function downloadExampleCSV() {
    const sample = [
      'alice@source.example,SrcPass1,alice@dest.example,DstPass1',
      'bob@source.example,SrcPass2,bob@dest.example,DstPass2',
      'carol@source.example,SrcPass3,carol@dest.example,DstPass3',
    ].join('\n') + '\n'
    const url = URL.createObjectURL(new Blob([sample], { type: 'text/csv' }))
    const a = document.createElement('a')
    a.href = url
    a.download = 'imap-copier-accounts-example.csv'
    a.click()
    URL.revokeObjectURL(url)
  }

  async function onFileChosen(e: ChangeEvent<HTMLInputElement>) {
    const file = e.target.files?.[0]
    if (!file) return
    setBusy('import')
    setError(null)
    try {
      await importCSV(id, file)
      reload()
    } catch (err) {
      setError(err instanceof Error ? err.message : 'CSV import failed')
    } finally {
      setBusy(null)
      if (fileInputRef.current) fileInputRef.current.value = ''
    }
  }

  async function onDeleteAccount(accId: number, login: string) {
    const ok = await confirm({
      title: 'Remove account',
      message: `Remove account "${login}" from this task?`,
      confirmLabel: 'Remove',
      danger: true,
    })
    if (!ok) return
    setBusy('delete')
    setError(null)
    try {
      await deleteAccount(id, accId)
      reload()
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Failed to remove account')
    } finally {
      setBusy(null)
    }
  }

  async function onCancelAccount(accId: number) {
    setError(null)
    try {
      await cancelAccount(id, accId)
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Failed to cancel account')
    }
  }

  async function onTest() {
    setBusy('test')
    setError(null)
    try {
      await testAccounts(id)
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Failed to start connection tests')
    } finally {
      setBusy(null)
    }
  }

  async function onRun() {
    setBusy('run')
    setError(null)
    try {
      await runTask(id)
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Failed to start run')
    } finally {
      setBusy(null)
    }
  }

  if (notFound) {
    return (
      <div className="panel">
        <p>Task #{id} not found.</p>
        <a className="crumb" href="#/">
          ← back to tasks
        </a>
      </div>
    )
  }

  if (!data) {
    return <div className="muted-note">loading task #{id}…</div>
  }

  const { task, accounts } = data
  const allTested = accounts.length > 0 && accounts.every((a) => a.test_src_status === 'ok' && a.test_dst_status === 'ok')
  const totals = accounts.reduce(
    (acc, a) => ({ copied: acc.copied + a.copied, skipped: acc.skipped + a.skipped, errors: acc.errors + a.errors }),
    { copied: 0, skipped: 0, errors: 0 },
  )

  return (
    <>
      <div className="page-head">
        <div>
          <a className="crumb" href="#/">
            ← all tasks
          </a>
          <h1 className="page-title" style={{ marginTop: 6 }}>
            {task.name} <span className="idx">/// task #{task.id}</span>
          </h1>
        </div>
        <StatusBadge status={task.status} />
      </div>

      <div className="panel">
        <span className="panel-label">Run control</span>
        <div className="stat-row">
          <div className="stat ok">
            <span className="val mono-num">{totals.copied}</span>
            <span className="lbl">copied</span>
          </div>
          <div className="stat info">
            <span className="val mono-num">{totals.skipped}</span>
            <span className="lbl">skipped</span>
          </div>
          <div className="stat fail">
            <span className="val mono-num">{totals.errors}</span>
            <span className="lbl">errors</span>
          </div>
          <div className="stat">
            <span className="val mono-num">{accounts.length}</span>
            <span className="lbl">accounts</span>
          </div>
        </div>
        {error && <div className="error-banner">{error}</div>}
        <div className="btn-row" style={{ marginTop: 16 }}>
          <button className="btn" onClick={onTest} disabled={busy !== null || accounts.length === 0}>
            {busy === 'test' ? 'Testing…' : 'Test connections'}
          </button>
          <button className="btn btn-primary" onClick={onRun} disabled={busy !== null || !allTested || task.status === 'running'}>
            {busy === 'run' ? 'Starting…' : 'Run migration'}
          </button>
          {!allTested && accounts.length > 0 && <span className="hint">run unlocks once every account tests OK on both sides</span>}
        </div>
      </div>

      <div className="panel-grid">
        <div className="panel">
          <span className="panel-label">Add account</span>
          <form onSubmit={submitAccount}>
            <div className="field-row">
              <div className="field">
                <label htmlFor="src_login">Source login</label>
                <input
                  id="src_login"
                  value={form.src_login}
                  onChange={(e) => setForm({ ...form, src_login: e.target.value })}
                  required
                />
              </div>
              <div className="field">
                <label htmlFor="src_pass">Source password</label>
                <input
                  id="src_pass"
                  type="password"
                  value={form.src_pass}
                  onChange={(e) => setForm({ ...form, src_pass: e.target.value })}
                  required
                />
              </div>
            </div>
            <div className="field-row">
              <div className="field">
                <label htmlFor="dst_login">Destination login</label>
                <input
                  id="dst_login"
                  value={form.dst_login}
                  onChange={(e) => setForm({ ...form, dst_login: e.target.value })}
                  required
                />
              </div>
              <div className="field">
                <label htmlFor="dst_pass">Destination password</label>
                <input
                  id="dst_pass"
                  type="password"
                  value={form.dst_pass}
                  onChange={(e) => setForm({ ...form, dst_pass: e.target.value })}
                  required
                />
              </div>
            </div>
            <div className="btn-row">
              <button className="btn btn-primary" disabled={busy !== null}>
                {busy === 'add' ? 'Adding…' : 'Add account'}
              </button>
            </div>
          </form>

          <div className="divider-label">or bulk import</div>
          <div className="upload-row">
            <button className="btn file-btn" disabled={busy !== null}>
              {busy === 'import' ? 'Importing…' : 'Upload CSV'}
              <input ref={fileInputRef} type="file" accept=".csv,text/csv" onChange={onFileChosen} disabled={busy !== null} />
            </button>
            <button type="button" className="link-btn" onClick={downloadExampleCSV}>
              download example.csv
            </button>
          </div>
        </div>

        <div className="panel">
          <span className="panel-label">Event log</span>
          {log.length > 0 && (
            <button type="button" className="link-btn log-clear" onClick={() => setLog([])}>
              clear log
            </button>
          )}
          <div className="log-pane">
            {log.length === 0 ? (
              <div className="log-empty">awaiting events over websocket…</div>
            ) : (
              log.map((l, i) => (
                <div className="log-line" key={i}>
                  <span className="tag">{l.type}</span>
                  <span className="payload">{l.text}</span>
                </div>
              ))
            )}
          </div>
        </div>
      </div>

      <div className="panel">
        <span className="panel-label">Accounts ({accounts.length})</span>
        <div className="tbl-wrap">
          <table className="tbl">
            <thead>
              <tr>
                <th>Source</th>
                <th>Destination</th>
                <th>Src test</th>
                <th>Dst test</th>
                <th>Status</th>
                <th>Copied</th>
                <th>Skipped</th>
                <th>Errors</th>
                <th></th>
              </tr>
            </thead>
            <tbody>
              {accounts.length === 0 ? (
                <tr className="empty-row">
                  <td colSpan={9}>no accounts yet — add one or import a CSV above</td>
                </tr>
              ) : (
                accounts.map((a) => (
                  <tr key={a.id}>
                    <td>{a.src_login}</td>
                    <td>{a.dst_login}</td>
                    <td>
                      <StatusBadge status={a.test_src_status} />
                    </td>
                    <td>
                      <StatusBadge status={a.test_dst_status} />
                    </td>
                    <td>
                      <StatusBadge status={a.status} />
                    </td>
                    <td className="num-cell">{a.copied}</td>
                    <td className="num-cell">{a.skipped}</td>
                    <td className="num-cell">{a.errors}</td>
                    <td className="num-cell">
                      {a.status === 'running' ? (
                        <button type="button" className="link-btn danger" onClick={() => onCancelAccount(a.id)}>
                          cancel
                        </button>
                      ) : (
                        <button
                          type="button"
                          className="link-btn danger"
                          onClick={() => onDeleteAccount(a.id, a.src_login)}
                          disabled={busy !== null || data?.task.status === 'running'}
                        >
                          remove
                        </button>
                      )}
                    </td>
                  </tr>
                ))
              )}
            </tbody>
          </table>
        </div>
      </div>
    </>
  )
}