import { useEffect, useRef } from "react";
import type { Particle } from "@/api/types";
import { cn } from "@/lib/utils";

type TextParticle = Extract<Particle, { type: "text" }>;

interface TextParticleViewProps {
  particle: TextParticle;
  paused: boolean;
  onEnded: () => void;
  onProgress?: (ratio: number) => void;
}

const WORDS_PER_MINUTE = 200;
const MIN_DURATION_S = 3;
const MAX_DURATION_S = 15;
const TICK_MS = 100;

function computeReadDuration(text: string): number {
  const wordCount = text.trim().split(/\s+/).length;
  const seconds = (wordCount / WORDS_PER_MINUTE) * 60;
  return Math.min(Math.max(seconds, MIN_DURATION_S), MAX_DURATION_S);
}

function getTextStyle(length: number) {
  if (length < 50) return { size: "text-5xl", weight: "font-semibold" };
  if (length < 150) return { size: "text-3xl", weight: "font-semibold" };
  if (length < 300) return { size: "text-2xl", weight: "font-normal" };
  return { size: "text-lg", weight: "font-normal" };
}

export function TextParticleView({
  particle,
  paused,
  onEnded,
  onProgress,
}: TextParticleViewProps) {
  const style = getTextStyle(particle.properties.content.length);
  const durationS = computeReadDuration(particle.properties.content);
  const elapsedRef = useRef(0);

  // Reset elapsed when particle changes
  useEffect(() => {
    elapsedRef.current = 0;
  }, [particle.id]);

  useEffect(() => {
    if (paused) return;

    const interval = setInterval(() => {
      elapsedRef.current += TICK_MS / 1000;
      const ratio = Math.min(elapsedRef.current / durationS, 1);
      onProgress?.(ratio);

      if (ratio >= 1) {
        clearInterval(interval);
        onEnded();
      }
    }, TICK_MS);

    return () => clearInterval(interval);
  }, [paused, durationS, onEnded, onProgress, particle.id]);

  return (
    <div className="flex h-full w-full items-center justify-center bg-gradient-to-b from-black/40 via-black/20 to-black/40 p-8">
      <p
        className={cn(
          "max-w-2xl text-center leading-relaxed text-white",
          style.size,
          style.weight,
        )}
      >
        {particle.properties.content}
      </p>
    </div>
  );
}
