//! The five public embeds, described.
//!
//! `54d7f8cf`. These were the last hand-written `<style>` blocks in the tree and
//! the last five documents assembled by Askama out of `format!`-shaped markup.
//! Each is now a [`Screen`] drawn by quasi-webview, and what is left of the
//! hand-written CSS is [`DOCUMENT_CSS`] — the rules that are about *this
//! document being an iframe on somebody else's page*, which is the one thing the
//! design system has no opinion about.
//!
//! # Why an embed's shell is not [`Viewer::shell`](super::Viewer::shell)
//!
//! Three differences, all of them the reason this module exists:
//!
//!   - **No stylesheet links.** An embed renders inside an iframe on a third
//!     party's page and cannot link a sheet, so the whole design system arrives
//!     in the document through [`Shell::with_head_first`]. Colour comes from
//!     makeover at render time, spacing and typography from `build.rs`, and
//!     composition from the generated `static/layout.css`.
//!   - **No htmx, no scripts.** An embed calls no route: every control on one
//!     is a link to `makenot.work`, which is [`Destination::External`] and is
//!     an `<a target="_blank" rel="noopener noreferrer">` in every renderer.
//!     `Shell::without_htmx` is the member `54d7f8cf` asked for and the rest go
//!     with it. The player is the one exception and it carries its own script
//!     inside its bespoke region.
//!   - **No chrome and no session.** `Chrome::new()` is the shell's default and
//!     produces the pre-chrome document byte for byte. There is no signed-in
//!     reader here and nothing to CSRF-protect, so none of `Viewer` applies:
//!     these handlers stay ordinary axum handlers and call [`document`]
//!     directly rather than going through the router and its per-request state.
//!
//! # `--font-display` is deliberately undefined, still
//!
//! The reasoning survives the conversion and is unchanged: the display tier is
//! per product, an embed carries no brand face, and `EMBED_TYPOGRAPHY_CSS` is
//! the house-only sheet rather than the site's, so `var(--font-display, ...)`
//! falls through to its fallback. See `crate::templates::embed`'s note on the
//! two typography sheets, which is where the two files are written.
//!
//! # One region, said as one region
//!
//! An embed is **one region**, which [`layout::Arrangement::Single`] says as of
//! makeover-layout 0.41.0. These screens named `list_detail` before that and
//! [`DOCUMENT_CSS`] spent a rule undoing the two-column grid it produced, which
//! is a host contradicting the description rather than adding to it. The
//! description now says the shape and the host adds only its own furniture.

use makeover_layout as layout;
use quasi_axum::Serves as _;
use quasi_router::screen::{Act, Picture, Row};
use quasi_router::{Action, Chrome, Document, Node, RegionKind, Screen, Slot};
use quasi_webview::{Shell, Webview};

use crate::templates::{EMBED_GEOMETRY_CSS, EMBED_TYPOGRAPHY_CSS, embed_theme_css};

/// The composition layer, written by `build.rs` from makeover-webview.
///
/// The sheet every other page links from `/static/layout.css`. An embed inlines
/// it for [`DOCUMENT_CSS`]'s reason, which costs 15 KB in a response cached for
/// five minutes and is what buys the row, the list and the control looking like
/// the product rather than like five hand-written approximations of it.
const LAYOUT_CSS: &str = include_str!("../../static/layout.css");

/// The region every embed's content sits in.
const REGION: &str = "embed";

/// The rules that are about the document rather than about the design system.
///
/// Everything here is either a browser default being undone or a fact about
/// being an iframe: the frame is the size the host page gave it, so the body
/// fills it, and one region fills the body. No colour, no font stack, no
/// spacing step — those are tokens, and a literal here would drift from the
/// theme with nothing looking. The five `<style>` blocks this replaces are what
/// that looks like when it goes wrong: `#5a4bd6` sat in all five as a hover
/// violet that matched no token in the tree.
///
/// The two compact embeds size their picture here, and they are the only rule
/// in this document that overrides the design system rather than sitting beside
/// it. makeover gives a picture `width: 100%` and leaves the box to whoever
/// placed it, which is right for a card — the cover spans it — and wrong for a
/// button, where the cover is a 40-pixel thumbnail in a row. Stated rather than
/// hidden: this document is unlayered and therefore beats `@layer makeover`,
/// which is exactly what `check_css_overlap` names when it happens in a file.
const DOCUMENT_CSS: &str = "\
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  font-family: var(--font-sans);
  background: var(--surface-page);
  color: var(--content);
}
main.single {
  min-height: 100vh;
  padding: var(--step-base) var(--gap-section);
}
body.embed-button .picture-img { flex: none; width: 40px; height: 40px; }
body.embed-tip .picture-img { flex: none; width: 32px; height: 32px; border-radius: 50%; }
";

