from __future__ import annotations

from ..components import _code_window
from ..html_utils import SafeHtml, escape, trusted


def _public_home_hero(*, suffix: str, demo_update_url: str) -> SafeHtml:
    return trusted(f"""
        <section class="hero-band">
          <div class="container text-center d-grid justify-items-center gap-3">
            <img class="hero-logo" src="/logo.webp?v=3" alt="" width="80" height="80"
              decoding="async" fetchpriority="high">
            <h1>Dynamic DNS for home routers.</h1>
            <div class="install-pill mx-auto" data-ui="hero-command">
              <code>{escape(demo_update_url)}</code>
            </div>
            <p class="lead">
              KarlDNS gives you a generated DynDNS hostname under {escape(suffix)}.
              Add the private update URL to your router, or use it from a script.
            </p>
            <div class="d-flex gap-2 flex-wrap justify-content-center mt-2">
              <form method="post" action="/" class="hero-action-form"
                aria-label="Create a generated DynDNS hostname">
                <button type="submit" class="btn btn-primary rounded-pill">Create hostname</button>
              </form>
              <a class="btn btn-outline-primary rounded-pill" href="#manual-updates">Manual updates</a>
            </div>
          </div>
        </section>
        """)


def _setup_flow_section(*, create_demo: str, create_demo_command: str) -> SafeHtml:
    return trusted(f"""
        <section class="section section-compact">
          <div class="container narrow text-center">
            <p class="eyebrow">How it works</p>
            <h2>No account needed.</h2>
            <p class="section-copy mx-auto">Create a hostname, save the private values, register it, done.</p>
            <ol class="flow-steps" aria-label="KarlDNS setup flow">
              <li><strong>Create</strong><span>Random hostname and private links.</span></li>
              <li><strong>Save</strong><span>Copy the secrets while they are shown.</span></li>
              <li><strong>Register</strong><span>Activate the hostname when you are ready.</span></li>
              <li><strong>Update</strong><span>Router, cron, or CNAME can use it.</span></li>
            </ol>
            {_code_window(
                create_demo,
                copy_label="update example",
                class_name="mt-4",
                copy_value=create_demo_command,
            )}
          </div>
        </section>
        """)


def _manual_updates_section(*, manual_demo: str) -> SafeHtml:
    return trusted(f"""
        <section class="section" id="manual-updates">
          <div class="container narrow text-center">
            <h2>Update from a router or script.</h2>
            <p class="lead mx-auto mt-3">
              Works with FRITZ!Box, curl, cron, Home Assistant, OpenWrt, pfSense,
              OPNsense, UniFi, MikroTik, and custom tools.
            </p>
            {_code_window(manual_demo, copy_label="manual update examples", class_name="manual-code text-start mt-4")}
          </div>
        </section>
        """)