import React from 'react';
import {AbsoluteFill, Audio, Sequence, interpolate, spring, staticFile, useCurrentFrame} from 'remotion';
import {INTRO_OPTIONEN, Intro, OUTRO, Outro} from '../../baukasten/buch';
import {ClipFigur, Figur, Kamera, type Posenfolge} from '../../baukasten/figur';
import {Blende, LULU_KOPF, Vignette, huepfer, kamFahrt, luluMaulC9, punkt} from '../../baukasten/helfer';
import {Apfel, Funkeln, Ruf} from '../../baukasten/natur';
import {BODEN, Ort} from '../../baukasten/orte';
import {SCHRIFT} from '../../baukasten/untertitel';
import {plane} from '../../baukasten/zeit';
import {Karaoke} from '../karaoke';
import {Noten} from '../lied03/Lied03';
import {DAUER, ECHO, LIED, T, ZAHLEN, ZEILEN} from './zeiten';

// Liedvideo „Eins, zwei – Pino ist dabei!“ (Pinos Liederbuch, Lied 1, Zählen bis 10) – ENTWURF.
// Ton je Sprache: Suno-Fassungen auf −14 LUFS in public/musik/lieder/lied01-<sprache>.mp3 (siehe zeiten.ts).
// Sprache wie bei den Folgen: npx remotion render … Lied01 --props='{"sprache":"es"}'.
// Bei jeder Zahl fliegt ein Apfel vom alten Apfelbaum in Pinos Korb; oben rechts stehen die Zahl
// und die Finger (Daumen = 1, wie in Deutschland üblich; ab 6 ist die erste Hand voll).
// Im Instrumental holt Lulu sich den obersten Apfel: „Jetzt sind es nur noch …?“ – „Neun!“
// Gesprochenes (ERZ-Ansage, Lulus Frage, Noas Frage, „Mampf!“) fehlt noch; im Entwurf nur als Schrift.

const FPS = 30;
const s = (sek: number) => Math.round(sek * FPS);
const SCHLAG = (FPS * 60) / 102; // gemessen am Refrain: ein Takt ≈ 2,35 s
const ANFANG = s(T.c1);

const PINO_X = 600;
const KORB_X = 790;
const RAND_Y = BODEN - 118; // Oberkante des Korbs
const NOA_X = 1430;
// Lulu senkt den Hals (Clip lulu_C9_hals-runter) bis Clipbild 75: dann ist das Maul
// 302 px links von ihren Füßen genau auf Höhe des obersten Apfels im Korb.
const C9_TEMPO = 1.25;
const C9_START = 17;
const C9_TIEF = 75;
const c9 = (bilder: number) => (bilder * FPS) / 24 / C9_TEMPO;
const LULU_X = KORB_X + 302;
const LULU_Y = BODEN - 6;

// Plätze der zehn Äpfel im Korb (relativ zur Korbmitte am Rand): unten 5, darüber 4, oben 1
const PLAETZE: [number, number][] = [
	[-76, -10], [-38, -13], [0, -14], [38, -13], [76, -10],
	[-57, -42], [-19, -45], [19, -45], [57, -42],
	[0, -76],
];
// Wo die Äpfel vorher im alten Apfelbaum hängen
const AM_BAUM: [number, number][] = [
	[470, 300], [300, 340], [610, 390], [180, 420], [420, 430],
	[540, 480], [250, 500], [680, 520], [360, 545], [130, 560],
];
const FLUG = 20; // Frames vom Baum in den Korb

// Zeitplan des Gags
const G = s(T.gag);
const RUNTER = G + 24;
const UNTEN = RUNTER + c9(C9_TIEF - C9_START);
const HOCH = UNTEN + 20;
const OBEN = HOCH + c9(C9_TIEF);
const MAMPF = OBEN + 8;

const imAbschnitt = (f: number, von: number, bis: number) => f >= s(von) && f < s(bis);

