// skeleton-reveal — slack-promo 4–15s combined
// three-stage reveal: a full-screen hand-drawn rough-brush doodle placeholder (round-tipped blob line
// art, boiling jitter) → replaced within one beat by a gray-bar skeleton UI window → the skeleton
// message list rolls in, and as the camera pushes in the gray bars "develop" line by line into
// avatar + text content (the last word of the last line arrives half a beat late).
import React from 'react';
import {
  AbsoluteFill,
  useCurrentFrame,
  useVideoConfig,
  interpolate,
  spring,
  Easing,
} from 'remotion';

const mulberry32 = (a: number) => () => {
  let t = (a += 0x6d2b79f5);
  t = Math.imul(t ^ (t >>> 15), t | 1);
  t ^= t + Math.imul(t ^ (t >>> 7), t | 61);
  return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
};

const INK = '#2f2f2f';
const PAPER = '#f2f0ea';

// ——— hand-drawn doodle helpers: jitter polylines/circles with a seed and stroke them thick with round caps ———
const wobbleLine = (
  x1: number, y1: number, x2: number, y2: number,
  seed: number, amp = 7, segs = 8,
) => {
  const rnd = mulberry32(seed);
  const pts: string[] = [];
  for (let i = 0; i <= segs; i++) {
    const t = i / segs;
    const jx = (rnd() - 0.5) * amp * 2;
    const jy = (rnd() - 0.5) * amp * 2;
    pts.push(`${i === 0 ? 'M' : 'L'} ${x1 + (x2 - x1) * t + jx} ${y1 + (y2 - y1) * t + jy}`);
  }
  return pts.join(' ');
};

const wobbleBlobRect = (
  x: number, y: number, w: number, h: number,
  seed: number, amp = 10, r = 70,
) => {
  // round-tipped blob rect: edges jitter mid-segment, corners are large arcs
  const rnd = mulberry32(seed);
  const j = () => (rnd() - 0.5) * amp * 2;
  return [
    `M ${x + r + j()} ${y + j()}`,
    `L ${x + w / 2 + j()} ${y + j()}`, `L ${x + w - r + j()} ${y + j()}`,
    `Q ${x + w + j()} ${y + j()} ${x + w + j()} ${y + r + j()}`,
    `L ${x + w + j()} ${y + h / 2 + j()}`, `L ${x + w + j()} ${y + h - r + j()}`,
    `Q ${x + w + j()} ${y + h + j()} ${x + w - r + j()} ${y + h + j()}`,
    `L ${x + w / 2 + j()} ${y + h + j()}`, `L ${x + r + j()} ${y + h + j()}`,
    `Q ${x + j()} ${y + h + j()} ${x + j()} ${y + h - r + j()}`,
    `L ${x + j()} ${y + h / 2 + j()}`, `L ${x + j()} ${y + r + j()}`,
    `Q ${x + j()} ${y + j()} ${x + r + j()} ${y + j()}`,
  ].join(' ');
};

const wobbleCircle = (cx: number, cy: number, r: number, seed: number, amp = 6) => {
  const rnd = mulberry32(seed);
  const n = 14;
  const pts: string[] = [];
  for (let i = 0; i <= n; i++) {
    const a = (i / n) * Math.PI * 2;
    const rr = r + (rnd() - 0.5) * amp * 2;
    pts.push(`${i === 0 ? 'M' : 'L'} ${cx + Math.cos(a) * rr} ${cy + Math.sin(a) * rr}`);
  }
  return pts.join(' ') + ' Z';
};

