"""Nexusmon Community - the public ring around the sealed core."""

from __future__ import annotations

from typing import Any

import gradio as gr


COMMUNITY_FIELDS = (
    "one signal",
    "one symbol",
    "one safe question",
    "one ritual note",
    "one public idea",
)


def _clean(text: str) -> str:
    return " ".join((text or "").strip().split())


def _short(text: Any, limit: int = 92) -> str:
    value = str(text).strip()
    if len(value) <= limit:
        return value
    return value[: max(0, limit - 3)].rstrip() + "..."


def _community_signal(theme: str) -> str:
    topic = _clean(theme) or "one public signal"
    return "\n".join(
        [
            "### Public signal",
            f"- **Theme:** {_short(topic, 72)}",
            "- **Reading:** the community ring is awake.",
            "- **Tone:** mythic, deliberate, sealed at the core.",
            "",
            "### Veil check",
            "- Keep it public-safe.",
            "- Keep the engine hidden.",
            "- Keep the language custom, not generic.",
            "",
            "### Resonance matrix",
            f"- **Normal:** {_short(topic, 60)}",
            "- **Strange:** a symbol, omen, or fragment",
            "- **Secret:** a meaning only the public ring can hold",
            "",
            "### Next move",
            "Post one thing that feels like a signal from the outer membrane.",
        ]
    )


def _hero_html() -> str:
    return """
    <div class="nx-hero">
      <div class="nx-eye"></div>
      <div class="nx-hero-copy">
        <div class="nx-sigil">nexusmon community</div>
        <h1 class="nx-title">A public ring for signals, stories, and safe rituals.</h1>
        <p class="nx-sub">
          This is the outer circle around Nexusmon: creative, intentional, and
          alive without opening the sealed engine underneath.
        </p>
      </div>
      <div class="nx-hero-side">
        <div class="nx-kicker">public shell</div>
        <div class="nx-stat">mythic and minimal</div>
        <div class="nx-stat">sealed at the core</div>
        <div class="nx-stat">anomaly-led, not generic</div>
      </div>
    </div>
    """


def _atlas_html() -> str:
    return """
    <div class="nx-atlas">
      <div class="nx-atlas-card">
        <span class="nx-atlas-label">Ring</span>
        <span class="nx-atlas-value">Public constellation</span>
      </div>
      <div class="nx-atlas-card">
        <span class="nx-atlas-label">Mode</span>
        <span class="nx-atlas-value">Creative, ritual, safe</span>
      </div>
      <div class="nx-atlas-card">
        <span class="nx-atlas-label">Boundary</span>
        <span class="nx-atlas-value">Engine stays sealed</span>
      </div>
    </div>
    """