const kamera = (f: number) => {
	const P: [number, number, number, number][] = [
		[T.c1, 960, 650, 1.08],
		[T.v1 - 0.6, 830, 640, 1.2], // Baum, Korb, Pino
		[T.c2, 960, 650, 1.08],
		[T.v2 - 0.6, 830, 640, 1.2],
		[T.echo, 900, 690, 1.28], // Äpfel im Korb leuchten
		[T.gag, 960, 620, 1.1], // Lulu ganz im Bild
		[T.frage, 900, 670, 1.22],
		[T.c3, 960, 650, 1.08],
		[T.ende, 960, 630, 1.04],
	];
	const p: [number, number, number, number][] = [];
	P.forEach(([t, x, y, z], i) => {
		if (i > 0) p.push([s(t) - 21, ...P[i - 1].slice(1)] as [number, number, number, number]);
		p.push([s(t), x, y, z]);
	});
	return kamFahrt(f, p);
};

// Noa klatscht im Refrain auf jeden zweiten Schlag
const klatschen = (von: number, bis: number): Posenfolge => {
	const folge: Posenfolge = [];
	for (let t = ANFANG; t < s(bis); t += 2 * SCHLAG) {
		if (t < s(von)) continue;
		const k = Math.round(t);
		folge.push([k - 3, 'noa_A_klatschen'], [k + 4, 'noa_A3_lachen']);
	}
	return folge;
};
const zeigen = (zeiten: number[]): Posenfolge => zeiten.flatMap((t) => [[s(t) - 2, 'noa_B_zeigen'], [s(t) + 12, 'noa_A3_lachen']] as Posenfolge);

const NOA: Posenfolge = [
	[0, 'noa_A3_lachen'],
	...klatschen(T.c1, T.c1 + 9.2),
	...zeigen(ZAHLEN.slice(0, 5)),
	...klatschen(T.c2, T.c2 + 9.2),
	...zeigen(ZAHLEN.slice(5)),
	[s(T.echo) - 4, 'noa_B_zeigen'],
	[s(T.echoEnde + 0.4), 'noa_A3_lachen'],
	[UNTEN, 'noa_A5_blick-links'],
	[MAMPF, 'noa_A4_staunen'],
	[s(T.frage), 'noa_B_zeigen'],
	[s(T.antwort), 'noa_A_arme-hoch'],
	[s(T.antwort + 1.4), 'noa_A3_lachen'],
	...klatschen(T.c3, T.c3 + 9.2),
	[s(T.ende), 'noa_A_arm-hoch-winken'],
];

const PINO: Posenfolge = [
	[0, 'pino_A3_lachen'],
	[UNTEN - 10, 'pino_A4_staunen'],
	[MAMPF + 20, 'pino_A3_lachen'],
	[s(T.antwort), 'pino_A_hinterbeine'],
	[s(T.antwort + 1.6), 'pino_A3_lachen'],
];

const LULU: Posenfolge = [
	[0, 'lulu_A3_lachen'],
	[G, 'lulu_A5_blick-links'], // „Darf ich einen Apfel?“
	[OBEN, 'lulu_A_apfel'],
	[MAMPF + 14, 'lulu_A1_augen-zu'],
	[MAMPF + 24, 'lulu_A3_lachen'],
];

// Korb: Rückwand (vor den Äpfeln) und Vorderseite (danach)
const KorbHinten: React.FC = () => (
	<svg width={260} height={60} viewBox="-130 -30 260 60" style={{position: 'absolute', left: KORB_X - 130, top: RAND_Y - 30, overflow: 'visible'}}>
		<ellipse cx={0} cy={0} rx={112} ry={24} fill="#5a3a22" />
	</svg>
);
const KorbVorne: React.FC = () => (
	<svg width={260} height={160} viewBox="-130 -30 260 160" style={{position: 'absolute', left: KORB_X - 130, top: RAND_Y - 30, overflow: 'visible'}}>
		<path d="M -112 0 C -108 60, -96 104, -78 116 L 78 116 C 96 104, 108 60, 112 0 C 80 18, -80 18, -112 0 Z" fill="#c08a4e" />
		{[20, 46, 72, 98].map((y) => (
			<path key={y} d={`M ${-110 + y * 0.28} ${y} C -40 ${y + 14}, 40 ${y + 14}, ${110 - y * 0.28} ${y}`} stroke="#9a6a38" strokeWidth={7} fill="none" />
		))}
		{[-80, -48, -16, 16, 48, 80].map((x) => (
			<path key={x} d={`M ${x} 16 L ${x * 0.82} 114`} stroke="#a8763f" strokeWidth={5} opacity={0.7} />
		))}
		<path d="M -112 0 C -80 22, 80 22, 112 0" stroke="#8a5a2e" strokeWidth={12} fill="none" strokeLinecap="round" />
		<path d="M -112 0 C -80 -24, 80 -24, 112 0" stroke="#8a5a2e" strokeWidth={8} fill="none" strokeLinecap="round" opacity={0.9} />
	</svg>
);

