onDragStart && onDragStart(e, note)} onDragOver={(e) => { if (isAdmin && !hidden) e.preventDefault(); }} onDrop={(e) => { e.preventDefault(); e.stopPropagation(); onDropOnto && onDropOnto(note); }} title={hidden && isAdmin ? "Cliquez pour révéler" : (canEdit ? "Double-cliquez pour modifier" : "")} > {groupCount > 1 && (

{groupCount}

)} {hidden ? (

{isAdmin ? "À RÉVÉLER" : (isMine ? "VOTRE NOTE" : "EN ATTENTE")}

) : editing ? ( <>

e.stopPropagation()}
            onChange={(e) => setDraft(e.target.value)}
            onKeyDown={(e) => {
              if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) { e.preventDefault(); commitEdit(); }
              if (e.key === "Escape") { e.preventDefault(); cancelEdit(); }
            }}
            rows={Math.max(3, Math.min(8, draft.split("\n").length + 1))}
            style={{
              width: "100%", border: "none", outline: "none", resize: "none",
              background: "transparent", color: "#3a3220",
              fontFamily: "var(--postit-font)", fontSize: "var(--postit-size)",
              lineHeight: "var(--postit-line)", fontWeight: "var(--postit-weight)",
            }}
          />
          <div className="postit__foot">
            <span style={{ fontSize: ".72rem", color: "rgba(40,34,18,.55)", fontFamily: '"Plus Jakarta Sans",sans-serif', fontWeight: 600 }}>
              ⌘+↵ pour enregistrer · Échap pour annuler
            </span>
            <span className="postit__spacer" />
            <button className="btn btn--sm" onClick={(e) => { e.stopPropagation(); cancelEdit(); }}
              style={{ background: "rgba(255,255,255,.6)" }}>Annuler</button>
            <button className="btn btn--sm btn--primary" onClick={(e) => { e.stopPropagation(); commitEdit(); }}>
              Enregistrer
            </button>
          </div>
        </>
      ) : (
        <>
          <div className="postit__text">{note.text}</div>
          <div className="postit__foot">
            {note.anon ? (
              <span className="postit__author" style={{ fontStyle: "italic" }}>— Anonyme{isMine ? " (vous)" : ""}</span>
            ) : author ? (
              <span className="postit__author">— {author.name}{isMine ? " (vous)" : ""}</span>
            ) : null}
            <span className="postit__spacer" />
            <button className="vote" data-voted={voted ? "1" : "0"}
                    onClick={(e) => { e.stopPropagation(); onVote && onVote(note.id); }}
                    title="Voter">
              <span style={{ display: "inline-flex" }}><Icon name="check" size={13} stroke={3} /></span>
              {note.votes.length}
            </button>
            {canEdit && (
              <button className="icon-btn" style={{ width: 26, height: 26, color: "rgba(40,34,18,.55)" }}
                      onClick={startEdit}
                      title="Modifier ma note">
                <Icon name="edit" size={13} />
              </button>
            )}
            {isAdmin && (
              <button className="icon-btn" style={{ width: 26, height: 26, color: "rgba(40,34,18,.55)" }}
                      onClick={(e) => { e.stopPropagation(); onDelete && onDelete(note.id); }}
                      title="Supprimer">
                <Icon name="trash" size={14} />
              </button>
            )}
          </div>
        </>
      )}
    </div>
  );
}

