import {useState} from 'react';
import type {Direction,EvidenceData} from './types';
const definitions:Record<string,string>={
 'TM-score':'Similarity between predicted structures for generated and reference sequences. Higher is better; this is not comparison to experimental ground truth.',
 'Sequence recovery':'Positional identity divided by the shorter sequence length, shown as a percentage. Higher is better.',
 'Keyword recovery':'Fraction of reference functional keywords recovered in the generated protein annotation. Only cases with valid reference keywords are scored (476 of the 500 pairs).',
 'ProTrek score':'ProTrek-650M text–sequence matching score (cosine similarity divided by model temperature). A computational proxy for prompt alignment, not experimental function.',
 'Inverse folding recovery':'ESM-IF1 sequence recovery from the predicted structure, shown as a percentage. This measures structural sequence consistency, not function.',
 'Inverse folding SW':'Smith–Waterman similarity between the ESM-IF1 inverse-folded sequence and the generated sequence (raw alignment score). Length dependent; compare on the same evaluation set.',
 'pLDDT':'Predicted structural confidence, averaged across residues. Higher is better; it does not measure enzymatic activity.',
 'BLEU-4':'Mean sentence-level BLEU-4 × 100. Measures agreement with reference annotation text, not functional correctness.',
 'ROUGE-L':'Custom whitespace-tokenized, Porter-stemmed token LCS F1 × 100. Measures text agreement.'
};
export function Evidence({data}:{data:EvidenceData}){
 const [task,setTask]=useState<Direction>('t2p'),[metric,setMetric]=useState('Sequence recovery'),[scale,setScale]=useState(3),[picked,setPicked]=useState('Ouroboros');
 const switchTask=(d:Direction)=>{setTask(d);setMetric(d==='t2p'?'Sequence recovery':'BLEU-4');setPicked('Ouroboros');};
 const values=data.metrics.filter(r=>r.task===task&&r.metric===metric&&r.split===data.dataset.id).sort((a,b)=>b.mean-a.mean);
 const factor=['Sequence recovery','Keyword recovery','Inverse folding recovery'].includes(metric)?100:1;
 const max=Math.max(...values.map(r=>r.mean))*factor*1.08;
 const selected=values.find(r=>r.model===picked);
 return <section className="section evidence-section" id="evidence">
  <div className="section-heading"><div><p className="eyebrow"><span>04</span> ARCHIVED BENCHMARKS</p><h2>Two directions.<br/><em>Measurable results.</em></h2></div><p className="section-deck">Explore both directions through<br/>interactive model comparisons from<br/>the archived evaluation results.</p></div>
  <div className="evidence-grid"><div className="benchmark-panel"><div className="benchmark-top"><div className="segmented" role="group" aria-label="Benchmark task"><button aria-pressed={task==='t2p'} onClick={()=>switchTask('t2p')}>Text → Protein</button><button aria-pressed={task==='p2t'} onClick={()=>switchTask('p2t')}>Protein → Text</button></div><div className="benchmark-dataset"><strong>{data.dataset.name}</strong><span>{data.dataset.pairs} protein–text pairs</span></div></div><div className="metric-tabs" role="group" aria-label="Benchmark metric">{(task==='t2p'?['Sequence recovery','Keyword recovery','ProTrek score','TM-score','Inverse folding recovery','Inverse folding SW','pLDDT']:['BLEU-4','ROUGE-L']).map(m=><button key={m} aria-pressed={metric===m} onClick={()=>setMetric(m)}>{m}</button>)}</div><div className="chart-label"><span className="micro">{metric.toUpperCase()}</span><span>↑ Higher is better</span></div><div className="bar-chart" aria-label={`${metric} model comparison`}>{values.map(r=><button className={'bar-row '+(r.model==='Ouroboros'?'ours':'')} key={r.model} onClick={()=>setPicked(r.model)} aria-pressed={picked===r.model} aria-label={`${r.model}: ${(r.mean*factor).toFixed(2)}, ${r.n} examples`}><span className="bar-name">{r.model}</span><span className="bar-track"><span style={{width:((r.mean*factor)/max*100)+'%'}}/></span><strong>{(r.mean*factor).toFixed(metric==='TM-score'?3:2)}</strong></button>)}</div><p className="chart-definition">{definitions[metric]}</p><p className="chart-selection" aria-live="polite">{selected?`${selected.model} · n = ${selected.n} · ${metric} = ${(selected.mean*factor).toFixed(4)}`:'Choose a model to inspect its score.'}</p></div>
  <div className="scaling-panel"><span className="micro">MODEL SIZE EXPLORER</span><h3>A family of<br/>bidirectional models.</h3><p>Text-to-protein recovery on the same 500 Swiss-Prot time-cutoff references.</p><div className="scale-readout" aria-live="polite"><strong>{data.scaling[scale].recovery.toFixed(2)}<small>%</small></strong><span>{data.scaling[scale].size} · {(data.scaling[scale].parameters/1e6).toFixed(0)}M parameters</span></div><div className="scaling-bars" role="group" aria-label="Model size">{data.scaling.map((r,i)=><button aria-pressed={i===scale} onClick={()=>setScale(i)} key={r.size}><span className="scale-bar-space"><i style={{height:`${r.recovery/25*100}%`}}/></span><span>{r.size}</span></button>)}</div><p className="scaling-note">Matched evaluation set. Large uses the archived main result; its exact sampling settings were not preserved. This is a descriptive comparison.</p></div></div>
  <details className="evidence-notes"><summary>Evaluation notes & source data</summary><p>The 500-pair Swiss-Prot time-cutoff dataset is temporally held out and cluster diverse; low sequence homology to training has not been established. Prot2Text comparators use their best observed completed valid configuration on this dataset. These comparisons do not establish an independently validated overall model ranking. No significance claim or fitted scaling law is made.</p><div className="source-links"><a href="/data/evidence.json" download>↓ Evaluation data</a><a href="/data/provenance.json" download>↓ Sources & checksums</a></div></details>
 </section>;
}