// LensLauncher.jsx — persistent concierge entry point (bottom-right).
// Closed: a small Lens orb + a one-line teaser. Closing the teaser leaves the
// orb with a "1" notification badge. Clicking the orb opens a COMPACT chat
// preview (it always reopens in this small size). Answering — a pill or a typed
// message — sends into the shared session and expands to the full-screen chat.
// History lives in LensChatProvider, so closing never loses the conversation.

const LENS_LAUNCHER_PILLS = ["Audit my product page", "Find my product page", "What is a PDP?", "I do not have a product page"];

function LensLauncher() {
  const c = useLensChat();
  const isMobile = useIsMobile(560);
  const [panelOpen, setPanelOpen] = React.useState(false);
  const [teaserDismissed, setTeaserDismissed] = React.useState(false);
  const [badge, setBadge] = React.useState(false);
  const bodyRef = React.useRef(null);

  React.useEffect(() => {
    const t = bodyRef.current;
    if (t) t.scrollTop = t.scrollHeight;
  }, [c.messages, c.thinking, c.frame, panelOpen]);

  function openPanel() {
    setBadge(false);
    setTeaserDismissed(true);
    // on phones, skip the compact preview and go straight to full-screen chat
    if (isMobile) { c.openFullscreen(); return; }
    setPanelOpen(true);
  }
  function toggleOrb() {
    if (panelOpen) setPanelOpen(false);
    else openPanel();
  }
  function closeTeaser(ev) {
    ev.stopPropagation();
    setTeaserDismissed(true);
    setBadge(true);
  }
  function expand() {
    setPanelOpen(false);
    c.openFullscreen();
  }
  function answer(text) {
    c.send(text);
    setPanelOpen(false);
    c.openFullscreen();
  }

  const showTeaser = !teaserDismissed && !panelOpen && !c.fullscreen;
  const showBadge = badge && !panelOpen && !c.fullscreen;
  const showOrb = !c.fullscreen;

  return (
    <div className="lens-launcher">
      {panelOpen && (
        <div className="lens-launcher-panel" role="dialog" aria-label="Lens">
          <div className="lens-launcher-head">
            <span className="lens-launcher-av" aria-hidden="true"><img src={assetUrl("assets/lens-profile.avif")} alt="Lens" /></span>
            <div className="lens-launcher-htext">
              <h5>Lens</h5>
              <p className="lens-launcher-status">{c.auditStarted ? (c.auditStep >= 4 ? "Your 5 wins are ready" : `${c.steps[c.auditStep].label} (${c.auditStep + 1}/4)`) : "Waiting for site"}</p>
            </div>
            <button type="button" className="lens-launcher-hbtn" aria-label="Open full screen" onClick={expand}><i className="ri-fullscreen-line" /></button>
            <button type="button" className="lens-launcher-hbtn" aria-label="Close" onClick={() => setPanelOpen(false)}><i className="ri-close-line" /></button>
          </div>

          <div className="lens-launcher-thread" ref={bodyRef}>
            <LensMessages />
          </div>

          {!c.started && (
            <div className="lens-launcher-pills">
              {LENS_LAUNCHER_PILLS.map((p) => (
                <button type="button" key={p} className="lens-launcher-pill" onClick={() => answer(p)}>{p}</button>
              ))}
            </div>
          )}

          <LensComposer onSend={answer} autoFocus />
        </div>
      )}

      {showOrb && (
        <div className="lens-launcher-dock">
          {showTeaser && (
            <div className="lens-launcher-teaser" role="button" tabIndex={0} onClick={openPanel}
              onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); openPanel(); } }}>
              <span className="lens-launcher-teaser-txt">Want to improve your PDP? Talk to me</span>
              <button type="button" className="lens-launcher-teaser-x" aria-label="Dismiss message" onClick={closeTeaser}>&times;</button>
            </div>
          )}
          <button type="button" className="lens-launcher-orb" aria-label={panelOpen ? "Close Lens" : "Open Lens"} onClick={toggleOrb}>
            <img src={assetUrl("assets/lens-avatar.avif")} alt="Lens" />
            {showBadge && <span className="lens-launcher-badge" aria-label="1 new message">1</span>}
          </button>
        </div>
      )}
    </div>
  );
}

Object.assign(window, { LensLauncher });