/**
 * Pixel cursor + web button / סמן פיקסלים וכפתור  (student motion library, id "y2k-pixel-cursor")
 * Use: copy this file into your Remotion project and register it in your Root:
 *   <Composition id="LibY2kPixelCursor" component={Y2kPixelCursor} width={1920} height={1080} fps={30}
 *     durationInFrames={120} defaultProps={pixelCursorDefaults} />
 * Render transparent: npx remotion render src/index.ts LibY2kPixelCursor out.webm --codec=vp9 --pixel-format=yuva420p --image-format=png --props=props.json
 * Change the words / colours / side in props.json (same keys as pixelCursorDefaults). A vertical video: width 1080, height 1920.
 */
import {loadFont as loadPixel} from '@remotion/google-fonts/PressStart2P';
// ---------------------------------------------------------------- helpers (shared by every library scene)
// Conventions: 1920x1080, 30 fps, transparent background. Sizes follow the frame's short side, so 1080x1920 works too.
// Common props: duration (s), side 'right' | 'left' | 'center', x / y (centre in % of the frame, override side),
// scale, font (a CSS font-family; default Heebo). Time is in seconds; the first and last frames are empty.
import React from 'react';
import {AbsoluteFill, Easing, useCurrentFrame, useVideoConfig} from 'remotion';
import {loadFont as loadHeebo} from '@remotion/google-fonts/Heebo';


const heebo = loadHeebo('normal', {weights: ['400', '500', '700', '800', '900'], subsets: ['hebrew', 'latin']});
/** Hebrew + Latin font (Google "Heebo"). props.font overrides it per scene. */
export const HEEBO = `${heebo.fontFamily}, "Helvetica Neue", Arial, sans-serif`;
export const MONO = 'ui-monospace, "SF Mono", Menlo, Consolas, monospace';

export type Side = 'right' | 'left' | 'center';
export type Base = {duration?: number; side?: Side; x?: number; y?: number; scale?: number; font?: string};

export const clamp01 = (x: number) => Math.min(1, Math.max(0, x));
/** 0..1 progress of t between a and b (seconds) */
export const p01 = (t: number, a: number, b: number) => clamp01((t - a) / (b - a));
export const lerp = (a: number, b: number, k: number) => a + (b - a) * k;
export const outE = Easing.bezier(0.16, 1, 0.3, 1); // fast out, long settle
export const inOut = Easing.bezier(0.65, 0, 0.35, 1);
export const inE = Easing.bezier(0.55, 0, 0.9, 0.45);
export const backOut = (x: number, s = 1.7) => (x <= 0 ? 0 : x >= 1 ? 1 : 1 + (s + 1) * Math.pow(x - 1, 3) + s * Math.pow(x - 1, 2));
/** Damped spring 0 -> 1 starting at t0 (closed form, so any frame computes on its own). */
export const spr = (t: number, t0: number, freq = 16, damp = 9) => {
  const x = t - t0;
  return x <= 0 ? 0 : 1 - Math.exp(-damp * x) * Math.cos(freq * x);
};
/** Deterministic pseudo random 0..1 */
export const rnd = (i: number, seed = 1) => {
  const v = Math.sin(i * 127.1 + seed * 311.7) * 43758.5453;
  return v - Math.floor(v);
};
export const isHe = (s: string) => /[֐-׿]/.test(s);
export const dirOf = (s: string): 'rtl' | 'ltr' => (isHe(s) ? 'rtl' : 'ltr');
/** "#a1b2c3" / "#abc" + alpha -> rgba() */
export const rgba = (hex: string, a = 1) => {
  let h = hex.replace('#', '');
  if (h.length === 3) h = h.split('').map((ch) => ch + ch).join('');
  const n = parseInt(h.slice(0, 6), 16);
  return `rgba(${(n >> 16) & 255},${(n >> 8) & 255},${n & 255},${a})`;
};
export const useT = () => {
  const f = useCurrentFrame();
  const {fps} = useVideoConfig();
  return f / fps;
};
/** 12345 -> "12,345" */
export const fmt = (n: number, sep = ',') => Math.round(n).toString().replace(/\B(?=(\d{3})+(?!\d))/g, sep);

