import gradio as gr 
import pandas as pd 
import yt_dlp
import os
from transcriber import gen_csv()
df = pd.read_csv("./final.csv")
transcripts = df.to_dict(orient='records')

# Function to download video using yt-dlp and generate transcript HTML
def download_video(youtube_url):
    # Define download options
    ydl_opts = {
        'format': 'mp4',
        'outtmpl': 'downloaded_video.%(ext)s',
        'quiet': True
    }

    # Extract video ID to check if already downloaded
    with yt_dlp.YoutubeDL({'quiet': True}) as ydl:
        info_dict = ydl.extract_info(youtube_url, download=False)
        video_ext = info_dict.get('ext')
        video_path = f'downloaded_video.mp4'

    # Check if video already downloaded
    if not os.path.exists(video_path):
        # Download the video
        with yt_dlp.YoutubeDL(ydl_opts) as ydl:
            ydl.download([youtube_url])

    # Generate HTML for the transcript
    transcript_html = ""
    for t in transcripts:
        transcript_html += f'<div class="transcript-block"><a href="#" onclick="var video = document.getElementById(\'video-player\').querySelector(\'video\'); video.currentTime={t["start_time"]}; return false;">' \
                           f'[{t["start_time"]:.2f} - {t["end_time"]:.2f}]<br>{t["text"]}</a></div>'
    
    return video_path, transcript_html

# Function to search the transcript
def search_transcript(keyword):
    search_results = ""
    for t in transcripts:
        if keyword.lower() in t['text'].lower():
            search_results += f'<div class="transcript-block"><a href="#" onclick="var video = document.getElementById(\'video-player\').querySelector(\'video\'); video.currentTime={t["start_time"]}; return false;">' \
                              f'[{t["start_time"]:.2f} - {t["end_time"]:.2f}]<br>{t["text"]}</a></div>'
    return search_results

# CSS for styling
css = """
.fixed-video { width: 480px !important; height: 270px !important; }
.fixed-transcript { width: 480px !important; height: 270px !important; overflow-y: auto; }
.transcript-block { margin: 10px 0; padding: 10px; border: 1px solid #ddd; border-radius: 5px; background-color: #f9f9f9; }
.transcript-block a { text-decoration: none; color: #007bff; }
.transcript-block a:hover { text-decoration: underline; }
"""

# Gradio interface
with gr.Blocks(css=css) as demo:
    gr.Markdown("# YouTube Video Player with Clickable Transcript")

    with gr.Row():
        youtube_url = gr.Textbox(label="YouTube URL", placeholder="Enter YouTube video link here")
        download_button = gr.Button("Download and Display Transcript")
    
    with gr.Row():
        video = gr.Video(label="Video Player", elem_id="video-player", elem_classes="fixed-video")
        transcript_display = gr.HTML(label="Transcript", elem_classes="fixed-transcript")

    with gr.Row():
        search_box = gr.Textbox(label="Search Transcript", placeholder="Enter keyword to search")
        search_button = gr.Button("Search")
        search_results_display = gr.HTML(label="Search Results", elem_classes="fixed-transcript")

    # On button click, download the video and display the transcript
    def display_transcript(youtube_url):
        video_path, transcript_html = download_video(youtube_url)
        # Ensure the video path is correctly passed to the Gradio video component
        return video_path, transcript_html

    download_button.click(fn=display_transcript, inputs=youtube_url, outputs=[video, transcript_display])

    # On search button click, search the transcript and display results
    search_button.click(fn=search_transcript, inputs=search_box, outputs=search_results_display)

# Launch the interface
demo.launch()