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

export const WebtoolsFg: 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; // use sin/cos of (t + phase) for periodic motion

  // ---- a single glossy iOS-style tool tile -------------------------------
  const Tile: React.FC<{
    size: number;
    c1: string;
    c2: string;
    glyph: React.ReactNode;
  }> = ({ size, c1, c2, glyph }) => {
    const radius = size * 0.225; // iOS-superellipse-ish corner
    return (
      <div
        style={{
          position: 'relative',
          width: size,
          height: size,
          borderRadius: radius,
          background: `linear-gradient(150deg, ${c2} 0%, ${c1} 58%, ${c1} 100%)`,
          boxShadow: `0 22px 44px -12px rgba(15,23,42,.22), 0 6px 14px -6px rgba(15,23,42,.18), inset 0 1px 0 rgba(255,255,255,.45)`,
          overflow: 'hidden',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
        }}
      >
        {/* top glossy sheen */}
        <div
          style={{
            position: 'absolute',
            top: 0,
            left: 0,
            width: '100%',
            height: '52%',
            borderTopLeftRadius: radius,
            borderTopRightRadius: radius,
            background:
              'linear-gradient(180deg, rgba(255,255,255,.5) 0%, rgba(255,255,255,.12) 55%, rgba(255,255,255,0) 100%)',
          }}
        />
        {/* glyph */}
        <svg
          viewBox="0 0 100 100"
          width={size * 0.58}
          height={size * 0.58}
          style={{ position: 'relative', display: 'block' }}
        >
          {glyph}
        </svg>
      </div>
    );
  };

  // white glyph styling helper
  const G = {
    fill: 'none',
    stroke: '#ffffff',
    strokeWidth: 7,
    strokeLinecap: 'round' as const,
    strokeLinejoin: 'round' as const,
  };

  // ---- glyphs -----------------------------------------------------------
  const gearGlyph = (
    <>
      {(() => {
        const teeth = 8;
        const cx = 50;
        const cy = 50;
        const rO = 40;
        const rI = 30;
        const d: string[] = [];
        for (let i = 0; i < teeth; i++) {
          const a0 = (i / teeth) * Math.PI * 2;
          const a1 = ((i + 0.3) / teeth) * Math.PI * 2;
          const a2 = ((i + 0.5) / teeth) * Math.PI * 2;
          const a3 = ((i + 0.8) / teeth) * Math.PI * 2;
          const a4 = ((i + 1) / teeth) * Math.PI * 2;
          const pt = (a: number, r: number) =>
            `${(cx + Math.cos(a) * r).toFixed(2)},${(cy + Math.sin(a) * r).toFixed(2)}`;
          if (i === 0) d.push(`M ${pt(a0, rI)}`);
          d.push(`L ${pt(a1, rO)}`);
          d.push(`L ${pt(a2, rO)}`);
          d.push(`L ${pt(a3, rI)}`);
          d.push(`L ${pt(a4, rI)}`);
        }
        d.push('Z');
        return (
          <>
            <path d={d.join(' ')} fill="#ffffff" opacity={0.95} />
            <circle cx={50} cy={50} r={11} fill={accent} />
          </>
        );
      })()}
    </>
  );

  const wrenchGlyph = (
    <path
      d="M62 22 a16 16 0 1 0 16 26 L70 56 56 70 48 78 a16 16 0 0 1 -26 -16 L36 70 44 62 30 48 a16 16 0 0 1 16 -26 z"
      fill="#ffffff"
      opacity={0.95}
    />
  );

  const codeGlyph = (
    <>
      <path d="M37 30 L18 50 L37 70" {...G} />
      <path d="M63 30 L82 50 L63 70" {...G} />
      <line x1={56} y1={26} x2={44} y2={74} {...G} />
    </>
  );

  const rulerGlyph = (
    <>
      <rect x={20} y={32} width={60} height={36} rx={6} fill="#ffffff" opacity={0.95} />
      <g stroke={accent} strokeWidth={4} strokeLinecap="round">
        <line x1={32} y1={32} x2={32} y2={48} />
        <line x1={44} y1={32} x2={44} y2={44} />
        <line x1={56} y1={32} x2={56} y2={48} />
        <line x1={68} y1={32} x2={68} y2={44} />
      </g>
    </>
  );

  const dropGlyph = (
    <>
      <path d="M50 18 C50 18 76 48 76 64 a26 26 0 0 1 -52 0 C24 48 50 18 50 18 z" fill="#ffffff" opacity={0.95} />
      <circle cx={42} cy={58} r={7} fill={accent2} opacity={0.6} />
    </>
  );

  const qrGlyph = (
    <g fill="#ffffff">
      <rect x={20} y={20} width={22} height={22} rx={4} />
      <rect x={58} y={20} width={22} height={22} rx={4} />
      <rect x={20} y={58} width={22} height={22} rx={4} />
      <rect x={58} y={58} width={9} height={9} rx={2} />
      <rect x={71} y={58} width={9} height={9} rx={2} />
      <rect x={58} y={71} width={9} height={9} rx={2} />
      <rect x={71} y={71} width={9} height={9} rx={2} />
    </g>
  );

  const brushGlyph = (
    <>
      <path d="M68 22 L78 32 L46 64 L36 54 z" fill="#ffffff" opacity={0.95} />
      <path d="M36 54 L46 64 C46 64 42 78 28 80 C30 70 26 66 36 54 z" fill="#ffffff" opacity={0.85} />
    </>
  );

  const linkGlyph = (
    <>
      <path d="M42 38 L34 46 a14 14 0 0 0 20 20 L60 60" {...G} strokeWidth={8} />
      <path d="M58 62 L66 54 a14 14 0 0 0 -20 -20 L40 40" {...G} strokeWidth={8} />
    </>
  );

  // ---- tile layout: centred-to-right, left third calmer ------------------
  // each tile drifts gently (periodic) + the gear tile slowly spins
  const tiles: {
    left: number;
    top: number;
    size: number;
    c1: string;
    c2: string;
    glyph: React.ReactNode;
    phase: number;
    spin?: boolean;
  }[] = [
    { left: 60, top: 44, size: 168, c1: accent, c2: accent2, glyph: gearGlyph, phase: 0.0, spin: true },
    { left: 80, top: 30, size: 132, c1: '#0E9BB8', c2: accent2, glyph: codeGlyph, phase: 0.7 },
    { left: 84, top: 62, size: 120, c1: accent, c2: '#3FE0F2', glyph: wrenchGlyph, phase: 1.4 },
    { left: 66, top: 72, size: 116, c1: '#0C8FAE', c2: accent2, glyph: dropGlyph, phase: 2.1 },
    { left: 47, top: 64, size: 104, c1: accent, c2: accent2, glyph: rulerGlyph, phase: 2.8 },
    { left: 51, top: 26, size: 110, c1: '#0E9BB8', c2: '#3FE0F2', glyph: qrGlyph, phase: 3.5 },
    { left: 92, top: 45, size: 92, c1: accent, c2: accent2, glyph: brushGlyph, phase: 4.2 },
    { left: 38, top: 42, size: 88, c1: '#0C8FAE', c2: accent2, glyph: linkGlyph, phase: 4.9 },
  ];

  return (
    <>
      {tiles.map((tile, i) => {
        const bobX = Math.cos(t + tile.phase) * 10;
        const bobY = Math.sin(t + tile.phase * 1.3) * 12;
        const breathe = 1 + Math.sin(t + tile.phase) * 0.02;
        const tilt = Math.sin(t + tile.phase * 0.8) * 3; // gentle degrees
        const spin = tile.spin ? p * 360 : 0; // gear tile: one slow full turn / loop
        return (
          <div
            key={`tile-${i}`}
            style={{
              position: 'absolute',
              left: `${tile.left}%`,
              top: `${tile.top}%`,
              transform: `translate(-50%, -50%) translate(${bobX}px, ${bobY}px) rotate(${
                tile.spin ? spin : tilt
              }deg) scale(${breathe})`,
            }}
          >
            <Tile size={tile.size} c1={tile.c1} c2={tile.c2} glyph={tile.glyph} />
          </div>
        );
      })}

      {/* faint cyan wash so the cluster feels grounded (very soft on white) */}
      <div
        style={{
          position: 'absolute',
          left: '70%',
          top: '50%',
          width: 620,
          height: 620,
          transform: `translate(-50%, -50%) scale(${1 + Math.sin(t) * 0.04})`,
          borderRadius: '50%',
          background: `radial-gradient(circle, ${accent2}1f 0%, ${accent2}00 64%)`,
          opacity: 0.6 + Math.sin(t) * 0.1,
          filter: 'blur(6px)',
          zIndex: -1,
        }}
      />
    </>
  );
};