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

export const HostingFg: React.FC<{ accent: string; accent2: string }> = ({ accent, accent2 }) => {
  const frame = useCurrentFrame();
  const { durationInFrames } = useVideoConfig();
  const p = frame / durationInFrames; // 0..1
  const t = p * Math.PI * 2;          // use sin/cos of (t + phase) for periodic motion

  // --- shared glossy-tile look (solid teal, white glyphs, soft drop shadow) ---
  const tileGrad = `linear-gradient(150deg, ${accent2} 0%, ${accent} 58%, ${accent} 100%)`;
  const tileShadow =
    '0 22px 44px -12px rgba(15,23,42,.22), 0 6px 14px -8px rgba(15,23,42,.18)';
  const gloss =
    'radial-gradient(120% 80% at 28% 12%, rgba(255,255,255,.58), rgba(255,255,255,0) 54%)';

  const glyphStroke = 'rgba(255,255,255,.97)';
  const glyphSoft = 'rgba(255,255,255,.80)';

  // white glyphs (server stack / cloud / database cylinder) -------------------
  const Server = (s: number) => (
    <svg viewBox="0 0 100 100" width={s * 0.6} height={s * 0.6}>
      {[26, 50, 74].map((y, i) => (
        <g key={i}>
          <rect
            x="20"
            y={y - 9}
            width="60"
            height="18"
            rx="5"
            fill="none"
            stroke={glyphStroke}
            strokeWidth="5"
          />
          <circle cx="30" cy={y} r="3.4" fill={glyphStroke} />
          <line x1="44" y1={y} x2="68" y2={y} stroke={glyphSoft} strokeWidth="4" strokeLinecap="round" />
        </g>
      ))}
    </svg>
  );

  const Cloud = (s: number) => (
    <svg viewBox="0 0 100 100" width={s * 0.64} height={s * 0.64}>
      <path
        d="M32 70 H72 a16 16 0 0 0 2 -31.8 a20 20 0 0 0 -38 -5 A15 15 0 0 0 32 70 Z"
        fill="none"
        stroke={glyphStroke}
        strokeWidth="5.5"
        strokeLinejoin="round"
      />
    </svg>
  );

  const Database = (s: number) => (
    <svg viewBox="0 0 100 100" width={s * 0.58} height={s * 0.58}>
      <g fill="none" stroke={glyphStroke} strokeWidth="5.2">
        <ellipse cx="50" cy="26" rx="26" ry="11" />
        <path d="M24 26 V72 a26 11 0 0 0 52 0 V26" />
        <path d="M24 49 a26 11 0 0 0 52 0" stroke={glyphSoft} />
      </g>
    </svg>
  );

  type Tile = {
    left: number;
    top: number;
    size: number;
    radius: number;
    phase: number;
    bob: number;
    z: number;
    glyph: (s: number) => React.ReactNode;
  };

  // centre-to-right cluster; left third stays calm -------------------------
  const tiles: Tile[] = [
    { left: 51, top: 40, size: 188, radius: 42, phase: 0.0, bob: 16, z: 30, glyph: Server },
    { left: 70, top: 31, size: 158, radius: 36, phase: 1.7, bob: 13, z: 24, glyph: Cloud },
    { left: 68, top: 65, size: 150, radius: 34, phase: 3.1, bob: 14, z: 22, glyph: Database },
    { left: 87, top: 53, size: 116, radius: 26, phase: 4.4, bob: 11, z: 16, glyph: Cloud },
    { left: 43, top: 71, size: 104, radius: 24, phase: 5.5, bob: 10, z: 14, glyph: Server },
  ];

  // helpers for line + packet geometry (px space, 1920x1080) ---------------
  const px = (n: number) => (n / 100) * 1920;
  const py = (n: number) => (n / 100) * 1080;
  const center = (tile: Tile) => {
    const dy = Math.sin(t + tile.phase) * tile.bob;
    const dx = Math.cos(t + tile.phase * 1.3) * (tile.bob * 0.4);
    return { x: px(tile.left) + dx, y: py(tile.top) + dy };
  };

  const links: Array<[number, number, number]> = [
    [0, 1, 0.0], // server -> cloud
    [0, 2, 0.9], // server -> database
    [1, 3, 1.8], // cloud -> small cloud
    [0, 4, 2.6], // server -> small server
  ];

  return (
    <>
      {/* ---- thin teal lines + travelling data packets (behind the tiles) ---- */}
      <svg
        viewBox="0 0 1920 1080"
        width="1920"
        height="1080"
        style={{ position: 'absolute', left: 0, top: 0, overflow: 'visible', zIndex: 5 }}
      >
        {links.map(([a, b, ph], i) => {
          const A = center(tiles[a]);
          const B = center(tiles[b]);
          const lineOp = 0.30 + 0.14 * Math.sin(t + ph); // breathing, periodic
          const packets = [0, 0.5];
          return (
            <g key={i}>
              <line
                x1={A.x}
                y1={A.y}
                x2={B.x}
                y2={B.y}
                stroke={accent}
                strokeWidth={3}
                strokeLinecap="round"
                strokeDasharray="2 12"
                opacity={lineOp}
              />
              {packets.map((off, k) => {
                const u = (p + off + ph * 0.05) % 1; // wraps for seamless loop
                const cx = A.x + (B.x - A.x) * u;
                const cy = A.y + (B.y - A.y) * u;
                return (
                  <g key={k}>
                    <circle cx={cx} cy={cy} r={9} fill={accent2} opacity={0.26} />
                    <circle cx={cx} cy={cy} r={5} fill={accent} />
                    <circle cx={cx} cy={cy} r={2} fill="#ffffff" opacity={0.92} />
                  </g>
                );
              })}
            </g>
          );
        })}
      </svg>

      {/* ---- glossy floating teal tiles -------------------------------------- */}
      {tiles.map((tile, i) => {
        const dy = Math.sin(t + tile.phase) * tile.bob;
        const dx = Math.cos(t + tile.phase * 1.3) * (tile.bob * 0.4);
        const rot = Math.sin(t + tile.phase * 0.8) * 3.2;
        const scale = 1 + 0.02 * Math.sin(t + tile.phase + 1.0);
        return (
          <div
            key={i}
            style={{
              position: 'absolute',
              left: `${tile.left}%`,
              top: `${tile.top}%`,
              width: tile.size,
              height: tile.size,
              marginLeft: -tile.size / 2,
              marginTop: -tile.size / 2,
              zIndex: tile.z,
              transform: `translate(${dx}px, ${dy}px) rotate(${rot}deg) scale(${scale})`,
              borderRadius: tile.radius,
              background: tileGrad,
              boxShadow: tileShadow,
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
            }}
          >
            {/* top gloss highlight */}
            <div
              style={{
                position: 'absolute',
                inset: 0,
                borderRadius: tile.radius,
                background: gloss,
                pointerEvents: 'none',
              }}
            />
            {/* crisp inner edge */}
            <div
              style={{
                position: 'absolute',
                inset: 1,
                borderRadius: tile.radius - 1,
                boxShadow:
                  'inset 0 1px 0 rgba(255,255,255,.55), inset 0 -2px 6px rgba(13,148,136,.35)',
                pointerEvents: 'none',
              }}
            />
            <div style={{ position: 'relative', display: 'flex' }}>{tile.glyph(tile.size)}</div>
          </div>
        );
      })}
    </>
  );
};