const Doodle: React.FC<{ boil: number }> = ({ boil }) => {
  const S = boil * 977; // each boil swaps in a fresh set of jitter seeds
  const stroke = {
    fill: 'none' as const,
    stroke: INK,
    strokeLinecap: 'round' as const,
    strokeLinejoin: 'round' as const,
  };
  return (
    <svg width={1920} height={1080} style={{ position: 'absolute', inset: 0 }}>
      {/* big window blob */}
      <path d={wobbleBlobRect(250, 140, 1420, 800, S + 1)} {...stroke} strokeWidth={14} />
      {/* sidebar divider */}
      <path d={wobbleLine(600, 160, 600, 920, S + 2)} {...stroke} strokeWidth={12} />
      {/* sidebar logo blob + short lines */}
      <path d={wobbleCircle(420, 260, 52, S + 3)} {...stroke} strokeWidth={12} />
      {Array.from({ length: 6 }).map((_, i) => (
        <path
          key={`sb${i}`}
          d={wobbleLine(330, 400 + i * 82, 470 + ((i * 53) % 70), 400 + i * 82, S + 10 + i)}
          {...stroke}
          strokeWidth={11}
        />
      ))}
      {/* main-area message rows: round avatar blobs + wavy text lines */}
      {Array.from({ length: 4 }).map((_, i) => {
        const y = 320 + i * 160;
        return (
          <g key={`row${i}`}>
            <path d={wobbleCircle(720, y, 44, S + 30 + i)} {...stroke} strokeWidth={12} />
            <path d={wobbleLine(810, y - 28, 1180 + ((i * 97) % 220), y - 28, S + 40 + i)} {...stroke} strokeWidth={11} />
            <path d={wobbleLine(810, y + 24, 1420 - ((i * 71) % 260), y + 24, S + 50 + i)} {...stroke} strokeWidth={11} />
          </g>
        );
      })}
    </svg>
  );
};

// ——— skeleton/content message rows ———
const NAMES = ['Ana', 'Ben', 'Kai', 'Mia'];
const AVA = ['#5a5a58', '#7a7a78', '#4a4a48', '#8f8f8d'];
const MSGS = [
  'Morning! Kicking off the rebrand today',
  'Logo drafts are ready for review',
  'Nice — shipping the deck this afternoon',
  'Love it. Can we make it pink?',
];

const Row: React.FC<{ i: number; dev: number; wordAt: (w: number, n: number) => number }> = ({
  i, dev, wordAt,
}) => {
  const words = MSGS[i].split(' ');
  return (
    <div style={{ position: 'relative', height: 96 }}>
      {/* skeleton layer */}
      <div style={{ position: 'absolute', inset: 0, display: 'flex', gap: 22, opacity: 1 - dev }}>
        <div style={{ width: 72, height: 72, borderRadius: 16, background: '#d5d5d3' }} />
        <div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 14, paddingTop: 6 }}>
          <div style={{ height: 18, width: 180 + ((i * 67) % 90), background: '#d5d5d3', borderRadius: 9 }} />
          <div style={{ height: 16, width: `${58 + ((i * 31) % 30)}%`, background: '#e2e2e0', borderRadius: 8 }} />
        </div>
      </div>
      {/* content layer (word-by-word develop) */}
      <div style={{ position: 'absolute', inset: 0, display: 'flex', gap: 22, opacity: dev > 0.02 ? 1 : 0 }}>
        <div
          style={{
            width: 72, height: 72, borderRadius: 16, background: AVA[i],
            color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center',
            fontSize: 32, fontWeight: 800, opacity: dev,
            transform: `scale(${0.7 + 0.3 * dev})`,
          }}
        >
          {NAMES[i][0]}
        </div>
        <div style={{ flex: 1, paddingTop: 2 }}>
          <div style={{ fontSize: 26, fontWeight: 800, color: INK, opacity: dev }}>
            {NAMES[i]}
            <span style={{ fontWeight: 400, fontSize: 19, color: '#9a9a98', marginLeft: 12 }}>9:0{i + 1} AM</span>
          </div>
          <div style={{ fontSize: 27, color: '#3c3c3a', marginTop: 8 }}>
            {words.map((w, wi) => {
              const p = wordAt(wi, words.length);
              return (
                <span
                  key={wi}
                  style={{
                    display: 'inline-block',
                    marginRight: 9,
                    opacity: p,
                    transform: `translateY(${(1 - p) * 14}px)`,
                  }}
                >
                  {w}
                </span>
              );
            })}
          </div>
        </div>
      </div>
    </div>
  );
};

