import re

with open("app/shared/frontend/base.html", "r") as f:
    content = f.read()

# Update root variables with RGB versions for glassmorphism
if "--bg-card-rgb" not in content:
    content = content.replace(
        "--bg-card: #ffffff;",
        "--bg-card: #ffffff;\n            --bg-card-rgb: 255, 255, 255;"
    )
    content = content.replace(
        "--bg-card: #2c3034;",
        "--bg-card: #2c3034;\n            --bg-card-rgb: 44, 48, 52;"
    )

# Update CSS for .global-bottom-bar
old_bottom_bar_css = """        .global-bottom-bar {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            z-index: var(--bottom-bar-zindex);
            background: var(--bg-card);
            border-top: 1px solid rgba(0, 0, 0, 0.08);
            box-shadow: 0 -8px 20px rgba(0, 0, 0, 0.06);
            min-height: var(--bottom-bar-height);
            padding: 0.35rem 1rem calc(0.35rem + env(safe-area-inset-bottom, 0px));
            transform: translateY(calc(100% + 12px));
            opacity: 0;
            transition: transform 0.3s ease, opacity 0.25s ease;
        }"""
new_bottom_bar_css = """        .global-bottom-bar {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            z-index: var(--bottom-bar-zindex);
            background: rgba(var(--bg-card-rgb), 0.85); /* Glassmorphism */
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border-top: 1px solid rgba(var(--text-primary-rgb), 0.1);
            box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.08);
            border-top-left-radius: 16px;
            border-top-right-radius: 16px;
            min-height: var(--bottom-bar-height);
            padding: 0.5rem 1rem calc(0.5rem + env(safe-area-inset-bottom, 0px));
            transform: translateY(calc(100% + 12px));
            opacity: 0;
            transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
        }"""
content = content.replace(old_bottom_bar_css, new_bottom_bar_css)

# Ensure --text-primary-rgb exists
if "--text-primary-rgb" not in content:
    content = content.replace(
        "--text-primary: #2c3e50;",
        "--text-primary: #2c3e50;\n            --text-primary-rgb: 44, 62, 80;"
    )
    content = content.replace(
        "--text-primary: #f8f9fa;",
        "--text-primary: #f8f9fa;\n            --text-primary-rgb: 248, 249, 250;"
    )

# Fix Count Line CSS
old_count_line_css = """        .global-bottom-bar .bb-count-line {
            flex: 1;
            background: var(--accent-light);
            color: var(--text-primary);
            border-radius: 10px;
            border: 1px solid rgba(0, 0, 0, 0.08);
            padding: 0.45rem 0.75rem;
            font-size: 0.84rem;
            font-weight: 600;
            line-height: 1.35;
            white-space: nowrap;
            overflow-x: auto;
            scrollbar-width: thin;
            display: flex;
            align-items: center;
            gap: 0.4rem;
        }"""
new_count_line_css = """        .global-bottom-bar .bb-count-line {
            flex: 1;
            background: transparent;
            color: var(--text-primary);
            padding: 0 0.25rem;
            font-size: 0.84rem;
            font-weight: 600;
            line-height: 1.35;
            white-space: nowrap;
            overflow-x: auto;
            scrollbar-width: none; /* Cleaner look without scrollbar */
            display: flex;
            align-items: center;
            gap: 0.6rem;
        }
        .global-bottom-bar .bb-count-line::-webkit-scrollbar {
            display: none;
        }"""
content = content.replace(old_count_line_css, new_count_line_css)

# Fix Chip CSS
old_chip_css = """        .global-bottom-bar .bb-chip {
            border: 1px solid rgba(0, 0, 0, 0.1);
            background: var(--bg-card);
            color: var(--text-primary);
            border-radius: 999px;
            padding: 0.2rem 0.6rem;
            font-size: 0.79rem;
            font-weight: 700;
            line-height: 1.2;
            cursor: pointer;
            flex: 0 0 auto;
        }"""
new_chip_css = """        .global-bottom-bar .bb-chip {
            border: 1px solid rgba(var(--text-primary-rgb), 0.1);
            background: var(--accent-light);
            color: var(--text-primary);
            border-radius: 999px;
            padding: 0.35rem 0.85rem;
            font-size: 0.8rem;
            font-weight: 600;
            line-height: 1.2;
            cursor: pointer;
            flex: 0 0 auto;
            display: inline-flex;
            align-items: center;
            gap: 0.35rem;
            box-shadow: 0 1px 3px rgba(0,0,0,0.04);
            transition: all 0.2s ease;
        }"""
