// SONARA — Manager "Invita nel roster" modal
// Mount <window.InviteHost/> once per page. Open with window.openInviteModal(artist).
const IIcons = window.SonaraIcons;

const INVITE_TEMPLATES = [
  {
    label: "Default",
    text: "Ciao {name}, ho seguito la tua crescita su Sonara e penso che potremmo costruire un percorso interessante insieme. Mi piacerebbe parlarne con te — quando hai un po' di tempo possiamo sentirci."
  },
  {
    label: "Già fan",
    text: "Ciao {name}, sono fan di quello che stai facendo — soprattutto delle ultime tracce. Sto cercando 1-2 nuovi artisti per il mio roster e ho l'impressione che con te ci sia un buon match. Ti va di sentirci?"
  },
  {
    label: "Per progetto",
    text: "Ciao {name}, ti scrivo per una proposta più specifica: vorrei supportarti come manager per il prossimo singolo / EP. Niente impegno a lungo termine, vediamo come si lavora insieme."
  },
];

function InviteHost() {
  const [artist, setArtist] = React.useState(null);
  const [stage, setStage] = React.useState("form"); // form | success
  const [relation, setRelation] = React.useState("Esclusiva");
  const [tplIdx, setTplIdx] = React.useState(0);
  const [msg, setMsg] = React.useState("");

  // open via custom event
  React.useEffect(() => {
    const handler = (e) => {
      const a = e.detail;
      setArtist(a);
      setStage("form");
      setRelation("Esclusiva");
      setTplIdx(0);
      const t = INVITE_TEMPLATES[0].text.replace("{name}", a?.name?.split(" ")[0] || "");
      setMsg(t);
    };
    window.addEventListener("sonara:open-invite", handler);
    return () => window.removeEventListener("sonara:open-invite", handler);
  }, []);

  // ESC to close
  React.useEffect(() => {
    if (!artist) return;
    const k = (e) => { if (e.key === "Escape") setArtist(null); };
    document.addEventListener("keydown", k);
    return () => document.removeEventListener("keydown", k);
  }, [artist]);

  if (!artist) return null;

  const onTpl = (i) => {
    setTplIdx(i);
    setMsg(INVITE_TEMPLATES[i].text.replace("{name}", artist?.name?.split(" ")[0] || ""));
  };

  const chars = msg.length;
  const valid = chars >= 50 && chars <= 500;
  const remain = 500 - chars;

  return (
    <div className="modal-backdrop" onClick={() => setArtist(null)}>
      <div className="modal-card" onClick={(e) => e.stopPropagation()}>
        {stage === "form" && (
          <>
            <header className="modal-head">
              <div className="modal-title">
                <span className="modal-icon"><IIcons.users size={16}/></span>
                Invita nel roster
              </div>
              <button className="modal-close" onClick={() => setArtist(null)} title="Chiudi">
                <IIcons.close size={16}/>
              </button>
            </header>

            <div className="modal-body">
              {/* Artist summary */}
              <div className="invite-artist">
                <span className="invite-av">{artist.init}</span>
                <div className="invite-meta">
                  <div className="invite-nm">{artist.name}</div>
                  <div className="invite-hd">{artist.handle} · {artist.city || ""}</div>
                  {artist.hasManager && (
                    <div className="invite-warn">
                      <IIcons.info size={11}/>
                      Già rappresentato da {artist.currentMgr} — potrai inviare l'invito ma l'artista dovrà sciogliere il vincolo esclusivo prima di accettare.
                    </div>
                  )}
                  {artist.looking && (
                    <div className="invite-good">
                      <IIcons.check size={11}/>
                      Questo artista sta cercando un manager.
                    </div>
                  )}
                </div>
              </div>

              {/* Relation type */}
              <div className="invite-section">
                <label className="invite-label">Tipo di relazione</label>
                <div className="invite-radios">
                  {[
                    { v: "Esclusiva", t: "Esclusiva", s: "L'artista può avere solo te come manager attivo." },
                    { v: "Non-esclusiva", t: "Non-esclusiva", s: "L'artista può lavorare anche con altri manager in parallelo." },
                    { v: "Project-based", t: "Project-based", s: "Solo per uno specifico progetto (singolo, EP, tour)." },
                  ].map(o => (
                    <label key={o.v} className={`invite-radio ${relation === o.v ? "active" : ""}`}>
                      <input type="radio" name="rel" value={o.v} checked={relation === o.v} onChange={() => setRelation(o.v)}/>
                      <div className="invite-radio-meta">
                        <div className="invite-radio-t">{o.t}</div>
                        <div className="invite-radio-s">{o.s}</div>
                      </div>
                      <span className="invite-radio-dot"/>
                    </label>
                  ))}
                </div>
              </div>

              {/* Message */}
              <div className="invite-section">
                <div className="invite-label-row">
                  <label className="invite-label">Messaggio personalizzato</label>
                  <div className="invite-templates">
                    {INVITE_TEMPLATES.map((t, i) => (
                      <button key={i} className={`invite-tpl ${tplIdx === i ? "active" : ""}`} onClick={() => onTpl(i)}>
                        {t.label}
                      </button>
                    ))}
                  </div>
                </div>
                <textarea
                  className="invite-textarea"
                  value={msg}
                  onChange={(e) => setMsg(e.target.value)}
                  placeholder="Spiega perché vuoi avere questo artista nel tuo roster…"
                  rows={6}
                  maxLength={500}
                />
                <div className="invite-help-row">
                  <span className={`invite-counter ${chars < 50 ? "warn" : ""}`}>
                    {chars < 50 ? `Almeno ${50 - chars} caratteri ancora` : `${remain} caratteri rimasti`}
                  </span>
                  <span className="invite-help">50–500 caratteri · l'artista vedrà esattamente questo testo</span>
                </div>
              </div>

              {/* Limits info */}
              <div className="invite-info-card">
                <div className="invite-info-row">
                  <IIcons.clock size={12}/>
                  <span><strong>TTL invito: 30 giorni.</strong> Auto-decline se l'artista non risponde.</span>
                </div>
                <div className="invite-info-row">
                  <IIcons.users size={12}/>
                  <span><strong>Inviti pendenti: 3/20.</strong> Hai ancora spazio per altri 17 inviti.</span>
                </div>
              </div>
            </div>

            <footer className="modal-foot">
              <button className="ip-btn ghost" onClick={() => setArtist(null)}>Annulla</button>
              <button
                className="ip-btn primary"
                disabled={!valid}
                style={{ opacity: valid ? 1 : 0.5, cursor: valid ? "pointer" : "not-allowed" }}
                onClick={() => setStage("success")}>
                <IIcons.arrowRight size={12}/> Invia invito
              </button>
            </footer>
          </>
        )}

        {stage === "success" && (
          <div className="modal-success">
            <div className="modal-success-ic">
              <IIcons.check size={32}/>
            </div>
            <div className="modal-success-t">Invito inviato a {artist.name}</div>
            <div className="modal-success-s">
              {artist.handle} riceverà una notifica e ha <strong>30 giorni</strong> per rispondere.
              Riceverai un'email quando deciderà — accetta, rifiuta o chiede di chiarire qualcosa via DM.
            </div>
            <div className="modal-success-actions">
              <a href="Roster.html#inviti" className="ip-btn">Vedi inviti in attesa</a>
              <a href="Esplora.html" className="ip-btn primary" onClick={() => setArtist(null)}>Esplora altri artisti</a>
            </div>
          </div>
        )}
      </div>
    </div>
  );
}

window.InviteHost = InviteHost;
window.openInviteModal = (artist) => {
  window.dispatchEvent(new CustomEvent("sonara:open-invite", { detail: artist }));
};