//! The TodoMVC page, written straight to a `std.Io.Writer`.
//!
//! The markup follows TodoMVC's own template (shared/reference.html). Each
//! action is a real form, so the page works with JavaScript off; the extra
//! no-JS controls carry a `nojs-` class that static/app.css hides once the
//! script has marked the page with `html.js`.

const std = @import("std");
const Writer = std.Io.Writer;
const Todo = @import("db.zig").Todo;

pub const Filter = enum {
    all,
    active,
    completed,

    pub fn fromField(value: []const u8) Filter {
        return std.meta.stringToEnum(Filter, value) orelse .all;
    }

    pub fn fromPath(p: []const u8) ?Filter {
        if (std.mem.eql(u8, p, "/")) return .all;
        if (std.mem.eql(u8, p, "/active")) return .active;
        if (std.mem.eql(u8, p, "/completed")) return .completed;
        return null;
    }

    pub fn path(f: Filter) []const u8 {
        return switch (f) {
            .all => "/",
            .active => "/active",
            .completed => "/completed",
        };
    }

    fn shows(f: Filter, t: Todo) bool {
        return switch (f) {
            .all => true,
            .active => !t.completed,
            .completed => t.completed,
        };
    }
};

pub const Page = struct {
    todos: []const Todo,
    filter: Filter,
    /// The item whose editor is open, from `?edit=<id>`.
    editing: ?i64 = null,
};

pub fn render(w: *Writer, page: Page) Writer.Error!void {
    var completed: usize = 0;
    for (page.todos) |t| completed += @intFromBool(t.completed);
    const left = page.todos.len - completed;
    const empty = page.todos.len == 0;
    const filter = @tagName(page.filter);

    try w.writeAll(
        \\<!doctype html>
        \\<html lang="en">
        \\<head>
        \\<meta charset="utf-8">
        \\<meta name="viewport" content="width=device-width, initial-scale=1">
        \\<title>TodoMVC</title>
        \\<link rel="stylesheet" href="/static/base.css">
        \\<link rel="stylesheet" href="/static/index.css">
        \\<link rel="stylesheet" href="/static/app.css">
        \\<script>document.documentElement.classList.add("js")</script>
        \\<script type="module" src="/static/app.js"></script>
        \\</head>
        \\<body>
        \\<section class="todoapp">
        \\<header class="header">
        \\<h1>todos</h1>
        \\<form method="post" action="/todos">
        \\
    );
    try hiddenFilter(w, filter);
    try w.print(
        \\<input class="new-todo" name="title" placeholder="What needs to be done?" autocomplete="off"{s}>
        \\</form>
        \\</header>
        \\<section class="main"{s}>
        \\<form method="post" action="/todos/toggle-all">
        \\
    , .{
        if (page.editing == null) " autofocus" else "",
        if (empty) " hidden" else "",
    });
    try hiddenFilter(w, filter);
    try w.print(
        \\<input id="toggle-all" class="toggle-all" type="checkbox"{s}>
        \\<label for="toggle-all">Mark all as complete</label>
        \\<button class="nojs-toggle-all" data-action="toggle-all">Mark all as complete</button>
        \\</form>
        \\<ul class="todo-list">
        \\
    , .{if (!empty and left == 0) " checked" else ""});

    for (page.todos) |t| {
        if (page.filter.shows(t)) try item(w, t, page.filter, page.editing == t.id);
    }

    try w.print(
        \\</ul>
        \\</section>
        \\<footer class="footer"{s}>
        \\<span class="todo-count"><strong>{d}</strong> {s} left</span>
        \\<ul class="filters">
        \\
    , .{ if (empty) " hidden" else "", left, if (left == 1) "item" else "items" });
    inline for (.{ .{ Filter.all, "All" }, .{ Filter.active, "Active" }, .{ Filter.completed, "Completed" } }) |link| {
        try w.print("<li><a{s} href=\"{s}\">{s}</a></li>\n", .{
            if (page.filter == link[0]) " class=\"selected\"" else "",
            link[0].path(),
            link[1],
        });
    }
    try w.writeAll("</ul>\n");
    if (completed > 0) {
        try w.writeAll("<form method=\"post\" action=\"/todos/clear-completed\">\n");
        try hiddenFilter(w, filter);
        try w.writeAll("<button class=\"clear-completed\">Clear completed</button>\n</form>\n");
    }
    try w.writeAll(
        \\</footer>
        \\</section>
        \\<footer class="info">
        \\<p>Double-click to edit a todo</p>
        \\<p>Created by <a href="https://bakeoff.bfj.oncarlos.com">the CARLOS bakeoff</a> · Zig</p>
        \\<p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
        \\</footer>
        \\</body>
        \\</html>
        \\
    );
}

