import React from 'react';
import { useCurrentFrame, useVideoConfig } from 'remotion';

export const AndroidFg: React.FC<{ accent: string; accent2: string }> = ({ accent, accent2 }) => {
  const frame = useCurrentFrame();
  const { durationInFrames } = useVideoConfig();
  const p = frame / durationInFrames; // 0..1 across the loop
  const t = p * Math.PI * 2;          // periodic motion base

  // Shared soft drop shadow so every object floats above the white stage.
  const floatShadow = '0 22px 44px -12px rgba(15,23,42,.22)';

  // ---------------------------------------------------------------------------
  // Friendly solid green Android robot heads: rounded capsule dome, two short
  // antennas, two white eyes. Glossy + solid so they pop on white. Bobbing.
  // ---------------------------------------------------------------------------
  type Bot = { left: string; top: string; w: number; phase: number; body: string; deep: string };
  const bots: Bot[] = [
    { left: '64%', top: '46%', w: 230, phase: 0.0, body: accent, deep: accent2 },
    { left: '85%', top: '30%', w: 124, phase: 2.1, body: accent2, deep: accent },
    { left: '83%', top: '72%', w: 104, phase: 4.0, body: accent, deep: accent2 },
  ];

  const robots = bots.map((b, i) => {
    const bob = Math.sin(t + b.phase) * 13;          // vertical bob
    const sway = Math.cos(t + b.phase * 1.3) * 7;    // gentle horizontal sway
    const tilt = Math.sin(t + b.phase) * 3;          // playful tilt
    const headH = b.w * 0.6;                         // dome capsule height
    const eye = Math.max(8, b.w * 0.085);
    const antH = b.w * 0.26;
    const eyeY = headH * 0.4;
    return (
      <div
        key={`bot-${i}`}
        style={{
          position: 'absolute',
          left: b.left,
          top: b.top,
          width: b.w,
          height: headH,
          marginLeft: -b.w / 2,
          marginTop: -headH / 2,
          transform: `translate(${sway}px, ${bob}px) rotate(${tilt}deg)`,
        }}
      >
        {/* Antennas (two short stubs angling outward) */}
        {[-1, 1].map((s) => (
          <div
            key={`ant-${s}`}
            style={{
              position: 'absolute',
              left: '50%',
              top: -antH * 0.78,
              width: Math.max(4, b.w * 0.028),
              height: antH,
              marginLeft: s * b.w * 0.2,
              background: `linear-gradient(${b.body}, ${b.deep})`,
              borderRadius: 99,
              transform: `rotate(${s * 25}deg)`,
              transformOrigin: 'bottom center',
            }}
          />
        ))}

        {/* Head capsule dome (solid glossy green) */}
        <div
          style={{
            position: 'absolute',
            inset: 0,
            borderRadius: `${b.w}px ${b.w}px ${b.w * 0.34}px ${b.w * 0.34}px`,
            background: `linear-gradient(160deg, ${b.deep} 0%, ${b.body} 52%, ${b.body} 100%)`,
            boxShadow: `${floatShadow}, inset 0 10px 22px rgba(255,255,255,0.5), inset 0 -14px 26px rgba(0,0,0,0.16)`,
          }}
        >
          {/* glossy sweep highlight */}
          <div
            style={{
              position: 'absolute',
              left: '14%',
              top: '10%',
              width: '56%',
              height: '40%',
              borderRadius: '50%',
              background: 'radial-gradient(circle at 42% 32%, rgba(255,255,255,0.6), rgba(255,255,255,0) 72%)',
            }}
          />
          {/* Eyes (two solid white dots) */}
          {[-1, 1].map((s) => (
            <div
              key={`eye-${s}`}
              style={{
                position: 'absolute',
                left: '50%',
                top: eyeY,
                width: eye,
                height: eye,
                marginLeft: s * b.w * 0.18 - eye / 2,
                borderRadius: '50%',
                background: '#ffffff',
                boxShadow: 'inset 0 -2px 4px rgba(0,0,0,0.18), 0 1px 2px rgba(0,0,0,0.12)',
              }}
            />
          ))}
        </div>
      </div>
    );
  });

  // ---------------------------------------------------------------------------
  // Floating colourful Material chips / cards (rounded rects + circles) bobbing
  // at varied depths. Solid gradient fills, soft shadow, mid-grey detail lines.
  // ---------------------------------------------------------------------------
  type Chip = {
    left: string; top: string; w: number; h: number; r: number;
    phase: number; c1: string; c2: string; kind: 'card' | 'circle' | 'pill';
  };
  const teal = '#0FB9A6';
  const lime = '#7AD957';
  const chips: Chip[] = [
    { left: '47%', top: '24%', w: 132, h: 92, r: 22, phase: 0.4, c1: accent2, c2: accent, kind: 'card' },
    { left: '74%', top: '78%', w: 116, h: 116, r: 999, phase: 1.5, c1: teal, c2: accent, kind: 'circle' },
    { left: '54%', top: '82%', w: 148, h: 56, r: 28, phase: 2.6, c1: accent, c2: teal, kind: 'pill' },
    { left: '92%', top: '50%', w: 100, h: 100, r: 24, phase: 3.5, c1: lime, c2: accent2, kind: 'card' },
    { left: '44%', top: '60%', w: 84, h: 84, r: 999, phase: 4.6, c1: accent2, c2: lime, kind: 'circle' },
    { left: '70%', top: '14%', w: 128, h: 50, r: 25, phase: 5.4, c1: teal, c2: accent2, kind: 'pill' },
  ];

  const cards = chips.map((c, i) => {
    const bob = Math.sin(t + c.phase) * 16;
    const sway = Math.cos(t + c.phase * 0.8) * 9;
    const tilt = Math.sin(t + c.phase * 1.1) * 5;
    const depth = 0.92 + Math.sin(t + c.phase) * 0.05; // subtle breathing scale
    return (
      <div
        key={`chip-${i}`}
        style={{
          position: 'absolute',
          left: c.left,
          top: c.top,
          width: c.w,
          height: c.h,
          marginLeft: -c.w / 2,
          marginTop: -c.h / 2,
          borderRadius: c.r,
          background: `linear-gradient(145deg, ${c.c1} 0%, ${c.c2} 100%)`,
          boxShadow: `${floatShadow}, inset 0 6px 14px rgba(255,255,255,0.4), inset 0 -8px 16px rgba(0,0,0,0.12)`,
          transform: `translate(${sway}px, ${bob}px) rotate(${tilt}deg) scale(${depth})`,
          overflow: 'hidden',
        }}
      >
        {/* glossy corner highlight */}
        <div
          style={{
            position: 'absolute',
            left: '-10%',
            top: '-30%',
            width: '70%',
            height: '70%',
            borderRadius: '50%',
            background: 'radial-gradient(circle at 40% 40%, rgba(255,255,255,0.55), rgba(255,255,255,0) 70%)',
          }}
        />
        {c.kind === 'card' && (
          <>
            {/* mid-grey UI detail lines inside the card */}
            <div style={{ position: 'absolute', left: '16%', top: '28%', width: '50%', height: 8, borderRadius: 6, background: 'rgba(255,255,255,0.85)' }} />
            <div style={{ position: 'absolute', left: '16%', top: '50%', width: '64%', height: 6, borderRadius: 6, background: 'rgba(15,23,42,0.18)' }} />
            <div style={{ position: 'absolute', left: '16%', top: '68%', width: '40%', height: 6, borderRadius: 6, background: 'rgba(15,23,42,0.18)' }} />
          </>
        )}
        {c.kind === 'circle' && (
          <div
            style={{
              position: 'absolute',
              left: '50%',
              top: '50%',
              width: '34%',
              height: '34%',
              marginLeft: '-17%',
              marginTop: '-17%',
              borderRadius: '50%',
              background: 'rgba(255,255,255,0.92)',
              boxShadow: 'inset 0 -2px 4px rgba(0,0,0,0.15)',
            }}
          />
        )}
        {c.kind === 'pill' && (
          <div style={{ position: 'absolute', left: '20%', top: '50%', marginTop: -4, width: '60%', height: 8, borderRadius: 6, background: 'rgba(255,255,255,0.9)' }} />
        )}
      </div>
    );
  });

  return (
    <>
      {cards}
      {robots}
    </>
  );
};