content = content.replace(old_chip_css, new_chip_css)

old_chip_hover = """        .global-bottom-bar .bb-chip:hover,
        .global-bottom-bar .bb-chip.is-active {
            border-color: var(--accent);
            color: var(--accent);
        }"""
new_chip_hover = """        .global-bottom-bar .bb-chip:hover {
            transform: translateY(-1px);
            box-shadow: 0 3px 8px rgba(0,0,0,0.08);
            border-color: rgba(var(--text-primary-rgb), 0.2);
        }
        .global-bottom-bar .bb-chip.is-active {
            background: var(--accent);
            color: white;
            border-color: var(--accent);
            box-shadow: 0 4px 12px rgba(15, 76, 117, 0.3);
        }
        [data-bs-theme="dark"] .global-bottom-bar .bb-chip.is-active {
            color: #fff;
        }"""
content = content.replace(old_chip_hover, new_chip_hover)

# Toggle styling
old_toggle_css = """        .global-bottom-bar .bb-sheet-toggle {
            border: 1px solid rgba(0, 0, 0, 0.1);
            background: var(--accent-light);
            color: var(--text-primary);
            border-radius: 10px;
            padding: 0.42rem 0.7rem;
            font-size: 0.82rem;
            font-weight: 700;
            line-height: 1.2;
            display: inline-flex;
            align-items: center;
            gap: 0.45rem;
        }"""
new_toggle_css = """        .global-bottom-bar .bb-sheet-toggle {
            border: 1px solid rgba(var(--text-primary-rgb), 0.1);
            background: transparent;
            color: var(--text-primary);
            border-radius: 50%;
            width: 36px;
            height: 36px;
            padding: 0;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 1.1rem;
            transition: all 0.2s ease;
        }
        .global-bottom-bar .bb-sheet-toggle:hover {
            background: var(--accent-light);
            transform: translateY(-1px);
        }
        .global-bottom-bar .bb-sheet-toggle span { display: none; }"""
content = content.replace(old_toggle_css, new_toggle_css)

# Adjust inner sheet panel styling
old_sheet_inner = """        .global-bottom-bar .bb-sheet-inner {
            background: var(--bg-card);
            border: 1px solid rgba(0, 0, 0, 0.08);
            border-radius: 12px;
            display: grid;
            grid-template-columns: 150px minmax(0, 1fr);
            min-height: 210px;
            max-height: min(50vh, 420px);
            overflow: hidden;
        }"""
new_sheet_inner = """        .global-bottom-bar .bb-sheet-inner {
            background: var(--bg-card);
            border: 1px solid rgba(var(--text-primary-rgb), 0.1);
            border-radius: 14px;
            display: grid;
            grid-template-columns: 160px minmax(0, 1fr);
            min-height: 240px;
            max-height: min(52vh, 420px);
            overflow: hidden;
            box-shadow: inset 0 2px 10px rgba(0,0,0,0.02);
            margin-top: 0.5rem;
        }"""
content = content.replace(old_sheet_inner, new_sheet_inner)

old_side_tabs = """        .global-bottom-bar .bb-side-tabs {
            border-right: 1px solid rgba(0, 0, 0, 0.08);
            background: var(--accent-light);
            padding: 0.45rem;
            display: grid;
            gap: 0.35rem;
            align-content: start;
        }"""
new_side_tabs = """        .global-bottom-bar .bb-side-tabs {
            border-right: 1px solid rgba(var(--text-primary-rgb), 0.08);
            background: rgba(var(--text-primary-rgb), 0.03);
            padding: 0.75rem 0.5rem;
            display: grid;
            gap: 0.4rem;
            align-content: start;
        }"""
content = content.replace(old_side_tabs, new_side_tabs)


old_tab_btn = """        .global-bottom-bar .bb-tab-btn {
            border: 1px solid transparent;
            background: transparent;
            color: var(--text-secondary);
            border-radius: 8px;
            text-align: left;
            font-size: 0.82rem;
            font-weight: 700;
            padding: 0.35rem 0.5rem;
            line-height: 1.2;
        }

        .global-bottom-bar .bb-tab-btn.is-active {
            border-color: var(--accent);
            color: var(--accent);
            background: var(--bg-card);
        }"""
