// screens-jobs.jsx

function Jobs({ navigate }) {
  const [tab, setTab] = React.useState('all');
  const [jobs, setJobs] = React.useState(window.ZAMPP_DATA.JOBS);
  const [lastFetch, setLastFetch] = React.useState(Date.now());

  // Poll for job updates every 5s
  React.useEffect(() => {
    const poll = () => {
      window.ZAMPP_API.fetch('/jobs')
        .then(raw => {
          const normalized = (raw || []).map(j => {
            const statusMap = { waiting: 'queued', active: 'running', completed: 'done', failed: 'failed' };
            const kindMap = { proxy: 'Proxy', thumbnail: 'Thumbnail', conform: 'Conform', transcode: 'Transcode' };
            const meta = j.metadata || {};
            return {
              ...j,
              status: statusMap[j.status] || j.status,
              kind: kindMap[j.type] || j.type || 'Job',
              asset: j.asset_name || meta.filename || '—',
              eta: '—',
              node: meta.node || '—',
              priority: meta.priority || 'normal',
              error: j.error || null,
              progress: j.progress || 0,
            };
          });
          window.ZAMPP_DATA.JOBS = normalized;
          setJobs(normalized);
          setLastFetch(Date.now());
        })
        .catch(() => {});
    };
    const i = setInterval(poll, 5000);
    return () => clearInterval(i);
  }, []);

  const counts = {
    all:     jobs.length,
    running: jobs.filter(j => j.status === 'running').length,
    queued:  jobs.filter(j => j.status === 'queued').length,
    done:    jobs.filter(j => j.status === 'done').length,
    failed:  jobs.filter(j => j.status === 'failed').length,
  };
  const filtered = tab === 'all' ? jobs : jobs.filter(j => j.status === tab);

  return (
    <div className="page">
      <div className="page-header">
        <h1>Jobs</h1>
        <span className="subtitle">Proxy generation, transcoding, and processing queue</span>
        <div className="spacer" />
        <button className="btn ghost sm" onClick={() => window.ZAMPP_API.fetch('/jobs').then(raw => { const norm = (raw||[]).map(j => ({ ...j, status: ({waiting:'queued',active:'running',completed:'done',failed:'failed'})[j.status]||j.status, kind: ({proxy:'Proxy',thumbnail:'Thumbnail',conform:'Conform',transcode:'Transcode'})[j.type]||j.type||'Job', asset: j.asset_name||'—', eta:'—', node:(j.metadata||{}).node||'—', priority:(j.metadata||{}).priority||'normal', error:j.error||null, progress:j.progress||0 })); setJobs(norm); })}>
          <Icon name="refresh" />Refresh
        </button>
      </div>

      <div className="page-body">
        <div className="jobs-stats">
          <div className="stat-card">
            <div className="label">Running</div>
            <div className="value">{counts.running}</div>
            <div className="delta">{counts.queued} queued</div>
          </div>
          <div className="stat-card">
            <div className="label">Completed</div>
            <div className="value">{counts.done}</div>
            <div className="delta">Total done</div>
          </div>
          <div className="stat-card">
            <div className="label">Failed</div>
            <div className="value">{counts.failed}</div>
            <div className="delta" style={{ color: counts.failed > 0 ? 'var(--warning)' : '' }}>
              {counts.failed > 0 ? 'Needs attention' : 'All clear'}
            </div>
          </div>
          <div className="stat-card">
            <div className="label">Total jobs</div>
            <div className="value">{counts.all}</div>
            <div className="delta muted" style={{ fontSize: 10.5 }}>Updated {Math.round((Date.now()-lastFetch)/1000)}s ago</div>
          </div>
        </div>

        <div className="tab-group" style={{ marginTop: 20, width: 'fit-content' }}>
          {[
            { id: 'all',     label: 'All · ' + counts.all },
            { id: 'running', label: 'Running · ' + counts.running },
            { id: 'queued',  label: 'Queued · ' + counts.queued },
            { id: 'done',    label: 'Done · ' + counts.done },
            { id: 'failed',  label: 'Failed · ' + counts.failed },
          ].map(t => (
            <button key={t.id} className={tab === t.id ? 'active' : ''} onClick={() => setTab(t.id)}>{t.label}</button>
          ))}
        </div>

        <div className="panel" style={{ marginTop: 12 }}>
          <div className="job-row head">
            <div></div><div>Job</div><div>Asset</div><div>Node</div><div>Progress</div><div>ETA</div><div>Priority</div><div></div>
          </div>
          {filtered.length === 0
            ? <div style={{ padding: '24px', textAlign: 'center', color: 'var(--text-3)' }}>No jobs in this category.</div>
            : filtered.map(j => <JobRow key={j.id} job={j} />)}
        </div>
      </div>
    </div>
  );
}

function JobRow({ job }) {
  const iconMap = { Proxy: 'proxy', Transcode: 'film', Thumbnail: 'image', Conform: 'layers' };
  return (
    <div className="job-row">
      <div><StatusDot status={job.status} /></div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
        <Icon name={iconMap[job.kind] || 'jobs'} size={13} style={{ color: 'var(--text-3)' }} />
        <span style={{ fontWeight: 500 }}>{job.kind}</span>
      </div>
      <div style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', color: 'var(--text-2)' }}>{job.asset}</div>
      <div className="mono" style={{ fontSize: 11.5, color: 'var(--text-3)' }}>{job.node}</div>
      <div>
        {job.status === 'running' && (
          <div className="job-progress-wrap">
            <div className="job-progress-bar"><div className="job-progress-fill" style={{ width: job.progress + '%' }} /></div>
            <span className="mono" style={{ fontSize: 10.5, color: 'var(--text-3)', minWidth: 32, textAlign: 'right' }}>{Math.round(job.progress)}%</span>
          </div>
        )}
        {job.status === 'done' && <span className="badge success" style={{ background: 'transparent', padding: 0 }}><Icon name="check" size={12} /> Complete</span>}
        {job.status === 'queued' && <span style={{ fontSize: 12, color: 'var(--text-3)' }}>Waiting…</span>}
        {job.status === 'failed' && <span style={{ fontSize: 12, color: 'var(--danger)', display: 'flex', alignItems: 'center', gap: 4 }}><Icon name="alert" size={12} />{job.error || 'Failed'}</span>}
      </div>
      <div className="mono" style={{ fontSize: 12, color: 'var(--text-3)' }}>{job.eta}</div>
      <div><span className={'badge ' + (job.priority === 'high' ? 'warning' : 'outline')}>{job.priority}</span></div>
      <div>
        {job.status === 'failed' && <button className="btn ghost sm"><Icon name="refresh" />Retry</button>}
        {(job.status === 'queued' || job.status === 'done') && <button className="icon-btn"><Icon name="more" /></button>}
      </div>
    </div>
  );
}

window.Jobs = Jobs;