def build_ui() -> gr.Blocks:
    theme = gr.themes.Base(
        primary_hue=gr.themes.Color(
            c50="#e7fbff",
            c100="#c7f4ff",
            c200="#96e9ff",
            c300="#5fd6ff",
            c400="#2cc2ff",
            c500="#00aef2",
            c600="#008fcc",
            c700="#006fa0",
            c800="#0a567f",
            c900="#0a3e5b",
            c950="#08283b",
        ),
        secondary_hue=gr.themes.Color(
            c50="#fff7df",
            c100="#ffe9ad",
            c200="#ffd56d",
            c300="#ffc63b",
            c400="#ffb200",
            c500="#e29a00",
            c600="#b87900",
            c700="#8f5d00",
            c800="#6d4700",
            c900="#4f3300",
            c950="#2d1e00",
        ),
        neutral_hue=gr.themes.colors.slate,
        font=[gr.themes.GoogleFont("Space Grotesk"), "system-ui", "sans-serif"],
        font_mono=[gr.themes.GoogleFont("IBM Plex Mono"), "monospace"],
    ).set(
        body_background_fill="#050812",
        body_text_color="#e8f4ff",
        block_background_fill="#09101b",
        block_border_width="1px",
        block_border_color="rgba(120, 200, 255, 0.18)",
        input_background_fill="#0f1524",
        input_border_color="rgba(56, 189, 248, 0.22)",
        button_primary_background_fill="#00aef2",
        button_primary_text_color="#08131d",
    )

    css = """
    body {
        background:
            radial-gradient(circle at 10% 10%, rgba(0, 174, 242, 0.16), transparent 24%),
            radial-gradient(circle at 90% 0%, rgba(110, 79, 255, 0.16), transparent 22%),
            radial-gradient(circle at 50% 120%, rgba(224, 76, 255, 0.12), transparent 26%),
            linear-gradient(180deg, #050812 0%, #040711 46%, #03050c 100%);
        color: #e8f4ff;
    }
    body::before {
        content: "";
        position: fixed;
        inset: 0;
        pointer-events: none;
        background-image:
            linear-gradient(rgba(120, 200, 255, 0.06) 1px, transparent 1px),
            linear-gradient(90deg, rgba(120, 200, 255, 0.04) 1px, transparent 1px);
        background-size: 100% 28px, 28px 100%;
        mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.45), transparent 92%);
        opacity: 0.55;
    }
    .gradio-container {
        max-width: 1260px !important;
    }
    .nx-hero {
        display: grid;
        grid-template-columns: 84px minmax(0, 1fr) 280px;
        gap: 1rem;
        align-items: center;
        border: 1px solid rgba(120, 200, 255, 0.18);
        border-radius: 26px;
        padding: 1.25rem 1.3rem;
        margin-bottom: 1rem;
        background:
            radial-gradient(circle at top left, rgba(0, 174, 242, 0.2), transparent 34%),
            radial-gradient(circle at 84% 10%, rgba(110, 79, 255, 0.18), transparent 26%),
            linear-gradient(180deg, rgba(10, 14, 24, 0.98), rgba(8, 10, 16, 0.98));
        box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.03), 0 28px 92px rgba(0, 0, 0, 0.45);
        overflow: hidden;
        position: relative;
    }
    .nx-hero::after {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background:
            linear-gradient(115deg, transparent 0%, rgba(255, 255, 255, 0.05) 48%, transparent 60%);
        opacity: 0.18;
        transform: translateX(-28%);
        animation: nxSweep 12s ease-in-out infinite;
    }
    .nx-eye {
        width: 76px;
        height: 76px;
        border-radius: 50%;
        border: 1px solid rgba(120, 200, 255, 0.28);
        background:
            radial-gradient(circle at center, #00d9ff 0 5px, transparent 6px),
            radial-gradient(circle at center, rgba(0, 217, 255, 0.18) 0 20px, transparent 21px),
            radial-gradient(circle at center, rgba(110, 79, 255, 0.25) 0 33px, transparent 34px),
            linear-gradient(180deg, rgba(12, 18, 29, 1), rgba(7, 11, 18, 1));
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04), 0 0 36px rgba(0, 217, 255, 0.12);
        animation: nxPulse 4s ease-in-out infinite;
    }
    .nx-sigil {
        text-transform: uppercase;
        letter-spacing: 0.34em;
        font-size: 0.68rem;
        color: #87dfff;
        margin-bottom: 0.45rem;
    }
    .nx-title {
        margin: 0;
        font-size: clamp(2.4rem, 4.6vw, 4.8rem);
        line-height: 0.92;
        color: #f4fbff;
        text-wrap: balance;
    }
    .nx-sub {
        margin: 0.8rem 0 0;
        color: #b7c7dd;
        font-size: 1rem;
        max-width: 50rem;
    }
    .nx-hero-side {
        display: grid;
        gap: 0.45rem;
        align-self: stretch;
        padding-left: 0.2rem;
    }
    .nx-kicker {
        text-transform: uppercase;
        letter-spacing: 0.2em;
        font-size: 0.74rem;
        color: #9db4cb;
    }
    .nx-stat {
        padding: 0.55rem 0.7rem;
        border-radius: 13px;
        background: rgba(10, 16, 28, 0.82);
        border: 1px solid rgba(120, 200, 255, 0.14);
        color: #d9f4ff;
        font-size: 0.84rem;
    }
    .nx-atlas {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.65rem;
        margin-bottom: 0.95rem;
    }
    .nx-atlas-card {
        border-radius: 18px;
        border: 1px solid rgba(120, 200, 255, 0.14);
        padding: 0.9rem 0.95rem;
        background:
            linear-gradient(180deg, rgba(13, 18, 30, 0.85), rgba(8, 10, 16, 0.92));
        box-shadow: 0 20px 64px rgba(0, 0, 0, 0.25);
    }
    .nx-atlas-label {
        display: block;
        color: #8ca6be;
        font-size: 0.72rem;
        text-transform: uppercase;
        letter-spacing: 0.12em;
        margin-bottom: 0.25rem;
    }
    .nx-atlas-value {
        display: block;
        color: #eff9ff;
        font-size: 0.92rem;
    }
    .nx-panel {
        position: relative;
        overflow: hidden;
        border-radius: 20px;
        padding: 1rem 1.05rem 0.95rem;
        background:
            linear-gradient(180deg, rgba(10, 14, 24, 0.92), rgba(8, 10, 16, 0.95));
        border: 1px solid rgba(120, 200, 255, 0.16);
        box-shadow: 0 24px 72px rgba(0, 0, 0, 0.3);
    }
    .nx-panel::before {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background: radial-gradient(circle at top left, rgba(0, 174, 242, 0.12), transparent 36%);
    }
    .nx-terminal textarea {
        min-height: 196px !important;
        font-family: "IBM Plex Mono", monospace !important;
        background: linear-gradient(180deg, rgba(4, 10, 16, 0.98), rgba(6, 12, 19, 0.98)) !important;
        border: 1px solid rgba(0, 174, 242, 0.15) !important;
        color: #e8f4ff !important;
    }
    .nx-note {
        margin-top: 0.7rem;
        color: #89a6c4;
        font-size: 0.84rem;
    }
    button, .gr-button {
        border-radius: 999px !important;
        background: linear-gradient(90deg, #00aef2, #6e4fff) !important;
        color: #07111b !important;
        border: 0 !important;
        font-weight: 700 !important;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        box-shadow: 0 16px 36px rgba(0, 174, 242, 0.22);
    }
    button:hover, .gr-button:hover {
        filter: brightness(1.08);
        transform: translateY(-1px);
    }
    @keyframes nxPulse {
        0%, 100% { transform: scale(0.96); opacity: 0.78; }
        50% { transform: scale(1.12); opacity: 1; }
    }
    @keyframes nxSweep {
        0%, 70% { transform: translateX(-28%); opacity: 0.08; }
        85% { opacity: 0.2; }
        100% { transform: translateX(28%); opacity: 0.06; }
    }
    """

    with gr.Blocks(theme=theme, css=css, title="Nexusmon Community", analytics_enabled=False) as demo:
        gr.HTML(_hero_html())
        gr.HTML(_atlas_html())

        with gr.Row(equal_height=True):
            with gr.Column(scale=5, min_width=360):
                with gr.Group(elem_classes=["nx-panel"]):
                    gr.Markdown("### Cast a signal")
                    gr.Markdown(
                        "Drop one theme, one idea, or one post direction. The page returns a tiny public-safe signal."
                    )
                    theme_input = gr.Textbox(
                        label="Theme",
                        lines=3,
                        placeholder="Example: ritual launch note, fan art, community question, weekly recap",
                    )
                    spark_btn = gr.Button("Cast signal", variant="primary")
                    spark_out = gr.Markdown()

            with gr.Column(scale=3, min_width=300):
                with gr.Group(elem_classes=["nx-panel"]):
                    gr.Markdown("### Community oath")
                    gr.Markdown(
                        "- keep it creative\n"
                        "- keep it respectful\n"
                        "- keep the core sealed\n"
                        "- share outcomes, not secrets"
                    )

        with gr.Row(equal_height=True):
            with gr.Column(scale=1, min_width=320):
                with gr.Group(elem_classes=["nx-panel"]):
                    gr.Markdown("### What stays sealed")
                    gr.Markdown(
                        "- engine details\n"
                        "- operator keys\n"
                        "- hidden routes\n"
                        "- training data\n"
                        "- private deployment details"
                    )

            with gr.Column(scale=1, min_width=320):
                with gr.Group(elem_classes=["nx-panel"]):
                    gr.Markdown("### Anomaly matrix")
                    gr.Markdown(
                        "| State | Public reading |\n"
                        "| --- | --- |\n"
                        "| Normal | Clean community note |\n"
                        "| Strange | Fragment, symbol, or omen |\n"
                        "| Secret | Meaning hidden in plain sight |\n"
                        "\n"
                        "Use it to shape posts, prompts, and public rituals."
                    )

        gr.Markdown(
            "<p style='text-align:center;color:#8ba4c7;font-size:0.85rem;margin-top:1.4rem'>"
            "Nexusmon Community · public by design · sealed at the core"
            "</p>"
        )

        spark_btn.click(fn=_community_signal, inputs=theme_input, outputs=spark_out)
        theme_input.submit(fn=_community_signal, inputs=theme_input, outputs=spark_out)

    return demo


demo = build_ui()
demo.queue()


if __name__ == "__main__":
    demo.launch()