// Program Studio — Live Test Panel (right rail)
// Re-runs every persona through the current rule set, every edit.

function StudioTestPanel({ results, testCitizen, setTestCitizen, lib, rules, onSelectRule }) {
  const active = results.find((r) => r.citizen.id === testCitizen);
  const passed = active.result.trace.filter(r => r.status === "passed").length;
  const total = active.result.trace.length;
  const failedRules = active.result.trace.filter(r => r.status === "failed");

  // KPIs across all personas
  const kpis = {
    pass: results.filter(r => r.result.outcome === "eligible").length,
    review: results.filter(r => r.result.outcome === "manual_review").length,
    reject: results.filter(r => r.result.outcome === "rejected").length,
  };

  return (
    <aside className="studio-test">
      <div className="card" style={{position:"sticky", top:0, overflow:"hidden"}}>
        <div className="test-head">
          <div className="row" style={{justifyContent:"space-between"}}>
            <div>
              <div className="label-eyebrow">Live test</div>
              <div className="title" style={{marginTop:4, fontSize:14}}>What this program does, right now</div>
            </div>
            <span className="pulse-dot" title="Live"/>
          </div>
          <div className="test-kpi-row">
            <TestKpi label="Eligible" value={kpis.pass} tone="ok"/>
            <TestKpi label="Review" value={kpis.review} tone="warn"/>
            <TestKpi label="Reject" value={kpis.reject} tone="bad"/>
          </div>
        </div>

        <div className="test-persona-tabs">
          {results.map((r) => (
            <button key={r.citizen.id} className={`test-tab ${testCitizen === r.citizen.id ? "active" : ""}`} onClick={() => setTestCitizen(r.citizen.id)}>
              <div className={`avatar-xs outcome-${r.result.outcome}`}>{r.citizen.avatar}</div>
              <div style={{flex:1, textAlign:"left", minWidth:0}}>
                <div className="text-13" style={{fontWeight:600, whiteSpace:"nowrap", overflow:"hidden", textOverflow:"ellipsis"}}>{r.citizen.name.split(" ")[0]}</div>
                <div className="tiny" style={{color: r.result.outcome === "eligible" ? "var(--ok)" : r.result.outcome === "manual_review" ? "var(--warn)" : "var(--bad)"}}>
                  {r.result.outcome === "eligible" ? "Eligible" : r.result.outcome === "manual_review" ? "Review" : "Reject"}
                </div>
              </div>
            </button>
          ))}
        </div>

        <div className="test-citizen-summary">
          <div className="grid-2" style={{gap:8}}>
            <div className="tiny">
              <div className="muted">Income</div>
              <div className="text-13" style={{fontWeight:600}}>OMR {active.citizen.monthlyIncomeOmr}/mo</div>
            </div>
            <div className="tiny">
              <div className="muted">DTI</div>
              <div className="text-13" style={{fontWeight:600}}>{active.citizen.dti}%</div>
            </div>
            <div className="tiny">
              <div className="muted">Property</div>
              <div className="text-13" style={{fontWeight:600}}>{active.citizen.existingProperty ? "Owns" : "None"}</div>
            </div>
            <div className="tiny">
              <div className="muted">Benefit</div>
              <div className="text-13" style={{fontWeight:600}}>{active.citizen.activeBenefit ? "Active" : "None"}</div>
            </div>
          </div>
        </div>

        <div className="test-outcome-card">
          <div className={`test-outcome outcome-${active.result.outcome}`}>
            <Icon name={active.result.outcome === "eligible" ? "check_circle" : active.result.outcome === "manual_review" ? "alert" : "x_circle"} size={20}/>
            <div>
              <div className="text-13" style={{fontWeight:700}}>
                {active.result.outcome === "eligible" ? "Eligible · Straight-through" :
                 active.result.outcome === "manual_review" ? "Needs review · Non-STP" : "Not eligible"}
              </div>
              <div className="tiny" style={{opacity:0.85}}>{passed}/{total} rules · {active.result.routing}</div>
            </div>
          </div>
        </div>

        <div className="test-trace-mini">
          <div className="label-eyebrow" style={{padding:"12px 14px 4px"}}>Rule trace</div>
          {active.result.trace.map((r) => (
            <div key={r.ruleId} className="mini-trace-row">
              <span className={`mini-trace-pip status-${r.status}`}>
                <Icon name={r.status === "passed" ? "check" : r.status === "warning" ? "alert" : "x"} size={10}/>
              </span>
              <span className="text-13" style={{flex:1, minWidth:0, whiteSpace:"nowrap", overflow:"hidden", textOverflow:"ellipsis"}}>{r.name}</span>
              <span className="tiny muted">{r.source.split(" / ")[0]}</span>
            </div>
          ))}
        </div>

        {failedRules.length > 0 && (
          <div className="test-suggestion">
            <div className="row" style={{gap:8}}>
              <Icon name="sparkles" size={14} style={{color:"var(--brand-copper)"}}/>
              <div className="text-13" style={{fontWeight:600}}>To unblock {active.citizen.name.split(" ")[0]}</div>
            </div>
            <div className="muted text-12" style={{marginTop:4}}>
              {failedRules.length === 1 ? "Edit this rule:" : "Edit any of these:"}
            </div>
            <div className="suggestion-rules">
              {failedRules.map((r) => (
                <button key={r.ruleId} className="suggestion-rule" onClick={() => onSelectRule?.(r.ruleId)}>
                  <Icon name="zap" size={11}/> {r.name} <Icon name="arrow_right" size={10}/>
                </button>
              ))}
            </div>
          </div>
        )}

        <div className="test-foot">
          <button className="btn ghost sm" style={{width:"100%"}}>
            <Icon name="users" size={12}/> Run on 12,847 historical cases
          </button>
          <div className="muted text-12" style={{marginTop:6, textAlign:"center"}}>
            See full A/B impact before approving the change
          </div>
        </div>
      </div>
    </aside>
  );
}

function TestKpi({ label, value, tone }) {
  return (
    <div className={`test-kpi tone-${tone}`}>
      <div className="test-kpi-num">{value}</div>
      <div className="tiny">{label}</div>
    </div>
  );
}

window.StudioTestPanel = StudioTestPanel;