// Program Studio — main shell + tab router.
// Tabs: Pipeline · Simulate · Versions · Approval · Deploy
// Plus a floating AI Copilot command bar.

function ProgramStudio({ citizen, tweaks, setTweak }) {
  const [programMeta, setProgramMeta] = React.useState({
    name: "ISKAN Housing Program",
    nameAr: "برنامج إسكان",
    version: "v4.3",
    status: "Draft",
    branch: "feature/raise-sohar-ceiling",
    author: "Sara A. · Policy lead",
    parent: "v4.2",
  });
  const [rules, setRules] = React.useState(window.OHB_DATA.iskanProgram);
  const [parentRules] = React.useState(window.OHB_DATA.iskanProgram); // baseline v4.2 reference
  const [tab, setTab] = React.useState("pipeline");
  const [selectedRuleIdx, setSelectedRuleIdx] = React.useState(4); // DTI selected by default — most editable
  const [showLibrary, setShowLibrary] = React.useState(false);
  const [testCitizen, setTestCitizen] = React.useState("maryam");
  const [copilotOpen, setCopilotOpen] = React.useState(false);

  const lib = window.OHB_DATA.ruleLibrary;
  const results = window.OHB_DATA.citizens.map((c) => ({
    citizen: c,
    result: window.evaluateProgram(c, rules, lib),
    parent: window.evaluateProgram(c, parentRules, lib),
  }));

  // Synthetic "historical case impact" — counts cases each rule would affect
  // Derived deterministically from rule type + params so it feels real.
  const caseImpacts = window.computeCaseImpacts(rules, lib);

  function updateRule(idx, params) {
    setRules((prev) => prev.map((r, i) => i === idx ? { ...r, params: { ...r.params, ...params } } : r));
  }
  function toggleRule(idx) {
    setRules((prev) => prev.map((r, i) => i === idx ? { ...r, enabled: !r.enabled } : r));
  }
  function removeRule(idx) {
    setRules((prev) => prev.filter((_, i) => i !== idx));
    setSelectedRuleIdx(null);
  }
  function addRule(libId) {
    const meta = lib.find((r) => r.id === libId);
    if (!meta) return;
    setRules((prev) => [...prev, { ruleId: libId, params: window.defaultsForRule(libId), enabled: true }]);
    setShowLibrary(false);
    setSelectedRuleIdx(rules.length);
  }
  function moveRule(idx, dir) {
    const j = idx + dir;
    if (j < 0 || j >= rules.length) return;
    setRules((prev) => {
      const next = [...prev];
      [next[idx], next[j]] = [next[j], next[idx]];
      return next;
    });
    setSelectedRuleIdx(j);
  }
  function resetToParent() {
    setRules(parentRules);
  }
  function applyCopilotEdit(edit) {
    // edit: { ruleId, params }
    setRules((prev) => prev.map((r) =>
      r.ruleId === edit.ruleId ? { ...r, params: { ...r.params, ...edit.params } } : r
    ));
    const idx = rules.findIndex((r) => r.ruleId === edit.ruleId);
    if (idx >= 0) setSelectedRuleIdx(idx);
    setTab("pipeline");
  }

  return (
    <div className="studio">
      <StudioHeader
        programMeta={programMeta} rules={rules} parentRules={parentRules}
        tab={tab} setTab={setTab}
        onCopilot={() => setCopilotOpen(true)}
      />

      <div className="studio-tab-bar">
        {[
          ["pipeline", "Pipeline", "flow"],
          ["simulate", "Simulate", "play"],
          ["versions", "Versions", "branch"],
          ["approval", "Approval", "users"],
          ["deploy", "Deploy", "send"],
        ].map(([id, label, icon]) => (
          <button key={id} className={`studio-tab ${tab === id ? "active" : ""}`} onClick={() => setTab(id)}>
            <Icon name={icon} size={14}/>
            <span>{label}</span>
            {id === "approval" && <span className="studio-tab-badge">2</span>}
          </button>
        ))}
        <div style={{flex:1}}/>
      </div>

      {tab === "pipeline" && (
        <div className="studio-body">
          <StudioInspector
            rules={rules} selectedRuleIdx={selectedRuleIdx} lib={lib}
            onParamChange={(p) => selectedRuleIdx != null && updateRule(selectedRuleIdx, p)}
            onToggle={() => selectedRuleIdx != null && toggleRule(selectedRuleIdx)}
            onRemove={() => selectedRuleIdx != null && removeRule(selectedRuleIdx)}
            onAddOpen={() => setShowLibrary(true)}
            programMeta={programMeta}
            caseImpacts={caseImpacts}
          />
          <StudioPipeline
            rules={rules} lib={lib} selectedRuleIdx={selectedRuleIdx}
            onSelect={setSelectedRuleIdx} onMove={moveRule}
            previewTrace={results.find(r => r.citizen.id === testCitizen).result.trace}
            showLibrary={showLibrary} setShowLibrary={setShowLibrary} addRule={addRule}
            caseImpacts={caseImpacts}
          />
        </div>
      )}

      {tab === "simulate" && <StudioSimulate rules={rules} parentRules={parentRules} lib={lib} caseImpacts={caseImpacts}/>}
      {tab === "versions" && <StudioVersions rules={rules} parentRules={parentRules} lib={lib} programMeta={programMeta}/>}
      {tab === "approval" && <StudioApproval rules={rules} parentRules={parentRules} lib={lib} programMeta={programMeta}/>}
      {tab === "deploy" && <StudioDeploy programMeta={programMeta} rules={rules} parentRules={parentRules} lib={lib}/>}

      {copilotOpen && (
        <StudioCopilot
          onClose={() => setCopilotOpen(false)}
          rules={rules} lib={lib}
          onApply={applyCopilotEdit}
        />
      )}
    </div>
  );
}

function StudioHeader({ programMeta, rules, parentRules, onCopilot }) {
  const changedCount = rules.filter((r, i) => {
    const p = parentRules.find((pr) => pr.ruleId === r.ruleId);
    return !p || JSON.stringify(p.params) !== JSON.stringify(r.params) || p.enabled !== r.enabled;
  }).length;

  return (
    <div className="studio-head">
      <div className="studio-head-left">
        <div className="row" style={{gap:10, flexWrap:"nowrap", overflow:"hidden", minWidth:0}}>
          <span className="label-eyebrow" style={{whiteSpace:"nowrap"}}>Program Studio</span>
          <span className="muted">/</span>
          <span className="title" style={{fontSize:15, whiteSpace:"nowrap", overflow:"hidden", textOverflow:"ellipsis"}}>{programMeta.name}</span>
          <span className="pill navy" style={{flexShrink:0}}>{programMeta.version} · {programMeta.status}</span>
          <span className="pill ghost" style={{flexShrink:0}}><Icon name="branch" size={11}/> {programMeta.branch}</span>
          {changedCount > 0 && <span className="pill copper" style={{flexShrink:0}}>{changedCount} {changedCount === 1 ? "change" : "changes"} from {programMeta.parent}</span>}
        </div>
      </div>
      <div className="row" style={{gap:8}}>
        <button className="btn ghost sm"><Icon name="eye" size={13}/> Preview as citizen</button>
<button className="btn dark-on-light sm"><Icon name="send" size={13}/> Submit for approval</button>
      </div>
    </div>
  );
}

window.ProgramStudio = ProgramStudio;