synpad 0.1.0

use dioxus::prelude::*;

use crate::room::media::image_viewer::ImageViewer;
use crate::state::room_state::TimelineContent;
use crate::utils::html_render::sanitize_matrix_html;
use crate::utils::link_preview::LinkPreview;
use crate::utils::room_helpers::format_file_size;

/// Detect URLs in plain text and return them.
fn extract_urls(text: &str) -> Vec<String> {
    let finder = linkify::LinkFinder::new();
    finder
        .links(text)
        .filter(|link| link.kind() == &linkify::LinkKind::Url)
        .map(|link| link.as_str().to_string())
        .collect()
}

/// Code block with syntax highlighting via CSS classes.
#[component]
fn CodeBlock(code: String, language: Option<String>) -> Element {
    let lang_class = language
        .as_ref()
        .map(|l| format!("language-{l}"))
        .unwrap_or_default();
    let lang_label = language.unwrap_or_default();

    rsx! {
        div {
            class: "code-block",
            if !lang_label.is_empty() {
                div {
                    class: "code-block__header",
                    span { class: "code-block__language", "{lang_label}" }
                }
            }
            pre {
                class: "code-block__pre",
                code {
                    class: "code-block__code {lang_class}",
                    "{code}"
                }
            }
        }
    }
}

/// Link preview card component.
#[component]
fn LinkPreviewCard(url: String) -> Element {
    let mut preview = use_signal(|| Option::<LinkPreview>::None);
    let mut loaded = use_signal(|| false);

    // Attempt to load preview via Matrix URL preview API
    if !*loaded.read() {
        loaded.set(true);
        let url_clone = url.clone();
        spawn(async move {
            // Use Matrix media preview API if available
            // For now, show a simple link card
            preview.set(Some(LinkPreview {
                url: url_clone,
                title: None,
                description: None,
                image_url: None,
                site_name: None,
            }));
        });
    }

    let p = preview.read();
    if let Some(ref lp) = *p {
        let domain = lp.url.split('/').nth(2).unwrap_or(&lp.url);
        rsx! {
            a {
                class: "link-preview-card",
                href: "{lp.url}",
                target: "_blank",
                rel: "noopener noreferrer",
                if let Some(ref img) = lp.image_url {
                    img {
                        class: "link-preview-card__image",
                        src: "{img}",
                        alt: "",
                    }
                }
                div {
                    class: "link-preview-card__info",
                    if let Some(ref title) = lp.title {
                        span { class: "link-preview-card__title", "{title}" }
                    }
                    if let Some(ref desc) = lp.description {
                        span { class: "link-preview-card__description", "{desc}" }
                    }
                    span { class: "link-preview-card__domain", "{domain}" }
                }
            }
        }
    } else {
        rsx! {}
    }
}

/// Parse code blocks from text: returns (has_code_block, language, code, remaining_text).
fn parse_code_blocks(body: &str) -> Option<(String, Option<String>, String)> {
    if let Some(start) = body.find("```") {
        let after_backticks = &body[start + 3..];
        // Extract language hint (first line after ```)
        let (lang, code_start) = if let Some(nl) = after_backticks.find('\n') {
            let lang_str = after_backticks[..nl].trim();
            let lang = if lang_str.is_empty() { None } else { Some(lang_str.to_string()) };
            (lang, nl + 1)
        } else {
            (None, 0)
        };
        // Find closing ```
        if let Some(end) = after_backticks[code_start..].find("```") {
            let code = after_backticks[code_start..code_start + end].to_string();
            let before = body[..start].to_string();
            let after = after_backticks[code_start + end + 3..].to_string();
            let remaining = format!("{before}{after}").trim().to_string();
            return Some((code, lang, remaining));
        }
    }
    None
}

