// Port of hyperframes `yt-lower-third` (Apache-2.0). YouTube-style
// subscribe CTA — white pill with red "Subscribe" → dark "Subscribed ✓".
// Original is 16:9 with the card near the bottom; we keep it 9:16 to
// stay consistent with the other catalog blocks.

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

interface Props {
  channelName: string;
  subscriberCount: string;
  avatarUrl: string;
}

export default function YtLowerThird({
  channelName,
  subscriberCount,
  avatarUrl,
}: Props) {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();
  const s = (seconds: number) => seconds * fps;

  const slideInY = interpolate(frame, [s(0.1), s(0.6)], [240, 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, 240], {
    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('#ff0000', '#0f0f0f', colorT);
  const subscribeOpacity = interpolate(frame, [s(1.15), s(1.23)], [1, 0], {
    extrapolateLeft: 'clamp',
    extrapolateRight: 'clamp',
  });
  const subscribedOpacity = interpolate(frame, [s(1.18), s(1.26)], [0, 1], {
    extrapolateLeft: 'clamp',
    extrapolateRight: 'clamp',
  });

  return (
    <AbsoluteFill
      style={{
        background: 'linear-gradient(180deg, #1e1e1e 0%, #0d0d0d 100%)',
        fontFamily: 'system-ui, sans-serif',
      }}
    >
      <div
        style={{
          position: 'absolute',
          bottom: 220,
          left: '50%',
          transform: `translate(-50%, ${slideInY + slideOutY}px)`,
          opacity: Math.min(fadeIn, fadeOut),
          display: 'flex',
          alignItems: 'center',
          gap: 28,
          background: '#ffffff',
          borderRadius: 60,
          padding: '20px 32px 20px 20px',
          boxShadow: '0 6px 32px rgba(0,0,0,0.35)',
        }}
      >
        <Avatar url={avatarUrl} />
        <div
          style={{
            display: 'flex',
            flexDirection: 'column',
            gap: 2,
            marginRight: 20,
          }}
        >
          <div
            style={{
              fontSize: 34,
              fontWeight: 700,
              color: '#0f0f0f',
              lineHeight: 1.3,
            }}
          >
            {channelName}
          </div>
          <div
            style={{
              fontSize: 22,
              color: '#606060',
              lineHeight: 1.3,
            }}
          >
            {subscriberCount}
          </div>
        </div>
        <div
          style={{
            position: 'relative',
            width: 220,
            height: 64,
            borderRadius: 32,
            background: btnBg,
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            overflow: 'hidden',
            transform: `scale(${btnScale})`,
          }}
        >
          <span
            style={{
              position: 'absolute',
              fontSize: 24,
              fontWeight: 700,
              color: '#fff',
              opacity: subscribeOpacity,
              whiteSpace: 'nowrap',
            }}
          >
            Subscribe
          </span>
          <span
            style={{
              position: 'absolute',
              fontSize: 24,
              fontWeight: 700,
              color: '#fff',
              opacity: subscribedOpacity,
              display: 'flex',
              alignItems: 'center',
              gap: 8,
              whiteSpace: 'nowrap',
            }}
          >
            Subscribed
            <svg viewBox='0 0 24 24' width='24' height='24' 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 }) {
  if (url) {
    // eslint-disable-next-line @next/next/no-img-element
    return (
      <img
        src={url}
        alt=''
        style={{
          width: 96,
          height: 96,
          borderRadius: '50%',
          objectFit: 'cover',
          flexShrink: 0,
        }}
      />
    );
  }
  return (
    <div
      style={{
        width: 96,
        height: 96,
        borderRadius: '50%',
        flexShrink: 0,
        background: '#ff0000',
        color: '#fff',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        fontSize: 40,
        fontWeight: 700,
      }}
    >
      ▶
    </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({
  channelName: z.string().describe('$port:text Channel name'),
  subscriberCount: z.string().describe('$port:text Subscriber count label'),
  avatarUrl: z.string().describe('$port:image Channel avatar image URL').default(''),
});