/**
 * Finger tap + swipe on a phone / מגע באצבע בטלפון  (student motion library, id "cur-hand-tap")
 * Use: copy this file into your Remotion project and register it in your Root:
 *   <Composition id="LibCurHandTap" component={CurHandTap} width={1920} height={1080} fps={30}
 *     durationInFrames={150} defaultProps={handTapDefaults} />
 * Render transparent: npx remotion render src/index.ts LibCurHandTap out.webm --codec=vp9 --pixel-format=yuva420p --image-format=png --props=props.json
 * Change the words / colours / side in props.json (same keys as handTapDefaults). A vertical video: width 1080, height 1920.
 */
// ---------------------------------------------------------------- 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

/**
 * Touch gestures on a phone: a phone outline with simple cards, a finger dot taps a card (it presses and a ripple runs
 * out), swipes the cards sideways with a fading trail, then double-taps a heart that pops. Shows "tap here / swipe"
 * on any app demo. 5 s.
 * Inspired by mobile hand-gesture and swipe/tap hint packs (LottieFiles), redesigned: a finger dot with trails acting
 * on a live phone mock-up.
 */
export type HandTapProps = Base & {
  cards: {title: string; color: string}[];
  finger: string;
  accent: string;
  heart: string;
  phone: boolean;
};
export const handTapDefaults: HandTapProps = {
  duration: 5,
  side: 'right',
  cards: [
    {title: 'סרטון 1', color: '#FFB199'},
    {title: 'סרטון 2', color: '#9DB8FF'},
    {title: 'סרטון 3', color: '#9BE7C4'},
  ],
  finger: '#ffffff',
  accent: '#3B6BFF',
  heart: '#FF3B6B',
  phone: true,
};

const PW = 400;
const PH = 800;
const HEART = 'M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z';