export const SkeletonReveal: React.FC = () => {
  const f = useCurrentFrame();
  const { fps } = useVideoConfig();

  const SWAP = 32; // the beat where doodle → skeleton

  // doodle: boiling jitter + pulled back and replaced within one beat (quick shrink-out + fade, accelerating the exit)
  const boil = Math.floor(f / 5);
  const doodleOut = interpolate(f, [SWAP, SWAP + 8], [0, 1], {
    extrapolateLeft: 'clamp', extrapolateRight: 'clamp',
    easing: Easing.in(Easing.cubic),
  });
  const doodleVisible = f < SWAP + 9;

  // skeleton window: springs in at the swap
  const winIn = spring({ frame: f - SWAP, fps, config: { damping: 16, stiffness: 160, mass: 0.7 } });

  // skeleton list rolls in (second beat)
  const rowSlide = (i: number) =>
    interpolate(f, [SWAP + 12 + i * 6, SWAP + 34 + i * 6], [520, 0], {
      extrapolateLeft: 'clamp', extrapolateRight: 'clamp',
      easing: Easing.out(Easing.cubic),
    });

  // camera push-in
  const zoom = interpolate(f, [66, 142], [1, 1.34], {
    extrapolateLeft: 'clamp', extrapolateRight: 'clamp',
    easing: Easing.inOut(Easing.cubic),
  });

  // per-line develop
  const devAt = (i: number) =>
    interpolate(f, [80 + i * 13, 92 + i * 13], [0, 1], {
      extrapolateLeft: 'clamp', extrapolateRight: 'clamp',
      easing: Easing.out(Easing.quad),
    });

  // word-by-word entrance; the last word of the last line arrives half a beat late (+14 frames)
  const wordAt = (row: number) => (w: number, n: number) => {
    const isLastWordOfLastRow = row === 3 && w === n - 1;
    const start = 82 + row * 13 + w * 2.5 + (isLastWordOfLastRow ? 14 : 0);
    return interpolate(f, [start, start + 9], [0, 1], {
      extrapolateLeft: 'clamp', extrapolateRight: 'clamp',
      easing: Easing.out(Easing.cubic),
    });
  };

  return (
    <AbsoluteFill style={{ background: PAPER, fontFamily: 'Helvetica, Arial, sans-serif', overflow: 'hidden' }}>
      {/* third/second beat: skeleton UI window */}
      {f >= SWAP && (
        <AbsoluteFill
          style={{
            transform: `scale(${zoom})`,
            transformOrigin: '58% 46%',
          }}
        >
          <div
            style={{
              position: 'absolute', left: 250, top: 140, width: 1420, height: 800,
              background: '#ffffff', border: '2px solid #d8d8d6', borderRadius: 22,
              overflow: 'hidden', display: 'flex',
              boxShadow: '0 12px 40px rgba(0,0,0,0.10)',
              opacity: Math.min(1, winIn * 2),
              transform: `scale(${interpolate(winIn, [0, 1], [1.08, 1])})`,
            }}
          >
            {/* sidebar */}
            <div style={{ width: 300, background: '#3a3a3a', padding: '30px 26px', boxSizing: 'border-box', display: 'flex', flexDirection: 'column', gap: 22 }}>
              <div style={{ width: 46, height: 46, borderRadius: 12, background: '#777775' }} />
              {Array.from({ length: 7 }).map((_, i) => (
                <div key={i} style={{ height: 13, width: `${55 + ((i * 37) % 40)}%`, background: '#5a5a58', borderRadius: 7 }} />
              ))}
            </div>
            {/* main area */}
            <div style={{ flex: 1, display: 'flex', flexDirection: 'column' }}>
              <div style={{ height: 72, borderBottom: '2px solid #e4e4e2', display: 'flex', alignItems: 'center', padding: '0 34px' }}>
                <div style={{ height: 18, width: 230, background: '#d5d5d3', borderRadius: 9 }} />
              </div>
              <div style={{ flex: 1, padding: '30px 40px', display: 'flex', flexDirection: 'column', gap: 32, overflow: 'hidden' }}>
                {Array.from({ length: 4 }).map((_, i) => (
                  <div key={i} style={{ transform: `translateY(${rowSlide(i)}px)`, opacity: rowSlide(i) > 500 ? 0 : 1 }}>
                    <Row i={i} dev={devAt(i)} wordAt={wordAt(i)} />
                  </div>
                ))}
              </div>
            </div>
          </div>
        </AbsoluteFill>
      )}

      {/* first beat: hand-drawn doodle placeholder (above the skeleton, shrinks away within one beat to make room) */}
      {doodleVisible && (
        <AbsoluteFill
          style={{
            background: PAPER,
            opacity: 1 - doodleOut,
            transform: `scale(${1 - doodleOut * 0.14})`,
            transformOrigin: '50% 50%',
          }}
        >
          <Doodle boil={boil} />
        </AbsoluteFill>
      )}
    </AbsoluteFill>
  );
};