"""Kingdom Come Gradio theme and shared styles."""

from __future__ import annotations

KC_PAGE_BG = "#000000"
KC_FG_ALPHA = 0.30
KC_FG_NESTED_ALPHA = 0.40
KC_FG_RGBA = f"rgba(18, 36, 61, {KC_FG_ALPHA})"
KC_FG_NESTED_RGBA = f"rgba(18, 36, 61, {KC_FG_NESTED_ALPHA})"


def _foreground_layer_css() -> str:
    """30% base foreground; nested/top layers +10% (40%)."""
    fg = KC_FG_RGBA
    nested = KC_FG_NESTED_RGBA
    return f"""
:root,
.gradio-container,
.dark {{
  --block-background-fill: {fg} !important;
  --panel-background-fill: {fg} !important;
  --kc-fg-fill: {fg};
  --kc-fg-nested-fill: {nested};
}}
.gradio-container .block.border,
.gradio-container .image-container,
.gradio-container .gallery,
.gradio-container .plot {{
  background: {fg} !important;
}}
.gradio-container .block .block.border,
.gradio-container .block .image-container,
.gradio-container .block .gallery,
.gradio-container .block .plot,
.gradio-container .accordion,
.gradio-container .tabitem .block.border,
.gradio-container .tabitem .image-container,
.gradio-container .tabitem .gallery,
.gradio-container .tabitem .plot,
.gradio-container .column .block.border,
.gradio-container .row .block.border {{
  background: {nested} !important;
}}
.kc-hero {{
  background: {fg} !important;
}}
.kc-card,
.kc-showcase-card,
.kc-paper-card,
.kc-paper-toolbar {{
  background: {nested} !important;
}}
"""


