{% extends "base.html" %}

{% block title %}{{ branding.name }} · {{ t('ui.account.title') }}{% endblock %}

{% block content %}
<div class="chat-layout-container container">
    <style>
        {{ branding.css_variables | safe }}

        .account-shell {
            background: linear-gradient(
                180deg,
                color-mix(in srgb, var(--brand-primary-color) 6%, white) 0%,
                rgba(255, 255, 255, 0.98) 24%
            );
            border: 1px solid color-mix(in srgb, var(--brand-primary-color) 12%, white);
            border-radius: 1.25rem;
            overflow: hidden;
            box-shadow: 0 24px 48px rgba(15, 42, 68, 0.08);
        }

        .account-menu {
            background:
                radial-gradient(
                    circle at top left,
                    color-mix(in srgb, var(--brand-primary-color) 11%, white) 0%,
                    transparent 52%
                ),
                linear-gradient(
                    180deg,
                    color-mix(in srgb, white 91%, var(--brand-primary-color) 9%) 0%,
                    color-mix(in srgb, white 97%, var(--brand-primary-color) 3%) 100%
                );
            backdrop-filter: blur(10px);
            height: 100%;
            position: relative;
        }

        .account-menu::after {
            content: "";
            position: absolute;
            inset: 1rem 0.9rem auto;
            height: 1px;
            background: linear-gradient(
                90deg,
                color-mix(in srgb, var(--brand-primary-color) 30%, white) 0%,
                transparent 100%
            );
            opacity: 0.55;
            pointer-events: none;
        }

        .account-menu-header {
            background: color-mix(in srgb, white 84%, var(--brand-primary-color) 16%);
            border: 1px solid color-mix(in srgb, var(--brand-primary-color) 16%, white);
            border-radius: 1.05rem;
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
            padding: 1rem 1rem 0.95rem;
        }

        .account-menu-eyebrow {
            color: color-mix(in srgb, var(--brand-text-heading-color) 72%, white);
            font-size: 0.73rem;
            letter-spacing: 0.12em;
        }

        .account-menu-heading {
            color: var(--brand-text-heading-color);
            font-size: 1rem;
            font-weight: 700;
        }

        .account-menu-link {
            background: rgba(255, 255, 255, 0.46);
            border: 1px solid color-mix(in srgb, var(--brand-primary-color) 8%, white);
            border-radius: 1rem;
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
            color: var(--brand-text-heading-color);
            display: flex;
            align-items: center;
            gap: 0.75rem;
            font-weight: 600;
            justify-content: space-between;
            padding: 0.9rem 1rem;
            text-decoration: none;
            transition: transform 0.18s ease-in-out, background 0.18s ease-in-out, border-color 0.18s ease-in-out, box-shadow 0.18s ease-in-out;
        }

        .account-menu-link-main {
            display: inline-flex;
            align-items: center;
            gap: 0.8rem;
            min-width: 0;
        }

        .account-menu-link-icon {
            align-items: center;
            background: color-mix(in srgb, white 72%, var(--brand-primary-color) 28%);
            border: 1px solid color-mix(in srgb, var(--brand-primary-color) 18%, white);
            border-radius: 0.8rem;
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
            display: inline-flex;
            font-size: 0.96rem;
            height: 2.2rem;
            justify-content: center;
            width: 2.2rem;
        }

        .account-menu-link-label {
            min-width: 0;
        }

        .account-menu-link-arrow {
            color: color-mix(in srgb, var(--brand-text-heading-color) 58%, white);
            font-size: 0.9rem;
            opacity: 0.72;
            transform: translateX(0);
            transition: transform 0.18s ease-in-out, opacity 0.18s ease-in-out;
        }

        .account-menu-link:hover {
            background: color-mix(in srgb, var(--brand-primary-color) 10%, white);
            border-color: color-mix(in srgb, var(--brand-primary-color) 26%, white);
            box-shadow: 0 12px 26px rgba(15, 42, 68, 0.07);
            color: var(--brand-text-heading-color);
            transform: translateY(-1px);
        }

        .account-menu-link:hover .account-menu-link-arrow {
            opacity: 1;
            transform: translateX(2px);
        }

        .account-menu-link.is-active {
            background: linear-gradient(
                135deg,
                color-mix(in srgb, var(--brand-primary-color) 14%, white) 0%,
                color-mix(in srgb, var(--brand-primary-color) 6%, white) 100%
            );
            border-color: color-mix(in srgb, var(--brand-primary-color) 28%, white);
            box-shadow: 0 16px 32px rgba(15, 42, 68, 0.09);
            color: var(--brand-text-heading-color);
        }

        .account-menu-link.is-active .account-menu-link-icon {
            background: color-mix(in srgb, white 48%, var(--brand-primary-color) 52%);
            border-color: color-mix(in srgb, var(--brand-primary-color) 32%, white);
        }

        .account-menu-link.is-active .account-menu-link-arrow {
            opacity: 1;
        }

        .account-panel {
            background: rgba(255, 255, 255, 0.94);
            min-height: 100%;
        }

        .account-section-card {
            background: rgba(255, 255, 255, 0.96);
            border: 1px solid color-mix(in srgb, var(--brand-primary-color) 12%, white);
            border-radius: 1rem;
            box-shadow: 0 12px 30px rgba(15, 42, 68, 0.05);
        }

        .account-header-link {
            color: inherit;
            text-decoration: none;
        }

        .account-header-link:hover,
        .account-header-link:focus {
            color: inherit;
            text-decoration: none;
            opacity: 0.92;
        }

        .account-tag {
            background: color-mix(in srgb, var(--brand-secondary-color) 12%, white);
            border: 1px solid color-mix(in srgb, var(--brand-secondary-color) 24%, white);
            border-radius: 999px;
            color: var(--brand-text-heading-color);
            display: inline-flex;
            align-items: center;
            gap: 0.4rem;
            font-size: 0.82rem;
            font-weight: 600;
            padding: 0.4rem 0.7rem;
        }

        .token-toolbar-card,
        .token-table-card {
            border: 1px solid color-mix(in srgb, var(--brand-primary-color) 12%, white);
            border-radius: 1rem;
            background: rgba(255, 255, 255, 0.98);
        }

        .account-surface {
            border: 1px solid color-mix(in srgb, var(--brand-primary-color) 10%, white);
            background: color-mix(in srgb, white 96%, var(--brand-primary-color) 4%);
        }

        .token-table th {
            font-size: 0.78rem;
            letter-spacing: 0.04em;
            text-transform: uppercase;
            color: var(--brand-text-heading-color);
        }

        .token-table td {
            vertical-align: middle;
        }

        .token-name-cell {
            min-width: 140px;
        }

        .token-date-cell {
            min-width: 92px;
            white-space: nowrap;
        }

        .token-status-cell {
            min-width: 84px;
        }

        .token-actions {
            display: flex;
            justify-content: flex-end;
            gap: 0.5rem;
            flex-wrap: wrap;
            min-width: 104px;
        }

        .token-created-code {
            background: color-mix(in srgb, white 94%, var(--brand-primary-color) 6%);
            border: 1px solid color-mix(in srgb, var(--brand-primary-color) 14%, white);
            border-radius: 0.9rem;
            font-size: 0.95rem;
            padding: 1rem;
            white-space: pre-wrap;
            word-break: break-word;
        }

        .mcp-snippet-code {
            background: color-mix(in srgb, white 95%, var(--brand-primary-color) 5%);
            border: 1px solid color-mix(in srgb, var(--brand-primary-color) 14%, white);
            border-radius: 0.9rem;
            color: var(--brand-text-heading-color);
            font-size: 0.88rem;
            margin: 0;
            min-height: 100%;
            overflow-x: auto;
            padding: 1rem;
            white-space: pre;
        }

        .mcp-server-url {
            background: color-mix(in srgb, white 95%, var(--brand-primary-color) 5%);
            border: 1px solid color-mix(in srgb, var(--brand-primary-color) 14%, white);
            border-radius: 0.9rem;
            color: var(--brand-text-heading-color);
            font-size: 0.92rem;
            padding: 0.85rem 1rem;
            word-break: break-all;
        }
    </style>

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">

    <div id="company-section"
         class="company-section d-flex flex-column flex-md-row justify-content-md-between align-items-center px-3 py-2"
         style="{{ branding.header_style }}">

        <div class="d-flex align-items-center mb-2 mb-md-0">
            <a href="{{ url_for('chat', company_short_name=company_short_name) }}"
               class="account-header-link"
               style="{{ branding.primary_text_style }}">
                {{ branding.name }}
            </a>
            <span class="ms-2" data-bs-toggle="tooltip" data-bs-placement="bottom"
                  title="Powered by IAToolkit">
                <i class="bi bi-info-circle" style="color: {{ branding.header_text_color }}; opacity: 0.7; font-size: 0.9rem;"></i>
            </span>
        </div>

        <div class="d-flex flex-column flex-md-row align-items-center">
            <span style="{{ branding.secondary_text_style }}"
                  class="d-none d-md-inline mb-2 mb-md-0">
                {{ user_identifier }}
            </span>

            <div class="vr mx-3 d-none d-md-block"></div>

            <div class="d-flex align-items-center">
                <a href="{{ url_for('chat', company_short_name=company_short_name) }}"
                   class="ms-3 action-icon-style"
                   title="{{ t('ui.account.back_to_chat') }}"
                   style="color: {{ branding.header_text_color }};">
                    <i class="bi bi-chat-square-text"></i>
                </a>
                <span class="ms-3 action-icon-style"
                      title="{{ t('ui.account.title') }}"
                      style="color: {{ branding.header_text_color }}; opacity: 0.95;">
                    <i class="bi bi-person-circle"></i>
                </span>
            </div>
        </div>
    </div>

    <div class="account-shell mt-3">
        <div class="row g-0">
            <div class="col-xl-2 col-lg-3 border-end">
                <div class="account-menu p-4">
                    <div class="account-menu-header mb-4">
                        <div class="account-menu-eyebrow text-uppercase fw-semibold mb-2">{{ t('ui.account.title') }}</div>
                    </div>

                    <nav class="nav flex-column gap-2">
                        <a href="{{ url_for('account', company_short_name=company_short_name, section='general') }}"
                           class="account-menu-link {% if active_section == 'general' %}is-active{% endif %}">
                            <span class="account-menu-link-main">
                                <span class="account-menu-link-icon">
                                    <i class="bi bi-sliders"></i>
                                </span>
                                <span class="account-menu-link-label">{{ t('ui.account.menu_general') }}</span>
                            </span>
                            <i class="bi bi-chevron-right account-menu-link-arrow"></i>
                        </a>
                        <a href="{{ url_for('account', company_short_name=company_short_name, section='mcp_tokens') }}"
                           class="account-menu-link {% if active_section == 'mcp_tokens' %}is-active{% endif %}">
                            <span class="account-menu-link-main">
                                <span class="account-menu-link-icon">
                                    <i class="bi bi-key"></i>
                                </span>
                                <span class="account-menu-link-label">{{ t('ui.account.menu_mcp_tokens') }}</span>
                            </span>
                            <i class="bi bi-chevron-right account-menu-link-arrow"></i>
                        </a>
                    </nav>
                </div>
            </div>

            <div class="col-xl-10 col-lg-9">
                <div class="account-panel p-4 p-lg-4 p-xl-5">
                    {% if active_section == 'general' %}
                        <div class="account-section-card p-4 p-lg-5">
                            <div class="d-flex flex-column flex-md-row justify-content-md-between align-items-md-start gap-3 mb-4">
                                <div>
                                    <h2 class="mb-2">{{ t('ui.account.general_title') }}</h2>
                                    <p class="text-muted mb-0">{{ t('ui.account.general_description') }}</p>
                                </div>
                            </div>

                            <div class="row g-3">
                                <div class="col-md-6">
                                    <div class="account-surface rounded-4 p-4 h-100">
                                        <div class="small text-uppercase fw-semibold text-muted mb-2">{{ t('ui.account.general_profile_label') }}</div>
                                        <div class="fw-semibold mb-1">{{ user_identifier }}</div>
                                        <div class="text-muted small">{{ branding.name }}</div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="account-surface rounded-4 p-4 h-100">
                                        <div class="small text-uppercase fw-semibold text-muted mb-2">{{ t('ui.account.general_tokens_label') }}</div>
                                        <div class="fw-semibold mb-2">{{ t('ui.account.general_tokens_title') }}</div>
                                        <div class="text-muted small mb-3">{{ t('ui.account.general_tokens_description') }}</div>
                                        <a href="{{ url_for('account', company_short_name=company_short_name, section='mcp_tokens') }}"
                                           class="btn btn-branded-secondary btn-sm">
                                            {{ t('ui.account.general_tokens_action') }}
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    {% else %}
                        <div class="account-section-card p-4 p-lg-5 mb-4">
                            <div class="d-flex flex-column flex-md-row justify-content-md-between align-items-md-start gap-3 mb-4">
                                <div>
                                    <h2 class="mb-2">{{ t('ui.account.mcp_tokens_list_title') }}</h2>
                                    <p class="text-muted mb-0">{{ t('ui.account.mcp_tokens_create_description') }}</p>
                                </div>
                                <span class="account-tag">
                                    <i class="bi bi-key"></i>
                                    {{ tokens|length }} {{ t('ui.account.mcp_tokens_count_suffix') }}
                                </span>
                            </div>

                            <div class="token-toolbar-card p-4 mb-4">
                                <form method="post" class="row g-3 align-items-end">
                                    <input type="hidden" name="action" value="create_token">
                                    <input type="hidden" name="section" value="mcp_tokens">
                                    <div class="col-xl-6">
                                        <label for="token-name" class="form-label">{{ t('ui.account.mcp_token_name') }}</label>
                                        <input type="text"
                                               class="form-control"
                                               id="token-name"
                                               name="name"
                                               maxlength="120"
                                               placeholder="{{ t('ui.account.mcp_token_name_placeholder') }}"
                                               required>
                                    </div>
                                    <div class="col-sm-6 col-xl-3">
                                        <label for="token-expiry-days" class="form-label">{{ t('ui.account.mcp_token_expiry_days') }}</label>
                                        <select class="form-select" id="token-expiry-days" name="expires_in_days">
                                            <option value="7">7</option>
                                            <option value="30" selected>30</option>
                                            <option value="90">90</option>
                                            <option value="180">180</option>
                                            <option value="365">365</option>
                                        </select>
                                    </div>
                                    <div class="col-sm-6 col-xl-3">
                                        <button type="submit" class="btn btn-branded-primary w-100">{{ t('ui.account.mcp_token_create_button') }}</button>
                                    </div>
                                </form>
                            </div>

                            <div class="token-table-card p-3 p-lg-4">
                                {% if tokens %}
                                    <div class="table-responsive">
                                        <table class="table table-hover align-middle token-table mb-0">
                                            <thead>
                                            <tr>
                                                <th>{{ t('ui.account.mcp_token_name') }}</th>
                                                <th>{{ t('ui.account.mcp_token_created_at') }}</th>
                                                <th>{{ t('ui.account.mcp_token_expires_at') }}</th>
                                                <th>{{ t('ui.account.mcp_token_last_used_at') }}</th>
                                                <th>{{ t('ui.account.mcp_token_status') }}</th>
                                                <th class="text-end">{{ t('ui.account.mcp_token_actions') }}</th>
                                            </tr>
                                            </thead>
                                            <tbody>
                                            {% for token in tokens %}
                                                <tr>
                                                    <td class="token-name-cell">
                                                        <div class="fw-semibold">{{ token.name }}</div>
                                                    </td>
                                                    <td class="token-date-cell">
                                                        {% if token.created_at %}
                                                            <span class="local-datetime" data-datetime="{{ token.created_at }}">{{ token.created_at }}</span>
                                                        {% else %}
                                                            -
                                                        {% endif %}
                                                    </td>
                                                    <td class="token-date-cell">
                                                        {% if token.expires_at %}
                                                            <span class="local-datetime" data-datetime="{{ token.expires_at }}">{{ token.expires_at }}</span>
                                                        {% else %}
                                                            -
                                                        {% endif %}
                                                    </td>
                                                    <td class="token-date-cell">
                                                        {% if token.last_used_at %}
                                                            <span class="local-datetime" data-datetime="{{ token.last_used_at }}">{{ token.last_used_at }}</span>
                                                        {% else %}
                                                            -
                                                        {% endif %}
                                                    </td>
                                                    <td class="token-status-cell">
                                                        {% if token.revoked_at %}
                                                            <span class="badge text-bg-secondary">{{ t('ui.account.mcp_token_status_revoked') }}</span>
                                                        {% elif token.is_active %}
                                                            <span class="badge text-bg-success">{{ t('ui.account.mcp_token_status_active') }}</span>
                                                        {% else %}
                                                            <span class="badge text-bg-warning">{{ t('ui.account.mcp_token_status_expired') }}</span>
                                                        {% endif %}
                                                    </td>
                                                    <td class="text-end">
                                                        <div class="token-actions">
                                                            {% if not token.revoked_at %}
                                                                <form method="post" class="d-inline">
                                                                    <input type="hidden" name="action" value="revoke_token">
                                                                    <input type="hidden" name="section" value="mcp_tokens">
                                                                    <input type="hidden" name="token_id" value="{{ token.id }}">
                                                                    <button type="submit" class="btn btn-sm btn-outline-danger">{{ t('ui.account.mcp_token_revoke_button') }}</button>
                                                                </form>
                                                            {% endif %}
                                                        </div>
                                                    </td>
                                                </tr>
                                            {% endfor %}
                                            </tbody>
                                        </table>
                                    </div>
                                {% else %}
                                    <div class="text-muted small py-3">{{ t('ui.account.mcp_tokens_empty') }}</div>
                                {% endif %}
                            </div>
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>