new_tab_btn = """        .global-bottom-bar .bb-tab-btn {
            border: 1px solid transparent;
            background: transparent;
            color: var(--text-secondary);
            border-radius: 8px;
            text-align: left;
            font-size: 0.85rem;
            font-weight: 600;
            padding: 0.5rem 0.75rem;
            line-height: 1.3;
            transition: all 0.2s ease;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        .global-bottom-bar .bb-tab-btn i {
            font-size: 1rem;
            opacity: 0.7;
        }
        .global-bottom-bar .bb-tab-btn:hover {
            background: rgba(var(--text-primary-rgb), 0.05);
            color: var(--text-primary);
        }

        .global-bottom-bar .bb-tab-btn.is-active {
            background: var(--bg-card);
            color: var(--accent);
            box-shadow: 0 2px 6px rgba(0,0,0,0.06);
            font-weight: 700;
        }
        .global-bottom-bar .bb-tab-btn.is-active i {
            opacity: 1;
            color: var(--accent);
        }"""
content = content.replace(old_tab_btn, new_tab_btn)

old_tab_content = """        .global-bottom-bar .bb-tab-content {
            padding: 0.65rem 0.8rem;
            overflow: auto;
        }

        .global-bottom-bar .bb-tab-title {
            font-size: 0.9rem;
            font-weight: 800;
            color: var(--text-primary);
            margin-bottom: 0.45rem;
        }

        .global-bottom-bar .bb-tab-list {
            list-style: none;
            margin: 0;
            padding: 0;
            display: grid;
            gap: 0.35rem;
        }

        .global-bottom-bar .bb-tab-list li {
            border-left: 3px solid var(--accent);
            background: var(--accent-light);
            border-radius: 6px;
            padding: 0.38rem 0.55rem;
            font-size: 0.81rem;
            line-height: 1.3;
            color: var(--text-primary);
        }"""
new_tab_content = """        .global-bottom-bar .bb-tab-content {
            padding: 1.2rem;
            overflow: auto;
        }

        .global-bottom-bar .bb-tab-title {
            font-size: 1.1rem;
            font-weight: 700;
            color: var(--text-primary);
            margin-bottom: 1rem;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .global-bottom-bar .bb-tab-list {
            list-style: none;
            margin: 0;
            padding: 0;
            display: grid;
            gap: 0.6rem;
        }

        .global-bottom-bar .bb-tab-list li {
            border-left: 4px solid var(--accent);
            background: var(--accent-light);
            border-radius: 6px 8px 8px 6px;
            padding: 0.75rem 1rem;
            font-size: 0.88rem;
            line-height: 1.4;
            color: var(--text-primary);
            box-shadow: 0 1px 3px rgba(0,0,0,0.03);
            transition: transform 0.2s ease;
        }
        .global-bottom-bar .bb-tab-list li:hover {
            transform: translateX(2px);
        }"""
content = content.replace(old_tab_content, new_tab_content)

old_detail_line = """        .global-bottom-bar .bb-detail-line {
            margin-top: 0.35rem;
            background: var(--bg-card);
            border: 1px solid rgba(0, 0, 0, 0.08);
            border-radius: 8px;
            padding: 0.35rem 0.6rem;
            font-size: 0.8rem;
            color: var(--text-secondary);
            white-space: nowrap;
            overflow-x: auto;
            scrollbar-width: thin;
        }"""
new_detail_line = """        .global-bottom-bar .bb-detail-line {
            margin-top: 0.5rem;
            background: transparent;
            padding: 0 0.5rem;
            font-size: 0.82rem;
            color: var(--text-secondary);
            white-space: nowrap;
            overflow-x: auto;
            scrollbar-width: none;
            transition: opacity 0.2s ease;
        }
        .global-bottom-bar.is-expanded .bb-detail-line {
            opacity: 0;
            pointer-events: none;
            position: absolute;
        }"""
content = content.replace(old_detail_line, new_detail_line)