// Ein Apfel des Liedes: hängt im Baum, fliegt bei seiner Zahl in den Korb, leuchtet beim Zählen
const Liedapfel: React.FC<{i: number; f: number}> = ({i, f}) => {
	// Apfel 10 holt sich Lulu: vom Korb ins Maul, mit dem Hals wieder hoch, dann ist er im Bild lulu_A_apfel
	if (i === 9 && f >= UNTEN && f < OBEN) {
		const bild = f < HOCH ? C9_TIEF : C9_TIEF - ((f - HOCH) * C9_TEMPO * 24) / FPS;
		const m = luluMaulC9(bild);
		const maul = punkt('lulu', LULU_X, LULU_Y, m.cx, m.cy);
		const p = interpolate(f, [UNTEN, UNTEN + 6], [0, 1], {extrapolateRight: 'clamp'});
		const x = interpolate(p, [0, 1], [KORB_X + PLAETZE[9][0], maul.x]);
		const y = interpolate(p, [0, 1], [RAND_Y + PLAETZE[9][1], maul.y + 6]);
		return <Apfel x={x} y={y} s={0.82} />;
	}
	if (i === 9 && f >= OBEN) return null;
	const start = s(ZAHLEN[i]) - 6;
	const [bx, by] = AM_BAUM[i];
	const zx = KORB_X + PLAETZE[i][0];
	const zy = RAND_Y + PLAETZE[i][1];
	if (f < start) return <Apfel x={bx} y={by + Math.sin(f * 0.06 + i) * 3} s={0.82} r={Math.sin(f * 0.06 + i) * 5} />;
	const p = Math.min(1, (f - start) / FLUG);
	const x = interpolate(p, [0, 1], [bx, zx]);
	const y = interpolate(p, [0, 1], [by, zy]) - Math.sin(p * Math.PI) * 160;
	// Beim Zählen nach Strophe 2 leuchtet der Apfel kurz auf
	const leuchten = interpolate(f, [s(ECHO[i]), s(ECHO[i]) + 4, s(ECHO[i]) + 18], [0, 1, 0], {extrapolateLeft: 'clamp', extrapolateRight: 'clamp'});
	const landen = p >= 1 ? 1 + 0.12 * Math.sin(Math.min(1, (f - start - FLUG) / 8) * Math.PI) : 1;
	return (
		<>
			{leuchten > 0 && (
				<div style={{position: 'absolute', left: zx - 50, top: zy - 50, width: 100, height: 100, borderRadius: '50%', background: 'radial-gradient(circle, rgba(255,230,140,0.95), rgba(255,230,140,0))', opacity: leuchten}} />
			)}
			<Apfel x={x} y={y} s={0.82 * landen * (1 + 0.18 * leuchten)} r={p < 1 ? p * 360 : 0} />
		</>
	);
};

