import gradio as gr
from video_utils import process_video
from lbw_logic import decide_lbw

def analyze_and_decide(video):
    if video is None:
        return "Please upload or record a video", None, None

    prediction_path, replay_path, analysis_data = process_video(video)
    decision = decide_lbw(analysis_data)
    return decision, prediction_path, replay_path

with gr.Blocks() as demo:
    gr.Markdown("## 🏏 LBW Decision System")

    with gr.Tab("Upload Video"):
        upload_video = gr.Video(label="Upload Delivery Video")
        upload_output = gr.Textbox(label="Decision")
        upload_pred = gr.Video(label="Predicted Trajectory")
        upload_replay = gr.Video(label="Replay Video")
        upload_btn = gr.Button("Analyze Uploaded Video")
        upload_btn.click(analyze_and_decide, inputs=upload_video,
                         outputs=[upload_output, upload_pred, upload_replay])

    with gr.Tab("Live Capture (Record & Upload)"):
        gr.Markdown("🎥 Record a video using your webcam and upload it here.")
        live_video = gr.Video(label="Record and Upload Live Delivery")
        live_output = gr.Textbox(label="Decision")
        live_pred = gr.Video(label="Predicted Trajectory")
        live_replay = gr.Video(label="Replay Video")
        live_btn = gr.Button("Analyze Live Video")
        live_btn.click(analyze_and_decide, inputs=live_video,
                       outputs=[live_output, live_pred, live_replay])

with gr.Tab("Replay with Hover Analysis"):
        gr.Markdown("📽️ Hover over zones to see ball behavior insights.")
        gr.HTML("""
<div class="video-container" style="position: relative; max-width: 960px; margin: 20px auto;">
  <video controls autoplay loop style="width: 100%;">
    <source src="replay_lbw_analysis_f175cd6fa04f4ec8882b647d4763e7d5.mp4" type="video/mp4">
    Your browser does not support the video tag.
  </video>

  <!-- Overlays -->
  <div class="overlay" style="top: 70%; left: 30%; width: 80px; height: 40px;">
    <div class="tooltip">Pitching: Outside Off</div>
  </div>
  <div class="overlay" style="top: 48%; left: 45%; width: 90px; height: 40px;">
    <div class="tooltip">Impact: In-line</div>
  </div>
  <div class="overlay" style="top: 25%; left: 50%; width: 100px; height: 40px;">
    <div class="tooltip">Wickets: Hitting</div>
  </div>

  <style>
    .overlay {
      position: absolute;
      border: 2px dashed #ff0;
      background-color: rgba(255, 255, 0, 0.2);
      color: #000;
      font-weight: bold;
      padding: 4px;
      border-radius: 6px;
      pointer-events: all;
      cursor: help;
    }
    .tooltip {
      visibility: hidden;
      width: 180px;
      background-color: black;
      color: #fff;
      text-align: center;
      border-radius: 6px;
      padding: 5px 8px;
      position: absolute;
      z-index: 2;
      bottom: 125%;
      left: 50%;
      margin-left: -90px;
      opacity: 0;
      transition: opacity 0.3s;
    }
    .overlay:hover .tooltip {
      visibility: visible;
      opacity: 1;
    }
  </style>
</div>
""")

demo.launch()