// scene2.jsx — "Feedzap widget slides in" — user types feedback, sends.
// Mirrors the real Feedzap widget styles (packages/widget/src/styles.ts).

function FzLauncher({ enter = 1 }) {
  const e = Easing.easeOutBack(clamp(enter, 0, 1));
  return (
    <div
      style={{
        position: 'absolute',
        right: 100,
        bottom: 80,
        opacity: e,
        transform: `translateY(${(1 - e) * 24}px) scale(${0.86 + 0.14 * e})`,
        transformOrigin: 'bottom right',
        zIndex: 110,
        willChange: 'transform, opacity',
      }}
    >
      <div
        data-target="fzLauncher"
        style={{
          height: 48,
          padding: '0 18px 0 16px',
          borderRadius: 999,
          background: '#111827',
          color: '#fff',
          boxShadow:
            '0 6px 20px rgba(17,24,39,0.32), 0 0 0 1px rgba(255,255,255,0.04)',
          display: 'inline-flex',
          alignItems: 'center',
          gap: 10,
          fontWeight: 500,
          fontSize: 14,
          letterSpacing: '-0.005em',
        }}
      >
        <svg
          width="22"
          height="22"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          strokeWidth="2"
          strokeLinecap="round"
          strokeLinejoin="round"
        >
          <path d="M7.9 20A9 9 0 1 0 4 16.1L2 22z" />
          <path d="M9.1 9a3 3 0 0 1 5.82 1c0 2-3 3-3 3" />
          <path d="M12 17h.01" />
        </svg>
        Feedback
      </div>
    </div>
  );
}

