@extends('backEnd.layouts.master')

@section('title', 'Global AI Settings')



@section('content')

<div class="container-fluid py-3">

    <div class="mb-3">

        <h4 class="fw-bold mb-0"><i class="fas fa-robot me-2 text-success"></i>Global AI Settings</h4>

        <small class="text-muted">API key &amp; model — Create Order “AI Fill” ও future auto-reply এখান থেকে key use করবে</small>

    </div>



    <form method="POST" action="{{ route('admin.ai.config.update') }}" id="aiConfigForm">

        @csrf

        <div class="card shadow-sm border-0 mb-3">

            <div class="card-body">

                <div class="form-check form-switch mb-4">

                    <input class="form-check-input" type="checkbox" name="enabled" value="1" id="aiEnabled" {{ $config['enabled'] === '1' ? 'checked' : '' }}>

                    <label class="form-check-label fw-semibold" for="aiEnabled">Enable AI</label>

                </div>

                <div class="row g-3">

                    <div class="col-md-4">

                        <label class="form-label fw-semibold">Provider</label>

                        <select name="provider" id="aiProvider" class="form-select">

                            <option value="gemini" {{ $config['provider'] === 'gemini' ? 'selected' : '' }}>Google Gemini (recommended)</option>

                            <option value="openai" {{ $config['provider'] === 'openai' ? 'selected' : '' }}>OpenAI</option>

                            <option value="anthropic" {{ $config['provider'] === 'anthropic' ? 'selected' : '' }}>Anthropic</option>

                        </select>

                        <small class="text-muted d-block mt-1" id="providerHint">Gemini Flash — Bangla order parse er jonno bhalo</small>

                    </div>

                    <div class="col-md-4">
                        <label class="form-label fw-semibold">Model</label>
                        <select id="aiModelSelect" class="form-select mb-2"></select>
                        <input type="text" id="aiModelCustom" class="form-control d-none"
                               placeholder="Custom model ID"
                               value="{{ $config['model'] }}">
                        <input type="hidden" name="model" id="aiModelValue" value="{{ $config['model'] }}">
                        <small class="text-muted d-block mt-1" id="modelHint">Recommended: gemini-2.5-flash</small>
                        @if(($config['provider'] ?? '') === 'gemini' && ($config['model'] ?? '') === 'gemini-2.0-flash')
                        <small class="text-warning d-block">2.0 Flash deprecated — 2.5 Flash select করুন।</small>
                        @endif
                    </div>

                    <div class="col-md-4">

                        <label class="form-label fw-semibold">API Key</label>

                        <input type="password" name="api_key" class="form-control" value="{{ $config['api_key'] }}" placeholder="Google AI Studio key…">

                        <small class="text-muted d-block mt-1">

                            <a href="https://aistudio.google.com/apikey" target="_blank" rel="noopener">Get Gemini key</a>

                        </small>

                    </div>

                    <div class="col-12">

                        <label class="form-label fw-semibold">Chat / Auto-reply System Prompt</label>

                        <textarea name="system_prompt" class="form-control" rows="3">{{ $config['system_prompt'] }}</textarea>

                    </div>

                    <div class="col-12">

                        <div class="form-check form-switch">

                            <input class="form-check-input" type="checkbox" name="auto_reply" value="1" id="aiAuto" {{ $config['auto_reply'] === '1' ? 'checked' : '' }}>

                            <label class="form-check-label" for="aiAuto">Auto-reply to inbox messages (when integrated)</label>

                        </div>

                    </div>

                </div>

                <div id="aiTestResult" class="alert d-none mt-3 mb-0" role="alert"></div>

                <div class="mt-3 d-flex flex-wrap align-items-center gap-2">

                    <button type="submit" class="btn btn-success"><i class="fas fa-save me-1"></i> Save AI Settings</button>

                    <button type="button" class="btn btn-outline-primary" id="aiTestBtn">
                        <i class="fas fa-plug me-1"></i> Test API Connection
                    </button>

                    <a href="{{ route('admin.social.dashboard') }}" class="btn btn-outline-secondary">Back</a>

                    <a href="{{ route('admin.orders.create') }}" class="btn btn-outline-primary"><i class="fas fa-magic me-1"></i> Try AI Fill on Create Order</a>

                    <span id="aiTestStatus" class="small text-muted ms-1"></span>

                </div>

            </div>

        </div>



        <div class="card shadow-sm border-0">

            <div class="card-header bg-white fw-semibold">

                <i class="fas fa-paste me-1 text-primary"></i> Order Message Parser (Create Order → AI Fill)

            </div>

            <div class="card-body">

                <p class="text-muted small mb-3">

                    FB/WhatsApp order message paste করলে AI এই prompt follow করে JSON বানায় — নাম, ফোন, ঠিকানা, product আলাদা করে।

                    Create Order page-এ আলাদা <strong>AI Fill</strong> box আছে; key/settings এখান থেকে নেয়।

                </p>

                <label class="form-label fw-semibold">Order Parser Prompt</label>

                <textarea name="order_parser_prompt" class="form-control font-monospace small" rows="12">{{ $config['order_parser_prompt'] ?: app(\App\Services\OrderMessageParserService::class)->defaultParserPrompt() }}</textarea>

                <small class="text-muted">খালি save করলে default prompt use হবে।</small>

            </div>

        </div>

    </form>



    @if(filled($config['order_parser_prompt']))

    <form method="POST" action="{{ route('admin.ai.config.reset-parser-prompt') }}" class="mt-2">

        @csrf

        <button type="submit" class="btn btn-sm btn-outline-secondary">Reset parser prompt to default</button>

    </form>

    @endif

</div>

@endsection



