// WordPress HTML Conversion Pipeline — Detail
// Render: dot -Tsvg docs/wordpress-import-html.dot -o docs/wordpress-import-html.dot.svg
digraph html_conversion {
    rankdir=LR;
    node [shape=box, style="rounded,filled", fontname="monospace", fontsize=9];
    edge [fontname="monospace", fontsize=8];

    raw_html [label="Raw WordPress HTML\n\n<!-- wp:paragraph -->\n<p class=\"has-large-font-size\">\n[gallery ids=\"1,2,3\"]\n<img srcset=\"...\" />", fillcolor="#fce4ec", shape=note];

    subgraph cluster_phase1 {
        label="Phase 1: Pre-process (BeautifulSoup)";
        style=dashed;
        color="#5871ad";

        strip_gutenberg [label="Strip Gutenberg\ncomments\n<!-- /?wp:\\S+.*?-->", fillcolor="#e8eaf6"];
        strip_shortcodes [label="Strip shortcodes\n[vc_*] [et_pb_*]\n[fusion_*]\nkeep inner content", fillcolor="#e8eaf6"];
        convert_embeds [label="Convert embeds\n[embed]URL[/embed]\n→ bare URL", fillcolor="#e8eaf6"];
        convert_captions [label="Convert captions\n[caption] → <figure>", fillcolor="#e8eaf6"];
        strip_srcset [label="Strip srcset/sizes\nStrip WP classes\nUnwrap empty divs", fillcolor="#e8eaf6"];
    }

    subgraph cluster_phase2 {
        label="Phase 2: Image Migration";
        style=dashed;
        color="#58ad71";

        find_imgs [label="Find all <img> src\nand background-image\nURLs", fillcolor="#e8f5e9"];
        strip_suffix [label="Strip WP size suffix\n-300x200 → original\nphoto-1024x768.jpg\n→ photo.jpg", fillcolor="#e8f5e9"];
        download [label="Download original\nfrom WP server\nrequests.get()\ntimeout=30s", fillcolor="#e8f5e9"];
        upload_s3 [label="Upload to S3\n{shop_id}/{product_id}/\ninline/{filename}\nACL=public-read", fillcolor="#e8f5e9"];
        rewrite [label="Rewrite src URLs\nold WP URL\n→ CDN URL", fillcolor="#e8f5e9"];
    }

    subgraph cluster_phase3 {
        label="Phase 3: markdownify";
        style=dashed;
        color="#ad8f58";

        converter [label="WPConverter\n(MarkdownConverter\nsubclass)", fillcolor="#fff8e1"];
        figures [label="<figure> → ![alt](url)\n<figcaption> → caption", fillcolor="#fff8e1"];
        code [label="<pre><code\nclass=\"language-*\">\n→ fenced code block", fillcolor="#fff8e1"];
        headings [label="ATX headings (#)\nbody_width=0\nunicode_snob=True", fillcolor="#fff8e1"];
    }

    subgraph cluster_phase4 {
        label="Phase 4: Post-process";
        style=dashed;
        color="#666666";

        collapse [label="Collapse blank lines\n3+ newlines → 2", fillcolor="#f5f5f5"];
        metadata [label="Prepend metadata\n**Categories:** ...\n**Tags:** ...\n**Author:** ...", fillcolor="#f5f5f5"];
        flag [label="Flag posts with\nunconverted <html>\nfor manual review", fillcolor="#f5f5f5"];
    }

    output [label="MPS Content\n\nProduct.description\n(raw markdown)\n\nProduct.description_html\n(rendered HTML)", fillcolor="#e8f5e9", shape=note];

    // Flow
    raw_html -> strip_gutenberg;
    strip_gutenberg -> strip_shortcodes;
    strip_shortcodes -> convert_embeds;
    convert_embeds -> convert_captions;
    convert_captions -> strip_srcset;

    strip_srcset -> find_imgs;
    find_imgs -> strip_suffix;
    strip_suffix -> download;
    download -> upload_s3;
    upload_s3 -> rewrite;

    rewrite -> converter;
    converter -> figures;
    converter -> code;
    converter -> headings;
    figures -> collapse [style=invis];
    code -> collapse [style=invis];
    headings -> collapse;

    collapse -> metadata;
    metadata -> flag;
    flag -> output;
}
