// BeaconLauncher.jsx — persistent concierge entry point (bottom-right).
// Closed: a small Beacon 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 BeaconChatProvider, so closing never loses the conversation.

const BCL_PILLS = ["Review my site", "Show me pricing", "I need a new website", "I'm not sure yet"];

function BeaconLauncher() {
  const c = useBeaconChat();
  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="bcl">
      {panelOpen && (
        <div className="bcl-panel" role="dialog" aria-label="Beacon">
          <div className="bcl-head">
            <span className="bcl-av" aria-hidden="true"><img src="assets/beacon-face.png" alt="Beacon" /></span>
            <div className="bcl-htext">
              <h5>Beacon</h5>
              <p className="bcl-status">Website starting point</p>
            </div>
            <button type="button" className="bcl-hbtn" aria-label="Open full screen" onClick={expand}><i className="ri-fullscreen-line" /></button>
            <button type="button" className="bcl-hbtn" aria-label="Close" onClick={() => setPanelOpen(false)}><i className="ri-close-line" /></button>
          </div>

          <div className="bcl-thread" ref={bodyRef}>
            <BeaconMessages />
          </div>

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

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

      {showOrb && (
        <div className="bcl-dock">
          {showTeaser && (
            <div className="bcl-teaser" role="button" tabIndex={0} onClick={openPanel}
              onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); openPanel(); } }}>
              <span className="bcl-teaser-txt">Need a better site? Start here.</span>
              <button type="button" className="bcl-teaser-x" aria-label="Dismiss message" onClick={closeTeaser}>&times;</button>
            </div>
          )}
          <button type="button" className="bcl-orb" aria-label={panelOpen ? "Close Beacon" : "Open Beacon"} onClick={toggleOrb}>
            <img src="assets/beacon-face.png" alt="Beacon" />
            {showBadge && <span className="bcl-badge" aria-label="1 new message">1</span>}
          </button>
        </div>
      )}
    </div>
  );
}

Object.assign(window, { BeaconLauncher });