/// A whole embed document: the design system, then the described screen.
///
/// What the two card layouts and the player differ by is a class on `<body>`,
/// and it rides on the screen ([`Screen::document`]) rather than on this
/// function's shell. It used to be a second parameter, because a shell was the
/// only thing that could carry a body class and this function builds one per
/// call -- which is why the embeds could do it and the adapter-served screens
/// could not. quasicoherent `ee1882e0` put the fact on the screen, so the
/// workaround came out with it.
///
/// Still this host's question about its own furniture rather than a described
/// property: how one row is laid out in one frame is not something a terminal
/// would have an answer to.
#[must_use]
pub fn document(screen: &Screen) -> String {
    let shell = Shell::default()
        // An embed calls no route, so it takes no transport and no scripts.
        // A document that does ask fails visibly on the first control pressed,
        // and nothing here asks: every control is an external link.
        //
        // This was nine `without_` calls, growing by one every time quasi
        // added a script: 0.54.0 the fill script, 0.59.0 and 0.60.0 reveal and
        // repeat, 0.68.0 copy, 0.73.0 menu, 0.79.0 outline. Each is
        // independent of htmx by design -- what they read is attributes on a
        // control, a region or a fieldset -- so dropping the transport never
        // dropped them and each had to be refused by name. quasi 0.92.0 says
        // it in one, which is the list living where the scripts do rather than
        // at every host that wanted none.
        .without_scripts()
        .with_chrome(Chrome::new())
        .with_head_first(head_first());
    Webview::new().with_shell(shell).screen(screen)
}

/// Every layer of the design system, inlined, in cascade order.
///
/// Colour first because the rest reads tokens off it. Composition last because
/// it is the layer the described markup is styled by, and `@layer makeover` puts
/// it under anything the document adds after.
fn head_first() -> String {
    format!(
        "<style>{}{}{}{}{}</style>",
        embed_theme_css(),
        EMBED_GEOMETRY_CSS,
        EMBED_TYPOGRAPHY_CSS,
        LAYOUT_CSS,
        DOCUMENT_CSS,
    )
}

/// A screen with one region, holding one node.
fn one(title: &str, node: Node) -> Screen {
    Screen::single(title).with(Slot::new(REGION, RegionKind::Pane).with(node))
}

/// A cover picture, cropped to its box.
///
/// `Fit::Cover` because a cover is a fixed square here and the art it holds is
/// any shape: the alternative is letterboxing inside a 40-pixel box, which is
/// the art unreadable and the box the wrong colour.
fn cover(url: &str) -> Node {
    let mut picture = Picture::new(url, "");
    picture.fit = layout::Fit::Cover;
    Node::Image(picture)
}

/// What an item embed is drawn from.
///
/// A view rather than the database row, so a screen can be built in a test
/// without a connection. The same split every described screen here makes.
pub struct ItemView {
    /// The item's title.
    pub title: String,
    /// The price as the canonical formatter writes it.
    pub price: String,
    /// What the buy control says: "Buy" or "Get".
    pub button_text: String,
    /// Where the buy control goes, on makenot.work.
    pub purchase_url: String,
    /// The cover art, when the item has any.
    pub cover_image_url: Option<String>,
    /// Who made it.
    pub creator_display_name: String,
    /// Their page, on makenot.work.
    pub profile_url: String,
    /// The first 150 characters of the description.
    pub description_excerpt: String,
}

/// The buy control: a link out to makenot.work.
///
/// [`Destination::External`](quasi_router::Destination::External), which is what
/// makes it an anchor with `rel="noopener noreferrer"` in the webview rather
/// than a button that asks a route. An embed's every control is one of these.
fn buy(view: &ItemView) -> Act {
    Act::new(&view.button_text, Action::external(&view.purchase_url))
}

