import gradio as gr
from gradio_htmlinjector import HTMLInjector

# 1) Choix dans la popup -> ajoute (Oui/Non, confirmation)
def handle_choice(choice: str, chat_history: list[tuple[str, str]]):
    c = (choice or "").strip().lower()
    if c in {"oui", "o", "yes", "y"}:
        user_choice, reply = "Oui", "✅ Vous avez choisi **OUI**. Action validée."
    elif c in {"non", "n", "no"}:
        user_choice, reply = "Non", "❌ Vous avez choisi **NON**. Action annulée."
    else:
        return chat_history, ""  # ignore valeurs inattendues
    return chat_history + [(user_choice, reply)], ""  # reset du pont

# 2) Soumission utilisateur : réponse fixe
def on_submit(user_msg: str, chat_history: list[tuple[str, str]]):
    if not user_msg:
        return chat_history, ""  # rien
    assistant_reply = "Ceci est une réponse de démonstration.\n\nConfirmez-vous l’action ?"
    return chat_history + [(user_msg, assistant_reply)], ""  # clear textbox

# 3) Injection HTML/CSS + helper
def inject_assets():
    js = r"""
    function setGradioValue(elemId, value){
      const root = (window.gradioApp && window.gradioApp()) || document;
      const host = root.querySelector(`#${elemId}`);
      if (!host) return;
      const input = host.querySelector('input, textarea');
      if (!input) return;
      input.value = value;
      input.dispatchEvent(new Event('input',  {bubbles:true}));
      input.dispatchEvent(new Event('change', {bubbles:true}));
    }
    """
    css = r"""
    #confirm-modal{
      display:none; position:fixed; inset:0; z-index:9999;
      background: rgba(0,0,0,.45); align-items:center; justify-content:center;
    }
    #confirm-card{
      background: var(--panel-background-fill, #fff); color: var(--body-text-color, #111);
      border: 1px solid var(--border-color-primary, #ccc); border-radius: 10px;
      padding: 20px; min-width: 320px; max-width: 90vw; box-shadow: 0 10px 30px rgba(0,0,0,.2);
    }
    #confirm-actions{ display:flex; gap:8px; justify-content:flex-end; margin-top:14px; }
    #confirm-actions button{ cursor:pointer; padding:8px 14px; border-radius:8px; border:1px solid #bbb; background:#f4f4f5; }
    #confirm-actions button.primary{ background:#2563eb; color:#fff; border-color:transparent; }
    #bridge-choice{ display:none; }  /* pont caché mais monté */
    """
    html = r"""
    <div id="confirm-modal" role="dialog" aria-modal="true" aria-labelledby="confirm-title">
      <div id="confirm-card">
        <h3 id="confirm-title">Confirmer ?</h3>
        <p>Souhaitez-vous continuer ?</p>
        <div id="confirm-actions">
          <button type="button"
            onclick="setGradioValue('bridge-choice','non'); document.getElementById('confirm-modal').style.display='none'; document.body.style.overflow=''">Non</button>
          <button type="button" class="primary"
            onclick="setGradioValue('bridge-choice','oui'); document.getElementById('confirm-modal').style.display='none'; document.body.style.overflow=''">Oui</button>
        </div>
      </div>
    </div>
    """
    return {"css": css, "js": js, "body_html": html}

# 4) UI
with gr.Blocks(title="Démo Chat + Popup", fill_height=True) as demo:
    html_injector = HTMLInjector()

    chat = gr.Chatbot(label="Chatbot", height=420)
    user_in = gr.Textbox(placeholder="Tapez un message…", lines=2)
    bridge_choice = gr.Textbox(visible=True, elem_id="bridge-choice")  # pont oui/non

    # (A) submit -> (user, question)
    evt = user_in.submit(
        fn=on_submit,
        inputs=[user_in, chat],
        outputs=[chat, user_in],
    )

    # (B) puis -> ouvrir la popup côté client (sans inputs/outputs)
    evt.then(
        fn=None,
        inputs=None,
        outputs=None,
        js="""
() => {
  const start = Date.now();
  (function tick(){
    const modal = document.getElementById('confirm-modal');
    if (modal) {
      modal.style.display = 'flex';
      document.body.style.overflow = 'hidden';
      return;
    }
    if (Date.now() - start < 3000) setTimeout(tick, 60);
  })();
}
        """,
    )

    # (C) clic Oui/Non -> ajoute (Oui/Non, confirmation)
    bridge_choice.change(
        fn=handle_choice,
        inputs=[bridge_choice, chat],
        outputs=[chat, bridge_choice],
    )

    # Injection initiale (structure + styles + helper)
    demo.load(fn=inject_assets, inputs=None, outputs=[html_injector])

demo.launch()