function FzPanel({
  enterProgress = 1,
  exitProgress = 0,
  message = '',
  showCaret = false,
  bugSelected = false,
  sendHover = false,
  sendPressed = false,
  thanks = false,
}) {
  const pop = Easing.easeOutCubic(clamp(enterProgress, 0, 1));
  const opacity = pop * (1 - exitProgress);
  const ty = (1 - pop) * 14 + exitProgress * -6;
  const scale = 0.96 + 0.04 * pop;

  return (
    <div
      style={{
        position: 'absolute',
        right: 100,
        bottom: 148, // 80 (launcher offset) + 48 (launcher height) + 20 spacing
        width: 460,
        background: '#0c0c0e',
        border: '1px solid rgba(255,255,255,0.08)',
        borderRadius: 18,
        boxShadow:
          '0 24px 60px rgba(0,0,0,0.55), 0 2px 6px rgba(0,0,0,0.35)',
        padding: 16,
        color: '#f5f5f7',
        opacity,
        transform: `translateY(${ty}px) scale(${scale})`,
        transformOrigin: 'bottom right',
        zIndex: 120,
        fontFamily: 'Inter, ui-sans-serif, system-ui, sans-serif',
        willChange: 'transform, opacity',
      }}
    >
      {thanks ? (
        <div
          style={{
            display: 'flex',
            flexDirection: 'column',
            alignItems: 'center',
            justifyContent: 'center',
            textAlign: 'center',
            gap: 10,
            padding: '20px 0 8px',
          }}
        >
          <div
            style={{
              width: 56,
              height: 56,
              borderRadius: 999,
              background: 'rgba(52,211,153,0.16)',
              color: '#34d399',
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
            }}
          >
            {Icons.check(28, 'currentColor', 2.6)}
          </div>
          <h3
            style={{
              fontSize: 17,
              fontWeight: 600,
              margin: 0,
              letterSpacing: '-0.01em',
            }}
          >
            Thanks for the heads-up!
          </h3>
          <p
            style={{
              fontSize: 13.5,
              color: '#9ca3af',
              margin: 0,
              maxWidth: '34ch',
              lineHeight: 1.5,
            }}
          >
            We've notified the team — they'll take a look soon.
          </p>
          <div
            style={{
              marginTop: 4,
              padding: '7px 14px',
              borderRadius: 999,
              background: 'rgba(251,146,60,0.14)',
              border: '1px solid rgba(251,146,60,0.35)',
              color: '#fed7aa',
              fontSize: 12.5,
              fontWeight: 500,
            }}
          >
            46 other people flagged this too
          </div>
          <div
            style={{
              marginTop: 12,
              fontSize: 11,
              color: '#71717a',
            }}
          >
            Powered by{' '}
            <strong style={{ color: '#a1a1aa', fontWeight: 600 }}>
              Feedzap
            </strong>
          </div>
        </div>
      ) : (
        <React.Fragment>
          {/* Header */}
          <div
            style={{
              display: 'flex',
              alignItems: 'center',
              gap: 10,
              marginBottom: 12,
            }}
          >
            <FeedzapMark size={20} color="#fff" glyphColor="#0c0c0e" />
            <div style={{ fontSize: 14.5, fontWeight: 600, letterSpacing: '-0.005em' }}>
              Send Feedback
            </div>
          </div>

          {/* Reactions row + close */}
          <div
            style={{
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'space-between',
              gap: 8,
              marginBottom: 12,
            }}
          >
            <div
              style={{
                display: 'flex',
                gap: 6,
                flexWrap: 'wrap',
                flex: '1 1 auto',
                minWidth: 0,
              }}
            >
              {[
                { id: 'bug', label: 'Bug', emoji: '🐛' },
                { id: 'idea', label: 'Idea', emoji: '💡' },
                { id: 'frustrating', label: 'Frustrating', emoji: '😤' },
                { id: 'love', label: 'Love it', emoji: '👏' },
              ].map((r) => {
                const on = r.id === 'bug' && bugSelected;
                return (
                  <div
                    key={r.id}
                    data-target={r.id === 'bug' ? 'fzBug' : undefined}
                    style={{
                      height: 34,
                      padding: '0 12px 0 8px',
                      borderRadius: 999,
                      border: on
                        ? '1px solid rgba(251,146,60,0.55)'
                        : '1px solid rgba(255,255,255,0.08)',
                      background: on
                        ? 'rgba(251,146,60,0.16)'
                        : 'rgba(255,255,255,0.04)',
                      color: on ? '#fed7aa' : '#e5e7eb',
                      display: 'inline-flex',
                      alignItems: 'center',
                      gap: 6,
                      fontSize: 12.5,
                      fontWeight: 500,
                      boxShadow: on ? '0 0 0 3px rgba(251,146,60,0.18)' : 'none',
                      transition: 'all 220ms cubic-bezier(0.2, 0.8, 0.2, 1)',
                    }}
                  >
                    <span
                      style={{
                        fontSize: 18,
                        lineHeight: 1,
                        fontFamily:
                          '"Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", emoji',
                      }}
                    >
                      {r.emoji}
                    </span>
                    {r.label}
                  </div>
                );
              })}
            </div>
            <div
              style={{
                width: 32,
                height: 32,
                borderRadius: 999,
                border: '1px solid rgba(255,255,255,0.06)',
                background: 'rgba(255,255,255,0.04)',
                color: '#d1d5db',
                display: 'inline-flex',
                alignItems: 'center',
                justifyContent: 'center',
                flex: 'none',
              }}
            >
              {Icons.close(14, 'currentColor')}
            </div>
          </div>

          {/* Textarea */}
          <div
            style={{
              minHeight: 100,
              fontSize: 15.5,
              lineHeight: 1.5,
              color: message ? '#f5f5f7' : '#71717a',
              padding: '4px 2px 6px',
              marginBottom: 6,
              fontFamily: 'inherit',
            }}
          >
            {message || "What's on your mind?"}
            {showCaret && (
              <span
                style={{
                  display: 'inline-block',
                  width: 1.5,
                  height: 18,
                  background: '#3b82f6',
                  verticalAlign: 'text-bottom',
                  marginLeft: 1,
                  animation: 'fzCaret 1s steps(1) infinite',
                }}
              />
            )}
          </div>

          {/* Bottom row */}
          <div
            style={{
              display: 'flex',
              alignItems: 'center',
              gap: 10,
              marginTop: 4,
            }}
          >
            <div
              style={{
                height: 34,
                padding: '0 12px 0 10px',
                borderRadius: 999,
                border: '1px solid rgba(255,255,255,0.1)',
                background: 'rgba(255,255,255,0.04)',
                color: '#e5e7eb',
                display: 'inline-flex',
                alignItems: 'center',
                gap: 4,
                fontSize: 13,
                fontWeight: 500,
              }}
            >
              <svg
                width="16"
                height="16"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                strokeWidth="2"
                strokeLinecap="round"
                strokeLinejoin="round"
              >
                <path d="M16.5 8.5a4.5 4.5 0 1 0-3 7.7 4.4 4.4 0 0 0 5.5-1.2" />
                <path d="M12 8v4a2 2 0 0 0 4 0V8a4 4 0 1 0-8 0v4a4 4 0 0 0 4 4" />
              </svg>
              Tag
            </div>
            <div style={{ flex: 1 }} />
            <div
              data-target="fzSend"
              style={{
                width: 36,
                height: 36,
                borderRadius: 999,
                background: sendHover ? '#fdba74' : '#fb923c',
                color: '#1f1300',
                display: 'inline-flex',
                alignItems: 'center',
                justifyContent: 'center',
                transform: sendPressed
                  ? 'translateY(0) scale(0.94)'
                  : sendHover
                  ? 'translateY(-1px)'
                  : 'translateY(0)',
                transition: 'all 150ms cubic-bezier(0.2, 0.8, 0.2, 1)',
                boxShadow: '0 6px 14px rgba(251,146,60,0.32)',
              }}
            >
              <svg
                width="18"
                height="18"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                strokeWidth="2.4"
                strokeLinecap="round"
                strokeLinejoin="round"
              >
                <path d="M12 19V5" />
                <path d="m6 11 6-6 6 6" />
              </svg>
            </div>
          </div>

          {/* Powered by */}
          <div
            style={{
              marginTop: 12,
              fontSize: 11,
              color: '#71717a',
              textAlign: 'center',
            }}
          >
            Powered by{' '}
            <strong style={{ color: '#a1a1aa', fontWeight: 600 }}>
              Feedzap
            </strong>
          </div>
        </React.Fragment>
      )}
    </div>
  );
}