/// Message content renderer - renders different message types.
#[component]
pub fn MessageContentView(content: TimelineContent) -> Element {
    match content {
        TimelineContent::Text { body, formatted_body } => {
            // Check for code blocks in the body
            if let Some((code, lang, remaining)) = parse_code_blocks(&body) {
                return rsx! {
                    div {
                        class: "message-content message-content--text",
                        if !remaining.is_empty() {
                            p { "{remaining}" }
                        }
                        CodeBlock {
                            code: code,
                            language: lang,
                        }
                    }
                };
            }

            // Extract URLs for link previews
            let urls = extract_urls(&body);
            let first_url = urls.first().cloned();

            if let Some(html) = formatted_body {
                let sanitized = sanitize_matrix_html(&html);
                rsx! {
                    div {
                        class: "message-content message-content--text",
                        dangerous_inner_html: "{sanitized}",
                        if let Some(url) = first_url {
                            LinkPreviewCard { url: url }
                        }
                    }
                }
            } else {
                rsx! {
                    div {
                        class: "message-content message-content--text",
                        "{body}"
                        if let Some(url) = first_url {
                            LinkPreviewCard { url: url }
                        }
                    }
                }
            }
        }

        TimelineContent::Image { body, url, thumbnail_url, blurhash, width, height } => {
            let display_url = thumbnail_url.clone().or(url.clone());
            let full_url = url.or(thumbnail_url);
            let (w, h) = crate::utils::media_helpers::fit_dimensions(
                width.unwrap_or(400),
                height.unwrap_or(300),
                400,
                300,
            );
            let mut show_viewer = use_signal(|| false);

            rsx! {
                div {
                    class: "message-content message-content--image",
                    if let Some(ref src) = display_url {
                        img {
                            src: "{src}",
                            alt: "{body}",
                            width: "{w}",
                            height: "{h}",
                            loading: "lazy",
                            style: "cursor: pointer;",
                            onclick: move |_| show_viewer.set(true),
                        }
                    } else if let Some(_hash) = blurhash {
                        div {
                            class: "message-content__blurhash",
                            style: "width: {w}px; height: {h}px;",
                        }
                    }
                    if !body.is_empty() {
                        span {
                            class: "message-content__caption",
                            "{body}"
                        }
                    }
                    // Full-screen image viewer
                    if *show_viewer.read() {
                        if let Some(ref viewer_url) = full_url {
                            ImageViewer {
                                image_url: viewer_url.clone(),
                                alt_text: body.clone(),
                                original_width: width,
                                original_height: height,
                                on_close: move |_| show_viewer.set(false),
                            }
                        }
                    }
                }
            }
        }

        TimelineContent::File { body, url, size, mimetype } => {
            let size_text = size.map(format_file_size).unwrap_or_default();
            let mime_text = mimetype.unwrap_or_else(|| "Unknown type".to_string());

            rsx! {
                div {
                    class: "message-content message-content--file",
                    div {
                        class: "message-content__file-icon",
                        "📄"
                    }
                    div {
                        class: "message-content__file-info",
                        span {
                            class: "message-content__file-name",
                            "{body}"
                        }
                        span {
                            class: "message-content__file-meta",
                            "{mime_text} · {size_text}"
                        }
                    }
                    if let Some(href) = url {
                        a {
                            class: "message-content__file-download",
                            href: "{href}",
                            target: "_blank",
                            "Download"
                        }
                    }
                }
            }
        }

        TimelineContent::Audio { body, url, duration_ms } => {
            let duration = duration_ms
                .map(|ms| {
                    let secs = ms / 1000;
                    format!("{}:{:02}", secs / 60, secs % 60)
                })
                .unwrap_or_default();

            rsx! {
                div {
                    class: "message-content message-content--audio",
                    if let Some(ref src) = url {
                        audio {
                            class: "message-content__audio-player",
                            controls: true,
                            preload: "metadata",
                            source {
                                src: "{src}",
                            }
                        }
                    } else {
                        span { class: "message-content__audio-icon", "🎵" }
                    }
                    span { class: "message-content__audio-name", "{body}" }
                    if !duration.is_empty() {
                        span { class: "message-content__audio-duration", "{duration}" }
                    }
                }
            }
        }

        TimelineContent::Video { body, url, thumbnail_url, width, height, duration_ms: _ } => {
            let (w, h) = crate::utils::media_helpers::fit_dimensions(
                width.unwrap_or(400),
                height.unwrap_or(300),
                400,
                300,
            );

            rsx! {
                div {
                    class: "message-content message-content--video",
                    if let Some(ref src) = url {
                        {
                            let poster_url = thumbnail_url.clone().unwrap_or_default();
                            rsx! {
                                video {
                                    class: "message-content__video-player",
                                    controls: true,
                                    preload: "metadata",
                                    width: "{w}",
                                    height: "{h}",
                                    poster: "{poster_url}",
                                    source {
                                        src: "{src}",
                                    }
                                }
                            }
                        }
                    } else if let Some(thumb) = thumbnail_url {
                        div {
                            class: "message-content__video-thumb",
                            style: "width: {w}px; height: {h}px;",
                            img {
                                src: "{thumb}",
                                alt: "{body}",
                                width: "{w}",
                                height: "{h}",
                            }
                            div {
                                class: "message-content__play-overlay",
                                "▶"
                            }
                        }
                    }
                    if !body.is_empty() {
                        span { class: "message-content__video-name", "{body}" }
                    }
                }
            }
        }

        TimelineContent::Emote { body, formatted_body: _ } => {
            rsx! {
                div {
                    class: "message-content message-content--emote",
                    "* {body}"
                }
            }
        }

        TimelineContent::Notice { body, formatted_body } => {
            if let Some(html) = formatted_body {
                let sanitized = sanitize_matrix_html(&html);
                rsx! {
                    div {
                        class: "message-content message-content--notice",
                        dangerous_inner_html: "{sanitized}",
                    }
                }
            } else {
                rsx! {
                    div {
                        class: "message-content message-content--notice",
                        "{body}"
                    }
                }
            }
        }

        TimelineContent::Redacted { reason } => {
            rsx! {
                div {
                    class: "message-content message-content--redacted",
                    span { "This message was deleted" }
                    if let Some(r) = reason {
                        span { class: "message-content__redact-reason", " ({r})" }
                    }
                }
            }
        }

        TimelineContent::EncryptionError { message } => {
            rsx! {
                div {
                    class: "message-content message-content--error",
                    span { class: "message-content__error-icon", "🔒" }
                    span { "Unable to decrypt: {message}" }
                }
            }
        }

        TimelineContent::Sticker { body, url } => {
            rsx! {
                div {
                    class: "message-content message-content--sticker",
                    if let Some(src) = url {
                        img {
                            src: "{src}",
                            alt: "{body}",
                            class: "message-content__sticker-img",
                        }
                    }
                }
            }
        }

        TimelineContent::StateEvent { description } => {
            rsx! {
                div {
                    class: "message-content message-content--state",
                    "{description}"
                }
            }
        }

        TimelineContent::Poll { question, answers, kind: _, is_ended } => {
            let total_votes: u32 = answers.iter().map(|a| a.vote_count).sum();
            let vote_label = if total_votes != 1 { format!("{total_votes} votes") } else { "1 vote".to_string() };
            rsx! {
                div {
                    class: "message-content message-content--poll",
                    div {
                        class: "poll-display__header",
                        span { class: "poll-display__icon", "📊" }
                        span { class: "poll-display__question", "{question}" }
                        if is_ended {
                            span { class: "poll-display__ended-badge", "Ended" }
                        }
                    }
                    div {
                        class: "poll-display__answers",
                        for answer in answers.iter() {
                            {
                                let text = answer.text.clone();
                                let count = answer.vote_count;
                                let pct = if total_votes > 0 { (count as f64 / total_votes as f64 * 100.0) as u32 } else { 0 };
                                let voted = answer.voted_by_me;
                                rsx! {
                                    div {
                                        class: if voted { "poll-display__answer poll-display__answer--voted" } else { "poll-display__answer" },
                                        div {
                                            class: "poll-display__answer-bar",
                                            style: "width: {pct}%;",
                                        }
                                        span { class: "poll-display__answer-text", "{text}" }
                                        span { class: "poll-display__answer-count", "{count}" }
                                    }
                                }
                            }
                        }
                    }
                    div {
                        class: "poll-display__footer",
                        "{vote_label}"
                    }
                }
            }
        }

        TimelineContent::Location { body, geo_uri, description } => {
            // Parse geo: URI to extract lat/lon
            let coords = geo_uri.strip_prefix("geo:").unwrap_or(&geo_uri);
            let parts: Vec<&str> = coords.split(',').collect();
            let lat = parts.first().unwrap_or(&"0");
            let lon = parts.get(1).and_then(|s| s.split(';').next()).unwrap_or("0");
            let desc = description.unwrap_or_else(|| body.clone());
            let map_url = format!("https://www.openstreetmap.org/?mlat={lat}&mlon={lon}#map=15/{lat}/{lon}");

            rsx! {
                div {
                    class: "message-content message-content--location",
                    div {
                        class: "location-display",
                        span { class: "location-display__icon", "📍" }
                        div {
                            class: "location-display__info",
                            span { class: "location-display__desc", "{desc}" }
                            span { class: "location-display__coords", "{lat}, {lon}" }
                        }
                        a {
                            class: "btn btn--secondary btn--sm",
                            href: "{map_url}",
                            target: "_blank",
                            rel: "noopener noreferrer",
                            "Open Map"
                        }
                    }
                }
            }
        }

        TimelineContent::VoiceMessage { body, url, duration_ms, waveform } => {
            let duration = duration_ms
                .map(|ms| {
                    let secs = ms / 1000;
                    format!("{}:{:02}", secs / 60, secs % 60)
                })
                .unwrap_or_else(|| "0:00".to_string());

            rsx! {
                div {
                    class: "message-content message-content--voice",
                    div {
                        class: "voice-display",
                        if let Some(ref src) = url {
                            audio {
                                class: "message-content__audio-player",
                                controls: true,
                                preload: "metadata",
                                source {
                                    src: "{src}",
                                }
                            }
                        } else {
                            button {
                                class: "voice-display__play-btn",
                                disabled: true,
                                "▶"
                            }
                        }
                        div {
                            class: "voice-display__waveform",
                            for (idx, sample) in waveform.iter().enumerate() {
                                {
                                    let height = (*sample as f32 / 1024.0 * 100.0).max(5.0).min(100.0);
                                    rsx! {
                                        div {
                                            key: "wave-{idx}",
                                            class: "voice-display__bar",
                                            style: "height: {height}%;",
                                        }
                                    }
                                }
                            }
                        }
                        span {
                            class: "voice-display__duration",
                            "{duration}"
                        }
                    }
                    if !body.is_empty() {
                        span {
                            class: "message-content__audio-name",
                            "{body}"
                        }
                    }
                }
            }
        }
    }
}