/* ---------------- Composer (ajout de note) ---------------- */
function Composer({ colors, defaultColorId, onAdd, onCancel }) {
  const [text, setText] = React.useState("");
  const [colorId, setColorId] = React.useState(defaultColorId || colors[0].id);
  const [anon, setAnon] = React.useState(false);
  const ref = React.useRef(null);
  React.useEffect(() => { ref.current && ref.current.focus(); }, []);

const submit = () => {
    const t = text.trim();
    if (!t) { onCancel && onCancel(); return; }
    onAdd(t, colorId, anon);
    setText("");
  };
  const color = colors.find(c => c.id === colorId) || colors[0];

return (
    <div className="postit" style={{ "--pi": color.hex, transform: "rotate(0deg)", cursor: "text" }}>
      <textarea
        ref={ref}
        value={text}
        onChange={(e) => setText(e.target.value)}
        onKeyDown={(e) => {
          if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) { e.preventDefault(); submit(); }
          if (e.key === "Escape") onCancel && onCancel();
        }}
        placeholder={anon ? "Votre note (anonyme)…" : "Votre note…"}
        rows={3}
        style={{
          width: "100%", border: "none", outline: "none", resize: "none",
          background: "transparent", color: "#3a3220",
          fontFamily: "var(--postit-font)", fontSize: "var(--postit-size)",
          lineHeight: "var(--postit-line)", fontWeight: "var(--postit-weight)",
        }}
      />
      <button onClick={() => setAnon(a => !a)} title="Publier sans afficher votre nom"
        style={{
          display: "inline-flex", alignItems: "center", gap: 6, marginTop: 6,
          border: "none", cursor: "pointer", borderRadius: 999, padding: "4px 10px",
          fontFamily: '"Plus Jakarta Sans",sans-serif', fontWeight: 700, fontSize: ".74rem",
          background: anon ? "#3a3220" : "rgba(58,50,32,.10)",
          color: anon ? "#fff" : "rgba(40,34,18,.7)",
        }}>
        <Icon name={anon ? "eyeOff" : "eye"} size={13} />
        {anon ? "Anonyme" : "Signer de mon nom"}
      </button>
      <div style={{ display: "flex", alignItems: "center", gap: 8, marginTop: 8 }}>
        <div style={{ display: "flex", gap: 5 }}>
          {colors.map(c => (
            <button key={c.id} onClick={() => setColorId(c.id)} title={c.name}
                    style={{
                      width: 19, height: 19, borderRadius: "50%", background: c.hex,
                      border: colorId === c.id ? "2.5px solid #3a3220" : "2px solid rgba(0,0,0,.12)",
                      cursor: "pointer", padding: 0,
                    }} />
          ))}
        </div>
        <span className="postit__spacer" />
        <button className="btn btn--sm" onClick={onCancel} style={{ background: "rgba(255,255,255,.6)" }}>Annuler</button>
        <button className="btn btn--sm btn--primary" onClick={submit}>Ajouter</button>
      </div>
    </div>
  );
}

/* ---------------- Modale ---------------- */
function Modal({ children, onClose, width }) {
  React.useEffect(() => {
    const h = (e) => { if (e.key === "Escape") onClose(); };
    window.addEventListener("keydown", h);
    return () => window.removeEventListener("keydown", h);
  }, [onClose]);
  return (
    <div className="scrim" onClick={onClose}>
      <div className="modal scroll" style={width ? { width } : null} onClick={(e) => e.stopPropagation()}>
        {children}
      </div>
    </div>
  );
}

/* ---------------- Menu déroulant simple ---------------- */
function Dropdown({ trigger, children, align = "left", width = 240 }) {
  const [open, setOpen] = React.useState(false);
  const ref = React.useRef(null);
  React.useEffect(() => {
    const h = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); };
    window.addEventListener("mousedown", h);
    return () => window.removeEventListener("mousedown", h);
  }, []);
  return (
    <div ref={ref} style={{ position: "relative" }}>
      <div onClick={() => setOpen(o => !o)}>{trigger}</div>
      {open && (
        <div className="card scroll" style={{
          position: "absolute", top: "calc(100% + 8px)", [align]: 0, width, zIndex: 100,
          padding: 6, borderRadius: 16, maxHeight: 360, overflow: "auto",
          boxShadow: "0 24px 60px -20px rgba(0,0,0,.5)",
        }}
        onClick={() => setOpen(false)}>
          {children}
        </div>
      )}
    </div>
  );
}

Object.assign(window, { Icon, Avatar, AvatarStack, PostIt, Composer, Modal, Dropdown, MenuItem });