function Scene2() {
  const { localTime: rawTime } = useSprite();
  const localTime = rawTime / 1.3;

  // ── Phase timings (within scene; scene length 8.4s) ─────────────────
  // 0.0–0.5  crossfade in (scene fade)
  // 0.4–1.1  launcher slides up
  // 1.1–2.0  cursor moves to launcher
  // 2.0–2.2  click launcher
  // 2.2–2.9  panel pops up
  // 2.9–3.5  cursor moves to textarea
  // 3.5–6.6  typing
  // 6.6–7.0  cursor moves to bug reaction
  // 7.0–7.2  bug selected
  // 7.2–7.6  cursor moves to send button
  // 7.6–7.8  press send
  // 7.8–8.4  thanks state shown

  const launcherEnter = clamp((localTime - 0.4) / 0.6, 0, 1);
  const showLauncher = localTime >= 0.4;
  const panelEnter = clamp((localTime - 2.2) / 0.5, 0, 1);
  const showPanel = localTime >= 2.2 && localTime < 7.8;
  const showThanks = localTime >= 7.8;
  const thanksEnter = clamp((localTime - 7.8) / 0.4, 0, 1);

  const fullMessage =
    "Export CSV button doesn't work — clicks but nothing happens";
  const typeStart = 3.5;
  const typeEnd = 6.4;
  const typeP = clamp((localTime - typeStart) / (typeEnd - typeStart), 0, 1);
  // Slight ease so it doesn't feel mechanical
  const eased = Easing.easeInOutQuad(typeP);
  const charCount = Math.floor(eased * fullMessage.length);
  const currentMessage = fullMessage.slice(0, charCount);
  const showCaret = localTime >= typeStart && localTime < 7.0;
  const bugSelected = localTime >= 7.0;
  const sendHover = localTime >= 7.45 && localTime < 7.8;
  const sendPressed = localTime >= 7.62 && localTime < 7.78;

  // Cursor path
  // Launcher click target ≈ (1758, 980).
  // Panel: bottom=148, right=100, width=460. So x range 1820-460=1360..1820, y range 1080-148-≈350..932.
  // Textarea center ~ (1590, 770).
  // Bug reaction (first reaction in row, reactions row top-y ≈ 690): button width ~84 → center (1430, 700).
  // Send button: (1786, 902).
  const cursorPath = [
    { t: 0.0, target: 'exportCsv', dx: -40, dy: 70 },
    { t: 1.1, target: 'exportCsv', dx: -40, dy: 70 },
    { t: 2.0, target: 'fzLauncher' },
    { t: 2.6, target: 'fzLauncher' },
    { t: 3.5, x: 1590, y: 770 }, // textarea (no specific click target)
    { t: 6.6, x: 1590, y: 770 },
    { t: 7.0, target: 'fzBug' },
    { t: 7.2, target: 'fzBug' },
    { t: 7.6, target: 'fzSend' },
    { t: 8.4, target: 'fzSend' },
  ];
  const clicks = [
    { t: 2.05, target: 'fzLauncher' },
    { t: 7.05, target: 'fzBug', color: '#fb923c' },
    { t: 7.65, target: 'fzSend', color: '#fb923c' },
  ];

  return (
    <SceneFade>
      <BrowserChrome>
        <AcmeAnalyticsApp exportButtonState="broken" />
      </BrowserChrome>
      {showLauncher && <FzLauncher enter={launcherEnter} />}
      {showPanel && (
        <FzPanel
          enterProgress={panelEnter}
          message={currentMessage}
          showCaret={showCaret}
          bugSelected={bugSelected}
          sendHover={sendHover}
          sendPressed={sendPressed}
        />
      )}
      {showThanks && <FzPanel thanks enterProgress={thanksEnter} />}
      <Cursor path={cursorPath} clicks={clicks} time={localTime} />
      <SceneCaption
        scene="02"
        title="Feedzap widget slides in"
        caption="10 seconds to send. No support email needed."
      />
    </SceneFade>
  );
}

Object.assign(window, { Scene2, FzLauncher, FzPanel });