// Hand mit hochgestreckten Fingern (Daumen zählt als 1)
const HAUT = '#f4cfa6';
const KONTUR = '#b9825a';
const FINGER: {x: number; b: number; l: number; dreh: number}[] = [
	{x: 22, b: 24, l: 62, dreh: -48}, // Daumen
	{x: 48, b: 22, l: 84, dreh: -6},
	{x: 74, b: 22, l: 92, dreh: 0},
	{x: 100, b: 22, l: 84, dreh: 5},
	{x: 124, b: 20, l: 66, dreh: 12},
];
const Hand: React.FC<{finger: number; neu: number; spiegeln?: boolean}> = ({finger, neu, spiegeln = false}) => (
	<svg width={170} height={230} viewBox="0 0 160 220" style={{transform: spiegeln ? 'scaleX(-1)' : undefined, overflow: 'visible'}}>
		{FINGER.map((fi, k) => {
			const hoch = k < finger;
			// der zuletzt dazugekommene Finger schnellt hoch
			const l = hoch ? (k === finger - 1 ? 18 + (fi.l - 18) * neu : fi.l) : 18;
			const fussY = k === 0 ? 150 : 112;
			return (
				<rect
					key={k}
					x={fi.x - fi.b / 2 + 6}
					y={fussY - l}
					width={fi.b}
					height={l + 20}
					rx={fi.b / 2}
					fill={HAUT}
					stroke={KONTUR}
					strokeWidth={4}
					transform={`rotate(${fi.dreh} ${fi.x + 6} ${fussY + 10})`}
				/>
			);
		})}
		<rect x={30} y={100} width={112} height={100} rx={40} fill={HAUT} stroke={KONTUR} strokeWidth={4} />
		{/* eingeklappte Finger als kleine Knöchel */}
		{FINGER.slice(1).map((fi, k) => (k + 1 >= finger ? <path key={k} d={`M ${fi.x - 4} 118 q 11 10 22 0`} stroke={KONTUR} strokeWidth={3} fill="none" opacity={0.7} /> : null))}
	</svg>
);

// Zahl und Hände oben rechts
type Anzeige = {n: number | '?'; seit: number; deck: number};
const anzeige = (f: number): Anzeige | null => {
	const zaehle = (zeiten: number[], von: number, bis: number, basis = 0) => {
		if (!imAbschnitt(f, von, bis)) return null;
		const k = zeiten.filter((t) => f >= s(t)).length;
		const seit = k > 0 ? f - s(zeiten[k - 1]) : 0;
		const deck = Math.min(interpolate(f, [s(von), s(von) + 8], [0, 1], {extrapolateRight: 'clamp'}), interpolate(f, [s(bis) - 10, s(bis)], [1, 0], {extrapolateLeft: 'clamp'}));
		return {n: basis + k, seit, deck};
	};
	return (
		zaehle(ZAHLEN.slice(0, 5), ZAHLEN[0] - 0.2, T.c2 - 0.3) ??
		zaehle(ZAHLEN.slice(5), ZAHLEN[5] - 0.2, T.echo - 0.1, 5) ??
		zaehle(ECHO, ECHO[0] - 0.1, T.echoEnde + 1) ??
		(imAbschnitt(f, T.frage, T.c3 - 0.5)
			? {
					n: f >= s(T.antwort) ? 9 : '?',
					seit: f >= s(T.antwort) ? f - s(T.antwort) : f - s(T.frage),
					deck: Math.min(interpolate(f, [s(T.frage), s(T.frage) + 8], [0, 1], {extrapolateRight: 'clamp'}), interpolate(f, [s(T.c3 - 0.5) - 10, s(T.c3 - 0.5)], [1, 0], {extrapolateLeft: 'clamp'})),
				}
			: null)
	);
};

