import React from 'react';
import { AbsoluteFill, useCurrentFrame, useVideoConfig } from 'remotion';
import { WorldTheme, Glyph as GlyphType } from './themes';

const TAU = Math.PI * 2;

// Subtle film grain — a static fractal-noise overlay (no animation needed).
const GRAIN =
  "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E\")";

const Glyph: React.FC<{ type: GlyphType; size: number; color: string }> = ({ type, size, color }) => {
  const s = size * 0.36;
  const box: React.CSSProperties = {
    position: 'absolute',
    left: '50%',
    top: '50%',
    transform: 'translate(-50%, -50%)',
  };

  if (type === 'bars') {
    return (
      <div style={{ ...box, width: s, height: s, display: 'flex', flexDirection: 'column', justifyContent: 'center', gap: s * 0.16 }}>
        {[1, 0.7, 0.42].map((w, i) => (
          <div key={i} style={{ height: s * 0.13, width: `${w * 100}%`, borderRadius: 99, background: color }} />
        ))}
      </div>
    );
  }
  if (type === 'circle') return <div style={{ ...box, width: s, height: s, borderRadius: '50%', background: color }} />;
  if (type === 'ring') return <div style={{ ...box, width: s, height: s, borderRadius: '50%', border: `${Math.max(3, s * 0.16)}px solid ${color}` }} />;
  if (type === 'square') return <div style={{ ...box, width: s, height: s, borderRadius: s * 0.28, border: `${Math.max(3, s * 0.15)}px solid ${color}` }} />;
  if (type === 'dot')
    return (
      <div style={{ ...box, width: s, height: s * 0.28, display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        {[0, 1, 2].map((i) => (
          <div key={i} style={{ width: s * 0.24, height: s * 0.24, borderRadius: '50%', background: color }} />
        ))}
      </div>
    );
  if (type === 'play')
    return (
      <div
        style={{
          ...box,
          width: 0,
          height: 0,
          borderTop: `${s * 0.32}px solid transparent`,
          borderBottom: `${s * 0.32}px solid transparent`,
          borderLeft: `${s * 0.5}px solid ${color}`,
          marginLeft: s * 0.08,
        }}
      />
    );
  // wrench / cart fall back to a simple rounded square mark
  return <div style={{ ...box, width: s, height: s, borderRadius: s * 0.28, background: color, opacity: 0.85 }} />;
};

export const WorldScene: React.FC<{ theme: WorldTheme }> = ({ theme }) => {
  const frame = useCurrentFrame();
  const { durationInFrames } = useVideoConfig();
  const t = (frame / durationInFrames) * TAU; // 0..2π over the loop → seamless

  const gx = 50 + Math.sin(t) * 14;
  const gy = 42 + Math.cos(t) * 10;
  const gx2 = 50 - Math.sin(t + 1.2) * 16;
  const gy2 = 58 - Math.cos(t + 0.6) * 12;
  const conic = (frame / durationInFrames) * 360;
  const haloPulse = 0.85 + Math.sin(t) * 0.15;

  return (
    <AbsoluteFill style={{ backgroundColor: theme.bgBottom, overflow: 'hidden' }}>
      {/* base gradient */}
      <AbsoluteFill style={{ background: `linear-gradient(160deg, ${theme.bgTop}, ${theme.bgBottom})` }} />

      {/* slowly rotating conic tint */}
      <AbsoluteFill
        style={{
          background: `conic-gradient(from ${conic}deg at 50% 50%, ${theme.glowA}22, transparent 30%, ${theme.glowB}22, transparent 65%, ${theme.glowA}22)`,
          opacity: 0.55,
          filter: 'blur(40px)',
        }}
      />

      {/* drifting radial glows */}
      <AbsoluteFill style={{ background: `radial-gradient(42% 55% at ${gx}% ${gy}%, ${theme.glowA}66, transparent 70%)`, filter: 'blur(24px)' }} />
      <AbsoluteFill style={{ background: `radial-gradient(46% 52% at ${gx2}% ${gy2}%, ${theme.glowB}55, transparent 70%)`, filter: 'blur(34px)' }} />

      {/* soft central halo behind the cluster */}
      <AbsoluteFill style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
        <div
          style={{
            width: '68%',
            height: '68%',
            borderRadius: '50%',
            background: `radial-gradient(circle, ${theme.glowA}33, transparent 60%)`,
            transform: `scale(${haloPulse})`,
            filter: 'blur(60px)',
          }}
        />
      </AbsoluteFill>

      {/* floating glossy app-icon tiles */}
      {theme.tiles.map((tile, i) => {
        const dx = Math.sin(t + tile.phase) * tile.dx;
        const dy = Math.cos(t + tile.phase * 1.3) * tile.dy;
        const rot = Math.sin(t + tile.phase) * 7;
        const blur = (1 - tile.depth) * 5;
        const opacity = 0.5 + tile.depth * 0.5;
        const r = tile.size * 0.225;
        return (
          <div
            key={i}
            style={{
              position: 'absolute',
              left: `${tile.x}%`,
              top: `${tile.y}%`,
              width: tile.size,
              height: tile.size,
              transform: `translate(calc(-50% + ${dx}px), calc(-50% + ${dy}px)) rotate(${rot}deg)`,
              borderRadius: r,
              background: `linear-gradient(145deg, ${tile.a}, ${tile.b})`,
              boxShadow: `inset 0 2px 1px rgba(255,255,255,.5), inset 0 -14px 26px rgba(0,0,0,.28), 0 30px 60px rgba(0,0,0,.45), 0 0 50px ${tile.a}55`,
              opacity,
              filter: blur > 0.4 ? `blur(${blur}px)` : 'none',
            }}
          >
            <div style={{ position: 'absolute', inset: 0, borderRadius: 'inherit', background: 'linear-gradient(160deg, rgba(255,255,255,.55), rgba(255,255,255,0) 46%)' }} />
            <Glyph type={tile.glyph} size={tile.size} color="rgba(255,255,255,.92)" />
          </div>
        );
      })}

      {/* grain */}
      <AbsoluteFill style={{ backgroundImage: GRAIN, backgroundSize: '180px 180px', opacity: 0.06, mixBlendMode: 'overlay' }} />

      {/* vignette */}
      <AbsoluteFill style={{ background: 'radial-gradient(120% 120% at 50% 45%, transparent 55%, rgba(0,0,0,.55) 100%)' }} />
    </AbsoluteFill>
  );
};