{% if created_token %}
    <div class="modal fade" id="created-token-modal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content border-0 shadow">
                <div class="modal-header" style="{{ branding.header_style }}">
                    <h5 class="modal-title" style="{{ branding.primary_text_style }}">{{ t('ui.account.mcp_token_created_title') }}</h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body p-4">
                    <p class="text-muted mb-3">{{ t('ui.account.mcp_token_created_help') }}</p>
                    <div class="small text-uppercase fw-semibold text-muted mb-2">{{ t('ui.account.mcp_token_created_token_label') }}</div>
                    <code id="created-token-value" class="d-block token-created-code mb-4">{{ created_token }}</code>
                    <div class="small text-uppercase fw-semibold text-muted mb-2">{{ t('ui.account.mcp_connection_server_url') }}</div>
                    <div id="created-token-server-url" class="mcp-server-url mb-4">{{ mcp_server_url }}</div>
                    <div class="d-flex justify-content-between align-items-center gap-3 mb-2">
                        <div class="small text-uppercase fw-semibold text-muted">{{ t('ui.account.mcp_token_created_json_label') }}</div>
                        <button type="button"
                                class="btn btn-outline-secondary btn-sm"
                                data-copy-target="created-token-connection-snippet"
                                data-copy-success="{{ t('ui.account.mcp_connection_json_copy_success') }}"
                                data-copy-error="{{ t('ui.account.mcp_connection_copy_error') }}">
                            {{ t('ui.account.mcp_connection_copy_json_button') }}
                        </button>
                    </div>
                    <pre id="created-token-connection-snippet" class="mcp-snippet-code">{{ created_token_connection_snippet }}</pre>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">{{ t('ui.common.close') }}</button>
                    <button type="button" id="copy-created-token-button" class="btn btn-branded-primary">
                        {{ t('ui.account.mcp_token_copy_button') }}
                    </button>
                </div>
            </div>
        </div>
    </div>
{% endif %}
{% endblock %}

