// InlineMorphOverlay
//
// "Inline expansion" transition: when the hero's Get Started fires, this
// overlay covers the page and animates the composer-shaped surface into the
// chat layout — query becomes a right-aligned bubble at the top of a paper
// surface, agent typing dots fade in below. Total ~1.1s. The Apply page picks
// up where this leaves off (same bubble in roughly the same position) so the
// page boundary is invisible.

const { useState: useIMOState, useEffect: useIMOEffect } = React;

function InlineMorphOverlay({ query }) {
  const t = window.tokens;
  const [step, setStep] = useIMOState(0);
  // 0 = first paint (composer-position bubble, hero bg)
  // 1 = bg fades to paper, bubble shrinks/repositions, hero copy fades out
  // 2 = agent typing dots appear

  useIMOEffect(() => {
    const t1 = setTimeout(() => setStep(1), 60);
    const t2 = setTimeout(() => setStep(2), 600);
    return () => { clearTimeout(t1); clearTimeout(t2); };
  }, []);

  return (
    <div
      role="status"
      aria-live="polite"
      style={{
        position: 'fixed', inset: 0, zIndex: 9000,
        background: step >= 1 ? t.color.paper : t.color.bg,
        transition: 'background 420ms cubic-bezier(0.4, 0, 0.2, 1)',
        overflow: 'hidden',
        fontFamily: t.font.sans,
      }}
    >
      {/* Faux page header so the layout reads as the chat page already loaded
          \u2014 mirrors the real PortalHeader's height and the substrip below. */}
      <div style={{ height: 60, borderBottom: `1px solid ${t.color.hair}`, background: t.color.bg }} />

      {/* The morphing surface. We use a CSS-grid layout that pins the bubble
          to roughly where the chat page renders the first transcript message:
          centered column, max width 720, padding from top of transcript area. */}
      <div style={{
        position: 'relative',
        height: 'calc(100% - 60px)',
        background: t.color.paper,
        overflow: 'hidden',
      }}>
        <div style={{
          maxWidth: 720, margin: '0 auto',
          padding: '24px 32px',
          display: 'flex', flexDirection: 'column',
          gap: 10,
        }}>
          {/* Query bubble — starts wide (composer-shaped), shrinks to chat
              bubble, slides to right-align. Width interpolates from a near-full
              composer width to the natural fit-content of the bubble. The end
              state matches ChatBubble's user variant exactly: t.color.text bg,
              white text, 16px radius w/ 4 on bottom-right, max-width 78%. */}
          <div style={{
            display: 'flex',
            alignItems: 'flex-end',
            gap: 8,
            justifyContent: step >= 1 ? 'flex-end' : 'stretch',
            transition: 'all 600ms cubic-bezier(0.22, 0.61, 0.36, 1)',
          }}>
            <div style={{
              background: step >= 1 ? t.color.text : t.color.bg,
              color: step >= 1 ? '#FFFFFF' : t.color.text,
              border: step >= 1 ? 'none' : `1px solid ${t.color.strong}`,
              padding: step >= 1 ? '11px 16px' : '18px',
              borderRadius: 16,
              borderBottomRightRadius: step >= 1 ? 4 : 16,
              fontSize: step >= 1 ? t.size.body : 17,
              lineHeight: 1.5,
              maxWidth: step >= 1 ? '78%' : '100%',
              width: step >= 1 ? 'auto' : '100%',
              transition: [
                'background 420ms cubic-bezier(0.4, 0, 0.2, 1)',
                'color 420ms cubic-bezier(0.4, 0, 0.2, 1)',
                'border-color 420ms cubic-bezier(0.4, 0, 0.2, 1)',
                'padding 600ms cubic-bezier(0.22, 0.61, 0.36, 1)',
                'border-bottom-right-radius 600ms cubic-bezier(0.22, 0.61, 0.36, 1)',
                'font-size 600ms cubic-bezier(0.22, 0.61, 0.36, 1)',
                'max-width 600ms cubic-bezier(0.22, 0.61, 0.36, 1)',
              ].join(', '),
              fontFamily: 'inherit',
              fontWeight: 400,
              wordBreak: 'break-word',
            }}>
              {query || ' '}
            </div>
            {/* Avatar reservation \u2014 width matches the real ChatBubble's UserAvatar
                slot so the bubble aligns with the post-morph chat. */}
            <div style={{
              width: step >= 1 ? 32 : 0,
              opacity: step >= 1 ? 1 : 0,
              flexShrink: 0,
              transition: 'width 600ms cubic-bezier(0.22, 0.61, 0.36, 1), opacity 420ms ease',
            }} />
          </div>

          {/* Agent reply with avatar + typing dots \u2014 fades in after the query lands. */}
          <div style={{
            display: 'flex', alignItems: 'flex-end', gap: 8,
            justifyContent: 'flex-start',
            opacity: step >= 2 ? 1 : 0,
            transform: step >= 2 ? 'translateY(0)' : 'translateY(8px)',
            transition: 'opacity 320ms ease-out, transform 320ms ease-out',
          }}>
            <div style={{
              width: 32, height: 32, borderRadius: 16,
              background: t.color.text,
              display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
            }}>
              <img src="assets/govpilot-mark.svg" alt="" width={16} height={16} style={{ display: 'block', filter: 'invert(1) brightness(2)' }} />
            </div>
            <div style={{
              background: t.color.bg,
              border: `1px solid ${t.color.hair}`,
              padding: '11px 16px',
              borderRadius: 16, borderBottomLeftRadius: 4,
            }}>
              <span style={{ display: 'inline-flex', gap: 4, alignItems: 'center' }}>
                <style>{`
                  @keyframes imo-dot { 0%, 80%, 100% { opacity: 0.25 } 40% { opacity: 1 } }
                `}</style>
                {[0, 1, 2].map((i) => (
                  <span key={i} style={{
                    width: 6, height: 6, borderRadius: 3,
                    background: t.color.muted,
                    animation: `imo-dot 1.2s ease-in-out ${i * 0.15}s infinite`,
                  }} />
                ))}
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { InlineMorphOverlay });