"use client";

import React, { useEffect, useRef } from "react";
import { TimingCue } from "@/lib/tts/types";
import { Clock, PlayCircle } from "lucide-react";

interface TranscriptViewerProps {
  timings: TimingCue[];
  currentTime: number;
  onSeek: (time: number) => void;
}

export function TranscriptViewer({
  timings,
  currentTime,
  onSeek,
}: TranscriptViewerProps) {
  const activeRef = useRef<HTMLDivElement | null>(null);

  // Auto-scroll active cue into view smoothly
  useEffect(() => {
    if (activeRef.current) {
      activeRef.current.scrollIntoView({
        behavior: "smooth",
        block: "nearest",
      });
    }
  }, [currentTime]);

  const formatSeconds = (secs: number) => {
    const m = Math.floor(secs / 60);
    const s = Math.floor(secs % 60);
    return `${m.toString().padStart(2, "0")}:${s.toString().padStart(2, "0")}`;
  };

  if (!timings || timings.length === 0) {
    return (
      <div className="flex flex-col items-center justify-center p-8 text-slate-500 border border-dashed border-slate-800 rounded-xl">
        <Clock className="w-8 h-8 mb-2 opacity-50" />
        <p className="text-sm">No synchronized transcript available for this episode.</p>
      </div>
    );
  }

  return (
    <div className="space-y-2 max-h-[500px] overflow-y-auto pr-2">
      {timings.map((cue, idx) => {
        const isActive = currentTime >= cue.startTime && currentTime <= cue.endTime;

        return (
          <div
            key={idx}
            ref={isActive ? activeRef : null}
            onClick={() => onSeek(cue.startTime)}
            className={`group flex items-start gap-3 p-3 rounded-lg cursor-pointer transition-all duration-200 border ${
              isActive
                ? "bg-blue-950/40 border-blue-500/40 text-blue-100 shadow-sm"
                : "bg-slate-900/30 border-slate-800/60 hover:bg-slate-850 hover:border-slate-700 text-slate-300"
            }`}
          >
            {/* Timestamp badge */}
            <span
              className={`text-xs font-mono px-2 py-0.5 rounded shrink-0 flex items-center gap-1 ${
                isActive
                  ? "bg-blue-600 text-white font-semibold"
                  : "bg-slate-800 text-slate-400 group-hover:bg-slate-700 group-hover:text-slate-200"
              }`}
            >
              <PlayCircle className="w-3 h-3" />
              {formatSeconds(cue.startTime)}
            </span>

            {/* Cue text */}
            <p className="text-sm leading-relaxed flex-1">
              {cue.text}
            </p>
          </div>
        );
      })}
    </div>
  );
}