{% extends "layouts/app.html" %}
{% from "components/card.html" import stat_card %}

{% block title %}Settings - LLM Monitor{% endblock %}

{% block main_content %}
<div class="space-y-8" x-data="settingsApp()">
    <!-- Page Title -->
    <div class="flex items-center justify-between flex-wrap gap-4">
        <div>
            <h1 class="text-3xl font-bold text-gray-900">Settings</h1>
            <p class="mt-2 text-gray-600">Configure pricing and application settings</p>
        </div>

        <div class="flex gap-2">
            <!-- Refresh Button -->
            <button onclick="window.location.reload()"
                    class="px-4 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 transition-colors flex items-center gap-2">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
                </svg>
                Refresh
            </button>
        </div>
    </div>

    <!-- Claude Code Status Line -->
    <div class="bg-white rounded-lg shadow-sm border border-gray-200">
        <div class="p-6 border-b border-gray-200">
            <div class="flex items-start justify-between">
                <div>
                    <h2 class="text-xl font-semibold text-gray-900">Claude Code Status Line</h2>
                    <p class="mt-1 text-sm text-gray-600">
                        Install a status line into Claude Code that shows today's cost, token usage, cache hit rate, and monthly spend — updated live.
                    </p>
                </div>
                <span class="ml-4 shrink-0 inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium bg-[#0770E3]/10 text-[#0770E3]">
                    One-click install
                </span>
            </div>
        </div>
        <div class="p-6"
             hx-get="/api/statusline/status"
             hx-trigger="load"
             hx-target="this"
             hx-swap="innerHTML">
            <div class="flex items-center gap-2 text-sm text-gray-500">
                <svg class="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24">
                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/>
                    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8z"/>
                </svg>
                Checking status…
            </div>
        </div>
    </div>

    <!-- Pricing Configuration Section -->
    <div class="bg-white rounded-lg shadow-sm border border-gray-200">
        <div class="p-6 border-b border-gray-200">
            <div class="flex items-start justify-between flex-wrap gap-4">
                <div>
                    <h2 class="text-xl font-semibold text-gray-900">Model Pricing Configuration</h2>
                    <p class="mt-1 text-sm text-gray-600">
                        Set custom pricing per million tokens for each model. Changes will be applied to all cost calculations.
                    </p>
                    <p class="mt-1 text-xs text-gray-500">
                        Models marked <span class="font-medium">In use</span> appear in your session data; the rest show built-in defaults.
                        <span x-show="syncedAt" x-cloak>Last synced from anthropic.com: <span x-text="formatSyncedAt()"></span>.</span>
                    </p>
                </div>
                <div class="flex flex-col items-end gap-1">
                    <button @click="syncPricing()"
                            :disabled="syncStatus === 'syncing'"
                            class="px-4 py-2 bg-[#0770E3] text-white rounded-lg hover:bg-[#0560c4] disabled:opacity-50 disabled:cursor-not-allowed transition-colors flex items-center gap-2 text-sm font-medium">
                        <svg class="w-4 h-4" :class="syncStatus === 'syncing' ? 'animate-spin' : ''" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
                        </svg>
                        <span x-text="syncStatus === 'syncing' ? 'Syncing…' : 'Sync prices from anthropic.com'"></span>
                    </button>
                    <span x-show="syncStatus === 'synced'" x-cloak class="text-xs text-green-600" x-text="syncMessage"></span>
                    <span x-show="syncStatus === 'error'" x-cloak class="text-xs text-red-600" x-text="syncMessage"></span>
                </div>
            </div>
        </div>

        <div class="p-6">
            <!-- Custom Pricing Notice -->
            <div x-show="hasCustomPricing" class="mb-6 bg-blue-50 border border-blue-200 rounded-lg p-4">
                <div class="flex items-start gap-3">
                    <svg class="w-5 h-5 text-blue-600 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                    </svg>
                    <div>
                        <p class="text-sm font-medium text-blue-800">Custom Pricing Active</p>
                        <p class="text-sm text-blue-700 mt-1">
                            You have <span x-text="Object.keys(customPricing).length"></span> model(s) with custom pricing configured.
                        </p>
                    </div>
                </div>
            </div>

            <!-- Models Grid -->
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                <template x-for="(pricing, modelId) in allPricing" :key="modelId">
                    <div class="border border-gray-200 rounded-lg p-4 hover:border-gray-300 transition-colors"
                         :class="customPricing[modelId] ? 'border-blue-300 bg-blue-50' : ''">
                        <div class="flex items-start justify-between mb-4">
                            <div class="flex-1">
                                <h3 class="font-medium text-gray-900" x-text="getModelDisplayName(modelId)"></h3>
                                <p class="text-xs text-gray-500 mt-1" x-text="modelId"></p>
                            </div>
                            <div class="flex items-center gap-2">
                                <span x-show="usedModels.includes(modelId)"
                                      class="inline-flex items-center px-2 py-1 rounded text-xs font-medium bg-green-100 text-green-800">
                                    In use
                                </span>
                                <span x-show="customPricing[modelId]"
                                      class="inline-flex items-center px-2 py-1 rounded text-xs font-medium bg-blue-100 text-blue-800">
                                    Custom
                                </span>
                                <button x-show="customPricing[modelId]"
                                        @click="resetModelPricing(modelId)"
                                        class="text-xs text-red-600 hover:text-red-800 font-medium">
                                    Reset to Default
                                </button>
                            </div>
                        </div>

                        <!-- Pricing Form -->
                        <div class="space-y-3">
                            <div>
                                <label class="block text-xs font-medium text-gray-700 mb-1">
                                    Input (per million tokens)
                                </label>
                                <div class="flex items-center gap-2">
                                    <span class="text-gray-500 text-sm">$</span>
                                    <input type="number"
                                           step="0.01"
                                           min="0"
                                           x-model="editablePricing[modelId].input_per_mtok"
                                           @change="updateModelPricing(modelId)"
                                           class="flex-1 rounded border-gray-300 border py-1.5 px-3 text-sm focus:ring-2 focus:ring-[#0770E3] focus:border-[#0770E3]">
                                </div>
                            </div>

                            <div>
                                <label class="block text-xs font-medium text-gray-700 mb-1">
                                    Output (per million tokens)
                                </label>
                                <div class="flex items-center gap-2">
                                    <span class="text-gray-500 text-sm">$</span>
                                    <input type="number"
                                           step="0.01"
                                           min="0"
                                           x-model="editablePricing[modelId].output_per_mtok"
                                           @change="updateModelPricing(modelId)"
                                           class="flex-1 rounded border-gray-300 border py-1.5 px-3 text-sm focus:ring-2 focus:ring-[#0770E3] focus:border-[#0770E3]">
                                </div>
                            </div>

                            <div>
                                <label class="block text-xs font-medium text-gray-700 mb-1">
                                    Cache Write (per million tokens)
                                </label>
                                <div class="flex items-center gap-2">
                                    <span class="text-gray-500 text-sm">$</span>
                                    <input type="number"
                                           step="0.01"
                                           min="0"
                                           x-model="editablePricing[modelId].cache_write_per_mtok"
                                           @change="updateModelPricing(modelId)"
                                           class="flex-1 rounded border-gray-300 border py-1.5 px-3 text-sm focus:ring-2 focus:ring-[#0770E3] focus:border-[#0770E3]">
                                </div>
                            </div>

                            <div>
                                <label class="block text-xs font-medium text-gray-700 mb-1">
                                    Cache Read (per million tokens)
                                </label>
                                <div class="flex items-center gap-2">
                                    <span class="text-gray-500 text-sm">$</span>
                                    <input type="number"
                                           step="0.01"
                                           min="0"
                                           x-model="editablePricing[modelId].cache_read_per_mtok"
                                           @change="updateModelPricing(modelId)"
                                           class="flex-1 rounded border-gray-300 border py-1.5 px-3 text-sm focus:ring-2 focus:ring-[#0770E3] focus:border-[#0770E3]">
                                </div>
                            </div>

                            <!-- Status Message -->
                            <div x-show="saveStatus[modelId]" class="text-xs">
                                <span x-show="saveStatus[modelId] === 'saving'"
                                      class="text-blue-600">Saving...</span>
                                <span x-show="saveStatus[modelId] === 'saved'"
                                      class="text-green-600">✓ Saved</span>
                                <span x-show="saveStatus[modelId] === 'error'"
                                      class="text-red-600">✗ Error saving</span>
                            </div>
                        </div>
                    </div>
                </template>
            </div>
        </div>
    </div>