/// The buy button: cover, title, price, and the control, on one line.
///
/// The one embed that is genuinely a [`Row`]: a compact strip where the cover
/// is a thumbnail beside the title rather than the card's own picture. Drawn
/// with the `embed-button` body class, which is what sizes that thumbnail.
#[must_use]
pub fn item_button(view: &ItemView) -> Screen {
    let mut row = Row::new("");
    if let Some(url) = &view.cover_image_url {
        row = row.part(layout::RowPart::Primary, cover(url));
    }
    let row = row
        .part(layout::RowPart::Primary, Node::text(&view.title))
        .meta(&view.price)
        .part(layout::RowPart::Actions, Node::Act(buy(view)));
    one(&view.title, Node::list([row]))
}

/// The product card: the cover, what it is, who made it, and the control.
///
/// Blocks rather than one row, which is the difference between a card and a
/// button. A [`Row`] is an inline run and its parts share a line by role, so a
/// card said as a row would read "coverTitle" with the excerpt and the price
/// crushed in beside it. What a card actually is — a picture, a heading, a line
/// about who made it, a paragraph, a price and a control, each on its own line —
/// is a region holding six nodes, every one of which the vocabulary already
/// names.
#[must_use]
pub fn item_card(view: &ItemView) -> Screen {
    let mut slot = Slot::new(REGION, RegionKind::Pane);
    if let Some(url) = &view.cover_image_url {
        slot = slot.with(cover(url));
    }
    slot = slot.with(Node::section(&view.title)).with(Node::Link {
        text: format!("by {}", view.creator_display_name),
        action: Action::external(&view.profile_url),
    });
    if !view.description_excerpt.is_empty() {
        slot = slot.with(Node::text(&view.description_excerpt));
    }
    let slot = slot
        .with(Node::text(&view.price))
        .with(Node::Act(buy(view)));
    Screen::single(&view.title).with(slot)
}

/// The audio player: the card, with the transport in a bespoke region.
///
/// **Bespoke for now, widgets eventually.** A play button, a scrub bar and an
/// elapsed readout are a media transport, and the vocabulary names none of the
/// three on purpose — describing playback would
/// put scrub, rate and chapters into a core two of the three renderers could only
/// degrade. So this screen describes the chrome around the player and leaves the
/// player alone, which is exactly what a [`RegionKind::Bespoke`] is for.
///
/// The markup and the script that fills it are [`player_markup`], unchanged from
/// the template this replaces.
#[must_use]
pub fn item_player(view: &ItemView) -> Screen {
    let mut slot = Slot::new(REGION, RegionKind::Pane);
    if let Some(url) = &view.cover_image_url {
        slot = slot.with(cover(url));
    }
    let slot = slot
        .with(Node::section(&view.title))
        .with(Node::text(format!("by {}", view.creator_display_name)))
        .with(Node::text(&view.price))
        .with(Node::Act(buy(view)));

    Screen::single(&view.title).with(slot).with(Slot::new(
        PLAYER_REGION,
        RegionKind::Bespoke {
            name: "media-transport".into(),
        },
    ))
}

/// The bespoke region the transport is mounted in.
pub const PLAYER_REGION: &str = "transport";

/// The player document: the described chrome, with the transport mounted.
///
/// Its own function rather than [`document`] with an argument, because the
/// player is the one embed whose renderer carries a fill and whose head carries
/// a second sheet. Both are about the same one thing — the island this screen
/// deliberately does not describe — so they are named together.
#[must_use]
pub fn player_document(view: &ItemView, preview_url: &str) -> String {
    let shell = Shell::default()
        .without_htmx()
        .without_hyperscript()
        .without_clock()
        .without_fill()
        .without_reveal()
        .without_repeat()
        .without_copy()
        .without_menu()
        .without_outline()
        .with_chrome(Chrome::new())
        .with_head_first(format!("{}<style>{PLAYER_CSS}</style>", head_first()));
    Webview::new()
        .with_shell(shell)
        .with_fill(PLAYER_REGION, player_markup(preview_url))
        .screen(&item_player(view).documented(Document::default().classed("embed-player")))
}

/// The player island, and the script that drives it.
///
/// Verbatim from `templates/embed/item_player.html`, which is the whole point of
/// a bespoke region: the behaviour is already implemented once and tested, and
/// converting the page around it must not rewrite it. The classes are this
/// host's own and are styled by [`PLAYER_CSS`].
///
/// `preview_url` is the one value from outside, and it is escaped here: a
/// bespoke fill is markup and nothing downstream escapes it.
#[must_use]
pub fn player_markup(preview_url: &str) -> String {
    format!(
        r#"<div class="transport" data-preview-url="{}">
<button class="play-btn" id="play">&#9654;</button>
<div class="progress-bar" id="progress-bar"><div class="progress-fill" id="progress"></div></div>
<span class="time" id="time">0:00</span>
</div>
<span class="preview-label">Preview</span>
<script src="/static/embed-item-player.js?v=0623" defer></script>"#,
        crate::helpers::escape_html(preview_url)
    )
}

