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

export const WindowsFg: 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

  type Win = {
    left: number;
    top: number;
    w: number;
    scale: number;
    phase: number;
    rot: number;
    kind: 'chart' | 'blocks' | 'lines';
    z: number;
  };

  // 7 floating window cards, kept centre-to-right; left third stays calmer.
  const wins: Win[] = [
    { left: 40, top: 18, w: 300, scale: 1.04, phase: 0.0, rot: -2.0, kind: 'chart', z: 7 },
    { left: 63, top: 40, w: 350, scale: 1.14, phase: 0.7, rot: 1.6, kind: 'blocks', z: 9 },
    { left: 82, top: 22, w: 260, scale: 0.92, phase: 1.4, rot: 2.4, kind: 'lines', z: 5 },
    { left: 52, top: 67, w: 230, scale: 0.84, phase: 2.1, rot: -1.4, kind: 'chart', z: 4 },
    { left: 84, top: 60, w: 300, scale: 0.98, phase: 2.8, rot: -2.2, kind: 'blocks', z: 6 },
    { left: 71, top: 13, w: 200, scale: 0.78, phase: 3.5, rot: 1.0, kind: 'lines', z: 3 },
    { left: 30, top: 52, w: 210, scale: 0.8, phase: 4.2, rot: -1.0, kind: 'blocks', z: 4 },
  ];

  const ink = '#475569';
  const inkSoft = '#cbd5e1';

  const renderContent = (kind: Win['kind'], wob: number) => {
    if (kind === 'chart') {
      const bars = [0.45, 0.7, 0.55, 0.9, 0.65, 0.8];
      return (
        <div style={{ display: 'flex', alignItems: 'flex-end', gap: 7, height: 78, padding: '4px 2px 0' }}>
          {bars.map((b, j) => {
            const h = (b + 0.06 * Math.sin(t + wob + j * 0.6)) * 100;
            const grad = j % 2 === 0 ? accent : accent2;
            return (
              <div
                key={j}
                style={{
                  flex: 1,
                  height: `${Math.max(18, Math.min(100, h))}%`,
                  borderRadius: 4,
                  background: `linear-gradient(180deg, ${accent2} 0%, ${grad} 100%)`,
                  boxShadow: 'inset 0 1px 0 rgba(255,255,255,.55)',
                }}
              />
            );
          })}
        </div>
      );
    }
    if (kind === 'blocks') {
      return (
        <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
          <div style={{ display: 'flex', gap: 8 }}>
            <div
              style={{
                width: 46,
                height: 46,
                borderRadius: 10,
                background: `linear-gradient(135deg, ${accent2}, ${accent})`,
                boxShadow: 'inset 0 1px 0 rgba(255,255,255,.5)',
              }}
            />
            <div style={{ flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'center', gap: 7 }}>
              <div style={{ height: 7, width: '85%', borderRadius: 4, background: inkSoft }} />
              <div style={{ height: 7, width: '55%', borderRadius: 4, background: inkSoft }} />
            </div>
          </div>
          <div style={{ display: 'flex', gap: 8 }}>
            <div
              style={{
                flex: 2,
                height: 30,
                borderRadius: 8,
                background: `linear-gradient(135deg, ${accent} 0%, ${accent2} 100%)`,
                boxShadow: 'inset 0 1px 0 rgba(255,255,255,.45)',
              }}
            />
            <div style={{ flex: 1, height: 30, borderRadius: 8, background: '#eef2f7' }} />
          </div>
        </div>
      );
    }
    // lines
    return (
      <div style={{ display: 'flex', flexDirection: 'column', gap: 9, paddingTop: 2 }}>
        <div style={{ height: 8, width: '70%', borderRadius: 4, background: accent }} />
        <div style={{ height: 7, width: '95%', borderRadius: 4, background: inkSoft }} />
        <div style={{ height: 7, width: '82%', borderRadius: 4, background: inkSoft }} />
        <div style={{ height: 7, width: '60%', borderRadius: 4, background: inkSoft }} />
      </div>
    );
  };

  return (
    <>
      {wins.map((win, i) => {
        // seamless periodic drift + gentle bob/rotation
        const dx = 14 * Math.sin(t + win.phase);
        const dy = 12 * Math.cos(t + win.phase * 1.3);
        const rot = win.rot + 1.4 * Math.sin(t + win.phase * 0.8);
        const breathe = 1 + 0.02 * Math.sin(t + win.phase * 1.1);
        const sc = win.scale * breathe;

        return (
          <div
            key={i}
            style={{
              position: 'absolute',
              left: `${win.left}%`,
              top: `${win.top}%`,
              width: win.w,
              transform: `translate(-50%, -50%) translate(${dx}px, ${dy}px) scale(${sc}) rotate(${rot}deg)`,
              zIndex: win.z,
              borderRadius: 16,
              background: '#ffffff',
              boxShadow: '0 28px 56px -16px rgba(15,23,42,.26), 0 6px 16px -8px rgba(15,23,42,.16)',
              overflow: 'hidden',
              border: '1px solid rgba(15,23,42,.06)',
            }}
          >
            {/* title bar */}
            <div
              style={{
                height: 30,
                display: 'flex',
                alignItems: 'center',
                gap: 7,
                padding: '0 12px',
                background: 'linear-gradient(180deg, #ffffff 0%, #f4f7fb 100%)',
                borderBottom: '1px solid rgba(15,23,42,.06)',
              }}
            >
              <span style={{ width: 10, height: 10, borderRadius: '50%', background: '#ff5f57' }} />
              <span style={{ width: 10, height: 10, borderRadius: '50%', background: '#febc2e' }} />
              <span style={{ width: 10, height: 10, borderRadius: '50%', background: '#28c840' }} />
              <span style={{ marginLeft: 10, height: 6, width: 54, borderRadius: 3, background: '#e2e8f0' }} />
            </div>
            {/* content */}
            <div style={{ padding: 14, color: ink }}>{renderContent(win.kind, win.phase)}</div>
            {/* glossy top highlight */}
            <div
              style={{
                position: 'absolute',
                top: 0,
                left: 0,
                right: 0,
                height: '46%',
                background: 'linear-gradient(180deg, rgba(255,255,255,.6), rgba(255,255,255,0))',
                pointerEvents: 'none',
              }}
            />
          </div>
        );
      })}
    </>
  );
};