const Zahltafel: React.FC = () => {
	const f = useCurrentFrame();
	const a = anzeige(f);
	if (!a || a.n === 0) return null;
	const pop = spring({frame: a.seit, fps: FPS, config: {damping: 9, stiffness: 160}});
	const neu = interpolate(a.seit, [0, 8], [0, 1], {extrapolateRight: 'clamp'});
	let inhalt: React.ReactNode;
	if (a.n === '?') {
		// drei Punkte zählen herunter bis zur Antwort
		const frei = s(T.antwort) - s(T.frage + 1.2);
		const punkte = f < s(T.frage + 1.2) ? 3 : Math.max(1, 3 - Math.floor(((f - s(T.frage + 1.2)) / frei) * 3));
		inhalt = <div style={{fontSize: 150, color: '#b8a68a', width: 330, textAlign: 'center'}}>{f < s(T.frage + 1.2) ? '?' : '•'.repeat(punkte)}</div>;
	} else {
		const n = a.n;
		inhalt = (
			<>
				<div style={{fontSize: 190, lineHeight: 1, color: '#c8502c', minWidth: 150, textAlign: 'center', transform: `scale(${0.6 + 0.4 * pop})`}}>{n}</div>
				<div style={{display: 'flex', gap: 4, alignItems: 'flex-end'}}>
					<Hand finger={Math.min(n, 5)} neu={n <= 5 ? neu : 1} />
					{n > 5 && <Hand finger={n - 5} neu={neu} spiegeln />}
				</div>
			</>
		);
	}
	return (
		<div
			style={{
				position: 'absolute',
				top: 44,
				right: 56,
				display: 'flex',
				alignItems: 'center',
				gap: 18,
				padding: '18px 34px',
				borderRadius: 36,
				background: 'rgba(251,244,228,0.94)',
				border: '8px solid #3f5a8a',
				boxShadow: '0 8px 26px rgba(60,40,20,0.22)',
				fontFamily: SCHRIFT,
				fontWeight: 600,
				opacity: a.deck,
				transform: `scale(${0.88 + 0.12 * a.deck})`,
				transformOrigin: '100% 0',
			}}
		>
			{inhalt}
		</div>
	);
};

const Garten: React.FC = () => {
	const f = useCurrentFrame();
	const kam = kamera(f);
	const ph = (f - ANFANG) / SCHLAG;
	const schlag = Math.abs(Math.sin(ph * Math.PI));
	const wipp = (phase: number, h: number) => -Math.abs(Math.sin(ph * Math.PI + phase)) * h;
	const schwank = (phase: number, g: number) => Math.sin((ph * Math.PI) / 2 + phase) * g;
	const ruhig = f >= s(T.c3) ? 0.6 : 1;
	const singt = f >= ANFANG && f < s(T.ende + 1);

	const pinoHuepf = [...ZAHLEN, ...ECHO].reduce((a, t) => a + huepfer(f, s(t) + 14, 24, 11), 0) + huepfer(f, s(T.antwort), 40, 14);
	const luluImClip = f >= RUNTER && f < OBEN;
	const abend = interpolate(f, [s(T.c3 - 1), s(T.c3 + 2)], [0, 1], {extrapolateLeft: 'clamp', extrapolateRight: 'clamp'});
	const chor = [T.c1, T.c2, T.c3].some((c) => imAbschnitt(f, c, c + 9.6));
	const kopf = punkt('lulu', LULU_X, LULU_Y, LULU_KOPF.cx, LULU_KOPF.cy);

	return (
		<>
			<Kamera {...kam}>
				<Ort name="garten_herbst" />
				<div style={{position: 'absolute', inset: 0, opacity: abend}}>
					<Ort name="garten_herbst_abend" />
				</div>
				<KorbHinten />
				{luluImClip ? (
					f < HOCH ? (
						<ClipFigur name="lulu_C9_hals-runter" start={RUNTER - c9(C9_START)} tempo={C9_TEMPO} bis={C9_TIEF / 24} x={LULU_X} y={LULU_Y} ersatz="lulu_A_hals-unten" />
					) : (
						<ClipFigur name="lulu_C9_hals-runter" start={HOCH} tempo={C9_TEMPO} bis={C9_TIEF / 24} rueckwaerts x={LULU_X} y={LULU_Y} ersatz="lulu_A_hals-unten" />
					)
				) : (
					<Figur pose={LULU} x={LULU_X} y={LULU_Y} drehung={singt ? schwank(0.5, 2 * ruhig) : 0} stauchY={1 - 0.012 * schlag} blende={6} />
				)}
				{new Array(10).fill(0).map((_, i) => (
					<Liedapfel key={i} i={i} f={f} />
				))}
				<KorbVorne />
				<Figur pose={NOA} x={NOA_X} y={BODEN + (singt ? wipp(0.3, 10 * ruhig) : 0)} drehung={singt ? schwank(0, 3 * ruhig) : 0} blende={3} />
				<Figur pose={PINO} x={PINO_X} y={BODEN + (singt ? wipp(0, 12 * ruhig) : 0) - pinoHuepf} drehung={singt ? schwank(1, 4 * ruhig) : 0} stauchY={1 - 0.03 * schlag} blende={6} />
				<Ruf text={LIED.mampf} x={kopf.x - 140} y={kopf.y - 40} start={MAMPF} dauer={30} groesse={80} farbe="#c8362c" />
				<Funkeln x={kopf.x - 60} y={kopf.y + 20} start={s(T.antwort + 0.6)} dauer={50} s={1.2} />
			</Kamera>
			{chor && <Noten />}
			<Zahltafel />
			{/* Liedtitel im ersten Refrain */}
			<div
				style={{
					position: 'absolute',
					top: 46,
					left: 0,
					right: 0,
					textAlign: 'center',
					fontFamily: SCHRIFT,
					fontWeight: 600,
					fontSize: 44,
					color: '#8a6a4a',
					opacity: interpolate(f, [s(T.c1), s(T.c1 + 0.6), s(T.v1 - 1.2), s(T.v1 - 0.4)], [0, 1, 1, 0], {extrapolateLeft: 'clamp', extrapolateRight: 'clamp'}),
				}}
			>
				♫ {LIED.titel} ♫
			</div>
			{/* Lulus Frage im Instrumental, solange die Aufnahme fehlt */}
			<div
				style={{
					position: 'absolute',
					top: 50,
					left: 60,
					maxWidth: 1560,
					padding: '12px 30px 16px',
					borderRadius: 26,
					background: 'rgba(251,244,228,0.92)',
					boxShadow: '0 6px 24px rgba(60,40,20,0.18)',
					fontFamily: SCHRIFT,
					fontWeight: 600,
					fontSize: 46,
					color: '#4f7a3a',
					opacity: interpolate(f, [G, G + 8, RUNTER + 40, RUNTER + 50], [0, 1, 1, 0], {extrapolateLeft: 'clamp', extrapolateRight: 'clamp'}),
				}}
			>
				{LIED.bitte}
			</div>
			<Vignette />
		</>
	);
};

