// Program Studio — Approval tab
// PR-style maker-checker review with reviewer assignment, line comments,
// and CBO compliance checklist.

function StudioApproval({ rules, parentRules, lib, programMeta }) {
  const [reviewers] = React.useState([
    { id: "hassan", name: "Hassan F.", role: "Senior policy reviewer", avatar: "HF", status: "approved", when: "23 min ago", color: "#1b4149" },
    { id: "layla", name: "Layla M.", role: "Compliance officer", avatar: "LM", status: "pending", when: "—", color: "#1c1b3b" },
    { id: "khalid", name: "Khalid Al-S.", role: "Director, Lending", avatar: "KS", status: "requested-changes", when: "1h ago", color: "#26262a" },
  ]);

  const checklist = [
    { id: "c1", label: "Rule version snapshot stored", required: true, status: "done" },
    { id: "c2", label: "Audit trail attached", required: true, status: "done" },
    { id: "c3", label: "Maker ≠ checker enforced", required: true, status: "done" },
    { id: "c4", label: "CBO impact report generated", required: true, status: "done" },
    { id: "c5", label: "Citizen explanation strings translated to Arabic", required: true, status: "warning" },
    { id: "c6", label: "Two senior approvers signed off", required: true, status: "in-progress" },
  ];

  const comments = [
    { author: "Khalid Al-S.", role: "Director, Lending", avatar: "KS", color: "#26262a", when: "1h ago", target: "DTI threshold · 60% → 65%",
      body: "This aligns us with Bank Muscat's risk appetite. But I want to see the same threshold applied in v4.2 historical re-run before I sign off. @sara please attach the simulation results.",
      status: "changes-requested" },
    { author: "Sara A.", role: "Policy lead (author)", avatar: "SA", color: "#1b4149", when: "44 min ago", target: null,
      body: "@khalid attached the simulation — STP rate goes from 67% → 71% with no material increase in 90-day delinquency. CBO impact report in the checklist.", status: "comment" },
    { author: "Hassan F.", role: "Senior policy reviewer", avatar: "HF", color: "#1b4149", when: "23 min ago", target: "Income band · max raised to 3,000",
      body: "Approved. The Sohar-specific adjustment looks sound. Nice touch keeping the band soft for the integrated-city carve-out.", status: "approved" },
  ];

  return (
    <div className="studio-approval">
      <div className="appr-grid">
        <div>
          <div className="appr-pr-head">
            <div className="row" style={{gap:10, marginBottom:8}}>
              <span className="pill copper">Draft · awaiting 2 approvals</span>
              <span className="tiny muted">opened by Sara A. · 2h ago</span>
            </div>

            <div className="row" style={{gap:8, marginTop:14}}>
              <span className="pill ghost"><Icon name="branch" size={11}/> {programMeta.branch}</span>
              <span className="pill ghost"><Icon name="layers" size={11}/> 7 rules changed</span>
              <span className="pill ghost"><Icon name="users" size={11}/> 12,847 cases simulated</span>
            </div>
          </div>

          <div className="appr-tabs">
            <button className="appr-tab active">Conversation · 3</button>
            <button className="appr-tab">Changes · 7</button>
            <button className="appr-tab">Simulation</button>
            <button className="appr-tab">Compliance</button>
          </div>

          <div className="appr-thread">
            {comments.map((c, i) => (
              <div key={i} className={`comment ${c.status}`}>
                <div className="comment-avatar" style={{background: c.color}}>{c.avatar}</div>
                <div className="comment-body">
                  <div className="comment-meta">
                    <span style={{fontWeight:700}}>{c.author}</span>
                    <span className="muted text-12">{c.role} · {c.when}</span>
                    {c.status === "approved" && <span className="pill ok"><Icon name="check" size={10}/> Approved</span>}
                    {c.status === "changes-requested" && <span className="pill warn"><Icon name="alert" size={10}/> Changes requested</span>}
                  </div>
                  {c.target && (
                    <div className="comment-target">
                      <Icon name="zap" size={11}/> Re: <strong>{c.target}</strong>
                    </div>
                  )}
                  <div className="comment-text">{c.body}</div>
                  <div className="comment-actions">
                    <button className="btn ghost sm"><Icon name="heart" size={11}/> 2</button>
                    <button className="btn ghost sm"><Icon name="message" size={11}/> Reply</button>
                  </div>
                </div>
              </div>
            ))}

            <div className="comment-compose">
              <div className="comment-avatar" style={{background: "var(--brand-copper)"}}>YOU</div>
              <div className="comment-body">
                <textarea className="textarea" placeholder="Add a comment, request changes, or approve…"></textarea>
                <div className="row" style={{justifyContent:"space-between", marginTop:10}}>
                  <div className="row" style={{gap:8}}>
                    <button className="btn ghost sm"><Icon name="link" size={11}/> Reference rule</button>
                    <button className="btn ghost sm"><Icon name="bar_chart" size={11}/> Attach simulation</button>
                  </div>
                  <div className="row" style={{gap:6}}>
                    <button className="btn ghost sm"><Icon name="message" size={11}/> Comment</button>
                    <button className="btn danger sm"><Icon name="x" size={11}/> Request changes</button>
                    <button className="btn teal sm"><Icon name="check" size={11}/> Approve</button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <aside className="appr-sidebar">
          <div className="card card-pad">
            <div className="label-eyebrow">Reviewers</div>
            <div className="title" style={{fontSize:14, marginTop:4}}>Maker-checker · 2 of 3 required</div>
            <div className="reviewer-list">
              {reviewers.map((r) => (
                <div key={r.id} className="reviewer-row">
                  <div className="comment-avatar" style={{background: r.color}}>{r.avatar}</div>
                  <div style={{flex:1, minWidth:0}}>
                    <div className="text-13" style={{fontWeight:600}}>{r.name}</div>
                    <div className="tiny muted">{r.role}</div>
                  </div>
                  {r.status === "approved" && <span className="pill ok"><Icon name="check" size={10}/></span>}
                  {r.status === "pending" && <span className="pill ghost">Pending</span>}
                  {r.status === "requested-changes" && <span className="pill warn">Changes</span>}
                </div>
              ))}
            </div>
          </div>

          <div className="card card-pad" data-showcase="CBO READY">
            <div className="label-eyebrow"><Icon name="shield" size={11}/> Compliance checklist</div>
            <div className="title" style={{fontSize:14, marginTop:4}}>Audit-ready for CBO submission</div>
            <div className="checklist">
              {checklist.map((c) => (
                <div key={c.id} className={`check-row status-${c.status}`}>
                  <div className="check-pip">
                    {c.status === "done" && <Icon name="check" size={11}/>}
                    {c.status === "warning" && <Icon name="alert" size={11}/>}
                    {c.status === "in-progress" && <span className="check-spin"/>}
                  </div>
                  <span className="text-12">{c.label}</span>
                  {c.required && <span className="tiny muted">Required</span>}
                </div>
              ))}
            </div>
          </div>

          <div className="card card-pad">
            <div className="label-eyebrow">Estimated rollout</div>
            <div style={{display:"flex", flexDirection:"column", gap:10, marginTop:10}}>
              <Step done label="Maker submitted" detail="Sara A. · 2h ago"/>
              <Step current label="2 approvers" detail="1 of 2 · 1 changes requested"/>
              <Step label="CBO review" detail="Required for DTI changes"/>
              <Step label="Staged deploy · Sohar 10%" detail="Auto-rollback if STP rate drops >5pp"/>
              <Step label="Full rollout" detail="48h after Sohar pilot"/>
            </div>
          </div>
        </aside>
      </div>
    </div>
  );
}

function Step({ done, current, label, detail }) {
  return (
    <div className={`appr-step ${done ? "done" : current ? "current" : ""}`}>
      <div className="appr-step-pip">
        {done ? <Icon name="check" size={10}/> : current ? <span className="check-spin"/> : null}
      </div>
      <div style={{flex:1, minWidth:0}}>
        <div className="text-13" style={{fontWeight: current ? 700 : 500}}>{label}</div>
        <div className="tiny muted">{detail}</div>
      </div>
    </div>
  );
}

window.StudioApproval = StudioApproval;