// Nouvelle annonce — modal (the "compose" screen from the mobile screens).

function AnnonceModal({ onClose }) {
  const { t } = useApp();
  const [pinned, setPinned] = React.useState(false);
  const [text, setText] = React.useState("");

  return (
    <div className="scrim" onClick={onClose}>
      <div className="modal" onClick={e => e.stopPropagation()}>
        <div className="row" style={{padding: "16px 20px", justifyContent: "space-between", alignItems: "center", borderBottom: "1px solid var(--border)"}}>
          <div className="row gap-3" style={{alignItems: "center"}}>
            <Icons.Megaphone size={18} style={{color: "var(--brand)"}}/>
            <div>
              <div className="eyebrow">{t("annonce_modal_eyebrow")}</div>
              <div className="h3">{t("annonce_modal_sub")}</div>
            </div>
          </div>
          <button className="icon-btn" onClick={onClose}><Icons.X size={16}/></button>
        </div>

        <div style={{padding: "22px 24px"}}>
          <div className="display" style={{fontSize: 28, marginBottom: 18}}>{t("annonce_question")}</div>

          <div style={{
            border: "1px solid var(--border)", borderRadius: 14,
            background: "var(--surface-2)", padding: 16,
            minHeight: 220, marginBottom: 16,
          }}>
            <textarea
              autoFocus
              value={text}
              onChange={e => setText(e.target.value)}
              placeholder={t("annonce_ph")}
              style={{
                width: "100%", border: "none", outline: "none",
                background: "transparent", resize: "none",
                font: "inherit", fontSize: 15, lineHeight: 1.55,
                color: "var(--ink)", minHeight: 180,
              }}/>
          </div>

          <div className="row gap-2" style={{marginBottom: 16, flexWrap: "wrap"}}>
            <button className="chip"><Icons.Paper size={12}/>{t("attach_file")}</button>
            <button className="chip"><Icons.Cal size={12}/>{t("schedule_btn")}</button>
            <button className="chip"><Icons.Team size={12}/>{t("audience_btn")}</button>
            <button className="chip brand"><Icons.Sparkle size={12}/>{t("write_ia_btn")}</button>
          </div>

          <div className="row" style={{
            padding: "14px 16px", borderRadius: 12,
            border: "1px solid var(--border)", background: "var(--surface)",
            alignItems: "center", justifyContent: "space-between", marginBottom: 14,
          }}>
            <div>
              <div style={{fontWeight: 700, color: "var(--ink)"}}>{t("pin_label")}</div>
              <div className="meta">{t("pin_sub")}</div>
            </div>
            <Toggle on={pinned} onClick={() => setPinned(!pinned)}/>
          </div>

          <div className="meta">
            Sera visible par toute l'équipe pédagogique. Signée : <b style={{color: "var(--ink)"}}>Sophie · Direction</b>.
          </div>
        </div>

        <div className="row" style={{padding: "14px 20px", borderTop: "1px solid var(--border)", justifyContent: "space-between", background: "var(--surface-2)"}}>
          <button className="btn btn-ghost" onClick={onClose}>{t("cancel")}</button>
          <div className="row gap-2">
            <button className="btn">{t("draft_btn")}</button>
            <button className="btn btn-primary"><Icons.Send size={14}/>{t("publish_btn")}</button>
          </div>
        </div>
      </div>
    </div>
  );
}

function Toggle({ on, onClick }) {
  return (
    <button onClick={onClick}
            style={{
              width: 46, height: 26, borderRadius: 99,
              background: on ? "var(--brand)" : "var(--border-strong)",
              position: "relative", transition: "background .15s ease",
              padding: 0,
            }}>
      <span style={{
        position: "absolute", top: 3, left: on ? 23 : 3,
        width: 20, height: 20, borderRadius: 99,
        background: "white", transition: "left .15s ease",
        boxShadow: "0 1px 3px rgba(0,0,0,0.2)",
      }}/>
    </button>
  );
}

window.AnnonceModal = AnnonceModal;
window.Toggle = Toggle;