/* RulePanel — live output of the content-rule engine. Errors block status
   advance; warnings and info are advisory. Mirrors §6. */
(function () {
  const SEV = {
    error: { color: "#C6362B", bg: "var(--danger-bg)", icon: "alert-octagon", label: "Error" },
    warn: { color: "#B25E09", bg: "var(--warning-bg)", icon: "alert-triangle", label: "Warning" },
    info: { color: "#3F3AB4", bg: "var(--accent-weak)", icon: "info", label: "Suggestion" },
  };
  const CH = window.CROPR_DATA.CHANNELS;

  function Flag({ f }) {
    const s = SEV[f.severity] || SEV.info;
    return (
      <div style={{ display: "flex", gap: 10, padding: "9px 11px", borderRadius: 10, background: s.bg, alignItems: "flex-start" }}>
        <Icon name={s.icon} size={16} color={s.color} style={{ marginTop: 1, flex: "none" }} />
        <div style={{ minWidth: 0 }}>
          <div style={{ fontSize: 12.5, color: "var(--fg1)", lineHeight: 1.4 }}>{f.message}</div>
          <div style={{ fontSize: 10.5, color: "var(--fg3)", marginTop: 3, display: "flex", gap: 6 }}>
            <span style={{ fontWeight: 700 }}>{f.rule}</span>
            {f.channel && <span>· {CH[f.channel] ? CH[f.channel].name + (CH[f.channel].platform === "x" ? " (X)" : " (LinkedIn)") : f.channel}</span>}
          </div>
        </div>
      </div>
    );
  }

  function RulePanel({ ruleCheck, proofFlag }) {
    const flags = (ruleCheck && ruleCheck.flags) || [];
    const all = proofFlag ? [proofFlag, ...flags] : flags;
    const errors = all.filter((f) => f.severity === "error");
    const warns = all.filter((f) => f.severity === "warn");
    const infos = all.filter((f) => f.severity === "info");
    const clean = all.length === 0;

    return (
      <div>
        <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 12 }}>
          <Icon name="shield-check" size={18} color={errors.length ? "var(--danger)" : "var(--success)"} />
          <span style={{ fontSize: 13, fontWeight: 700 }}>Content rules</span>
          <div style={{ flex: 1 }} />
          {errors.length > 0
            ? <Badge color="#C6362B" bg="var(--danger-bg)" dot>{errors.length} error{errors.length > 1 ? "s" : ""}</Badge>
            : <Badge color="#0E8A50" bg="var(--success-bg)" dot>Passes gate</Badge>}
        </div>

        {clean && (
          <div style={{ display: "flex", gap: 10, padding: "12px", borderRadius: 10, background: "var(--success-bg)", alignItems: "center" }}>
            <Icon name="check-circle" size={18} color="#0E8A50" />
            <span style={{ fontSize: 12.5, color: "var(--fg2)" }}>Clean — no hashtags, one CTA, on-target length. Ready to advance.</span>
          </div>
        )}

        <div style={{ display: "flex", flexDirection: "column", gap: 7 }}>
          {errors.map((f, i) => <Flag key={"e" + i} f={f} />)}
          {warns.map((f, i) => <Flag key={"w" + i} f={f} />)}
          {infos.map((f, i) => <Flag key={"i" + i} f={f} />)}
        </div>

        {warns.length > 0 && errors.length === 0 && (
          <div style={{ fontSize: 11, color: "var(--fg3)", marginTop: 10 }}>
            Warnings don't block the gate — but they're the strategy's guardrails. Clear them unless you mean to.
          </div>
        )}
      </div>
    );
  }
  window.RulePanel = RulePanel;
})();