_KINGDOM_CSS_SHELL = """
:root {
  --kc-bg: #000000;
  --kc-surface: #12243d;
  --kc-teal: #00c9b7;
  --kc-blue: #1a8fe3;
  --kc-gold: #c9a227;
  --kc-text: #d4e4f7;
}
:root,
.gradio-container,
.dark {
  --body-background-fill: #000000 !important;
  --background-fill-primary: #000000 !important;
  --background-fill-secondary: #0a0a0a !important;
  --block-background-fill: rgba(18, 36, 61, 0.55) !important;
  --block-border-color: rgba(26, 143, 227, 0.25) !important;
  --panel-background-fill: rgba(18, 36, 61, 0.55) !important;
}
html,
body,
#root,
#app,
.app,
.main,
.gradio-container {
  background: #000000 !important;
  background-color: #000000 !important;
}
.gradio-container .block,
.gradio-container .panel,
.gradio-container .form,
.gradio-container .tabs,
.gradio-container .tabitem,
.gradio-container .contain,
.gradio-container .column,
.gradio-container .row {
  background: transparent !important;
  background-color: transparent !important;
}
.gradio-container .block.border,
.gradio-container .accordion,
.gradio-container .image-container,
.gradio-container .gallery,
.gradio-container .plot {
  background: rgba(18, 36, 61, 0.52) !important;
  backdrop-filter: blur(5px);
}
.gradio-container .prose,
.gradio-container footer,
.gradio-container .wrap,
.gradio-container .html-container {
  background: transparent !important;
  background-color: transparent !important;
}
.kc-hero {
  text-align: center;
  padding: 2rem 1rem 1.5rem;
  border-bottom: 1px solid rgba(26, 143, 227, 0.25);
  margin-bottom: 1rem;
  background: rgba(0, 0, 0, 0.35);
  border-radius: 0 0 12px 12px;
}
.kc-hero h1 {
  font-size: 2.2rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  background: linear-gradient(90deg, #1a8fe3, #00c9b7, #c9a227);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 0.5rem;
}
.kc-hero p {
  color: #8ecae6;
  font-size: 1.05rem;
  max-width: 720px;
  margin: 0 auto;
}
.kc-card {
  background: rgba(18, 36, 61, 0.85);
  border: 1px solid rgba(26, 143, 227, 0.2);
  border-radius: 12px;
  padding: 1rem 1.25rem;
  margin: 0.5rem 0;
}
.kc-card h3 { color: var(--kc-teal); margin-top: 0; }
.kc-showcase-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
  margin: 1rem 0;
}
.kc-showcase-card {
  display: block;
  background: rgba(18, 36, 61, 0.9);
  border: 1px solid rgba(26, 143, 227, 0.25);
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  color: var(--kc-text);
  transition: border-color 0.2s, transform 0.15s;
}
.kc-showcase-card:hover {
  border-color: var(--kc-teal);
  transform: translateY(-2px);
}
.kc-showcase-card img,
.kc-showcase-thumb {
  width: 100%;
  height: 140px;
  object-fit: cover;
  display: block;
  background: #0d1f35;
}
.kc-thumb-vqc {
  background: linear-gradient(135deg, #0a0818 0%, #7c2d12 45%, #ea580c 100%);
}
.kc-showcase-body { padding: 0.9rem 1rem 1.1rem; }
.kc-showcase-body h3 { color: var(--kc-teal); margin: 0 0 0.4rem; font-size: 1.05rem; }
.kc-showcase-body p { color: #8ecae6; font-size: 0.88rem; line-height: 1.45; margin: 0; }
.kc-showcase-body.kc-no-img { padding-top: 1.1rem; }
.kc-tag {
  display: inline-block;
  margin-top: 0.6rem;
  padding: 0.15rem 0.5rem;
  border-radius: 6px;
  font-size: 0.75rem;
  background: rgba(26, 143, 227, 0.2);
  color: var(--kc-blue);
}
.kc-paper-index {
  margin: 0.75rem 0 1.25rem;
}
.kc-paper-index-lead {
  color: #8ecae6;
  font-size: 0.9rem;
  margin: 0 0 0.75rem;
}
.kc-paper-card {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  padding: 0.75rem 1rem;
  margin: 0.4rem 0;
  background: rgba(18, 36, 61, 0.85);
  border: 1px solid rgba(26, 143, 227, 0.2);
  border-radius: 10px;
  text-decoration: none;
  color: var(--kc-text);
  transition: border-color 0.2s;
}
.kc-paper-card:hover {
  border-color: var(--kc-teal);
}
.kc-paper-card-icon {
  font-size: 1.25rem;
  line-height: 1.2;
}
.kc-paper-card-body {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  flex: 1;
  text-align: left;
  align-items: flex-start;
}
.kc-paper-card-body strong {
  color: var(--kc-teal);
  font-size: 0.95rem;
  text-align: left;
  display: block;
  width: 100%;
}
.kc-paper-card-body em {
  color: #8ecae6;
  font-size: 0.82rem;
  font-style: normal;
  line-height: 1.4;
  text-align: left;
  display: block;
  width: 100%;
}
.gradio-container .tab-nav,
.gradio-container .tabs {
  flex-wrap: wrap !important;
  overflow-x: auto !important;
}
.gradio-container button.tab-nav {
  white-space: nowrap;
  flex-shrink: 0;
}
/* Observations accordions — Investigation N: matches active tab teal */
.kc-inv-label-num {
  color: var(--kc-teal) !important;
  font-weight: 600;
}
.kc-inv-label-desc {
  color: var(--kc-text) !important;
  font-weight: 400;
}
.kc-higgs-header table {
  width: 100%;
  margin: 0.75rem 0 1.25rem;
  border-collapse: collapse;
}
.kc-higgs-header table td {
  padding: 0.35rem 0.75rem;
  border: 1px solid rgba(26, 143, 227, 0.2);
  color: #8ecae6;
  font-size: 0.9rem;
}
.kc-higgs-header h1 {
  color: var(--kc-teal);
  margin-bottom: 0.5rem;
}
.kc-obs-image-row .image-container,
.kc-obs-image-row .wrap {
  min-height: 0;
}
.kc-obs-image-row img {
  object-fit: contain;
  background: #0d1f35;
}
.kc-obs-footer {
  text-align: center;
  font-size: 0.88rem;
  color: #5a7a9a;
  margin-top: 1.5rem;
  font-style: italic;
}
.kc-obs-footer em {
  color: #8ecae6;
}
.kc-paper-viewer {
  margin-top: 0.5rem;
}
.kc-paper-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 0.5rem 0.75rem;
  margin-bottom: 0.5rem;
  background: rgba(18, 36, 61, 0.9);
  border: 1px solid rgba(26, 143, 227, 0.2);
  border-radius: 8px;
  font-size: 0.9rem;
}
.kc-paper-toolbar a {
  color: var(--kc-blue);
  text-decoration: none;
  white-space: nowrap;
}
.kc-paper-toolbar a:hover {
  color: var(--kc-teal);
}
.kc-paper-open-btn {
  background: #3b82f6 !important;
  color: #ffffff !important;
  padding: 6px 14px;
  border-radius: 6px;
  font-weight: 500;
}
.kc-paper-open-btn:hover {
  background: #2563eb !important;
  color: #ffffff !important;
}
.kc-paper-brave-hint {
  margin-top: 0.5rem;
  padding: 10px 14px;
  background: #1f2a44;
  border: 1px solid rgba(26, 143, 227, 0.2);
  border-radius: 6px;
  font-size: 0.88rem;
  color: #b8c9dc;
  line-height: 1.45;
}
.kc-paper-frame,
iframe.kc-paper-frame,
embed.kc-paper-frame {
  display: block;
  width: 100%;
  height: min(78vh, 900px);
  min-height: 480px;
  border: 1px solid rgba(26, 143, 227, 0.25);
  border-radius: 8px;
  background: #0d1f35;
}
.kc-paper-fallback {
  text-align: center;
  font-size: 0.82rem;
  color: #5a7a9a;
  margin: 0.5rem 0 0;
}
.kc-paper-fallback a {
  color: var(--kc-blue);
}
.kc-paper-missing {
  padding: 1rem 1.25rem;
  background: rgba(61, 24, 24, 0.55);
  border: 1px solid rgba(227, 90, 90, 0.35);
  border-radius: 8px;
  color: #f0d4d4;
  font-size: 0.9rem;
}
.kc-paper-missing code {
  color: #ffb4b4;
}
.kc-paper-missing a {
  color: var(--kc-blue);
}
.kc-paper-gallery .gallery,
.kc-paper-gallery .grid-wrap {
  width: 100%;
}
.kc-paper-gallery img {
  border-radius: 6px;
  border: 1px solid rgba(26, 143, 227, 0.2);
  background: #0d1f35;
}
.kc-footer {
  text-align: center;
  font-size: 0.85rem;
  color: #5a7a9a;
  padding: 1.5rem 0 0.5rem;
  border-top: 1px solid rgba(26, 143, 227, 0.15);
  margin-top: 2rem;
}
"""