/// The transport's own rules, which are about a control the design system does
/// not name.
///
/// Kept out of [`DOCUMENT_CSS`] because it applies to one embed, and kept in
/// this crate because the markup it styles is this crate's. Colour is tokens
/// throughout, the same rule the rest of the document keeps.
pub const PLAYER_CSS: &str = "\
.transport { display: flex; align-items: center; gap: var(--step-base); }
.play-btn {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--action); color: var(--content-on-action); border: none;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  flex: none;
}
.play-btn:hover { background: var(--action-hover); }
.progress-bar {
  flex: 1; height: 4px; background: var(--surface-sunken);
  border-radius: 2px; cursor: pointer; position: relative;
}
.progress-fill { height: 100%; background: var(--action); border-radius: 2px; width: 0%; }
.time { font-family: var(--font-mono); color: var(--content-muted); white-space: nowrap; }
.preview-label { color: var(--content-muted); }
";

/// What a project embed is drawn from.
pub struct ProjectView {
    /// The project's title.
    pub title: String,
    /// Who made it.
    pub creator_display_name: String,
    /// Their page, on makenot.work.
    pub profile_url: String,
    /// The project's page, on makenot.work.
    pub project_url: String,
    /// The cover art, when the project has any.
    pub cover_image_url: Option<String>,
    /// The first 150 characters of the description.
    pub description_excerpt: String,
    /// How many items it holds.
    pub item_count: usize,
    /// What kind of project it is.
    pub category_label: String,
}

/// The project card: [`item_card`]'s shape, about a project.
#[must_use]
pub fn project_card(view: &ProjectView) -> Screen {
    let mut slot = Slot::new(REGION, RegionKind::Pane);
    if let Some(url) = &view.cover_image_url {
        slot = slot.with(cover(url));
    }
    slot = slot.with(Node::section(&view.title)).with(Node::Link {
        text: format!("by {}", view.creator_display_name),
        action: Action::external(&view.profile_url),
    });
    if !view.description_excerpt.is_empty() {
        slot = slot.with(Node::text(&view.description_excerpt));
    }
    // The count and the kind read together and neither stands on its own, so
    // they are one line rather than two nodes.
    let slot = slot
        .with(Node::text(format!(
            "{} {} \u{b7} {}",
            view.item_count,
            if view.item_count == 1 {
                "item"
            } else {
                "items"
            },
            view.category_label
        )))
        .with(Node::Act(Act::new(
            "View project",
            Action::external(&view.project_url),
        )));
    Screen::single(&view.title).with(slot)
}

/// What a tip embed is drawn from.
pub struct TipView {
    /// The creator's display name, for the document title.
    pub display_name: String,
    /// Their handle, which is what the label reads.
    pub username: String,
    /// Where the support control goes, on makenot.work.
    pub tip_url: String,
    /// Their avatar, when they have one.
    pub avatar_url: Option<String>,
}

/// The tip button.
#[must_use]
pub fn tip_button(view: &TipView) -> Screen {
    let mut row = Row::new("");
    if let Some(url) = &view.avatar_url {
        row = row.part(layout::RowPart::Primary, cover(url));
    }
    let row = row
        .part(
            layout::RowPart::Primary,
            Node::text(format!("Support @{}", view.username)),
        )
        .part(
            layout::RowPart::Actions,
            Node::Act(Act::new("Support", Action::external(&view.tip_url))),
        );
    one(&format!("Support {}", view.display_name), Node::list([row]))
}

#[cfg(test)]
mod tests {
    use super::*;

    fn item() -> ItemView {
        ItemView {
            title: "Item".into(),
            price: "$9".into(),
            button_text: "Buy".into(),
            purchase_url: "https://makenot.work/buy/one".into(),
            cover_image_url: Some("https://makenot.work/cover.png".into()),
            creator_display_name: "Creator".into(),
            profile_url: "https://makenot.work/u/creator".into(),
            description_excerpt: "About it.".into(),
        }
    }

