// views-results.jsx — the results view (summary, segments, errors, edit distance, diff)

function severityClass(s) {
  return 'tag-' + (s || '').toLowerCase();
}

function ScoreCard({ data }) {
  const m = data.metrics || {};
  const qs = m.quality_score || 0;
  const band = qs >= 95 ? 'Excellent' : qs >= 90 ? 'Good' : qs >= 80 ? 'Fair' : qs >= 70 ? 'Poor' : 'Very poor';
  const fillClass = qs >= 90 ? '' : qs >= 75 ? 'warn' : 'bad';
  return (
    <div className="score-card">
      <div className="lbl">Quality Score (MQM)</div>
      <div className="score-big">
        {qs.toFixed(2)}<span className="pct">%</span>
      </div>
      <div className="score-band">
        <div style={{ display: 'flex', justifyContent: 'space-between' }}>
          <span>{band} &middot; penalty {m.penalty} / {m.source_word_count} words</span>
          <span>MQM-Core 2.0</span>
        </div>
        <div className="score-bar"><div className={'fill ' + fillClass} style={{ width: Math.min(100, qs) + '%' }} /></div>
      </div>
    </div>
  );
}

function SeverityCard({ data }) {
  const c = data.metrics?.counts || { critical: 0, major: 0, minor: 0 };
  const max = Math.max(1, c.critical, c.major, c.minor);
  const rows = [
    { id: 'critical', label: 'Critical', mult: '\u00d725', count: c.critical },
    { id: 'major',    label: 'Major',    mult: '\u00d75',  count: c.major },
    { id: 'minor',    label: 'Minor',    mult: '\u00d71',  count: c.minor },
  ];
  return (
    <div className="score-card">
      <div className="lbl">Errors by severity</div>
      <div className="sev-list">
        {rows.map((r) => (
          <div key={r.id} className={'sev-row ' + severityClass(r.id)}>
            <div className="lbl"><span className="tag" /> {r.label} <span className="muted">{r.mult}</span></div>
            <div className="sev-bar"><div className={'fill ' + r.id} style={{ width: (r.count / max * 100) + '%' }} /></div>
            <div className="count">{r.count}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

function DimensionsCard({ data }) {
  const d = data.metrics?.dimension_counts || {};
  const entries = Object.entries(d).filter(([, v]) => v > 0);
  const max = Math.max(1, ...entries.map(([, v]) => v));
  return (
    <div className="score-card">
      <div className="lbl">By dimension</div>
      {entries.length === 0 ? (
        <div className="muted" style={{ fontFamily: 'var(--font-mono)', fontSize: 12 }}>No errors flagged.</div>
      ) : (
        <div className="dims-grid">
          {entries.map(([k, v]) => (
            <div className="dim-row" key={k}>
              <div className="lbl">{k}</div>
              <div className="dim-bar"><div className="fill" style={{ width: (v / max * 100) + '%' }} /></div>
              <div className="count">{v}</div>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}

function ErrorsPanel({ data, onJumpToSegment }) {
  const [filter, setFilter] = React.useState('all');
  const errors = (data.errors || []).slice().sort((a, b) => {
    const order = { critical: 0, major: 1, minor: 2 };
    return (order[a.severity] ?? 9) - (order[b.severity] ?? 9) || (a.segment_id - b.segment_id);
  });
  const filtered = filter === 'all' ? errors : errors.filter((e) => e.severity === filter);

  return (
    <div>
      <div style={{ display: 'flex', gap: 8, marginBottom: 12, alignItems: 'center' }}>
        <span className="muted" style={{ fontSize: 12, fontFamily: 'var(--font-mono)' }}>Filter:</span>
        {['all', 'critical', 'major', 'minor'].map((f) => (
          <button key={f} className={'btn sm ' + (filter === f ? '' : 'secondary')} onClick={() => setFilter(f)}>
            {f}
          </button>
        ))}
      </div>
      <table className="errors-table">
        <thead>
          <tr>
            <th>Seg</th><th>Category</th><th>Severity</th><th>Pen</th><th>Description &amp; suggestion</th>
          </tr>
        </thead>
        <tbody>
          {filtered.map((e, i) => (
            <tr key={i} onClick={() => onJumpToSegment && onJumpToSegment(e.segment_id)} style={{ cursor: 'pointer' }}>
              <td className="seg-id">#{e.segment_id}</td>
              <td className="cat">{e.category}<br/><span className="muted">{e.subcategory}</span></td>
              <td className={'sev ' + severityClass(e.severity)}>{e.severity}</td>
              <td className="pen">{window.SEVERITY_WEIGHTS[e.severity] || 0}</td>
              <td className="desc">
                {e.description}
                {(e.target_span || e.suggestion) && (
                  <span className="src">
                    {e.target_span && <><b className="muted">was: </b>"{e.target_span}"</>}
                    {e.suggestion && <> &nbsp;{'\u2192'}&nbsp; <b className="muted">PE: </b>"{e.suggestion}"</>}
                  </span>
                )}
              </td>
            </tr>
          ))}
          {filtered.length === 0 && (
            <tr><td colSpan={5} className="muted" style={{ padding: 24, textAlign: 'center' }}>No errors at this severity.</td></tr>
          )}
        </tbody>
      </table>
    </div>
  );
}

function SegmentsPanel({ data, selected, onToggleSelect, onSelectAll, onClearSelection, onRerun, rerunning }) {
  const segs = data.segments || [];
  const errBySeg = {};
  for (const e of (data.errors || [])) {
    errBySeg[e.segment_id] = (errBySeg[e.segment_id] || 0) + 1;
  }
  const allSelected = selected.size > 0 && selected.size === segs.length;
  return (
    <div>
      {selected.size > 0 && (
        <div className="rerun-bar">
          <div>
            <b>{selected.size}</b> segment{selected.size === 1 ? '' : 's'} selected
            <span className="muted"> &middot; re-run the assessment for just these segments</span>
          </div>
          <div style={{ display: 'flex', gap: 8 }}>
            <button className="btn sm secondary" onClick={onClearSelection}>Clear</button>
            <button className="btn sm" disabled={rerunning} onClick={onRerun}>
              {rerunning ? <><span className="spinner"/>&nbsp;Re-running</> : 'Re-run on selected'}
            </button>
          </div>
        </div>
      )}
      <table className="segments-table">
        <thead>
          <tr>
            <th>
              <button className={'chk ' + (allSelected ? 'on' : '')}
                      onClick={(e) => { e.stopPropagation(); allSelected ? onClearSelection() : onSelectAll(); }}>
                {allSelected && window.Icon.check}
              </button>
            </th>
            <th>#</th>
            <th>Section</th>
            <th>Source</th>
            <th>Target</th>
          </tr>
        </thead>
        <tbody>
          {segs.map((s) => {
            const has = errBySeg[s.id];
            const sel = selected.has(s.id);
            return (
              <tr key={s.id} id={`seg-${s.id}`}>
                <td>
                  <button className={'chk ' + (sel ? 'on' : '')} onClick={() => onToggleSelect(s.id)}>
                    {sel && window.Icon.check}
                  </button>
                </td>
                <td className="seg-id">#{s.id}</td>
                <td className="section">{s.section || '\u2014'}</td>
                <td className={'src ' + (has ? 'has-err' : '')}>{s.source}</td>
                <td className="tgt">{s.target}</td>
              </tr>
            );
          })}
        </tbody>
      </table>
    </div>
  );
}

function DiffPanel({ data }) {
  const edited = (data.segments || []).filter((s) => s.lev_distance > 0);
  if (edited.length === 0) {
    return <div className="empty">No post-edits suggested.</div>;
  }
  return (
    <table className="diff-table">
      <thead>
        <tr>
          <th>#</th>
          <th>Dist.</th>
          <th>Original target {'\u2192'} suggested correction</th>
        </tr>
      </thead>
      <tbody>
        {edited.map((s) => {
          const diff = window.wordDiff(s.target, s.corrected);
          return (
            <tr key={s.id}>
              <td className="seg-id">#{s.id}</td>
              <td className="dist">{s.lev_distance}<br/><span className="muted">{(s.lev_norm * 100).toFixed(0)}%</span></td>
              <td>
                {diff.map((d, i) => {
                  if (d.op === 'eq') return <span key={i}>{d.text}</span>;
                  if (d.op === 'ins') return <span key={i} className="diff-ins">{d.text}</span>;
                  return <span key={i} className="diff-del">{d.text}</span>;
                })}
              </td>
            </tr>
          );
        })}
      </tbody>
    </table>
  );
}

function ResultsView({ project, data, onDownloadXlsx, onDownloadDocx, onRerunSelected, rerunning }) {
  const [tab, setTab] = React.useState('errors');
  const [selected, setSelected] = React.useState(new Set());

  const toggleSelect = (id) => {
    setSelected((S) => {
      const n = new Set(S);
      if (n.has(id)) n.delete(id); else n.add(id);
      return n;
    });
  };
  const selectAll = () => setSelected(new Set((data.segments || []).map((s) => s.id)));
  const clearSelection = () => setSelected(new Set());

  const jumpToSegment = (id) => {
    setTab('segments');
    setTimeout(() => {
      const el = document.getElementById(`seg-${id}`);
      if (el) {
        const rect = el.getBoundingClientRect();
        window.scrollTo({ top: window.scrollY + rect.top - 100, behavior: 'smooth' });
        el.style.background = 'var(--accent-soft)';
        setTimeout(() => { el.style.background = ''; }, 1500);
      }
    }, 60);
  };

  const m = data.metrics || {};

  return (
    <>
      <div className="page-h">
        <div>
          <h1 className="page-title">{project.name}</h1>
          <div className="results-h">
            <div className="meta">
              <span><b>Pair:</b> {data.source_language || '?'} {'\u2192'} {data.target_language || '?'}</span>
              <span><b>Domain:</b> {data.domain || '\u2014'}</span>
              <span><b>Words:</b> {(m.source_word_count || 0).toLocaleString()}</span>
              <span><b>Segments:</b> {(data.segments || []).length}</span>
              <span><b>Errors:</b> {(data.errors || []).length}</span>
              <span><b>Penalty:</b> {m.penalty}</span>
            </div>
          </div>
        </div>
        <div className="page-actions">
          <button className="btn secondary" onClick={onDownloadDocx}>{window.Icon.download}&nbsp;&nbsp;Corrected .docx</button>
          <button className="btn accent" onClick={onDownloadXlsx}>{window.Icon.download}&nbsp;&nbsp;MQM .xlsx</button>
        </div>
      </div>

      <div className="score-grid">
        <ScoreCard data={data} />
        <SeverityCard data={data} />
        <DimensionsCard data={data} />
      </div>

      <div className="verdict">
        <div className="verdict-h">Verdict</div>
        <p>{data.verdict || 'No verdict available.'}</p>
      </div>

      <div className="tabs">
        <button className={tab === 'errors' ? 'active' : ''} onClick={() => setTab('errors')}>
          Errors <span className="count">{(data.errors || []).length}</span>
        </button>
        <button className={tab === 'segments' ? 'active' : ''} onClick={() => setTab('segments')}>
          Segments <span className="count">{(data.segments || []).length}</span>
        </button>
        <button className={tab === 'diff' ? 'active' : ''} onClick={() => setTab('diff')}>
          Diff <span className="count">{(data.segments || []).filter((s) => s.lev_distance > 0).length}</span>
        </button>
      </div>

      <div className="tab-panel">
        {tab === 'errors' && <ErrorsPanel data={data} onJumpToSegment={jumpToSegment} />}
        {tab === 'segments' && (
          <SegmentsPanel
            data={data}
            selected={selected}
            onToggleSelect={toggleSelect}
            onSelectAll={selectAll}
            onClearSelection={clearSelection}
            onRerun={() => onRerunSelected([...selected])}
            rerunning={rerunning}
          />
        )}
        {tab === 'diff' && <DiffPanel data={data} />}
      </div>
    </>
  );
}

Object.assign(window, { ResultsView });