// Share modal — toggle a project public/private, copy a public link.

function ShareModal({ project, onClose, onChange }) {
  const open = !!project;
  const [copied, setCopied] = React.useState(false);
  React.useEffect(() => {
    setCopied(false);
    const onKey = (e) => { if (e.key === "Escape" && open) onClose(); };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [open]);
  if (!project) return null;

  const isPublic = project.visibility === "public";
  const url = `https://constellation.app/p/${project.shareSlug}`;

  const toggle = async () => {
    const next = isPublic ? false : true;
    project.visibility = next ? "public" : "private";
    onChange();
    try { await window.api.shareProject(project.id, next); } catch (e) { console.error(e); }
  };
  const copy = () => {
    navigator.clipboard?.writeText(url).catch(() => {});
    setCopied(true);
    setTimeout(() => setCopied(false), 1500);
  };

  return (
    <div className={"agent-modal-wrap" + (open ? " open" : "")} onClick={onClose}>
      <div className="agent-modal" style={{ maxWidth: 540 }} onClick={(e) => e.stopPropagation()}>
        <button className="drawer-close agent-modal-close" onClick={onClose}><window.Icon.Close /></button>
        <div className="cfg-head">
          <div className="cfg-head-row">
            <div>
              <div className="cfg-eyebrow">Share project</div>
              <h2 className="cfg-title">{project.name}</h2>
            </div>
          </div>
        </div>
        <div className="share-modal-body">
          <div className="share-row">
            <div className="icon">
              {isPublic
                ? <svg width="14" height="14" viewBox="0 0 16 16" fill="none"><circle cx="8" cy="8" r="6" stroke="currentColor" strokeWidth="1.4"/><path d="M2 8h12M8 2c2 2 2 10 0 12M8 2c-2 2-2 10 0 12" stroke="currentColor" strokeWidth="1.3"/></svg>
                : <svg width="14" height="14" viewBox="0 0 16 16" fill="none"><rect x="3" y="7" width="10" height="7" rx="1.5" stroke="currentColor" strokeWidth="1.4"/><path d="M5 7V5a3 3 0 0 1 6 0v2" stroke="currentColor" strokeWidth="1.4"/></svg>}
            </div>
            <div style={{ flex: 1 }}>
              <div className="label">{isPublic ? "Public on the web" : "Private"}</div>
              <div className="sub">
                {isPublic
                  ? "Anyone with the link can view the board (read-only)."
                  : "Only invited members can view this project."}
              </div>
            </div>
            <button className={"share-toggle" + (isPublic ? " on" : "")} onClick={toggle} aria-label="Toggle public" />
          </div>

          {isPublic && (
            <div className="share-link">
              <input readOnly value={url} onFocus={(e) => e.target.select()} />
              <button className="btn primary" onClick={copy}>{copied ? "Copied" : "Copy link"}</button>
            </div>
          )}

          <div style={{ marginTop: 16, fontSize: 12, color: "var(--text-faint)", lineHeight: 1.5 }}>
            Public boards hide token costs, agent system instructions, and PR diffs. Tasks, status, and the chain-of-thought summary remain visible.
          </div>
        </div>
      </div>
    </div>
  );
}

window.ShareModal = ShareModal;