# Now fix the markup icons
old_markup = """<div id="globalBottomBar" class="global-bottom-bar" hidden>
    <div class="bb-header">
        <div id="bbCountLine" class="bb-count-line" role="status" aria-live="polite">
            <button class="bb-chip" type="button" data-bb-key="timer">Timer: 0</button>
            <button class="bb-chip" type="button" data-bb-key="calls">Opkald: 0</button>
            <button class="bb-chip" type="button" data-bb-key="mail">Mail: 0</button>
            <button class="bb-chip" type="button" data-bb-key="alerts">Alerts: 0</button>
            <button class="bb-chip" type="button" data-bb-key="reminders">Reminders: 0</button>
        </div>
        <button id="bbSheetToggle" class="bb-sheet-toggle" type="button" aria-expanded="false" aria-controls="bbSheetPanel">
            Info
            <i class="bi bi-chevron-up" aria-hidden="true"></i>
        </button>
    </div>
    <div id="bbCountDetail" class="bb-detail-line" role="status" aria-live="polite">Klik pa en kategori for detaljer</div>
    <div id="bbSheetPanel" class="bb-sheet-panel" aria-hidden="true">
        <div class="bb-sheet-inner">
            <div class="bb-side-tabs" role="tablist" aria-label="Bundbar kategorier">
                <button class="bb-tab-btn is-active" type="button" data-bb-tab="timer" role="tab" aria-selected="true">Timer</button>
                <button class="bb-tab-btn" type="button" data-bb-tab="calls" role="tab" aria-selected="false">Opkald</button>
                <button class="bb-tab-btn" type="button" data-bb-tab="mail" role="tab" aria-selected="false">Mail</button>
                <button class="bb-tab-btn" type="button" data-bb-tab="alerts" role="tab" aria-selected="false">Alerts</button>
                <button class="bb-tab-btn" type="button" data-bb-tab="reminders" role="tab" aria-selected="false">Reminders</button>
            </div>
            <div class="bb-tab-content" role="tabpanel" aria-live="polite">
                <div id="bbTabTitle" class="bb-tab-title">Timer</div>
                <ul id="bbTabList" class="bb-tab-list">
                    <li>Venter pa data...</li>
                </ul>
            </div>
        </div>
    </div>
</div>"""

new_markup = """<div id="globalBottomBar" class="global-bottom-bar" hidden>
    <div class="bb-header">
        <div id="bbCountLine" class="bb-count-line" role="status" aria-live="polite">
            <button class="bb-chip" type="button" data-bb-key="timer"><i class="bi bi-clock-history"></i> <span class="bb-chip-text">Timer: 0</span></button>
            <button class="bb-chip" type="button" data-bb-key="calls"><i class="bi bi-telephone"></i> <span class="bb-chip-text">Opkald: 0</span></button>
            <button class="bb-chip" type="button" data-bb-key="mail"><i class="bi bi-envelope"></i> <span class="bb-chip-text">Mail: 0</span></button>
            <button class="bb-chip" type="button" data-bb-key="alerts"><i class="bi bi-exclamation-triangle"></i> <span class="bb-chip-text">Alerts: 0</span></button>
            <button class="bb-chip" type="button" data-bb-key="reminders"><i class="bi bi-bell"></i> <span class="bb-chip-text">Reminders: 0</span></button>
        </div>
        <button id="bbSheetToggle" class="bb-sheet-toggle" type="button" aria-expanded="false" aria-controls="bbSheetPanel" aria-label="Toggle detaljer">
            <span>Info</span>
            <i class="bi bi-chevron-up" aria-hidden="true"></i>
        </button>
    </div>
    <div id="bbCountDetail" class="bb-detail-line" role="status" aria-live="polite"><i class="bi bi-info-circle me-1 opacity-75"></i> Klik på en kategori for at se detaljer</div>
    <div id="bbSheetPanel" class="bb-sheet-panel" aria-hidden="true">
        <div class="bb-sheet-inner">
            <div class="bb-side-tabs" role="tablist" aria-label="Bundbar kategorier">
                <button class="bb-tab-btn is-active" type="button" data-bb-tab="timer" role="tab" aria-selected="true"><i class="bi bi-clock-history"></i> Timer</button>
                <button class="bb-tab-btn" type="button" data-bb-tab="calls" role="tab" aria-selected="false"><i class="bi bi-telephone"></i> Opkald</button>
                <button class="bb-tab-btn" type="button" data-bb-tab="mail" role="tab" aria-selected="false"><i class="bi bi-envelope"></i> Mail</button>
                <button class="bb-tab-btn" type="button" data-bb-tab="alerts" role="tab" aria-selected="false"><i class="bi bi-exclamation-triangle"></i> Alerts</button>
                <button class="bb-tab-btn" type="button" data-bb-tab="reminders" role="tab" aria-selected="false"><i class="bi bi-bell"></i> Reminders</button>
            </div>
            <div class="bb-tab-content" role="tabpanel" aria-live="polite">
                <div id="bbTabTitle" class="bb-tab-title"><i class="bi bi-clock-history me-1 text-accent"></i> <span class="bb-tab-title-text">Timer</span></div>
                <ul id="bbTabList" class="bb-tab-list">
                    <li>Venter på data...</li>
                </ul>
            </div>
        </div>
    </div>
</div>"""
content = content.replace(old_markup, new_markup)

with open("app/shared/frontend/base.html", "w") as f:
    f.write(content)