// Shared Learnings Guide used in Dashboard Knowledge + Master Admin Learnings.
// No build step: expose on window for both apps.

function CitrusLearningsGuide({ mode = "full" }) {
  const compact = mode === "admin";
  const cardStyle = {
    border: "1px solid var(--border, rgba(0,0,0,0.08))",
    background: "var(--paper, #fff)",
    borderRadius: 12,
    marginBottom: compact ? 12 : 16,
    overflow: "hidden",
  };

  const body = (
    <div style={{ padding: compact ? "12px 14px" : "12px 16px 14px" }}>
      <ol style={{ margin: 0, paddingLeft: 18, display: "grid", gap: 6, fontSize: 13, lineHeight: 1.55, color: "var(--ink, #1f2937)" }}>
        <li>Agents learn from conversations (auto extraction) and from taught documents.</li>
        <li>Generic lessons apply to all agents, while agent lessons stay per agent.</li>
        <li>High priority rules override conflicting customer memory; low priority can be overridden.</li>
        <li>Pinned lessons are protected from cap trimming until manually unpinned.</li>
        <li>Disabled lessons are ignored by responses but remain visible for audit.</li>
        <li>Only admins and managers can pin or unpin lessons.</li>
      </ol>

      {!compact && (
        <div style={{ marginTop: 10, fontSize: 12, color: "var(--ink-2, #6b7280)", lineHeight: 1.5 }}>
          Learnings appear in Agent Detail, Knowledge, and Master Admin so behavior changes stay visible across all views.
        </div>
      )}

      {compact && (
        <div style={{ marginTop: 10, fontSize: 12, color: "var(--ink-2, #6b7280)", lineHeight: 1.5 }}>
          Admin controls also include locked learnings/documents, contradiction flags, and the global forget-all reset.
        </div>
      )}
    </div>
  );

  if (compact) {
    return (
      <div style={cardStyle}>
        <div style={{ padding: "10px 14px", borderBottom: "1px solid var(--border, rgba(0,0,0,0.08))", fontSize: 12, fontWeight: 700, letterSpacing: 0.04, textTransform: "uppercase", color: "#6d28d9" }}>
          Learnings guide
        </div>
        {body}
      </div>
    );
  }

  return (
    <details open style={cardStyle}>
      <summary style={{ listStyle: "none", cursor: "pointer", padding: "12px 16px", borderBottom: "1px solid var(--border, rgba(0,0,0,0.08))", display: "flex", alignItems: "center", justifyContent: "space-between", fontSize: 13, fontWeight: 700, color: "#6d28d9" }}>
        <span>How learnings work</span>
        <span style={{ fontSize: 11, fontWeight: 600, color: "var(--ink-2, #6b7280)" }}>expand/collapse</span>
      </summary>
      {body}
    </details>
  );
}

window.CitrusLearningsGuide = CitrusLearningsGuide;