{% extends 'ndr_core/admin_views/base.html' %}

{% block content %}
    <h2><i class="fa-regular fa-palette"></i> Configure Color Palettes</h2>

    <!-- Options Bar -->
    <div class="d-flex flex-wrap align-items-center bg-light border rounded p-2 mb-3">
        <div class="me-auto">
            <a href="{% url 'ndr_core:create_palette' %}" class="btn btn-sm btn-primary m-1">
                <i class="fa-regular fa-palette"></i> Create Palette
            </a>
            <a href="{% url 'ndr_core:import_palette' %}" class="btn btn-sm btn-primary m-1">
                <i class="fa-regular fa-file-import"></i> Import Palette
            </a>
        </div>
        <div>
            <a href="{% url 'ndr_core:help_chapter' 'ui_style' %}" class="btn btn-sm btn-outline-secondary m-1">
                <i class="fa-regular fa-circle-info"></i> Help
            </a>
        </div>
    </div>

    <!-- Current Selection -->
    <div class="card bg-light mb-3">
        <div class="card-body py-2">
            <h6 class="mb-2">Current Palette: <a href="{% url 'ndr_core:view_palette' palette.pk %}">{{ palette.scheme_label }}</a></h6>
            <div class="d-flex align-items-center">
                <div class="border palette-display" style="background: {{ palette.background_color }};"></div>
                <div class="border palette-display" style="background: {{ palette.text_color }};"></div>
                <div class="border palette-display" style="background: {{ palette.button_color }};"></div>
                <div class="border palette-display" style="background: {{ palette.second_button_color }};"></div>
                <div class="border palette-display" style="background: {{ palette.link_color }};"></div>
                <div class="border palette-display" style="background: {{ palette.accent_color_1 }};"></div>
                <div class="border palette-display" style="background: {{ palette.accent_color_2 }};"></div>
            </div>
        </div>
    </div>

    <div class="card bg-light mb-3" style="max-height: 50vh;">
        <div class="overflow-auto">
            <div class="card-body">
                <h5 class="card-title">Configured Palettes</h5>
                <ul class="list-group">
                    {% for palette in palettes %}
                        <li class="list-group-item list-group-item-action d-flex py-2">
                            <p class="p-0 m-0 flex-grow-1">
                                <i class="fa-regular fa-palette"></i> <a href="{% url 'ndr_core:view_palette' palette.pk %}">{{ palette.scheme_label }}</a>
                            </p>

                            <div class="row" style="margin-right: 20px;">
                                <div class="border palette-display" style="background: {{ palette.background_color }};"></div>
                                <div class="border palette-display" style="background: {{ palette.text_color }};"></div>
                                <div class="border palette-display" style="background: {{ palette.button_color }};"></div>
                                <div class="border palette-display" style="background: {{ palette.second_button_color }};"></div>
                                <div class="border palette-display" style="background: {{ palette.link_color }};"></div>
                                <div class="border palette-display" style="background: {{ palette.accent_color_1 }};"></div>
                                <div class="border palette-display" style="background: {{ palette.accent_color_2 }};"></div>
                            </div>

                            <p class="p-0 m-0">
                                <div style="white-space: nowrap;">
                                    <a href="{% url 'ndr_core:edit_palette' palette.pk %}" class="btn btn-sm btn-secondary">
                                        <i class="fa-regular fa-pen-to-square"></i>
                                    </a>
                                    <a href="{% url 'ndr_core:delete_palette' palette.pk %}" class="btn btn-sm btn-danger">
                                        <i class="fa-regular fa-delete-left"></i>
                                    </a>
                                    <a href="{% url 'ndr_core:export_palette' palette.pk %}" target="_blank" class="btn btn-sm btn-secondary">
                                        <i class="fa-regular fa-file-export"></i>
                                    </a>
                                </div>
                            </p>
                        </li>
                    {% endfor %}
                </ul>
            </div>
        </div>
    </div>

    {% if object %}
        <div class="card bg-light mb-3">
            <div class="card-body">
                <div class="d-flex justify-content-between align-items-center mb-3">
                    <h5 class="card-title mb-0">{{ object.scheme_label }}</h5>
                    <button class="btn btn-sm btn-outline-secondary" onclick="togglePreviewMode()">
                        <i class="fa-solid fa-adjust"></i> <span id="modeToggleText">Switch to Dark Mode</span>
                    </button>
                </div>

                <div class="container">
                    <div class="row">
                        <div class="col-3">Palette Name</div>
                        <div class="col">{{ object.scheme_name }} <small>(Used as primary key)</small></div>
                    </div>
                </div>

                <!-- Live Preview Section -->
                <div id="palettePreview" class="mt-4 p-4 rounded" style="background: {{ object.background_color }}; color: {{ object.text_color }}; transition: all 0.3s ease;">
                    <h3 style="color: {{ object.title_color }};">Live Preview</h3>
                    <p style="color: {{ object.text_color }};">This is how your text will look with this color palette. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

                    <!-- Brand Panel Preview -->
                    <div class="mt-3 p-3 rounded" style="background: {{ object.brand_panel_bg }}; color: {{ object.brand_panel_text }};">
                        <strong>Brand Panel</strong> - Used in UniBas brand style
                    </div>

                    <!-- Buttons -->
                    <div class="mt-3">
                        <h5 style="color: {{ object.title_color }};">Buttons</h5>
                        <button class="btn me-2" style="background: {{ object.button_color }}; color: {{ object.button_text_color }}; border-color: {{ object.button_border_color }};">Primary Button</button>
                        <button class="btn" style="background: {{ object.second_button_color }}; color: {{ object.second_button_text_color }}; border-color: {{ object.second_button_border_color }};">Secondary Button</button>
                    </div>

                    <!-- Links -->
                    <div class="mt-3">
                        <h5 style="color: {{ object.title_color }};">Links & Navigation</h5>
                        <p>
                            <a href="#" style="color: {{ object.link_color }};">Standard Link</a> |
                            <a href="#" style="color: {{ object.nav_link_color }};">Nav Link</a> |
                            <a href="#" style="color: {{ object.nav_active_color }}; font-weight: bold;">Active Nav Link</a>
                        </p>
                    </div>

                    <!-- Card Preview -->
                    <div class="mt-3">
                        <h5 style="color: {{ object.title_color }};">Card Example</h5>
                        <div class="card" style="background: {{ object.container_bg_color }}; border: 1px solid rgba(0,0,0,0.125);">
                            <div class="card-body">
                                <h6 class="card-title" style="color: {{ object.title_color }};">Card Title</h6>
                                <p class="card-text" style="color: {{ object.text_color }};">This is a sample card with your palette colors.</p>
                            </div>
                        </div>
                    </div>

                    <!-- Alerts -->
                    <div class="mt-3">
                        <h5 style="color: {{ object.title_color }};">Alerts</h5>
                        <div class="alert mb-2" style="background: {{ object.info_color }}; color: {{ object.text_color }}; border: 1px solid {{ object.info_color }};">
                            Info Alert
                        </div>
                        <div class="alert mb-2" style="background: {{ object.success_color }}; color: {{ object.text_color }}; border: 1px solid {{ object.success_color }};">
                            Success Alert
                        </div>
                        <div class="alert mb-2" style="background: {{ object.error_color }}; color: {{ object.text_color }}; border: 1px solid {{ object.error_color }};">
                            Error Alert
                        </div>
                    </div>

                    <!-- Form Fields -->
                    <div class="mt-3">
                        <h5 style="color: {{ object.title_color }};">Form Elements</h5>
                        <input type="text" class="form-control" placeholder="Sample input field" style="background: {{ object.form_field_bg }}; color: {{ object.form_field_fg }}; border-color: rgba(0,0,0,0.125);">
                    </div>

                    <!-- Tabs Preview -->
                    <div class="mt-3">
                        <h5 style="color: {{ object.title_color }};">Tabs</h5>
                        <ul class="nav nav-tabs">
                            <li class="nav-item">
                                <a class="nav-link" href="#" style="color: {{ object.tab_title_color }};">Tab 1</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link active" href="#" style="color: {{ object.tab_active_title_color }}; font-weight: bold; border-bottom: 2px solid {{ object.tab_active_title_color }};">Active Tab</a>
                            </li>
                        </ul>
                    </div>

                    <!-- Footer Preview -->
                    <div class="mt-4 p-3 rounded" style="background: {{ object.footer_bg }};">
                        <p class="mb-0">
                            <small>
                                <a href="#" style="color: {{ object.footer_link_color }};">Footer Link</a> |
                                <span style="color: {{ object.powered_by_color }};">Powered by NDR Core</span>
                            </small>
                        </p>
                    </div>

                    <!-- Accent Colors -->
                    <div class="mt-3">
                        <h5 style="color: {{ object.title_color }};">Accent Colors</h5>
                        <span class="badge me-2" style="background: {{ object.accent_color_1 }}; color: white;">Accent 1</span>
                        <span class="badge" style="background: {{ object.accent_color_2 }}; color: white;">Accent 2</span>
                    </div>
                </div>
            </div>
            <div class="card-footer text-center">
                {% if object.pk == palette.pk %}
                    <a href="{% url 'ndr_core:choose_palette' object.pk %}" role="button" class="btn btn-secondary disabled">This Palette is your Page Palette</a>
                    <a href="{% url 'ndr_core:choose_palette' object.pk %}" role="button" class="btn btn-warning">Regenerate</a>
                {% else %}
                    <a href="{% url 'ndr_core:choose_palette' object.pk %}" role="button" class="btn btn-warning">Set this Palette as your Page Palette</a>
                {% endif %}
            </div>
        </div>

        <script>
        let isDarkMode = false;
        const lightModeColors = {
            background: '{{ object.background_color }}',
            containerBg: '{{ object.container_bg_color }}',
            text: '{{ object.text_color }}',
            title: '{{ object.title_color }}',
            button: '{{ object.button_color }}',
            buttonText: '{{ object.button_text_color }}',
            buttonBorder: '{{ object.button_border_color }}',
            secondButton: '{{ object.second_button_color }}',
            secondButtonText: '{{ object.second_button_text_color }}',
            secondButtonBorder: '{{ object.second_button_border_color }}',
            link: '{{ object.link_color }}',
            navLink: '{{ object.nav_link_color }}',
            navActive: '{{ object.nav_active_color }}',
            tabTitle: '{{ object.tab_title_color }}',
            tabActiveTitle: '{{ object.tab_active_title_color }}',
            formFieldBg: '{{ object.form_field_bg }}',
            formFieldFg: '{{ object.form_field_fg }}',
            footerBg: '{{ object.footer_bg }}',
            footerLink: '{{ object.footer_link_color }}',
            poweredBy: '{{ object.powered_by_color }}',
            accent1: '{{ object.accent_color_1 }}',
            accent2: '{{ object.accent_color_2 }}',
            info: '{{ object.info_color }}',
            success: '{{ object.success_color }}',
            error: '{{ object.error_color }}',
            brandPanelBg: '{{ object.brand_panel_bg }}',
            brandPanelText: '{{ object.brand_panel_text }}'
        };

        const darkModeColors = {
            background: '{{ object.dark_background_color }}',
            containerBg: '{{ object.dark_container_bg_color }}',
            text: '{{ object.dark_text_color }}',
            title: '{{ object.dark_title_color }}',
            button: '{{ object.dark_button_color }}',
            buttonText: '{{ object.dark_button_text_color }}',
            buttonBorder: '{{ object.dark_button_border_color }}',
            secondButton: '{{ object.dark_second_button_color }}',
            secondButtonText: '{{ object.dark_second_button_text_color }}',
            secondButtonBorder: '{{ object.dark_second_button_border_color }}',
            link: '{{ object.dark_link_color }}',
            navLink: '{{ object.dark_nav_link_color }}',
            navActive: '{{ object.dark_nav_active_color }}',
            tabTitle: '{{ object.dark_tab_title_color }}',
            tabActiveTitle: '{{ object.dark_tab_active_title_color }}',
            formFieldBg: '{{ object.dark_form_field_bg }}',
            formFieldFg: '{{ object.dark_form_field_fg }}',
            footerBg: '{{ object.dark_footer_bg }}',
            footerLink: '{{ object.dark_footer_link_color }}',
            poweredBy: '{{ object.dark_powered_by_color }}',
            accent1: '{{ object.dark_accent_color_1 }}',
            accent2: '{{ object.dark_accent_color_2 }}',
            info: '{{ object.dark_info_color }}',
            success: '{{ object.dark_success_color }}',
            error: '{{ object.dark_error_color }}',
            brandPanelBg: '{{ object.dark_brand_panel_bg }}',
            brandPanelText: '{{ object.dark_brand_panel_text }}'
        };

        function togglePreviewMode() {
            isDarkMode = !isDarkMode;
            const colors = isDarkMode ? darkModeColors : lightModeColors;
            const preview = document.getElementById('palettePreview');
            const modeText = document.getElementById('modeToggleText');

            // Update main background and text
            preview.style.background = colors.background;
            preview.style.color = colors.text;

            // Update all elements
            preview.querySelectorAll('h3, h5').forEach(el => el.style.color = colors.title);
            preview.querySelectorAll('p:not(.card-text)').forEach(el => el.style.color = colors.text);

            // Update brand panel
            const brandPanel = preview.querySelector('[style*="brand_panel"]');
            if (brandPanel) {
                brandPanel.style.background = colors.brandPanelBg;
                brandPanel.style.color = colors.brandPanelText;
            }

            // Update buttons
            const buttons = preview.querySelectorAll('button.btn');
            if (buttons[0]) {
                buttons[0].style.background = colors.button;
                buttons[0].style.color = colors.buttonText;
                buttons[0].style.borderColor = colors.buttonBorder;
            }
            if (buttons[1]) {
                buttons[1].style.background = colors.secondButton;
                buttons[1].style.color = colors.secondButtonText;
                buttons[1].style.borderColor = colors.secondButtonBorder;
            }

            // Update links
            const links = preview.querySelectorAll('a');
            if (links[0]) links[0].style.color = colors.link;
            if (links[1]) links[1].style.color = colors.navLink;
            if (links[2]) links[2].style.color = colors.navActive;

            // Update card
            const card = preview.querySelector('.card');
            if (card) {
                card.style.background = colors.containerBg;
                card.querySelector('.card-title').style.color = colors.title;
                card.querySelector('.card-text').style.color = colors.text;
            }

            // Update alerts
            const alerts = preview.querySelectorAll('.alert');
            if (alerts[0]) {
                alerts[0].style.background = colors.info;
                alerts[0].style.color = colors.text;
            }
            if (alerts[1]) {
                alerts[1].style.background = colors.success;
                alerts[1].style.color = colors.text;
            }
            if (alerts[2]) {
                alerts[2].style.background = colors.error;
                alerts[2].style.color = colors.text;
            }

            // Update form fields
            const input = preview.querySelector('input');
            if (input) {
                input.style.background = colors.formFieldBg;
                input.style.color = colors.formFieldFg;
            }

            // Update tabs
            const tabs = preview.querySelectorAll('.nav-link');
            if (tabs[0]) tabs[0].style.color = colors.tabTitle;
            if (tabs[1]) {
                tabs[1].style.color = colors.tabActiveTitle;
                tabs[1].style.borderBottomColor = colors.tabActiveTitle;
            }

            // Update footer
            const footer = preview.querySelector('[style*="footer_bg"]');
            if (footer) {
                footer.style.background = colors.footerBg;
                footer.querySelector('a').style.color = colors.footerLink;
                footer.querySelector('span').style.color = colors.poweredBy;
            }

            // Update accent badges
            const badges = preview.querySelectorAll('.badge');
            if (badges[0]) badges[0].style.background = colors.accent1;
            if (badges[1]) badges[1].style.background = colors.accent2;

            // Update button text
            modeText.textContent = isDarkMode ? 'Switch to Light Mode' : 'Switch to Dark Mode';
        }
        </script>
    {% endif %}

    <div class="alert alert-info small" role="alert">
        <i class="fa-regular fa-circle-info"></i>
        Colors Palettes define how your page is colored. You can use existing palettes or create your own.
    </div>

{% endblock %}