def build_kingdom_css() -> str:
    """Solid black page background."""
    shell = f"""
html, body {{
  min-height: 100%;
  background: {KC_PAGE_BG} !important;
  background-color: {KC_PAGE_BG} !important;
}}
.gradio-container {{
  color: var(--kc-text) !important;
}}
"""
    return shell + _KINGDOM_CSS_SHELL + _foreground_layer_css()


KINGDOM_CSS = build_kingdom_css()

HERO_HTML = """
<div class="kc-hero">
  <h1>Kingdom Come</h1>
  <p>A topological foundation for emergent physics via the Hopf Fibration
     and gauged flux lattices — Aaron Michael Kinder's Theory of Everything.</p>
  <p style="font-size:0.95rem;margin-top:0.75rem;">
    <strong>Start here:</strong> Hopf Visualizer → <em>Classic Hopf</em> preset → Update visualization
  </p>
</div>
"""

def footer_html(build_label: str = "Kingdom Come v0.1.0") -> str:
    return f"""
<div class="kc-footer">
  {build_label} · Aaron's Hopf Fibration TOE ·
  <a href="https://huggingface.co/spaces/kinaar111/kingdom" target="_blank">Space</a> ·
  <a href="https://github.com/kinaar8340/kingdom_come" target="_blank">GitHub</a> ·
  <a href="https://huggingface.co/kinaar111" target="_blank">HF Profile</a>
</div>
"""