/** Arrive (scale up out of a blur) and leave (shrink into a blur) for a whole group. */
export const life = (t: number, total: number, inDur = 0.45, outDur = 0.35) => {
  const a = p01(t, 0, inDur);
  const z = inOut(p01(t, total - outDur, total));
  return {
    opacity: clamp01(a * 2.2) * (1 - z),
    scale: lerp(0.82, 1, backOut(a, 1.4)) * (1 - 0.08 * z),
    blur: (1 - outE(a)) * 12 + z * 10,
    style: {} as React.CSSProperties,
  };
};
export const lifeStyle = (t: number, total: number, inDur = 0.45, outDur = 0.35): React.CSSProperties => {
  const l = life(t, total, inDur, outDur);
  return {opacity: l.opacity, transform: `scale(${l.scale})`, filter: l.blur > 0.2 ? `blur(${l.blur}px)` : undefined};
};

/**
 * Places a w x h box (design pixels of a 1080-high frame) on its side of the frame and scales it with the frame's
 * short side and props.scale. Children are positioned inside the box.
 */
export const Stage: React.FC<{p: Base; w: number; h: number; children: React.ReactNode; style?: React.CSSProperties; defSide?: Side}> = ({p, w, h, children, style, defSide = 'center'}) => {
  const {width: W, height: H} = useVideoConfig();
  const u = (Math.min(W, H) / 1080) * (p.scale ?? 1);
  const side = p.side ?? defSide;
  const cx = ((p.x ?? (side === 'right' ? 73 : side === 'left' ? 27 : 50)) / 100) * W;
  const cy = ((p.y ?? 50) / 100) * H;
  return (
    <AbsoluteFill style={{pointerEvents: 'none'}}>
      <div style={{position: 'absolute', left: cx - w / 2, top: cy - h / 2, width: w, height: h, transform: `scale(${u})`, transformOrigin: '50% 50%', ...style}}>
        {children}
      </div>
    </AbsoluteFill>
  );
};

/** Soft two-layer drop shadow for cards on any footage */
export const SHADOW = '0 22px 48px rgba(12,12,20,0.22), 0 4px 12px rgba(12,12,20,0.14)';

/** The classic arrow cursor; (x, y) = its tip; press 0..1 = mouse down. */
export const Cursor: React.FC<{x: number; y: number; press?: number; size?: number; fill?: string; stroke?: string}> = ({x, y, press = 0, size = 1.6, fill = '#111', stroke = '#fff'}) => {
  const s = size * (1 - 0.12 * press);
  return (
    <svg viewBox="-2 -2 17 25" width={17 * s * 1.35} height={25 * s * 1.35} style={{position: 'absolute', left: x - 2.7 * s, top: y - 2.7 * s, overflow: 'visible', filter: 'drop-shadow(0 3px 4px rgba(0,0,0,0.35))'}}>
      <path d="M0 0 L0 17.4 L4 13.7 L6.9 20.4 L9.6 19.2 L6.8 12.8 L12.4 12.8 Z" fill={fill} stroke={stroke} strokeWidth={1.1} strokeLinejoin="round" />
    </svg>
  );
};

/** A four-point sparkle centred on (0,0) in a -50..50 box. */
export const SPARK_PATH = 'M0 -50 C 6 -14 14 -6 50 0 C 14 6 6 14 0 50 C -6 14 -14 6 -50 0 C -14 -6 -6 -14 0 -50 Z';
export const Spark: React.FC<{x: number; y: number; size: number; color: string; rotate?: number; opacity?: number; glow?: boolean}> = ({x, y, size, color, rotate = 0, opacity = 1, glow = false}) => (
  <svg viewBox="-50 -50 100 100" width={size} height={size} style={{position: 'absolute', left: x - size / 2, top: y - size / 2, transform: `rotate(${rotate}deg)`, opacity, overflow: 'visible', filter: glow ? `drop-shadow(0 0 ${size * 0.15}px ${color})` : undefined}}>
    <path d={SPARK_PATH} fill={color} />
  </svg>
);
// ---------------------------------------------------------------- the scene

