/* global React, YComps, YagodaStore */
const { useState, useEffect, useMemo, useCallback } = React;
const Y = window.YagodaStore;
const { Chip, JsonView, DriftChart, BenchmarkChart, BenchmarkDeltaBars, useToast, I } = window.YComps;

// ---------- Run detail drawer ----------
function RunDrawer({ run, runs, snapshots, alerts, onClose, onSnapshot, onTagChange, onCompare }) {
  const [tab, setTab] = useState('summary');
  const linkedAlerts = alerts.filter(a => a.run_id === run.run_id);
  const linkedSnaps = snapshots.filter(s => s.run_id === run.run_id);
  const goldenRun = runs.find(r => r.tags?.includes('golden'));
  const baseline = useMemo(() => {
    const idx = runs.findIndex(r => r.run_id === run.run_id);
    for (let i = idx-1; i >= 0; i--) if (runs[i].drift_state === 'stable') return runs[i];
    return null;
  }, [run, runs]);
  const compare = useMemo(() => Y.compareRuns(run, baseline), [run, baseline]);
  const goldCompare = useMemo(() => goldenRun && goldenRun.run_id !== run.run_id ? Y.compareRuns(run, goldenRun) : null, [run, goldenRun]);

  const toggleTag = (tag) => {
    const has = run.tags?.includes(tag);
    const next = has ? run.tags.filter(t => t !== tag) : [...(run.tags||[]), tag];
    onTagChange(run.run_id, next);
  };
  const TAGS = ['stable','warning','unstable','recalibrated','ignored','needs review','bad run','golden'];

  return (
    <>
      <div className="drawer-backdrop" onClick={onClose}/>
      <div className="drawer">
        <div className="drawer-head">
          <div>
            <div className="drawer-title">{run.run_id}</div>
            <div className="drawer-sub">{run.experiment} · {run.sample} · {run.framework}</div>
            <div style={{display:'flex', gap:6, marginTop:10, flexWrap:'wrap'}}>
              <Chip kind={run.derived_status}>{run.derived_status}</Chip>
              <Chip kind={run.benchmark_status==='regression'?'regression':run.benchmark_status}>{`Bench ${run.benchmark_delta>0?'+':''}${run.benchmark_delta}`}</Chip>
              <Chip kind="info">{`Drift ${run.deviation}%`}</Chip>
              {run.tags?.includes('golden') && <Chip kind="golden">Golden Run</Chip>}
            </div>
          </div>
          <button className="btn btn-ghost btn-icon" onClick={onClose}>{I.close}</button>
        </div>

        <div style={{display:'flex', gap:0, padding:'0 22px', borderBottom:'1px solid var(--border)'}}>
          {['summary','what changed','calibration','snapshot','metadata'].map(t => (
            <button key={t} onClick={()=>setTab(t)} style={{
              background:'transparent', border:'none', color: tab===t?'var(--text)':'var(--muted)',
              padding:'12px 14px', fontFamily:'var(--mono)', fontSize:11, letterSpacing:'0.1em',
              textTransform:'uppercase', cursor:'pointer', borderBottom: tab===t?'2px solid var(--strawberry)':'2px solid transparent'
            }}>{t}</button>
          ))}
        </div>

        <div className="drawer-body">
          {tab==='summary' && (
            <>
              <div className="drawer-section">
                <h4>Run metadata</h4>
                <dl className="kv">
                  <dt>Run ID</dt><dd>{run.run_id}</dd>
                  <dt>Framework</dt><dd>{run.framework}</dd>
                  <dt>Experiment</dt><dd>{run.experiment}</dd>
                  <dt>Sample</dt><dd>{run.sample}</dd>
                  <dt>Parameter Sweep</dt><dd>{run.parameter_sweep}</dd>
                  <dt>Instrument State</dt><dd>{run.instrument_state}</dd>
                  <dt>Dataset Path</dt><dd>{run.dataset_path}</dd>
                  <dt>Timestamp</dt><dd>{run.timestamp}</dd>
                  {run.quantify_extras && <><dt>TUID</dt><dd>{run.quantify_extras.tuid}</dd></>}
                  {run.quantify_extras && <><dt>Analysis</dt><dd>{run.quantify_extras.analysis_name}</dd></>}
                  {run.quantify_extras && <><dt>Processed dataset</dt><dd>{run.quantify_extras.processed_dataset_available?'yes':'no'}</dd></>}
                </dl>
              </div>
              <div className="drawer-section">
                <h4>Manual tags</h4>
                <div style={{display:'flex', gap:6, flexWrap:'wrap'}}>
                  {TAGS.map(t => (
                    <span key={t} className={`tag-pill ${run.tags?.includes(t)?'on':''} ${t==='golden' && run.tags?.includes(t)?'golden':''}`} onClick={()=>toggleTag(t)}>
                      {t==='golden' && '★ '}{t}
                    </span>
                  ))}
                </div>
              </div>
              <div className="drawer-section">
                <h4>Linked alerts ({linkedAlerts.length})</h4>
                {linkedAlerts.length===0 ? <div style={{color:'var(--muted)', fontSize:12}}>No alerts.</div> : linkedAlerts.map((a,i) => (
                  <div key={i} style={{padding:'8px 0', borderBottom:'1px solid var(--border)', fontSize:12}}>
                    <div style={{display:'flex', alignItems:'center', gap:8}}>
                      <span className={`sev-dot ${a.severity}`}/>
                      <span style={{fontFamily:'var(--mono)', textTransform:'uppercase', fontSize:10, color:'var(--muted)', letterSpacing:'0.1em'}}>{a.alert_type}</span>
                    </div>
                    <div style={{marginTop:4}}>{a.message}</div>
                    <div style={{color:'var(--muted)', marginTop:2, fontSize:11}}>{a.recommended_action}</div>
                  </div>
                ))}
              </div>
              <div className="drawer-section">
                <h4>Snapshot status</h4>
                <div style={{display:'flex', alignItems:'center', justifyContent:'space-between'}}>
                  <div>
                    <div style={{fontSize:12}}>Completeness: <strong>{run.snapshot_completeness}%</strong></div>
                    <div style={{fontSize:11, color:'var(--muted)', marginTop:2}}>Station snapshot: {run.station_snapshot_available?'available':'unavailable'} · Instrument snapshot: {run.instrument_snapshot_available?'available':'unavailable'}</div>
                    <div style={{fontSize:11, color:'var(--muted)', marginTop:2}}>{linkedSnaps.length} reproducibility snapshot{linkedSnaps.length===1?'':'s'} on file</div>
                  </div>
                  <button className="btn btn-primary" onClick={()=>onSnapshot(run)}>Generate snapshot</button>
                </div>
              </div>
            </>
          )}

          {tab==='what changed' && (
            <>
              <div className="drawer-section">
                <h4>What changed since previous stable run</h4>
                {!compare ? <div style={{color:'var(--muted)', fontSize:12}}>No prior stable run to compare against.</div> : (
                  <>
                    <div style={{fontSize:12, marginBottom:10, color:'var(--muted)'}}>Baseline: <span style={{color:'var(--cyan)', fontFamily:'var(--mono)'}}>{compare.baseline_run_id}</span></div>
                    <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:10, marginBottom:14}}>
                      <div className="metric"><div className="metric-label">Benchmark movement</div><div className="metric-value" style={{color: compare.benchmark_movement<0?'var(--strawberry)':'var(--leaf)'}}>{compare.benchmark_movement>0?'+':''}{compare.benchmark_movement}<span className="metric-unit">%</span></div></div>
                      <div className="metric"><div className="metric-label">Instrument state</div><div className="metric-value" style={{fontSize:14}}>{compare.instrument_state.baseline} → {compare.instrument_state.current}</div></div>
                    </div>
                    <h4 style={{marginTop:14}}>Calibration metric diff</h4>
                    {compare.calibration_diff.length===0 ? <div style={{color:'var(--muted)', fontSize:12}}>No metric changes.</div> : (
                      <div>
                        <div className="change-row" style={{borderBottom:'1px solid var(--border)', color:'var(--dim)'}}>
                          <div>Metric</div><div>Baseline</div><div>Current</div>
                        </div>
                        {compare.calibration_diff.map((c,i) => (
                          <div className="change-row" key={i}>
                            <div>{c.metric} <span style={{color:'var(--dim)'}}>({c.unit})</span></div>
                            <div className="same">{c.baseline}</div>
                            <div className="changed">{c.current} <span style={{color:'var(--dim)'}}>(Δ {c.delta>0?'+':''}{c.delta})</span></div>
                          </div>
                        ))}
                      </div>
                    )}
                    <h4 style={{marginTop:14}}>Changed parameters</h4>
                    {compare.changed_parameters.length===0 ? <div style={{color:'var(--muted)', fontSize:12}}>No parameter changes.</div> : (
                      <div>
                        {compare.changed_parameters.map((c,i) => (
                          <div className="change-row" key={i}>
                            <div>{c.key}</div>
                            <div className="same">{JSON.stringify(c.from)}</div>
                            <div className="changed">{JSON.stringify(c.to)}</div>
                          </div>
                        ))}
                      </div>
                    )}
                  </>
                )}
              </div>
              {goldCompare && (
                <div className="drawer-section">
                  <h4>Comparison vs Golden Run ({goldenRun.run_id})</h4>
                  <div style={{fontSize:12, color:'var(--muted)', marginBottom:8}}>Benchmark movement vs golden: <span style={{color:goldCompare.benchmark_movement<0?'var(--strawberry)':'var(--leaf)', fontFamily:'var(--mono)'}}>{goldCompare.benchmark_movement>0?'+':''}{goldCompare.benchmark_movement}%</span></div>
                  <div style={{fontSize:12, color:'var(--muted)'}}>Calibration metrics that drifted from golden: <strong style={{color:'var(--text)'}}>{goldCompare.calibration_diff.length}</strong></div>
                </div>
              )}
            </>
          )}

          {tab==='calibration' && (
            <div className="drawer-section">
              <h4>Calibration metrics (flexible per-run)</h4>
              <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:8}}>
                {Object.entries(run.calibration_metrics_json||{}).map(([k,v]) => {
                  const delta = (v.current - v.baseline);
                  const sign = delta>0?'+':'';
                  return (
                    <div key={k} className="metric">
                      <div className="metric-label">{k}</div>
                      <div className="metric-value" style={{fontSize:16}}>{v.current}<span className="metric-unit">{v.unit}</span></div>
                      <div className="metric-trend flat">baseline {v.baseline} {v.unit} · Δ {sign}{Y.round(delta,4)}</div>
                    </div>
                  );
                })}
              </div>
            </div>
          )}

          {tab==='snapshot' && (
            <div className="drawer-section">
              <h4>Snapshots ({linkedSnaps.length})</h4>
              {linkedSnaps.length===0 ? <div style={{color:'var(--muted)', fontSize:12, marginBottom:10}}>No snapshots captured for this run yet.</div> : linkedSnaps.map((s,i) => (
                <div key={i} className="snap-card">
                  <div className="snap-card-head">
                    <div className="snap-card-title">{s.snapshot_id}</div>
                    <button className="btn btn-ghost" onClick={()=>downloadJSON(s.snapshot_id+'.json', s)}>{I.download} Export JSON</button>
                  </div>
                  <div className="snap-fields">
                    <div>framework</div><div className="v">{s.framework}</div>
                    <div>dataset_reference</div><div className="v">{s.dataset_reference}</div>
                    <div>instrument_state</div><div className="v">{s.instrument_state}</div>
                    <div>calibration_state</div><div className="v">{s.calibration_state}</div>
                    <div>benchmark_state</div><div className="v">{s.benchmark_state}</div>
                    <div>completeness</div><div className="v">{s.snapshot_completeness}%</div>
                    <div>software_version</div><div className="v">{s.software_version}</div>
                    <div>generated_by</div><div className="v">{s.generated_by}</div>
                  </div>
                </div>
              ))}
              <button className="btn btn-primary" onClick={()=>onSnapshot(run)} style={{marginTop:6}}>Generate new snapshot</button>
            </div>
          )}

          {tab==='metadata' && (
            <div className="drawer-section">
              <h4>Raw metadata JSON</h4>
              <JsonView data={{ ...run }}/>
            </div>
          )}
        </div>
      </div>
    </>
  );
}

function downloadJSON(filename, data) {
  const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' });
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a'); a.href = url; a.download = filename; a.click();
  setTimeout(()=>URL.revokeObjectURL(url), 1000);
}

window.YDrawer = { RunDrawer, downloadJSON };