// Intro (Buch geht auf) bis kurz vor das erste gesungene Wort
const INTRO_DAUER = s(T.c1 - 0.2);
const INTRO = plane([{id: 'buch', dauer: 1.5}, {id: 't1', dauer: 1.2}, {id: 't2', dauer: 0.5}], {...INTRO_OPTIONEN, vorlauf: 0.2, nachlauf: 0.4});
const OUTRO_START = DAUER - OUTRO.dauer;

export const Lied01: React.FC = () => (
	<AbsoluteFill style={{background: '#f4ead8'}}>
		<Sequence durationInFrames={OUTRO_START + 12}>
			<Garten />
		</Sequence>
		<Sequence from={INTRO_DAUER} durationInFrames={OUTRO_START - INTRO_DAUER + 12}>
			<Blende dauer={OUTRO_START - INTRO_DAUER + 12} rein={10} raus={12} />
		</Sequence>
		<Sequence durationInFrames={INTRO_DAUER}>
			<AbsoluteFill style={{background: '#f4ead8'}}>
				<Intro plan={INTRO} titel={LIED.buchTitel} posen={['pino_A3_lachen', 'noa_A3_lachen', 'lulu_A3_lachen']} />
			</AbsoluteFill>
		</Sequence>
		<Sequence from={OUTRO_START}>
			<Outro posen={['pino_A3_lachen', 'noa_A_arm-hoch-winken', 'lulu_A3_lachen']} />
		</Sequence>
		<Karaoke zeilen={ZEILEN} />
		<Audio src={staticFile(LIED.datei)} />
	</AbsoluteFill>
);

export const LIED01_DAUER = DAUER;