fn item(w: *Writer, t: Todo, filter: Filter, editing: bool) Writer.Error!void {
    const f = @tagName(filter);
    const classes: []const u8 = if (t.completed and editing)
        " class=\"completed editing\""
    else if (t.completed)
        " class=\"completed\""
    else if (editing)
        " class=\"editing\""
    else
        "";
    try w.print("<li data-id=\"{d}\"{s}>\n<div class=\"view\">\n", .{ t.id, classes });
    try w.print("<input class=\"toggle\" type=\"checkbox\"{s}>\n<label>", .{if (t.completed) " checked" else ""});
    try escape(w, t.title);
    try w.print("</label>\n<form method=\"post\" action=\"/todos/{d}/toggle\">\n", .{t.id});
    try hiddenFilter(w, f);
    try w.print(
        \\<button class="nojs-toggle" data-action="toggle">{s}</button>
        \\</form>
        \\<a class="nojs-edit" data-action="edit" href="{s}?edit={d}">Edit</a>
        \\<form method="post" action="/todos/{d}/destroy">
        \\
    , .{ if (t.completed) "Mark as active" else "Mark as complete", filter.path(), t.id, t.id });
    try hiddenFilter(w, f);
    try w.print(
        \\<button class="destroy" aria-label="Delete"></button>
        \\</form>
        \\</div>
        \\<form method="post" action="/todos/{d}/edit">
        \\
    , .{t.id});
    try hiddenFilter(w, f);
    try w.writeAll("<input class=\"edit\" name=\"title\" value=\"");
    try escape(w, t.title);
    try w.print("\"{s}>\n</form>\n</li>\n", .{if (editing) " autofocus" else ""});
}

fn hiddenFilter(w: *Writer, filter: []const u8) Writer.Error!void {
    try w.print("<input type=\"hidden\" name=\"filter\" value=\"{s}\">\n", .{filter});
}

/// Escapes text for an HTML text node or a double-quoted attribute.
pub fn escape(w: *Writer, s: []const u8) Writer.Error!void {
    var start: usize = 0;
    for (s, 0..) |ch, i| {
        const entity: []const u8 = switch (ch) {
            '&' => "&amp;",
            '<' => "&lt;",
            '>' => "&gt;",
            '"' => "&quot;",
            '\'' => "&#39;",
            else => continue,
        };
        try w.writeAll(s[start..i]);
        try w.writeAll(entity);
        start = i + 1;
    }
    try w.writeAll(s[start..]);
}

test escape {
    var buf: [128]u8 = undefined;
    var w: Writer = .fixed(&buf);
    try escape(&w, "<img src=x onerror=\"alert('1')\"> & naïve 🚀");
    try std.testing.expectEqualStrings(
        "&lt;img src=x onerror=&quot;alert(&#39;1&#39;)&quot;&gt; &amp; naïve 🚀",
        w.buffered(),
    );
}

fn renderToString(gpa: std.mem.Allocator, page: Page) ![]u8 {
    var out: Writer.Allocating = .init(gpa);
    defer out.deinit();
    try render(&out.writer, page);
    return out.toOwnedSlice();
}

test "empty list hides main and footer" {
    const html = try renderToString(std.testing.allocator, .{ .todos = &.{}, .filter = .all });
    defer std.testing.allocator.free(html);
    try std.testing.expect(std.mem.indexOf(u8, html, "<section class=\"main\" hidden>") != null);
    try std.testing.expect(std.mem.indexOf(u8, html, "<footer class=\"footer\" hidden>") != null);
    try std.testing.expect(std.mem.indexOf(u8, html, "clear-completed\"") == null);
}

test "filters, counter and editing" {
    const todos = [_]Todo{
        .{ .id = 1, .title = "Buy milk", .completed = true },
        .{ .id = 2, .title = "Walk <the> dog", .completed = false },
    };
    const html = try renderToString(std.testing.allocator, .{ .todos = &todos, .filter = .active, .editing = 2 });
    defer std.testing.allocator.free(html);
    try std.testing.expect(std.mem.indexOf(u8, html, "<strong>1</strong> item left") != null);
    try std.testing.expect(std.mem.indexOf(u8, html, "data-id=\"1\"") == null);
    try std.testing.expect(std.mem.indexOf(u8, html, "<li data-id=\"2\" class=\"editing\">") != null);
    try std.testing.expect(std.mem.indexOf(u8, html, "<label>Walk &lt;the&gt; dog</label>") != null);
    try std.testing.expect(std.mem.indexOf(u8, html, "<a class=\"selected\" href=\"/active\">") != null);
    try std.testing.expect(std.mem.indexOf(u8, html, "href=\"/active?edit=2\"") != null);
    try std.testing.expect(std.mem.indexOf(u8, html, "<button class=\"clear-completed\">") != null);
    try std.testing.expect(std.mem.indexOf(u8, html, "class=\"new-todo\" name=\"title\" placeholder=\"What needs to be done?\" autocomplete=\"off\">") != null);
}