{% block scripts %}
    {{ super() }}
    <script>
        async function copyTextWithFeedback(value, successMessage, errorMessage) {
            if (!value) {
                toastr.error(errorMessage);
                return;
            }

            try {
                await navigator.clipboard.writeText(value);
                toastr.success(successMessage);
            } catch (error) {
                toastr.error(errorMessage);
            }
        }

        document.querySelectorAll('.local-datetime').forEach(function (element) {
            const rawValue = element.dataset.datetime || '';
            if (!rawValue) {
                return;
            }

            const parsed = new Date(rawValue);
            if (Number.isNaN(parsed.getTime())) {
                return;
            }

            element.textContent = parsed.toLocaleString(undefined, {
                year: 'numeric',
                month: '2-digit',
                day: '2-digit'
            });
            element.title = rawValue;
        });

        {% if created_token %}
            const createdTokenModalElement = document.getElementById('created-token-modal');
            if (createdTokenModalElement) {
                const createdTokenModal = new bootstrap.Modal(createdTokenModalElement);
                createdTokenModal.show();
            }

            const copyCreatedTokenButton = document.getElementById('copy-created-token-button');
            if (copyCreatedTokenButton) {
                copyCreatedTokenButton.addEventListener('click', async function () {
                    const value = (document.getElementById('created-token-value') || {}).textContent || '';
                    await copyTextWithFeedback(
                        value,
                        "{{ t('ui.account.mcp_token_copy_success') }}",
                        "{{ t('ui.account.mcp_token_copy_error') }}"
                    );
                });
            }

            document.querySelectorAll('[data-copy-target]').forEach(function (button) {
                button.addEventListener('click', async function () {
                    const target = document.getElementById(button.dataset.copyTarget || '');
                    const value = target ? (target.textContent || '').trim() : '';
                    await copyTextWithFeedback(
                        value,
                        button.dataset.copySuccess || "{{ t('ui.account.mcp_connection_json_copy_success') }}",
                        button.dataset.copyError || "{{ t('ui.account.mcp_connection_copy_error') }}"
                    );
                });
            });
        {% endif %}
    </script>
{% endblock %}