    fn hex_literals(css: &str) -> Vec<String> {
        css.split('#')
            .skip(1)
            .map(|tail| {
                tail.chars()
                    .take_while(char::is_ascii_hexdigit)
                    .collect::<String>()
            })
            .filter(|run| run.len() == 3 || run.len() == 6)
            .map(|run| format!("#{run}"))
            .collect()
    }

    /// The regression guard the templates carried, kept: `#5a4bd6` sat in all
    /// five of them as a hover violet matching no token in the tree, and nothing
    /// was looking. What this host still writes by hand is two constants, so
    /// this is now a check on two strings rather than on five rendered pages.
    #[test]
    fn this_host_writes_no_colour_of_its_own() {
        for (name, css) in [("document", DOCUMENT_CSS), ("player", PLAYER_CSS)] {
            let found = hex_literals(css);
            assert!(
                found.is_empty(),
                "{name} writes its own colour: {found:?}. Use the token instead; \
                 a literal here drifts from the theme and nothing will report it.",
            );
        }
    }

    /// An embed cannot link a sheet, so every layer has to arrive in the head.
    #[test]
    fn an_embed_document_carries_the_whole_design_system() {
        let html =
            document(&item_button(&item()).documented(Document::default().classed("embed-button")));
        assert!(html.contains("<style>"), "{html}");
        // Colour, spacing and typography come from the generated files, so the
        // check is that each block is present rather than what is in it.
        assert!(html.contains(":root"), "{html}");
        assert!(html.contains("--font-sans"), "{html}");
        assert!(html.contains(".row-primary"), "{html}");
        // And nothing is linked, because nothing can be.
        assert!(!html.contains("<link"), "{html}");
    }

    /// `54d7f8cf`'s one requirement of `Shell`: an embed asks no route, so it
    /// takes no transport.
    #[test]
    fn an_embed_document_carries_no_script() {
        let html =
            document(&item_button(&item()).documented(Document::default().classed("embed-button")));
        assert!(!html.contains("<script"), "{html}");
        assert!(!html.contains("htmx"), "{html}");
    }

    /// Every control on an embed leaves the site, which is what makes it an
    /// anchor rather than something that asks a route.
    #[test]
    fn every_control_is_a_link_out() {
        let html =
            document(&item_button(&item()).documented(Document::default().classed("embed-button")));
        assert!(
            html.contains(r#"href="https://makenot.work/buy/one""#),
            "{html}"
        );
        assert!(html.contains(r#"rel="noopener noreferrer""#), "{html}");
        assert!(!html.contains("hx-get"), "{html}");
    }

    /// A reader's text reaches the document as text. The templates got this
    /// from Askama's autoescaping; a described screen gets it from the renderer,
    /// and the guarantee has to survive the change.
    #[test]
    fn a_title_cannot_open_a_tag() {
        let mut view = item();
        view.title = "<script>alert(1)</script>".into();
        let html =
            document(&item_button(&view).documented(Document::default().classed("embed-button")));
        assert!(!html.contains("<script>alert"), "{html}");
        assert!(html.contains("&lt;script&gt;"), "{html}");
    }

    /// The player describes the chrome and leaves the transport alone, which is
    /// `d86122cf`'s ruling in one assertion.
    #[test]
    fn the_player_keeps_its_transport_in_a_bespoke_region() {
        let html = player_document(&item(), "https://makenot.work/p.mp3");
        assert!(html.contains(r#"id="play""#), "{html}");
        assert!(html.contains("embed-item-player.js"), "{html}");
        assert!(html.contains(r#"data-bespoke="media-transport""#), "{html}");
        // The chrome around it is described rather than written: a heading, a
        // line about who made it, a price and a control, none of them markup
        // this crate spells.
        assert!(html.contains(r#"<h2 class="heading">Item</h2>"#), "{html}");
        assert!(html.contains(">Buy</a>"), "{html}");
        // The player is the one embed that carries a script, and it carries
        // exactly one: its own.
        assert_eq!(html.matches("<script").count(), 1, "{html}");
    }

    /// A preview URL is the one value that reaches markup this crate writes, so
    /// it is the one this crate escapes.
    #[test]
    fn a_preview_url_cannot_break_out_of_its_attribute() {
        let markup = player_markup("\" onload=alert(1) x=\"");
        assert!(!markup.contains("\" onload"), "{markup}");
    }
}