// ActionMinutes — shared primitives
const { useState, useEffect, useRef } = React;

/* ---------- Lucide icon wrapper ---------- */
function AMIcon({ name, size = 18, color = "currentColor", strokeWidth = 2, style }) {
  const ref = useRef(null);
  useEffect(() => {
    if (!ref.current || !window.lucide) return;
    ref.current.innerHTML = "";
    const pascal = name.split("-").map(s => s[0].toUpperCase() + s.slice(1)).join("");
    const def = window.lucide[pascal];
    if (!def) return;
    const el = window.lucide.createElement(def);
    el.setAttribute("width", size);
    el.setAttribute("height", size);
    el.setAttribute("stroke-width", strokeWidth);
    ref.current.appendChild(el);
  }, [name, size, strokeWidth]);
  return <span ref={ref} style={{ display: "inline-flex", alignItems: "center", justifyContent: "center", color, ...style }}></span>;
}

/* ---------- Logo lockup ---------- */
function AMLogo({ name, large, onClick }) {
  return (
    <span className={"am-logo" + (large ? " am-logo-lg" : "")} onClick={onClick} style={onClick ? { cursor: "pointer" } : null}>
      <span className="am-logo-mark"></span>
      <span className="am-logo-text">
        <span className="am-logo-name">{name}</span>
        <span className="am-logo-by">by <strong>PublicInput</strong></span>
      </span>
    </span>
  );
}

/* ---------- Browser chrome strip ---------- */
function BrowserStrip({ url, email }) {
  return (
    <div className="am-browser">
      <div className="am-browser-dots"><span></span><span></span><span></span></div>
      <div className="am-urlbar">
        {email ? (
          <React.Fragment>
            <AMIcon name="mail" size={12} color="#84D0F7" />
            <span>{url}</span>
          </React.Fragment>
        ) : (
          <React.Fragment>
            <span className="lock"><AMIcon name="lock" size={11} /></span>
            <span className="domain">{url.split("/")[0]}</span>
            <span>{url.includes("/") ? "/" + url.split("/").slice(1).join("/") : ""}</span>
          </React.Fragment>
        )}
      </div>
      <div className="am-browser-spacer"></div>
    </div>
  );
}

/* ---------- Email frame ---------- */
function EmailFrame({ subject, from, to, children }) {
  return (
    <div className="am-email-wrap">
      <div className="am-inbox-label"><AMIcon name="inbox" size={14} /> {to}'s inbox</div>
      <div className="am-email">
        <div className="am-email-chrome">
          <div className="am-email-subject">{subject}</div>
          <div className="am-email-meta"><strong>{from}</strong> &nbsp;·&nbsp; to {to} &nbsp;·&nbsp; just now</div>
        </div>
        <div className="am-email-body">{children}</div>
      </div>
    </div>
  );
}

/* ---------- Credits pill ---------- */
function CreditsPill({ used, allowance, resetLabel }) {
  const left = Math.max(0, allowance - used);
  const pips = [];
  for (let i = 0; i < allowance; i++) pips.push(<span key={i} className={i < left ? "" : "used"}></span>);
  return (
    <span className={"am-credits-pill" + (left === 0 ? " exhausted" : "")} title={`${left} of ${allowance} meeting credits remaining`}>
      <span className="am-credits-pips">{pips}</span>
      {left} of {allowance} credits
      <span className="reset">· resets {resetLabel}</span>
    </span>
  );
}

/* ---------- App top bar ---------- */
function AppBar({ name, used, allowance, resetLabel, onHome, user, isStaff, actorAccount, onExitStaff }) {
  const initials = (user && user.name ? user.name : "").split(" ").filter(Boolean).map(s => s[0]).join("").slice(0, 2) || "??";
  const resetOn = resetLabel || "next month";
  return (
    <React.Fragment>
      {isStaff && actorAccount && (
        <div style={{
          background: "#FFF6CC", borderBottom: "2px solid #E3C341",
          padding: "8px 28px", display: "flex", alignItems: "center", justifyContent: "space-between",
          fontSize: 12.5, color: "#6b5200", fontFamily: "var(--font-display)", fontWeight: 600,
        }}>
          <span><AMIcon name="shield" size={14} style={{ marginRight: 8 }} />Viewing <strong>{actorAccount.name || actorAccount.email}</strong> as PublicInput staff — read only</span>
          {onExitStaff && <button className="pi-btn pi-btn-ghost" style={{ fontSize: 12, padding: "4px 10px" }} onClick={onExitStaff}>Exit staff view</button>}
        </div>
      )}
      <div className="am-appbar">
        <AMLogo name={name} onClick={onHome} />
        <div className="am-appbar-right">
          <CreditsPill used={used} allowance={allowance} resetLabel={resetOn} />
          <button className="pi-icon-btn" title="Help" aria-label="Help"><AMIcon name="circle-help" size={17} /></button>
          <span className="pi-avatar" title={user && user.name}>{initials}</span>
        </div>
      </div>
    </React.Fragment>
  );
}

