// Project-scoped validator ledger panel. The pure protocol model lives in
// lib/validator-verdict.js; this component owns only fetch lifecycle and paint.
const { useEffect: useEffectVerdicts, useState: useStateVerdicts } = React;

const ValidatorVerdictsPanel = ({ task, projectSlug }) => {
  const [network, setNetwork] = useStateVerdicts({ status: projectSlug ? 'loading' : 'ready', rows: [] });

  useEffectVerdicts(() => {
    if (!projectSlug || !task?.id) {
      setNetwork({ status: 'ready', rows: [] });
      return undefined;
    }
    let cancelled = false;
    if (!window.Api?.getTaskValidatorVerdicts) {
      setNetwork({ status: 'error', error: new Error('validator verdict API is unavailable') });
      return () => { cancelled = true; };
    }
    setNetwork({ status: 'loading' });
    window.Api.getTaskValidatorVerdicts(projectSlug, task.id)
      .then((data) => { if (!cancelled) setNetwork({ status: 'ready', rows: data?.verdicts }); })
      .catch((error) => { if (!cancelled) setNetwork({ status: 'error', error }); });
    return () => { cancelled = true; };
  }, [projectSlug, task?.id]);

  if (!projectSlug) return (
    <section className="lg:col-span-2 bg-white border-2 border-neutral-200 rounded-2xl p-6">
      <div className="text-[11px] font-bold uppercase tracking-[0.22em] text-neutral-700 mb-2">Validator verdicts</div>
      <p className="text-sm text-neutral-500">Validator verdict ledger unavailable for this task.</p>
    </section>
  );

  const view = window.ValidatorVerdict.verdictView(network);
  if (view.state === 'loading') return <VerdictState message="Loading validator verdicts…" />;
  if (view.state === 'empty') return <VerdictState message="No validator verdicts recorded for this task." />;
  if (view.state === 'error') return <VerdictState error message={`Could not load validator verdicts: ${view.message.replace(/^Could not load validator verdicts:\s*/, '')}`} />;

  return (
    <section className="lg:col-span-2 bg-white border-2 border-indigo-200 rounded-2xl p-6 space-y-4">
      <div>
        <div className="text-[11px] font-bold uppercase tracking-[0.22em] text-indigo-700">Validator verdicts</div>
        <p className="text-sm text-neutral-600 mt-1">Recorded validator decisions and their session-scoped evidence.</p>
      </div>
      {view.rows.map((row) => <VerdictRow key={`${row.sessionId}-${row.ts}`} row={row} />)}
    </section>
  );
};

const VerdictState = ({ message, error = false }) => (
  <section className={`lg:col-span-2 border-2 rounded-2xl p-6 ${error ? 'bg-red-50 border-red-200' : 'bg-white border-neutral-200'}`}>
    <div className={`text-[11px] font-bold uppercase tracking-[0.22em] mb-2 ${error ? 'text-red-700' : 'text-neutral-700'}`}>Validator verdicts</div>
    <p className={`text-sm ${error ? 'text-red-700' : 'text-neutral-500'}`}>{message}</p>
  </section>
);

const VerdictRow = ({ row }) => (
  <article className="border border-neutral-200 rounded-xl p-4 space-y-3">
    <div className="flex flex-wrap gap-2 items-center">
      <span className="text-sm font-bold text-neutral-900">{row.classLabel}</span>
      <span className="text-xs font-semibold px-2 py-1 rounded-full bg-indigo-50 border border-indigo-200 text-indigo-800">{row.bandLabel}</span>
      <span className="text-xs text-neutral-500">Validator {row.validatorId} · session {row.sessionId}</span>
    </div>
    <p className="text-sm text-neutral-700 whitespace-pre-wrap">{row.feedback}</p>
    <div>
      <div className="text-[10px] font-bold uppercase tracking-widest text-neutral-500 mb-1">Evidence</div>
      <ul className="space-y-1">
        {row.evidence.map((pointer) => <li key={`${pointer.artifact}-${pointer.fromSeq}-${pointer.toSeq}`} className="font-mono text-xs text-neutral-700">{pointer.artifact} · events {pointer.fromSeq}–{pointer.toSeq}</li>)}
      </ul>
    </div>
    <div className="text-xs text-neutral-600 border-t border-neutral-100 pt-3">
      <span className="font-bold text-neutral-800">Validator spend</span>{' '}
      ${row.spend.cost.toFixed(4)} · {row.spend.totalTokens.toLocaleString()} tokens
    </div>
  </article>
);

window.ValidatorVerdictsPanel = ValidatorVerdictsPanel;