{% extends "common/base.html" %}
{% from "components/header.html" import header %}

{% block title %}Settings - DocuPulse{% endblock %}

{% block content %}
{{ header(
    title="Settings",
    description="Manage your docupulse settings",
    button_text="",
    button_url="",
    icon="fa-cog"
) }}

<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card shadow-sm">
                <div class="card-header">
                    <h5 class="card-title mb-0">Theme Colors</h5>
                </div>
                <div class="card-body">
                    <form id="colorSettingsForm" method="POST" action="{{ url_for('main.update_colors') }}">
                        <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
                        
                        <!-- Primary Color Section -->
                        <div class="mb-5">
                            <h6 class="mb-3">Primary Color</h6>
                            <div class="row g-4">
                                <div class="col-md-4">
                                    <div class="card h-100">
                                        <div class="card-body">
                                            <label class="form-label">Main Color</label>
                                            <div class="d-flex align-items-center gap-3 mb-3">
                                                <input type="color" 
                                                       class="form-control form-control-color d-none" 
                                                       id="primaryColor" 
                                                       name="primary_color"
                                                       value="{{ primary_color }}"
                                                       data-original-value="{{ primary_color }}">
                                                <button type="button" 
                                                        class="btn btn-outline-secondary" 
                                                        onclick="document.getElementById('primaryColor').click()">
                                                    <i class="fas fa-palette me-1"></i> Choose Color
                                                </button>
                                            </div>
                                            <small class="text-muted">Used for primary buttons, links, and accents</small>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-8">
                                    <div class="card h-100">
                                        <div class="card-body">
                                            <label class="form-label">Derived Colors</label>
                                            <div class="d-flex gap-3" id="primaryDerivedColors">
                                                <div class="text-center">
                                                    <div class="color-preview p-3 rounded shadow-sm mb-2" 
                                                         data-color-type="base"
                                                         style="background-color: var(--primary-color); width: 80px; height: 80px;">
                                                    </div>
                                                    <small class="d-block text-muted">Base</small>
                                                </div>
                                                <div class="text-center">
                                                    <div class="color-preview p-3 rounded shadow-sm mb-2" 
                                                         data-color-type="light"
                                                         style="background-color: var(--primary-light); width: 80px; height: 80px;">
                                                    </div>
                                                    <small class="d-block text-muted">Light</small>
                                                </div>
                                                <div class="text-center">
                                                    <div class="color-preview p-3 rounded shadow-sm mb-2" 
                                                         data-color-type="bg-light"
                                                         style="background-color: var(--primary-bg-light); width: 80px; height: 80px;">
                                                    </div>
                                                    <small class="d-block text-muted">Background</small>
                                                </div>
                                                <div class="text-center">
                                                    <div class="color-preview p-3 rounded shadow-sm mb-2" 
                                                         data-color-type="opacity"
                                                         style="background-color: var(--primary-opacity-15); width: 80px; height: 80px;">
                                                    </div>
                                                    <small class="d-block text-muted">Opacity 15%</small>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Secondary Color Section -->
                        <div class="mb-5">
                            <h6 class="mb-3">Secondary Color</h6>
                            <div class="row g-4">
                                <div class="col-md-4">
                                    <div class="card h-100">
                                        <div class="card-body">
                                            <label class="form-label">Main Color</label>
                                            <div class="d-flex align-items-center gap-3 mb-3">
                                                <input type="color" 
                                                       class="form-control form-control-color d-none" 
                                                       id="secondaryColor" 
                                                       name="secondary_color"
                                                       value="{{ secondary_color }}"
                                                       data-original-value="{{ secondary_color }}">
                                                <button type="button" 
                                                        class="btn btn-outline-secondary" 
                                                        onclick="document.getElementById('secondaryColor').click()">
                                                    <i class="fas fa-palette me-1"></i> Choose Color
                                                </button>

                                            </div>
                                            <small class="text-muted">Used for secondary elements and highlights</small>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-8">
                                    <div class="card h-100">
                                        <div class="card-body">
                                            <label class="form-label">Derived Colors</label>
                                            <div class="d-flex gap-3" id="secondaryDerivedColors">
                                                <div class="text-center">
                                                    <div class="color-preview p-3 rounded shadow-sm mb-2" 
                                                         data-color-type="base"
                                                         style="background-color: var(--secondary-color); width: 80px; height: 80px;">
                                                    </div>
                                                    <small class="d-block text-muted">Base</small>
                                                </div>
                                                <div class="text-center">
                                                    <div class="color-preview p-3 rounded shadow-sm mb-2" 
                                                         data-color-type="light"
                                                         style="background-color: var(--secondary-light); width: 80px; height: 80px;">
                                                    </div>
                                                    <small class="d-block text-muted">Light</small>
                                                </div>
                                                <div class="text-center">
                                                    <div class="color-preview p-3 rounded shadow-sm mb-2" 
                                                         data-color-type="opacity"
                                                         style="background-color: var(--secondary-opacity-15); width: 80px; height: 80px;">
                                                    </div>
                                                    <small class="d-block text-muted">Opacity 15%</small>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="d-flex justify-content-end gap-2">
                            <button type="button" class="btn btn-secondary" data-bs-toggle="modal" data-bs-target="#resetColorsModal">
                                <i class="fas fa-undo me-1"></i> Reset to Defaults
                            </button>
                            <button type="submit" class="btn btn-primary">
                                <i class="fas fa-save me-1"></i> Save Colors
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Reset Colors Confirmation Modal -->
<div id="resetColorsModal" class="modal fade" tabindex="-1" aria-labelledby="resetColorsModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="resetColorsModalLabel">Reset Colors</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="d-flex align-items-center gap-3 mb-3">
                    <i class="fas fa-exclamation-triangle text-warning" style="font-size: 2rem;"></i>
                    <div>
                        <h6 class="mb-1">Are you sure you want to reset the colors?</h6>
                        <p class="text-muted mb-0">This will restore the default theme colors.</p>
                    </div>
                </div>
                <div class="alert alert-warning">
                    <i class="fas fa-info-circle me-2"></i>
                    The primary color will be reset to #16767b and the secondary color to #741b5f.
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <form method="POST" action="{{ url_for('main.reset_colors') }}" class="d-inline">
                    <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
                    <button type="submit" class="btn btn-warning">
                        <i class="fas fa-undo me-1"></i> Reset Colors
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const primaryColorInput = document.getElementById('primaryColor');
    const secondaryColorInput = document.getElementById('secondaryColor');

    // Color manipulation functions
    function hexToRgb(hex) {
        const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
        return result ? {
            r: parseInt(result[1], 16),
            g: parseInt(result[2], 16),
            b: parseInt(result[3], 16)
        } : null;
    }

    function rgbToHex(r, g, b) {
        return '#' + [r, g, b].map(x => {
            const hex = x.toString(16);
            return hex.length === 1 ? '0' + hex : hex;
        }).join('');
    }

    function lightenColor(color, amount) {
        const rgb = hexToRgb(color);
        if (!rgb) return color;
        
        return rgbToHex(
            Math.min(255, Math.round(rgb.r + (255 - rgb.r) * amount)),
            Math.min(255, Math.round(rgb.g + (255 - rgb.g) * amount)),
            Math.min(255, Math.round(rgb.b + (255 - rgb.b) * amount))
        );
    }

    function darkenColor(color, amount) {
        const rgb = hexToRgb(color);
        if (!rgb) return color;
        
        return rgbToHex(
            Math.max(0, Math.round(rgb.r * (1 - amount))),
            Math.max(0, Math.round(rgb.g * (1 - amount))),
            Math.max(0, Math.round(rgb.b * (1 - amount)))
        );
    }

    function updateAllColors(color, isPrimary) {
        const prefix = isPrimary ? 'primary' : 'secondary';
        
        // Calculate derived colors
        const lightColor = lightenColor(color, 0.15);
        const bgLightColor = lightenColor(color, 0.9);
        const opacity15 = color + '26'; // 15% opacity in hex

        // Calculate chart colors
        const chartColors = {
            base: color,
            light: lightenColor(color, 0.2),
            lighter: lightenColor(color, 0.4),
            lightest: lightenColor(color, 0.6),
            pale: lightenColor(color, 0.8)
        };

        // Update CSS variables for the entire website
        document.documentElement.style.setProperty(`--${prefix}-color`, color);
        document.documentElement.style.setProperty(`--${prefix}-light`, lightColor);
        document.documentElement.style.setProperty(`--${prefix}-bg-light`, bgLightColor);
        document.documentElement.style.setProperty(`--${prefix}-opacity-15`, opacity15);

        // Update chart color variables
        document.documentElement.style.setProperty(`--chart-${prefix}`, chartColors.base);
        document.documentElement.style.setProperty(`--chart-${prefix}-light`, chartColors.light);
        document.documentElement.style.setProperty(`--chart-${prefix}-lighter`, chartColors.lighter);
        document.documentElement.style.setProperty(`--chart-${prefix}-lightest`, chartColors.lightest);
        document.documentElement.style.setProperty(`--chart-${prefix}-pale`, chartColors.pale);

        // Update derived colors in the preview section
        const derivedColorsSection = document.getElementById(`${prefix}DerivedColors`);
        if (derivedColorsSection) {
            const previews = derivedColorsSection.querySelectorAll('.color-preview');
            previews.forEach(preview => {
                const colorType = preview.getAttribute('data-color-type');
                switch (colorType) {
                    case 'base':
                        preview.style.backgroundColor = color;
                        break;
                    case 'light':
                        preview.style.backgroundColor = lightColor;
                        break;
                    case 'bg-light':
                        preview.style.backgroundColor = bgLightColor;
                        break;
                    case 'opacity':
                        preview.style.backgroundColor = opacity15;
                        break;
                }
            });
        }

        // Update the color input value
        if (isPrimary) {
            primaryColorInput.value = color;
        } else {
            secondaryColorInput.value = color;
        }
    }

    // Event listeners for color inputs
    primaryColorInput.addEventListener('input', () => {
        updateAllColors(primaryColorInput.value, true);
    });

    secondaryColorInput.addEventListener('input', () => {
        updateAllColors(secondaryColorInput.value, false);
    });

    // Initialize colors from database values
    function initializeColors() {
        // Reset inputs to original database values
        primaryColorInput.value = primaryColorInput.dataset.originalValue;
        secondaryColorInput.value = secondaryColorInput.dataset.originalValue;

        // Update all color previews
        updateAllColors(primaryColorInput.value, true);
        updateAllColors(secondaryColorInput.value, false);
    }

    // Initialize colors when the page loads
    initializeColors();
});
</script>
{% endblock %}