/* AI Builder primitives — used in every Bible section to show how the AI
   assists the user with proposals, accept/reject, refine prompts, etc. */

const Sparkle = ({ size = 12 }) => (
  <svg width={size} height={size} viewBox="0 0 16 16" style={{ flexShrink: 0 }} aria-hidden="true">
    <path d="M8 1 L9.2 6.8 L15 8 L9.2 9.2 L8 15 L6.8 9.2 L1 8 L6.8 6.8 Z" fill="currentColor"/>
  </svg>
);

// Header strip that sits atop a section. Shows what the AI is doing right now,
// what canon it's grounded in, and a one-line "ask the AI" composer.
const BuilderBar = ({ agent, grounded, status, onAsk, placeholder, busy }) => {
  const [val, setVal] = React.useState("");
  return (
    <div className="builder-bar">
      <div className="bb-l">
        <span className="bb-agent"><Sparkle size={11}/> {agent}</span>
        <span className="bb-sep">·</span>
        <span className="bb-grounded">grounded in {grounded}</span>
      </div>
      <form className="bb-form" onSubmit={(e) => { e.preventDefault(); if (val.trim()) { onAsk?.(val); setVal(""); } }}>
        <input
          className="bb-input"
          placeholder={placeholder || "Ask the agent — refine, expand, propose alternatives…"}
          value={val}
          onChange={(e) => setVal(e.target.value)}
        />
        <button type="submit" className="btn ghost" disabled={busy}>
          {busy ? <><span className="bb-spin"/> drafting…</> : <><Icon name="regen" size={11}/> Propose</>}
        </button>
      </form>
      <div className={`bb-status ${status?.tone || ""}`}>
        <span className="bb-dot"/> {status?.label || "ready"}
      </div>
    </div>
  );
};

// A "proposal" card: what the AI is suggesting, with accept/refine/reject.
// The diff strip shows what would change vs current canon.
const Proposal = ({ title, kind, body, diff, refs, onAccept, onRefine, onReject }) => (
  <div className="proposal">
    <div className="prop-head">
      <span className="prop-kind"><Sparkle size={10}/> {kind || "AI proposal"}</span>
      <span className="prop-title">{title}</span>
      <span className="prop-spacer"/>
      <div className="prop-actions">
        <button className="btn ghost sm" onClick={onReject}>Dismiss</button>
        <button className="btn ghost sm" onClick={onRefine}><Icon name="regen" size={10}/> Refine</button>
        <button className="btn primary sm" onClick={onAccept}><Icon name="check" size={10}/> Accept</button>
      </div>
    </div>
    <div className="prop-body">{body}</div>
    {diff && diff.length > 0 && (
      <div className="prop-diff">
        {diff.map((d, i) => (
          <div key={i} className={`diff-row ${d.op}`}>
            <span className="diff-op">{d.op === "add" ? "+" : d.op === "del" ? "−" : "~"}</span>
            <span className="diff-field">{d.field}</span>
            <span className="diff-val">{d.value}</span>
          </div>
        ))}
      </div>
    )}
    {refs && refs.length > 0 && (
      <div className="prop-refs">
        <span className="dim mono" style={{ fontSize: 10, letterSpacing: "0.08em", textTransform: "uppercase" }}>derived from</span>
        {refs.map(r => <span key={r} className="ref-chip">{r}</span>)}
      </div>
    )}
  </div>
);

// Quick-prompt chips — common follow-ups the user might want.
const QuickPrompts = ({ prompts, onPick }) => (
  <div className="qp-row">
    {prompts.map(p => (
      <button key={p} className="qp-chip" onClick={() => onPick?.(p)}>
        {p}
      </button>
    ))}
  </div>
);

// Section heading inside the bible content area.
const SectionHead = ({ eyebrow, title, count, children }) => (
  <div className="bib-section-head">
    <div>
      <div className="mono dim" style={{ fontSize: 10.5, letterSpacing: "0.14em", textTransform: "uppercase" }}>{eyebrow}</div>
      <h2 className="serif" style={{ margin: "4px 0 0", fontSize: 22, fontWeight: 500 }}>
        {title} {count != null && <span className="dim mono" style={{ fontSize: 14, marginLeft: 8 }}>· {count}</span>}
      </h2>
    </div>
    <div className="row gap-sm">{children}</div>
  </div>
);

Object.assign(window, { Sparkle, BuilderBar, Proposal, QuickPrompts, SectionHead });