import React from 'react';
import { useCurrentFrame, spring, useVideoConfig, interpolate } from 'remotion';
import { COLORS, FONT, SPRING } from '../styles/theme';
import { MeshBackground } from '../components/MeshBackground';
import { ParticleField } from '../components/ParticleField';
import { GlassCard, AnimatedGlowBorder } from '../components/GlassCard';
import { KineticText } from '../components/KineticText';

const channels = [
  { name: 'Discord', color: '#5865f2' },
  { name: 'iMessage', color: '#34c759' },
  { name: 'Telegram', color: '#26a5e4' },
  { name: 'Slack', color: '#e01e5a' },
  { name: 'Web', color: '#7c3aed' },
];

const bottomNodes = [
  { name: 'MCP Servers', color: COLORS.primary, icon: '⚡' },
  { name: 'Memory', color: '#22c55e', icon: '🧠' },
  { name: 'Cron Jobs', color: '#eab308', icon: '⏰' },
  { name: 'Sub-Agents', color: COLORS.secondary, icon: '🤖' },
];

export const Scene8Architecture: React.FC = () => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();

  const cx = 960;
  const topY = 170;
  const coreY = 470;
  const bottomY = 740;

  return (
    <div
      style={{
        width: 1920,
        height: 1080,
        fontFamily: FONT,
        position: 'relative',
        overflow: 'hidden',
      }}
    >
      <MeshBackground color1={COLORS.primary} color2={COLORS.secondary} color3={COLORS.accent} intensity={0.15} />

      {/* Title */}
      <div style={{ position: 'absolute', top: 30, width: '100%', textAlign: 'center' }}>
        <KineticText
          text="The Architecture Behind OpenClaw"
          highlightWords={['OpenClaw']}
          highlightColor={COLORS.primary}
          fontSize={38}
          animationType="slideUp"
        />
      </div>

      {/* SVG connection lines + flowing dots */}
      <svg style={{ position: 'absolute', top: 0, left: 0, width: 1920, height: 1080, pointerEvents: 'none' }}>
        {/* Channel → Core lines */}
        {channels.map((ch, i) => {
          const iconX = 280 + i * 340;
          const lineDelay = 30 + i * 6;
          const len = Math.hypot(cx - iconX, coreY - 40 - (topY + 55));
          const dashOff = interpolate(frame - lineDelay, [0, 25], [len, 0], {
            extrapolateLeft: 'clamp',
            extrapolateRight: 'clamp',
          });
          // Flowing dot
          const dotT = ((frame * 0.02 + i * 0.14) % 1);
          const dx = iconX + (cx - iconX) * dotT;
          const dy = (topY + 55) + (coreY - 40 - (topY + 55)) * dotT;

          return (
            <g key={`top-${i}`}>
              <line
                x1={iconX} y1={topY + 55} x2={cx} y2={coreY - 40}
                stroke={ch.color} strokeWidth={1.5} opacity={0.4}
                strokeDasharray={len} strokeDashoffset={dashOff}
              />
              {frame > lineDelay + 25 && (
                <circle cx={dx} cy={dy} r={3} fill={ch.color} opacity={0.8} />
              )}
            </g>
          );
        })}

        {/* Core → Bottom lines */}
        {bottomNodes.map((node, i) => {
          const nodeX = 280 + i * 450;
          const lineDelay = 100 + i * 8;
          const len = Math.hypot(cx - nodeX, bottomY - 30 - (coreY + 40));
          const dashOff = interpolate(frame - lineDelay, [0, 25], [len, 0], {
            extrapolateLeft: 'clamp',
            extrapolateRight: 'clamp',
          });
          const dotT = ((frame * 0.018 + i * 0.2) % 1);
          const dx = cx + (nodeX - cx) * dotT;
          const dy = (coreY + 40) + (bottomY - 30 - (coreY + 40)) * dotT;

          return (
            <g key={`bot-${i}`}>
              <line
                x1={cx} y1={coreY + 40} x2={nodeX} y2={bottomY - 30}
                stroke={node.color} strokeWidth={1.5} opacity={0.4}
                strokeDasharray={len} strokeDashoffset={dashOff}
              />
              {frame > lineDelay + 25 && (
                <circle cx={dx} cy={dy} r={3} fill={node.color} opacity={0.8} />
              )}
            </g>
          );
        })}
      </svg>

      {/* Channel nodes at top */}
      {channels.map((ch, i) => {
        const iconX = 280 + i * 340;
        const entry = spring({ frame: frame - i * 6, fps, config: SPRING.bouncy });
        return (
          <div
            key={i}
            style={{
              position: 'absolute',
              left: iconX - 50,
              top: topY - 20,
              transform: `scale(${entry})`,
              opacity: entry,
            }}
          >
            <GlassCard
              delay={0}
              padding="10px 16px"
              animateFrom="none"
              borderColor={`${ch.color}50`}
              style={{ borderRadius: 14, minWidth: 100, textAlign: 'center' }}
            >
              <div style={{ fontSize: 13, fontWeight: 700, color: ch.color }}>{ch.name}</div>
            </GlassCard>
          </div>
        );
      })}

      {/* Core node */}
      <div
        style={{
          position: 'absolute',
          left: cx - 95,
          top: coreY - 40,
          transform: `scale(${spring({ frame: frame - 60, fps, config: SPRING.bouncy })})`,
        }}
      >
        <AnimatedGlowBorder color1={COLORS.primary} color2={COLORS.secondary} borderRadius={20} speed={1.5}>
          <div
            style={{
              padding: '18px 32px',
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
              gap: 10,
            }}
          >
            <div style={{ fontSize: 24 }}>🦀</div>
            <div style={{ fontSize: 18, fontWeight: 700, color: COLORS.white }}>OpenClaw Core</div>
          </div>
        </AnimatedGlowBorder>
      </div>

      {/* Bottom service nodes */}
      {bottomNodes.map((node, i) => {
        const nodeX = 280 + i * 450;
        const entry = spring({ frame: frame - 100 - i * 8, fps, config: SPRING.smooth });
        return (
          <div
            key={i}
            style={{
              position: 'absolute',
              left: nodeX - 75,
              top: bottomY - 30,
              transform: `scale(${entry}) translateY(${interpolate(entry, [0, 1], [20, 0])}px)`,
              opacity: entry,
            }}
          >
            <GlassCard
              delay={0}
              padding="12px 20px"
              animateFrom="none"
              borderColor={`${node.color}40`}
              glowColor={node.color}
              style={{ borderRadius: 14, textAlign: 'center', minWidth: 150 }}
            >
              <div style={{ fontSize: 20, marginBottom: 4 }}>{node.icon}</div>
              <div style={{ fontSize: 14, fontWeight: 600, color: COLORS.white }}>{node.name}</div>
            </GlassCard>
          </div>
        );
      })}

      {/* Bottom label */}
      <div
        style={{
          position: 'absolute',
          bottom: 40,
          width: '100%',
          textAlign: 'center',
          fontSize: 20,
          color: COLORS.gray,
          opacity: interpolate(frame, [150, 170], [0, 1], {
            extrapolateLeft: 'clamp',
            extrapolateRight: 'clamp',
          }),
        }}
      >
        Modular. Extensible. Built for scale.
      </div>

      <ParticleField count={30} color={`${COLORS.accent}60`} drift="up" seed={88} />
    </div>
  );
};
