/* Powermieter Landingpage — interactive building blocks */
const { useState: useBS, useEffect: useBE, useRef: useBR } = React;

/* ---- Process rail (sticky top, current = Informieren) ---- */
function ProcessRail({ current = 1, onJump }) {
  return (
    <nav className="lp-rail" aria-label="Prozess">
      {LP_STEPS.map((s, i) => {
        const Ic = I[s.icon];
        const state = s.n === current ? 'active' : s.n < current ? 'done' : 'todo';
        return (
          <React.Fragment key={s.n}>
            <button className="lp-rail-step" data-state={state} onClick={() => onJump && onJump(s)}>
              <span className="lp-rail-num">{state === 'done' ? <I.check /> : s.n}</span>
              <span className="lp-rail-lbl">{s.label}</span>
            </button>
            {i < LP_STEPS.length - 1 && <span className="lp-rail-sep" aria-hidden="true" />}
          </React.Fragment>
        );
      })}
    </nav>
  );
}

/* ---- Browser frame wrapper for the Paula dashboard ---- */
function BrowserFrame({ url, children }) {
  return (
    <div className="lp-browser">
      <div className="lp-browser-bar">
        <span className="lp-browser-dot" style={{ background: '#FF5F57' }} />
        <span className="lp-browser-dot" style={{ background: '#FEBC2E' }} />
        <span className="lp-browser-dot" style={{ background: '#28C840' }} />
        <span className="lp-browser-url">{url}</span>
      </div>
      <div className="lp-browser-body">{children}</div>
    </div>
  );
}

/* ---- Floating Paula chat ---- */
function PaulaChat({ open, onOpen, onClose }) {
  const [msgs, setMsgs] = useBS([
    { who: 'a', text: 'Hallo, ich bin Paula 👋 Ihre digitale Energieberaterin. Was möchten Sie wissen?' },
  ]);
  const [typing, setTyping] = useBS(false);
  const [asked, setAsked] = useBS([]);
  const bodyRef = useBR(null);
  const timer = useBR(null);

  useBE(() => { if (bodyRef.current) bodyRef.current.scrollTop = bodyRef.current.scrollHeight; }, [msgs, typing, open]);
  useBE(() => () => clearTimeout(timer.current), []);

  const ask = (qa) => {
    setMsgs(m => [...m, { who: 'q', text: qa.q }]);
    setAsked(a => [...a, qa.q]);
    setTyping(true);
    timer.current = setTimeout(() => {
      setTyping(false);
      setMsgs(m => [...m, { who: 'a', text: qa.a }]);
    }, 850);
  };

  const remaining = LP_CHAT_QA.filter(qa => !asked.includes(qa.q));

  if (!open) {
    return (
      <button className="lp-fab" onClick={onOpen} aria-label="Chat mit Paula öffnen">
        <img src={lpAsset('paulaAvatar', 'assets/paula-avatar.png?v=2')} alt="Paula" />
        <span className="lp-fab-dot" />
        <span>Frage an Paula</span>
      </button>
    );
  }

  return (
    <div className="lp-chat" role="dialog" aria-label="Chat mit Paula">
      <div className="lp-chat-head">
        <img src={lpAsset('paulaAvatar', 'assets/paula-avatar.png?v=2')} alt="Paula" />
        <div>
          <div className="lp-chat-head-n">Paula</div>
          <div className="lp-chat-head-s">Ihre Energieberaterin · online</div>
        </div>
        <button className="lp-chat-close" onClick={onClose} aria-label="Schließen"><I.x size={18} /></button>
      </div>
      <div className="lp-chat-body" ref={bodyRef}>
        {msgs.map((m, i) => (
          <div key={i} className={'lp-chat-msg lp-chat-msg-' + m.who}>{m.text}</div>
        ))}
        {typing && <div className="lp-chat-typing"><span /><span /><span /></div>}
      </div>
      <div className="lp-chat-sugg">
        {remaining.length ? remaining.map(qa => (
          <button key={qa.q} onClick={() => ask(qa)}>{qa.q}</button>
        )) : (
          <span style={{ fontSize: 12.5, color: 'var(--text-3)', padding: '4px 2px' }}>
            Weitere Fragen? Im echten Portal antwortet Paula auf alles rund um Ihren Strom.
          </span>
        )}
      </div>
    </div>
  );
}

/* ---- Mobile sticky bottom CTA ---- */
function StickyCTA({ onClick }) {
  return (
    <div className="lp-sticky">
      <Button block size="lg" iconRight={<I.arrowR />} onClick={onClick}>Jetzt Interesse anmelden</Button>
    </div>
  );
}

Object.assign(window, { ProcessRail, BrowserFrame, PaulaChat, StickyCTA });