const pixel = loadPixel('normal', {weights: ['400'], subsets: ['latin']});

/**
 * Pixel cursor + button: a chunky beveled web button with a blinking "NEW!" tag, a pixel-art arrow cursor glides in,
 * turns into the pointing hand over the button, clicks (the bevel flips in), and pixel stars blink around it. 4 s.
 * Inspired by pixel cursor click packs (Envato) and pixel-art cursor sets (itch.io), redesigned: our own pixel
 * bitmaps, a 2000s web button, Hebrew label.
 */
export type PixelCursorProps = Base & {
  label: string;
  tag: string;
  face: string;
  light: string;
  dark: string;
  ink: string;
  px: number; // size of one pixel
};
export const pixelCursorDefaults: PixelCursorProps = {
  duration: 4,
  side: 'right',
  label: 'לחצו כאן!!',
  tag: 'NEW!',
  face: '#FF6FD8',
  light: '#FFC6F1',
  dark: '#A8338C',
  ink: '#ffffff',
  px: 6,
};

const ARROW = [
  '1', '11', '121', '1221', '12221', '122221', '1222221', '12222221', '122222221', '1222222221', '12222222221', '122222211111',
  '1222121', '122.1221', '11..1221', '1....1221', '.....1221', '......11',
];
const HAND = [
  '.....11.......', '....1221......', '....1221......', '....1221......', '....12211111..', '....122122121.', '.11.1222222121', '12211222222221',
  '12221222222221', '.1222222222221', '..122222222221', '..12222222221.', '...1222222221.', '...122222221..', '....1222221...', '....1111111...',
];

const Bitmap: React.FC<{rows: string[]; px: number; x: number; y: number}> = ({rows, px, x, y}) => (
  <svg width={14 * px} height={rows.length * px} style={{position: 'absolute', left: x, top: y, overflow: 'visible', filter: `drop-shadow(${px}px ${px}px 0 rgba(0,0,0,0.3))`}} shapeRendering="crispEdges">
    {rows.flatMap((r, j) =>
      r.split('').map((ch, i) => (ch === '1' || ch === '2' ? <rect key={`${i}-${j}`} x={i * px} y={j * px} width={px} height={px} fill={ch === '1' ? '#000' : '#fff'} /> : null)),
    )}
  </svg>
);

