import { useMemo } from "react";
import type { Transcript } from "@/api/types";

type Sentence = Transcript["paragraphs"][number]["sentences"][number];
type Word = Transcript["words"][number];

const CHUNK_SIZE = 9;

/** Split an array of words into fixed-size display chunks */
function chunkWords(words: Word[]): Word[][] {
  const chunks: Word[][] = [];
  for (let i = 0; i < words.length; i += CHUNK_SIZE) {
    chunks.push(words.slice(i, i + CHUNK_SIZE));
  }
  return chunks;
}

interface TranscriptOverlayProps {
  transcript: Transcript;
  activeSentence: Sentence | null;
  activeWordIndex: number | null;
  /** Center captions vertically (e.g. for audio-only playback) */
  centered?: boolean;
}

export function TranscriptOverlay({
  transcript,
  activeSentence,
  activeWordIndex,
  centered = false,
}: TranscriptOverlayProps) {
  const sentenceWords = useMemo(() => {
    if (!activeSentence) return [];
    return transcript.words.filter(
      (w) => w.start >= activeSentence.start && w.end <= activeSentence.end,
    );
  }, [transcript.words, activeSentence]);

  const chunks = useMemo(() => chunkWords(sentenceWords), [sentenceWords]);

  const activeWord =
    activeWordIndex !== null ? transcript.words[activeWordIndex] : null;

  // Find which chunk contains the active word
  const activeChunk = useMemo(() => {
    if (!activeWord) return chunks[0] ?? null;
    for (const chunk of chunks) {
      if (chunk.some((w) => w.start === activeWord.start && w.end === activeWord.end)) {
        return chunk;
      }
    }
    return chunks[0] ?? null;
  }, [chunks, activeWord]);

  if (!activeSentence || !activeChunk || activeChunk.length === 0) return null;

  return (
    <div className={centered
      ? "absolute inset-0 flex items-center justify-center px-6"
      : "absolute bottom-10 left-0 right-0 flex justify-center px-6"
    }>
      <p className="rounded-lg px-5 py-3 text-2xl text-center max-w-lg">
        {activeChunk.map((word, i) => {
          const isSpoken =
            activeWord !== null && word.start <= activeWord.end;

          return (
            <span
              key={`${word.start}-${i}`}
              className={
                isSpoken
                  ? "text-white font-medium transition-colors duration-150"
                  : "text-white/40 transition-colors duration-150"
              }
            >
              {i > 0 ? " " : ""}
              {word.word}
            </span>
          );
        })}
      </p>
    </div>
  );
}