// Port of hyperframes `tiktok-follow` (Apache-2.0). TikTok-style follow
// card — dark lower-third, red Follow → black Following ✓.

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

interface Props {
  displayName: string;
  handle: string;
  followerCount: string;
  avatarUrl: string;
}

export default function TiktokFollow({
  displayName,
  handle,
  followerCount,
  avatarUrl,
}: Props) {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();
  const s = (seconds: number) => seconds * fps;

  const slideInY = interpolate(frame, [s(0.1), s(0.6)], [300, 0], {
    extrapolateLeft: 'clamp',
    extrapolateRight: 'clamp',
  });
  const fadeIn = interpolate(frame, [s(0.1), s(0.6)], [0, 1], {
    extrapolateLeft: 'clamp',
    extrapolateRight: 'clamp',
  });
  const slideOutY = interpolate(frame, [s(3.8), s(4.05)], [0, 300], {
    extrapolateLeft: 'clamp',
    extrapolateRight: 'clamp',
  });
  const fadeOut = interpolate(frame, [s(3.8), s(4.05)], [1, 0], {
    extrapolateLeft: 'clamp',
    extrapolateRight: 'clamp',
  });

  const pressIn = interpolate(frame, [s(1.0), s(1.15)], [1, 0.92], {
    extrapolateLeft: 'clamp',
    extrapolateRight: 'clamp',
  });
  const bounce =
    frame >= s(1.15)
      ? spring({ frame: frame - s(1.15), fps, config: { damping: 8, stiffness: 120 } })
      : 0;
  const btnScale = frame < s(1.15) ? pressIn : 0.92 + bounce * 0.08;

  const colorT = interpolate(frame, [s(1.15), s(1.27)], [0, 1], {
    extrapolateLeft: 'clamp',
    extrapolateRight: 'clamp',
  });
  const btnBg = lerpColor('#fe2c55', '#111', colorT);
  const followOpacity = interpolate(frame, [s(1.15), s(1.23)], [1, 0], {
    extrapolateLeft: 'clamp',
    extrapolateRight: 'clamp',
  });
  const followingOpacity = interpolate(frame, [s(1.18), s(1.26)], [0, 1], {
    extrapolateLeft: 'clamp',
    extrapolateRight: 'clamp',
  });

  return (
    <AbsoluteFill
      style={{
        background: 'linear-gradient(180deg, #0a0a0a 0%, #161616 100%)',
        fontFamily: 'system-ui, sans-serif',
      }}
    >
      <div
        style={{
          position: 'absolute',
          bottom: 240,
          left: '50%',
          transform: `translate(-50%, ${slideInY + slideOutY}px)`,
          opacity: Math.min(fadeIn, fadeOut),
          display: 'flex',
          alignItems: 'center',
          gap: 30,
          background: '#1a1a1a',
          borderRadius: 75,
          padding: '25px 40px 25px 25px',
          boxShadow: '0 8px 40px rgba(0, 0, 0, 0.4)',
        }}
      >
        <Avatar url={avatarUrl} />
        <div
          style={{
            display: 'flex',
            flexDirection: 'column',
            gap: 2,
            marginRight: 20,
          }}
        >
          <div
            style={{
              fontSize: 42,
              fontWeight: 700,
              color: '#fff',
              lineHeight: 1.3,
            }}
          >
            {displayName}
          </div>
          <div style={{ fontSize: 28, color: '#a0a0a0', lineHeight: 1.3 }}>
            {handle}
          </div>
          <div style={{ fontSize: 25, color: '#737373', lineHeight: 1.3 }}>
            {followerCount}
          </div>
        </div>
        <div
          style={{
            position: 'relative',
            width: 240,
            height: 80,
            borderRadius: 14,
            background: btnBg,
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            overflow: 'hidden',
            transform: `scale(${btnScale})`,
          }}
        >
          <span
            style={{
              position: 'absolute',
              fontSize: 30,
              fontWeight: 700,
              color: '#fff',
              opacity: followOpacity,
            }}
          >
            Follow
          </span>
          <span
            style={{
              position: 'absolute',
              fontSize: 28,
              fontWeight: 700,
              color: '#fff',
              opacity: followingOpacity,
              display: 'flex',
              alignItems: 'center',
              gap: 8,
            }}
          >
            Following
            <svg viewBox='0 0 24 24' width='22' height='22' fill='none'>
              <polyline
                points='4 12 10 18 20 6'
                stroke='#fff'
                strokeWidth={3}
                strokeLinecap='round'
                strokeLinejoin='round'
              />
            </svg>
          </span>
        </div>
      </div>
    </AbsoluteFill>
  );
}

function Avatar({ url }: { url: string }) {
  // TikTok avatars have a signature double-shadow offset (pink + cyan).
  return (
    <div style={{ position: 'relative', flexShrink: 0 }}>
      <div
        style={{
          position: 'absolute',
          width: 120,
          height: 120,
          borderRadius: '50%',
          background: '#25f4ee',
          top: -3,
          left: 3,
        }}
      />
      <div
        style={{
          position: 'absolute',
          width: 120,
          height: 120,
          borderRadius: '50%',
          background: '#fe2c55',
          top: 3,
          left: -3,
        }}
      />
      {url ? (
        // eslint-disable-next-line @next/next/no-img-element
        <img
          src={url}
          alt=''
          style={{
            position: 'relative',
            width: 120,
            height: 120,
            borderRadius: '50%',
            objectFit: 'cover',
            border: '3px solid #1a1a1a',
          }}
        />
      ) : (
        <div
          style={{
            position: 'relative',
            width: 120,
            height: 120,
            borderRadius: '50%',
            background: '#fff',
            border: '3px solid #1a1a1a',
          }}
        />
      )}
    </div>
  );
}

function lerpColor(a: string, b: string, t: number): string {
  const ca = hexToRgb(a);
  const cb = hexToRgb(b);
  return `rgb(${Math.round(ca[0] + (cb[0] - ca[0]) * t)}, ${Math.round(
    ca[1] + (cb[1] - ca[1]) * t
  )}, ${Math.round(ca[2] + (cb[2] - ca[2]) * t)})`;
}
function hexToRgb(hex: string): [number, number, number] {
  const m = hex.replace('#', '');
  const n = parseInt(m, 16);
  return [(n >> 16) & 255, (n >> 8) & 255, n & 255];
}

import { z } from 'zod';

export const Schema = z.object({
  displayName: z.string().describe('$port:text Display name'),
  handle: z.string().describe('$port:text Handle (e.g. @wireflow.ai)'),
  followerCount: z.string().describe('$port:text Follower count label'),
  avatarUrl: z.string().describe('$port:image Avatar image URL').default(''),
});