export const Y2kPixelCursor: React.FC<PixelCursorProps> = (props) => {
  const p = {...pixelCursorDefaults, ...props};
  const t = useT();
  const total = p.duration!;
  const px = p.px;
  const W = 700;
  const H = 420;
  const BW = 440;
  const BH = 130;
  const bx = (W - BW) / 2;
  const by = (H - BH) / 2;
  const CLICK = 1.7;
  const pressed = t > CLICK - 0.06 && t < CLICK + 0.16;
  const appear = Math.min(1, Math.floor(p01(t, 0.05, 0.35) * 4) / 4); // stepped, like a GIF
  const gone = Math.floor(p01(t, total - 0.4, total - 0.05) * 4) / 4;
  // cursor path (stepped to 15 fps for the low-fi feel)
  const ts = Math.floor(t * 15) / 15;
  const mv = inOut(p01(ts, 0.5, 1.45));
  const cx = lerp(W + 60, bx + BW * 0.62, mv) + (t > 2.3 ? (ts - 2.3) * 120 : 0);
  const cy = lerp(H + 80, by + BH * 0.5, mv) + (t > 2.3 ? (ts - 2.3) * 160 : 0);
  const onButton = cx > bx && cx < bx + BW && cy > by && cy < by + BH;
  const bevel = 6;
  const face = pressed ? p.dark : p.face;
  const blink = Math.floor(t * 3) % 2 === 0;
  const lbl = p.label;
  return (
    <Stage p={p} w={W} h={H} defSide="right">
      <div style={{position: 'absolute', inset: 0, opacity: appear * (1 - gone), transform: `scale(${lerp(0.6, 1, appear)})`}}>
        {/* the button: black frame, light top-left, dark bottom-right (inverted when pressed) */}
        <div style={{position: 'absolute', left: bx, top: by, width: BW, height: BH, background: '#000', padding: px, boxSizing: 'border-box', boxShadow: `${px * 2}px ${px * 2}px 0 rgba(0,0,0,0.3)`}}>
          <div style={{position: 'relative', width: '100%', height: '100%', background: face,
            borderTop: `${bevel}px solid ${pressed ? p.dark : p.light}`, borderLeft: `${bevel}px solid ${pressed ? p.dark : p.light}`,
            borderBottom: `${bevel}px solid ${pressed ? p.light : p.dark}`, borderRight: `${bevel}px solid ${pressed ? p.light : p.dark}`, boxSizing: 'border-box',
            display: 'flex', alignItems: 'center', justifyContent: 'center'}}>
            <div style={{fontFamily: dirOf(lbl) === 'rtl' ? p.font ?? HEEBO : `${pixel.fontFamily}, ${HEEBO}`, fontWeight: 900, fontSize: dirOf(lbl) === 'rtl' ? 54 : 34, color: p.ink, direction: dirOf(lbl),
              textShadow: `${px * 0.7}px ${px * 0.7}px 0 #000`, transform: pressed ? `translate(${px * 0.7}px, ${px * 0.7}px)` : undefined, whiteSpace: 'nowrap'}}>
              {lbl}
            </div>
          </div>
        </div>
        {/* blinking tag */}
        <div style={{position: 'absolute', left: bx + BW - 70, top: by - 40, padding: `${px}px ${px * 1.5}px`, background: blink ? '#FFE600' : '#00E5FF', border: `${px * 0.6}px solid #000`,
          fontFamily: pixel.fontFamily, fontSize: 22, color: '#000', transform: 'rotate(8deg)'}}>
          {p.tag}
        </div>
        {/* pixel stars after the click */}
        {Array.from({length: 9}, (_, i) => {
          const t0 = CLICK + 0.05 + rnd(i, 1) * 0.5;
          const on = t > t0 && t < t0 + 0.9 && Math.floor((t - t0) * 8) % 3 !== 2;
          if (!on) return null;
          const a = rnd(i, 2) * Math.PI * 2;
          const r = 170 + rnd(i, 3) * 110;
          const x = W / 2 + Math.cos(a) * r * 1.2;
          const y = H / 2 + Math.sin(a) * r * 0.75;
          const s = px * (rnd(i, 4) > 0.5 ? 2 : 1);
          const col = ['#FFE600', '#00E5FF', '#FF6FD8', '#ffffff'][i % 4];
          return (
            <svg key={i} width={s * 5} height={s * 5} style={{position: 'absolute', left: x, top: y, overflow: 'visible'}} shapeRendering="crispEdges">
              {[[2, 0], [2, 1], [0, 2], [1, 2], [2, 2], [3, 2], [4, 2], [2, 3], [2, 4]].map(([a2, b2], k) => (
                <rect key={k} x={a2 * s} y={b2 * s} width={s} height={s} fill={k === 4 ? '#fff' : col} />
              ))}
            </svg>
          );
        })}
        {t > 0.45 && t < total - 0.1 && <Bitmap rows={onButton ? HAND : ARROW} px={px} x={cx - (onButton ? 5 * px : 0)} y={cy} />}
      </div>
    </Stage>
  );
};

export const meta = {id: 'LibY2kPixelCursor', component: Y2kPixelCursor, defaults: pixelCursorDefaults};