// Program Studio — Versions tab
// Visual diff between v4.2 (current production) and v4.3 (draft).
// Git-like rule-by-rule diff with timeline of versions.

function StudioVersions({ rules, parentRules, lib, programMeta }) {
  const [compareFrom, setCompareFrom] = React.useState("v4.2");
  const [compareTo, setCompareTo] = React.useState("v4.3");

  // Apply faux diffs to parent rules to simulate a real change
  const fauxV43 = simulateDraftChanges(parentRules);
  const diff = window.diffRules(fauxV43, parentRules);

  const versions = [
    { id: "v4.3", label: "v4.3", status: "Draft", author: "Sara A.", when: "Today, 09:42", note: "Raise income ceiling for Sohar, relax DTI for stable employment.", branch: "feature/raise-sohar-ceiling" },
    { id: "v4.2", label: "v4.2", status: "Active", author: "Hassan F.", when: "Mar 12, 2026", note: "Tightened DTI to 60% per CBO Q1 directive.", branch: "main" },
    { id: "v4.1", label: "v4.1", status: "Archived", author: "Sara A.", when: "Feb 02, 2026", note: "Added employer-grant conflict check.", branch: "main" },
    { id: "v4.0", label: "v4.0", status: "Archived", author: "Layla M.", when: "Jan 11, 2026", note: "First major revamp aligned with Vision 2040.", branch: "main" },
    { id: "v3.7", label: "v3.7", status: "Archived", author: "Hassan F.", when: "Dec 05, 2025", note: "Bug fix · documents rule applying to inactive cases.", branch: "main" },
  ];

  return (
    <div className="studio-versions">
      <div className="versions-layout">
        <aside className="versions-timeline">
          <div className="label-eyebrow" style={{paddingLeft:14}}>Version timeline</div>
          {versions.map((v, i) => (
            <button key={v.id} className={`version-row ${(v.id === compareFrom || v.id === compareTo) ? "selected" : ""}`}
              onClick={() => {
                if (v.id === compareTo) return;
                setCompareFrom(v.id);
              }}>
              <div className="version-pip" style={{background: v.status === "Active" ? "var(--brand-teal)" : v.status === "Draft" ? "var(--brand-copper)" : "var(--hairline)"}}/>
              <div style={{flex:1, minWidth:0}}>
                <div className="row" style={{gap:6, justifyContent:"space-between"}}>
                  <span className="text-13" style={{fontWeight:600}}>{v.label}</span>
                  <span className={`pill ${v.status === "Active" ? "ok" : v.status === "Draft" ? "copper" : "ghost"}`}>{v.status}</span>
                </div>
                <div className="tiny muted" style={{marginTop:2}}>{v.author} · {v.when}</div>
                <div className="text-12" style={{marginTop:6, color:"var(--ink-soft)", lineHeight:1.4}}>{v.note}</div>
                <div className="tiny muted" style={{marginTop:4}}><Icon name="branch" size={10}/> {v.branch}</div>
              </div>
            </button>
          ))}
        </aside>

        <div className="versions-main">
          <div className="diff-head">
            <div>
              <div className="label-eyebrow">Comparing</div>
              <div className="row" style={{gap:10, marginTop:6, alignItems:"center"}}>
                <span className="diff-ref">{compareFrom}</span>
                <Icon name="arrow_right" size={14} style={{color:"var(--muted)"}}/>
                <span className="diff-ref draft">{compareTo}</span>
                <span className="muted text-13">· Sara A. · 7 modifications · 1 added</span>
              </div>
            </div>
            <div className="row" style={{gap:8}}>
              <button className="btn ghost sm"><Icon name="eye" size={13}/> Inline view</button>
              <button className="btn ghost sm"><Icon name="grid" size={13}/> Split view</button>
              <button className="btn dark-on-light sm"><Icon name="send" size={13}/> Open for approval</button>
            </div>
          </div>

          <div className="diff-stats">
            <DiffStat label="Modified" count={diff.modified.length} tone="copper"/>
            <DiffStat label="Added" count={diff.added.length} tone="ok"/>
            <DiffStat label="Removed" count={diff.removed.length} tone="bad"/>
            <DiffStat label="Unchanged" count={diff.unchanged.length} tone="ghost"/>
          </div>

          {diff.modified.map(({ from, to }, i) => (
            <DiffBlock key={i} kind="modified" from={from} to={to} lib={lib}/>
          ))}
          {diff.added.map((r, i) => (
            <DiffBlock key={"a"+i} kind="added" to={r} lib={lib}/>
          ))}
          {diff.removed.map((r, i) => (
            <DiffBlock key={"r"+i} kind="removed" from={r} lib={lib}/>
          ))}
        </div>
      </div>
    </div>
  );
}

