interface TranscriptSegment {
  start: number;
  end: number;
  text: string;
  speaker: string;
}

interface TranscriptDisplayProps {
  segments: TranscriptSegment[];
}

export function TranscriptDisplay({ segments }: TranscriptDisplayProps) {
  const formatTime = (seconds: number) => {
    const mins = Math.floor(seconds / 60);
    const secs = Math.floor(seconds % 60);
    return `${mins}:${secs.toString().padStart(2, "0")}`;
  };

  const getSpeakerColor = (speaker: string) => {
    const colors = [
      "#3b82f6", // blue
      "#10b981", // green
      "#f59e0b", // amber
      "#ef4444", // red
      "#8b5cf6", // purple
      "#14b8a6", // teal
    ];
    const speakerParts = speaker.split("_");
    const index = speakerParts[1] ? parseInt(speakerParts[1], 10) % colors.length : 0;
    return colors[index];
  };

  return (
    <div className="transcript-display">
      <h2>Transcript</h2>
      <div className="transcript-segments">
        {segments.length === 0 ? (
          <p className="empty-state">No transcript yet. Start recording to begin.</p>
        ) : (
          segments.map((segment, index) => (
            <div key={index} className="segment">
              <div className="segment-header">
                <span className="speaker" style={{ color: getSpeakerColor(segment.speaker) }}>
                  {segment.speaker}
                </span>
                <span className="timestamp">
                  {formatTime(segment.start)} - {formatTime(segment.end)}
                </span>
              </div>
              <p className="segment-text">{segment.text}</p>
            </div>
          ))
        )}
      </div>
    </div>
  );
}
