// Clinical Context Flags Panel — renders the active set returned by RD_Rules.evaluateFlags.
// Sits in the chart region, between banner and the calculation/inputs zones.
// Calm card treatment matching the calculation engine cards.

function FlagsPanel({ flags, onDismiss, onChartFocus, onSetCalc, onSet, onSetPES }) {
  if (!flags || flags.length === 0) return null;

  function handleAction(flag, chip) {
    const a = chip.action;
    if (!a) return;
    if (a.kind === "dismiss-flag") {
      onDismiss(a.id || flag.id);
    } else if (a.kind === "flag-pes") {
      const PROBLEMS = window.RD.PROBLEMS || [];
      const match = PROBLEMS.find(p => p.label.toLowerCase() === a.problem.toLowerCase());
      if (match && onSetPES) onSetPES({ problem: match.id });
      onDismiss(flag.id);
    } else if (a.kind === "set-basis") {
      onSetCalc({ proteinWeightBasis: a.value });
      onDismiss(flag.id);
    } else if (a.kind === "focus") {
      onChartFocus(a.target);
    } else if (a.kind === "resolve") {
      if (a.field === "activity") {
        onSet({ activity: a.value });
        onDismiss(flag.id);
      }
    }
  }

  return (
    <section className="flags-panel" aria-label="Clinical context flags">
      <header className="flags-head">
        <span className="flags-eyebrow">Clinical context flags</span>
        <span className="flags-count">{flags.length}</span>
      </header>
      <div className="flags-list">
        {flags.map(f => (
          <article key={f.id} className={`flag-card flag-${f.severity || "info"}`}>
            <div className="flag-icon" aria-hidden="true">
              {f.severity === "warn" ? (
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><path d="M12 9v4"/><path d="M12 17h.01"/><path d="m10.29 3.86-8.18 14.15a2 2 0 0 0 1.71 3h16.36a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0Z"/></svg>
              ) : (
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="9"/><path d="M12 8h.01"/><path d="M11 12h1v4h1"/></svg>
              )}
            </div>
            <div className="flag-body">
              <div className="flag-title">{f.title}</div>
              {f.body && <div className="flag-text">{f.body}</div>}
              {f.cite && <div className="flag-cite">{f.cite}</div>}
              {f.actions && f.actions.length > 0 && (
                <div className="flag-actions">
                  {f.actions.map((chip, i) => (
                    <button
                      key={i}
                      type="button"
                      className={`flag-chip ${i === 0 ? "primary" : ""}`}
                      onClick={() => handleAction(f, chip)}
                    >
                      {chip.label}
                    </button>
                  ))}
                </div>
              )}
            </div>
          </article>
        ))}
      </div>
    </section>
  );
}

window.FlagsPanel = FlagsPanel;