</div>

<script>
function settingsApp() {
    return {
        allPricing: {{ pricing.all_pricing | tojson | safe }},
        customPricing: {{ pricing.custom_pricing | tojson | safe }},
        hasCustomPricing: {{ pricing.has_custom_pricing | lower }},
        usedModels: {{ pricing.used_models | default([]) | tojson | safe }},
        displayNames: {{ pricing.display_names | default({}) | tojson | safe }},
        syncedAt: {{ pricing.synced_at | default(None) | tojson | safe }},
        editablePricing: {},
        saveStatus: {},
        syncStatus: null,
        syncMessage: '',

        init() {
            // Initialize editable pricing with current values
            this.editablePricing = JSON.parse(JSON.stringify(this.allPricing));
        },

        getModelDisplayName(modelId) {
            return this.displayNames[modelId] || modelId;
        },

        formatSyncedAt() {
            if (!this.syncedAt) return '';
            const d = new Date(this.syncedAt);
            return isNaN(d) ? this.syncedAt : d.toLocaleString();
        },

        async syncPricing() {
            this.syncStatus = 'syncing';
            this.syncMessage = '';

            try {
                const response = await fetch('/api/settings/pricing/sync', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                });
                const data = await response.json();

                if (data.success) {
                    this.syncStatus = 'synced';
                    this.syncMessage = '✓ Synced ' + data.model_count + ' models — reloading…';
                    this.syncedAt = data.synced_at;
                    // Reload so all displayed defaults reflect the synced prices
                    setTimeout(() => window.location.reload(), 1200);
                } else {
                    this.syncStatus = 'error';
                    this.syncMessage = '✗ ' + (data.error || 'Sync failed');
                }
            } catch (error) {
                console.error('Error syncing pricing:', error);
                this.syncStatus = 'error';
                this.syncMessage = '✗ Sync failed — is this machine online?';
            }
        },

        async updateModelPricing(modelId) {
            const pricing = this.editablePricing[modelId];
            this.saveStatus[modelId] = 'saving';

            try {
                const response = await fetch('/api/settings/pricing/update', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({
                        model: modelId,
                        input_per_mtok: parseFloat(pricing.input_per_mtok),
                        output_per_mtok: parseFloat(pricing.output_per_mtok),
                        cache_write_per_mtok: parseFloat(pricing.cache_write_per_mtok),
                        cache_read_per_mtok: parseFloat(pricing.cache_read_per_mtok),
                    }),
                });

                const data = await response.json();

                if (data.success) {
                    this.saveStatus[modelId] = 'saved';
                    // Update custom pricing tracking
                    if (!this.customPricing[modelId]) {
                        this.customPricing[modelId] = pricing;
                        this.hasCustomPricing = true;
                    }
                    // Clear status after delay
                    setTimeout(() => {
                        if (this.saveStatus[modelId] === 'saved') {
                            this.saveStatus[modelId] = null;
                        }
                    }, 2000);
                } else {
                    this.saveStatus[modelId] = 'error';
                }
            } catch (error) {
                console.error('Error updating pricing:', error);
                this.saveStatus[modelId] = 'error';
            }
        },

        async resetModelPricing(modelId) {
            if (!confirm(`Reset pricing for ${this.getModelDisplayName(modelId)} to default values?`)) {
                return;
            }

            try {
                const response = await fetch('/api/settings/pricing/reset', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({
                        model: modelId,
                    }),
                });

                const data = await response.json();

                if (data.success) {
                    // Update editable pricing to default
                    this.editablePricing[modelId] = {...data.pricing};
                    // Remove from custom pricing tracking
                    delete this.customPricing[modelId];
                    this.hasCustomPricing = Object.keys(this.customPricing).length > 0;
                } else {
                    alert('Failed to reset pricing: ' + (data.error || 'Unknown error'));
                }
            } catch (error) {
                console.error('Error resetting pricing:', error);
                alert('Failed to reset pricing. Please try again.');
            }
        },
    };
}
</script>
{% endblock %}