"use client"

import type { Transcript } from "@/lib/types"
import { ScrollArea } from "@radix-ui/react-scroll-area"
import { Separator } from "@radix-ui/react-separator"
import { FileText } from "lucide-react"
import { useEffect } from "react"
import EmptyState from "./empty_state"

type Props = {
  selectedTranscript: Transcript | null
  selectedTranscripts: Transcript[]
}

const TranscriptsTab = ({ selectedTranscript, selectedTranscripts }: Props) => {
  useEffect(() => {
    if (selectedTranscript) {
      // wait for 300ms for the transcript to render so it will scroll to the correct position
      const timeoutId = setTimeout(() => {
        const transcriptId = "transcript-" + selectedTranscript?.timestamp
        const transcriptElement = document.getElementById(transcriptId)
        transcriptElement?.scrollIntoView({
          behavior: "smooth",
          block: "start",
        })
      }, 500)

      return () => clearTimeout(timeoutId)
    }
  }, [selectedTranscript, selectedTranscripts])

  return (
    <ScrollArea className="flex-1 p-3 sm:p-4 h-screen custom-scrollbar">
      {selectedTranscript ? (
        <div className="space-y-1 flex flex-col">
          <div>
            <h3 className="font-medium text-sm sm:text-base truncate">{selectedTranscript.filename}</h3>
          </div>
          <Separator />
          <div className="h-[calc(100vh-120px)] sm:h-[calc(100vh-150px)] overflow-auto pr-2 sm:pr-4">
            <div id="transcripts-container" className="text-xs sm:text-sm flex flex-col gap-3 sm:gap-4">
              {selectedTranscripts.map((transcript) => (
                <div
                  key={transcript.index}
                  id={`transcript-${transcript.timestamp}`}
                  className={`rounded-md p-2 sm:p-3 transition-colors ${
                    transcript.index === selectedTranscript.index ? "bg-primary/10 border border-primary/20" : ""
                  }`}
                >
                  <p className="text-muted-foreground text-xs mb-1">
                    {transcript.speaker} @ {transcript.timestamp}
                  </p>
                  <p className="text-justify leading-relaxed">{transcript.text}</p>
                </div>
              ))}
            </div>
          </div>
        </div>
      ) : (
        <EmptyState message="Select a transcript to get started." icon={FileText} />
      )}
    </ScrollArea>
  )
}

export default TranscriptsTab