function simulateDraftChanges(parent) {
  // Make a few realistic edits vs the baseline so the diff has substance
  return parent.map((r) => {
    if (r.ruleId === "dti") return { ...r, params: { max: 65 } };
    if (r.ruleId === "income-band") return { ...r, params: { min: 0, max: 3000 } };
    if (r.ruleId === "documents") return { ...r, params: { required: ["National ID", "Salary certificate", "Bank statement", "Marriage certificate", "Loan liability statement"] } };
    if (r.ruleId === "employer-grant") return { ...r, enabled: false };
    return r;
  });
}

function DiffStat({ label, count, tone }) {
  return (
    <div className={`diff-stat tone-${tone}`}>
      <div className="diff-stat-count">{count}</div>
      <div className="tiny muted">{label}</div>
    </div>
  );
}

function DiffBlock({ kind, from, to, lib }) {
  const meta = lib.find((r) => r.id === (to?.ruleId || from?.ruleId));
  const tone = window.laneTone(meta?.category);

  return (
    <div className={`diff-block kind-${kind}`}>
      <div className="diff-block-head">
        <div className="row" style={{gap:8}}>
          <div className="diff-marker" style={{background: tone}}/>
          <span className={`diff-tag ${kind}`}>
            {kind === "modified" ? "MODIFIED" : kind === "added" ? "+ ADDED" : "− REMOVED"}
          </span>
          <Icon name={meta?.icon || "doc"} size={14}/>
          <span className="text-13" style={{fontWeight:600}}>{meta?.name}</span>
          <span className="tiny muted">· {meta?.category}</span>
        </div>
        <div className="row" style={{gap:8}}>
          <button className="btn ghost sm icon-only"><Icon name="message" size={12}/></button>
          <button className="btn ghost sm icon-only"><Icon name="more" size={12}/></button>
        </div>
      </div>
      {kind === "modified" && (
        <div className="diff-rows">
          {Object.keys({...from.params, ...to.params}).map((key) => {
            const fv = from.params[key];
            const tv = to.params[key];
            const same = JSON.stringify(fv) === JSON.stringify(tv);
            if (same && from.enabled === to.enabled) return null;
            return (
              <div key={key} className="diff-row">
                <span className="diff-key">{key}</span>
                <span className="diff-side diff-from">
                  <span className="diff-sign">−</span>
                  <span className="mono text-13">{formatVal(fv)}</span>
                </span>
                <Icon name="arrow_right" size={11} style={{color:"var(--muted)"}}/>
                <span className="diff-side diff-to">
                  <span className="diff-sign">+</span>
                  <span className="mono text-13">{formatVal(tv)}</span>
                </span>
              </div>
            );
          })}
          {from.enabled !== to.enabled && (
            <div className="diff-row">
              <span className="diff-key">enabled</span>
              <span className="diff-side diff-from"><span className="diff-sign">−</span><span className="mono text-13">{String(from.enabled)}</span></span>
              <Icon name="arrow_right" size={11} style={{color:"var(--muted)"}}/>
              <span className="diff-side diff-to"><span className="diff-sign">+</span><span className="mono text-13">{String(to.enabled)}</span></span>
            </div>
          )}
          <div className="diff-impact">
            <Icon name="zap" size={11} style={{color:"var(--brand-copper)"}}/>
            <span className="text-12 muted">Estimated impact:</span>
            <span className="text-12" style={{fontWeight:600}}>{impactBlurb(meta?.id || from?.ruleId)}</span>
          </div>
        </div>
      )}
      {kind === "added" && (
        <div className="diff-block-body added">
          <div className="text-13"><strong>New rule:</strong> {meta?.name}</div>
          <div className="muted text-12 mono" style={{marginTop:6}}>{formatVal(to.params)}</div>
        </div>
      )}
      {kind === "removed" && (
        <div className="diff-block-body removed">
          <div className="text-13"><strong>Removed:</strong> {meta?.name}</div>
        </div>
      )}
    </div>
  );
}

function formatVal(v) {
  if (typeof v === "object" && v !== null) return JSON.stringify(v);
  return String(v);
}

function impactBlurb(ruleId) {
  switch (ruleId) {
    case "dti": return "+847 cases route STP · ~$2.1M/mo more in approved finance";
    case "income-band": return "+412 Sohar cases newly eligible";
    case "documents": return "−1,247 cases auto-pass · routed to review";
    case "employer-grant": return "+312 cases (employer grant no longer blocks)";
    default: return "Pending simulation";
  }
}

window.StudioVersions = StudioVersions;