export const CurHandTap: React.FC<HandTapProps> = (props) => {
  const p = {...handTapDefaults, ...props};
  const t = useT();
  const font = p.font ?? HEEBO;
  const total = p.duration!;
  const rtl = dirOf(p.cards.map((c) => c.title).join('')) === 'rtl';
  const W = PW + 120;
  const H = PH + 40;
  const px = 60;
  const py = 20;
  const enter = spr(t, 0.05, 12, 9);
  const out = inOut(p01(t, total - 0.4, total));
  // beats
  const TAP = 1.0;
  const SW0 = 1.9;
  const SW1 = 2.45;
  const DT = [3.3, 3.5];
  const swipe = inOut(p01(t, SW0, SW1));
  const dir = rtl ? 1 : -1; // swipe towards the reading end
  const cardW = PW - 80;
  const scroll = swipe * (cardW + 24) * dir;
  // finger path
  const cardY = py + 120;
  const f0: [number, number] = [px + PW / 2 + 60, cardY + 200];
  const s0: [number, number] = [px + PW / 2 - dir * 90, cardY + 230];
  const s1: [number, number] = [px + PW / 2 + dir * 120, cardY + 230];
  const hx = px + PW / 2;
  const hy = py + 14 + (PH - 28) - 90 - 55; // the heart button's centre
  let fx = f0[0];
  let fy = f0[1];
  let fOn = 0;
  if (t < 1.5) {
    fOn = p01(t, TAP - 0.35, TAP - 0.2) * (1 - p01(t, TAP + 0.15, TAP + 0.3));
  } else if (t < 2.7) {
    const k = p01(t, SW0 - 0.3, SW0);
    fx = lerp(s0[0], s1[0], swipe);
    fy = lerp(s0[1], s1[1], swipe) - Math.sin(swipe * Math.PI) * 18;
    fOn = k * (1 - p01(t, SW1, SW1 + 0.2));
  } else {
    fx = hx;
    fy = hy;
    fOn = p01(t, DT[0] - 0.3, DT[0] - 0.15) * (1 - p01(t, DT[1] + 0.15, DT[1] + 0.35));
  }
  const tapDown = (c: number) => p01(t, c - 0.06, c) * (1 - p01(t, c + 0.06, c + 0.16));
  const down = Math.max(tapDown(TAP), tapDown(DT[0]), tapDown(DT[1]), t > SW0 && t < SW1 ? 1 : 0);
  const ripple = (c: number) => p01(t, c, c + 0.5);
  const heartOn = t > DT[1];
  const heartPop = spr(t, DT[1], 18, 7);
  const cardPress = tapDown(TAP);
  return (
    <Stage p={p} w={W} h={H} defSide="right">
      <div style={{position: 'absolute', inset: 0, opacity: Math.min(1, enter * 2) * (1 - out), transform: `scale(${lerp(0.85, 1, Math.min(1, enter)) * (1 - 0.05 * out)})`, fontFamily: font}}>
        {p.phone && (
          <div style={{position: 'absolute', left: px, top: py, width: PW, height: PH, borderRadius: 64, background: '#16151a', padding: 14, boxSizing: 'border-box',
            boxShadow: '0 30px 60px rgba(0,0,0,0.3)'}}>
            <div style={{position: 'relative', width: '100%', height: '100%', borderRadius: 52, background: '#F4F3F8', overflow: 'hidden'}}>
              <div style={{position: 'absolute', left: '50%', top: 14, width: 110, height: 32, marginLeft: -55, borderRadius: 32, background: '#16151a'}} />
              <div style={{position: 'absolute', top: 70, left: 26, right: 26, height: 26, borderRadius: 13, background: 'rgba(22,21,26,0.08)'}} />
              {/* card carousel */}
              <div style={{position: 'absolute', top: 128, height: 380, [rtl ? 'right' : 'left']: 26, display: 'flex', gap: 24, direction: rtl ? 'rtl' : 'ltr',
                transform: `translateX(${scroll}px)`}}>
                {p.cards.map((c, i) => (
                  <div key={i} style={{width: cardW, height: 380, borderRadius: 32, background: c.color, flexShrink: 0, position: 'relative', overflow: 'hidden',
                    transform: i === 0 ? `scale(${1 - 0.04 * cardPress})` : undefined}}>
                    <div style={{position: 'absolute', left: 24, right: 24, bottom: 24, fontSize: 34, fontWeight: 800, color: '#16151a'}}>{c.title}</div>
                    <div style={{position: 'absolute', left: '50%', top: '42%', width: 90, height: 90, marginLeft: -45, marginTop: -45, borderRadius: 90, background: 'rgba(255,255,255,0.7)',
                      display: 'flex', alignItems: 'center', justifyContent: 'center'}}>
                      <svg viewBox="0 0 24 24" width={40} height={40}><path d="M8 5v14l11-7z" fill="#16151a" /></svg>
                    </div>
                  </div>
                ))}
              </div>
              {/* heart button */}
              <div style={{position: 'absolute', left: '50%', bottom: 90, width: 110, height: 110, marginLeft: -55, borderRadius: 110, background: '#fff', boxShadow: '0 8px 20px rgba(0,0,0,0.12)',
                display: 'flex', alignItems: 'center', justifyContent: 'center'}}>
                <svg viewBox="0 0 24 24" width={60} height={60} style={{transform: `scale(${heartOn ? lerp(0.5, 1, heartPop) : 1})`}}>
                  <path d={HEART} fill={heartOn ? p.heart : 'none'} stroke={heartOn ? p.heart : '#16151a'} strokeWidth={1.8} />
                </svg>
              </div>
            </div>
          </div>
        )}
        {/* ripples where the finger tapped */}
        {[[TAP, f0[0], f0[1]], [DT[0], hx, hy], [DT[1], hx, hy]].map(([c, x, y], i) => {
          const k = ripple(c);
          return k > 0 && k < 1 ? (
            <div key={i} style={{position: 'absolute', left: x - 70, top: y - 70, width: 140, height: 140, borderRadius: 140, border: `${lerp(6, 1, k)}px solid ${rgba(p.accent, 1 - k)}`,
              transform: `scale(${lerp(0.3, 1, outE(k))})`, boxSizing: 'border-box'}} />
          ) : null;
        })}
        {/* swipe trail */}
        {t > SW0 && t < SW1 + 0.3 && (
          <div style={{position: 'absolute', left: Math.min(s0[0], fx), top: s0[1] - 22, width: Math.abs(fx - s0[0]), height: 44, borderRadius: 44,
            background: `linear-gradient(${dir > 0 ? 270 : 90}deg, ${rgba(p.finger, 0)}, ${rgba(p.finger, 0.55)})`, opacity: 1 - p01(t, SW1, SW1 + 0.3)}} />
        )}
        {/* the finger */}
        {fOn > 0 && (
          <div style={{position: 'absolute', left: fx - 40, top: fy - 40, width: 80, height: 80, borderRadius: 80, background: rgba(p.finger, 0.55 * fOn),
            border: `4px solid ${rgba('#16151a', 0.25 * fOn)}`, boxShadow: `0 ${8 - 6 * down}px ${18 - 10 * down}px rgba(0,0,0,${0.25 * fOn})`, transform: `scale(${(0.8 + 0.2 * fOn) * (1 - 0.15 * down)})`}} />
        )}
      </div>
    </Stage>
  );
};

export const meta = {id: 'LibCurHandTap', component: CurHandTap, defaults: handTapDefaults};