@push('scripts')
<script>
const modelPresets = @json($modelPresets ?? []);
const currentModel = @json($config['model']);
const providerHints = {
    gemini: 'Gemini Flash — Bangla order parse er jonno bhalo',
    openai: 'OpenAI — GPT models',
    anthropic: 'Anthropic — Claude models',
};
const defaultModels = {
    gemini: @json(\App\Services\AiService::DEFAULT_GEMINI_MODEL),
    openai: 'gpt-4o-mini',
    anthropic: 'claude-3-5-haiku-20241022',
};

const providerEl = document.getElementById('aiProvider');
const modelSelectEl = document.getElementById('aiModelSelect');
const modelCustomEl = document.getElementById('aiModelCustom');
const modelValueEl = document.getElementById('aiModelValue');
const modelHintEl = document.getElementById('modelHint');

function syncModelValue() {
    const isCustom = modelSelectEl.value === '__custom__';
    modelCustomEl.classList.toggle('d-none', !isCustom);
    const value = isCustom ? modelCustomEl.value.trim() : modelSelectEl.value;
    modelValueEl.value = value || defaultModels[providerEl.value] || defaultModels.gemini;
}

function populateModelSelect(provider, selectedModel) {
    const presets = modelPresets[provider] || {};
    modelSelectEl.innerHTML = '';

    Object.entries(presets).forEach(([id, label]) => {
        const opt = document.createElement('option');
        opt.value = id;
        opt.textContent = label;
        if (id === selectedModel) opt.selected = true;
        modelSelectEl.appendChild(opt);
    });

    const customOpt = document.createElement('option');
    customOpt.value = '__custom__';
    customOpt.textContent = 'Custom model ID…';
    if (!presets[selectedModel] && selectedModel) customOpt.selected = true;
    modelSelectEl.appendChild(customOpt);

    if (customOpt.selected) {
        modelCustomEl.value = selectedModel;
    }

    modelHintEl.textContent = 'Recommended: ' + (defaultModels[provider] || defaultModels.gemini);
    syncModelValue();
}

providerEl?.addEventListener('change', function () {
    document.getElementById('providerHint').textContent = providerHints[this.value] || '';
    populateModelSelect(this.value, defaultModels[this.value] || defaultModels.gemini);
});

modelSelectEl?.addEventListener('change', syncModelValue);
modelCustomEl?.addEventListener('input', syncModelValue);

document.getElementById('aiConfigForm')?.addEventListener('submit', syncModelValue);

populateModelSelect(providerEl?.value || 'gemini', currentModel || defaultModels.gemini);

const aiTestBtn = document.getElementById('aiTestBtn');
const aiTestResult = document.getElementById('aiTestResult');
const aiTestStatus = document.getElementById('aiTestStatus');
const aiTestUrl = @json(route('admin.ai.config.test'));
const csrfToken = document.querySelector('meta[name="csrf-token"]')?.content || '';

function showAiTestResult(type, html) {
    if (!aiTestResult) return;
    aiTestResult.className = 'alert mt-3 mb-0 alert-' + type;
    aiTestResult.innerHTML = html;
    aiTestResult.classList.remove('d-none');
}

aiTestBtn?.addEventListener('click', function () {
    syncModelValue();

    const payload = {
        provider: providerEl?.value || 'gemini',
        api_key: document.querySelector('input[name="api_key"]')?.value || '',
        model: modelValueEl?.value || '',
    };

    aiTestBtn.disabled = true;
    const originalHtml = aiTestBtn.innerHTML;
    aiTestBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-1"></i> Testing…';
    if (aiTestStatus) {
        aiTestStatus.className = 'small text-muted ms-1';
        aiTestStatus.textContent = 'Connecting to AI provider…';
    }
    aiTestResult?.classList.add('d-none');

    fetch(aiTestUrl, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'Accept': 'application/json',
            'X-CSRF-TOKEN': csrfToken,
        },
        body: JSON.stringify(payload),
    })
        .then(function (response) {
            return response.json().then(function (data) {
                return { ok: response.ok, data: data };
            });
        })
        .then(function ({ ok, data }) {
            if (data.success) {
                const latency = data.latency_ms ? ' · ' + data.latency_ms + 'ms' : '';
                showAiTestResult('success',
                    '<strong><i class="fas fa-check-circle me-1"></i> ' + (data.message || 'Connected') + '</strong>'
                    + '<div class="small mt-1">Provider: <code>' + (data.provider || payload.provider) + '</code>'
                    + ' · Model: <code>' + (data.model || payload.model) + '</code>' + latency + '</div>'
                    + (data.text ? '<div class="small mt-1 mb-0">AI reply: <em>' + data.text + '</em></div>' : '')
                );
                if (aiTestStatus) {
                    aiTestStatus.className = 'small text-success ms-1';
                    aiTestStatus.textContent = 'Connection OK';
                }
                return;
            }

            showAiTestResult('danger',
                '<strong><i class="fas fa-times-circle me-1"></i> Connection failed</strong>'
                + '<div class="small mt-1 mb-0">' + (data.message || 'Unknown error') + '</div>'
            );
            if (aiTestStatus) {
                aiTestStatus.className = 'small text-danger ms-1';
                aiTestStatus.textContent = 'Failed';
            }
        })
        .catch(function () {
            showAiTestResult('danger',
                '<strong><i class="fas fa-times-circle me-1"></i> Request failed</strong>'
                + '<div class="small mt-1 mb-0">Network error — আবার try করুন।</div>'
            );
            if (aiTestStatus) {
                aiTestStatus.className = 'small text-danger ms-1';
                aiTestStatus.textContent = 'Error';
            }
        })
        .finally(function () {
            aiTestBtn.disabled = false;
            aiTestBtn.innerHTML = originalHtml;
        });
});
</script>
@endpush