/* ---------- Setup progress steps ---------- */
function SetupSteps({ current }) {
  const steps = ["Your board", "Your sources", "The equation"];
  return (
    <div className="am-setup-steps">
      {steps.map((s, i) => (
        <React.Fragment key={s}>
          {i > 0 && <span className="am-setup-sep"></span>}
          <span className={"am-setup-step" + (i === current ? " active" : i < current ? " done" : "")}>
            <span className="dot">{i < current ? <AMIcon name="check" size={11} strokeWidth={3} /> : i + 1}</span>
            {s}
          </span>
        </React.Fragment>
      ))}
    </div>
  );
}

/* ---------- Toast ---------- */
function Toast({ icon, children }) {
  return <div className="am-toast"><AMIcon name={icon || "check"} size={15} color="#07AFAA" />{children}</div>;
}

/* ---------- Equation strip (hero / compact) ---------- */
function EqStrip({ agendaLabel, videoLabel, templateLabel }) {
  const slots = [
    { ic: "file-text", tt: "Agenda", ss: agendaLabel || "From your agenda system or website" },
    { ic: "video", tt: "Recording", ss: videoLabel || "YouTube, Granicus, Facebook…" },
    { ic: "file-check", tt: "Your minutes template", ss: templateLabel || "An example of your approved minutes" },
  ];
  return (
    <div className="am-eq">
      {slots.map((s, i) => (
        <div className="am-eq-row" key={s.tt}>
          <span className="am-eq-op">{i === 0 ? "" : "+"}</span>
          <div className="am-eq-slot">
            <span className="ic"><AMIcon name={s.ic} size={19} /></span>
            <span style={{ minWidth: 0 }}>
              <div className="tt">{s.tt}</div>
              <div className="ss">{s.ss}</div>
            </span>
          </div>
        </div>
      ))}
      <div className="am-eq-row">
        <span className="am-eq-op">=</span>
        <div className="am-eq-slot am-eq-result">
          <span className="ic"><AMIcon name="sparkles" size={19} /></span>
          <span>
            <div className="tt">Draft minutes, in your board's voice</div>
            <div className="ss">Ready to review, edit, and approve</div>
          </span>
        </div>
      </div>
    </div>
  );
}

/* ---------- Modal ---------- */
function AMModal({ title, onClose, children, footer, width }) {
  return (
    <div className="pi-modal-backdrop" onClick={(e) => { if (e.target === e.currentTarget && onClose) onClose(); }}>
      <div className="pi-modal" style={width ? { width } : null}>
        <div className="pi-modal-head">
          <h3>{title}</h3>
          {onClose && <button className="pi-icon-btn pi-icon-btn-sm" onClick={onClose} aria-label="Close modal"><AMIcon name="x" size={15} /></button>}
        </div>
        <div className="pi-modal-body">{children}</div>
        {footer && <div className="pi-modal-foot">{footer}</div>}
      </div>
    </div>
  );
}

/* ---------- Error boundary ---------- */
class AMErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { error: null };
  }
  static getDerivedStateFromError(error) { return { error }; }
  render() {
    if (this.state.error) {
      return (
        <div style={{ padding: 40, textAlign: "center" }}>
          <h2 style={{ color: "#F1416C" }}>Something went wrong</h2>
          <p style={{ color: "var(--fg-2)", fontSize: 14 }}>{this.state.error.message}</p>
          <button className="pi-btn pi-btn-primary" onClick={() => this.setState({ error: null })}>Try again</button>
        </div>
      );
    }
    return this.props.children;
  }
}

Object.assign(window, { AMIcon, AMLogo, BrowserStrip, EmailFrame, CreditsPill, AppBar, SetupSteps, Toast, EqStrip, AMModal, AMErrorBoundary });