use maud::html;
use rocket::{
    get,
    http::{ContentType, Status},
    State,
};
use serde_json::json;

use crate::{
    library::{self, user::UserManager, Library},
    pages::components::{format_date, video_element, video_element_wide},
};

use super::{
    components::{render_page, HTMX},
    vec_to_api,
};

#[get("/watch?<v>")]
pub async fn watch_page(
    mut htmx: HTMX,
    library: &State<Library>,
    v: String,
    um: &State<UserManager>,
) -> (Status, (ContentType, String)) {
    let user = htmx.user(um).await;

    let video = if let Some(video) = library.get_video_by_id(&v).await {
        video
    } else {
        // TODO : Error handling
        library.get_video_by_youtube_id(&v).await.unwrap()
    };

    let content = html!(
        main class="container mx-auto mt-6 flex flex-col lg:flex-row gap-6" {
          div class="lg:w-10/12 mt-10" {
            div class="bg-black aspect-video rounded-lg overflow-hidden" {
              video
                controls
                autoplay
                class="w-full h-full" {
                source src=(format!("/video/raw?v={}", video.id)) type="video/mp4" {
                    "Your browser does not support the video"
                };
            };
            };
            div class="p-4 bg-stone-900 rounded-lg shadow-lg mt-8" {
              h2 class="text-2xl font-semibold" { (video.title) };

              @if let Some(meta) = video.youtube_meta().await {
                div class="flex justify-between mt-2" {
                  p class="mb-4 text-gray-300" { (meta.uploader_name) };
                  p class="mb-4 text-gray-300" { (format!("{} Views ﹣ {}", meta.views, format_date(&meta.upload_date))) };
                };

                a href=(format!("https://www.youtube.com/watch?v={}", meta.id)) class="text-blue-400" {"Watch on YouTube" };

                p class="mb-2 text-gray-300 text-bold mt-2" { "Description: " } span { (meta.description) };
              };

            };
          };
          div id="recommendations" class="mt-8" {
            h3 class="text-center text-4xl font-extrabold leading-tight mb-2" { "In " a class="text-blue-500" href=(format!("/d/{}", video.directory)) { (video.directory) }; }
            @for video in library.get_directory_videos(&video.directory).await {
              (video_element_wide(&video).await);
            };
          };
        };
    );

    render_page(htmx, content, &format!("{} - WatchDogs", video.title), user).await
}