@extends('common.layouts.app')

@section('title')
<title>AI & Bot Settings</title>
@endsection

@section('content')
@php
    $geminiEnabled = old('gemini_enabled', $setting->gemini_enabled ?? 1);
    $openaiEnabled = old('openai_enabled', $setting->openai_enabled ?? 1);
    $airaEnabled = old('aira_enabled', $setting->aira_enabled ?? 1);
@endphp

<style>
    .settings-card { border-radius: 12px; border: 1px solid #e2e8f0; background: #ffffff; }
    .form-control-custom { border-radius: 8px; border: 1px solid #cbd5e1; padding: 9px 13px; font-size: 14px; }
    .form-control-custom:focus { border-color: #ff5a00; box-shadow: 0 0 0 3px rgba(255, 90, 0, 0.12); }
    .bot-config-box { border: 1px solid #e2e8f0; border-radius: 10px; padding: 16px; background: #f8fafc; height: 100%; }
    .avatar-preview { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; border: 2px solid #e2e8f0; background: #fff; }
    .btn-save-settings { background: #ff5a00; border: none; color: #fff; font-weight: 600; border-radius: 8px; padding: 10px 22px; font-size: 14px; }
    .btn-save-settings:hover { background: #e04f00; color: #fff; }
    .bot-switch-box { border: 1px solid #e2e8f0; border-radius: 10px; padding: 12px 14px; background: #fff; display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 100%; }
    .bot-switch-title { font-size: 14px; font-weight: 800; color: #0f172a; margin-bottom: 2px; }
    .bot-switch-sub { font-size: 12px; color: #64748b; line-height: 1.35; }
    .form-check-input:checked { background-color: #ff5a00; border-color: #ff5a00; }
    .status-pill { font-size: 11px; font-weight: 800; padding: 3px 8px; border-radius: 999px; display: inline-flex; align-items: center; gap: 4px; }
    .status-on { background: #dcfce7; color: #166534; }
    .status-off { background: #fee2e2; color: #991b1b; }
</style>

<main class="app-main">
    <div class="app-content py-3">
        <div class="container-fluid">

            @if(session('success'))
                <div class="alert alert-success alert-dismissible fade show border-0 shadow-sm rounded-3 py-2 px-3 mb-3">
                    <i class="fa-solid fa-circle-check me-2"></i>{{ session('success') }}
                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                </div>
            @endif

            @if($errors->any())
                <div class="alert alert-danger border-0 shadow-sm rounded-3 py-2 px-3 mb-3">
                    <strong>সমস্যা হয়েছে:</strong>
                    @foreach($errors->all() as $error)
                        <div class="small">{{ $error }}</div>
                    @endforeach
                </div>
            @endif

            <div class="d-flex justify-content-between align-items-center mb-3">
                <div>
                    <h5 class="fw-bold mb-1 text-dark">AI Agent & Bot Control</h5>
                    
                </div>
                <a href="{{ route('admin.chat.index') }}" class="btn btn-outline-secondary btn-sm">
                    <i class="fa-solid fa-arrow-left"></i> ইনবক্স
                </a>
            </div>

            <div class="settings-card p-4">
                <form action="{{ route('admin.chat.settings.update') }}" method="POST" enctype="multipart/form-data">
                    @csrf

                    <div class="row g-3 mb-4 p-3 bg-light rounded-3 border">
                        <div class="col-md-4">
                            <div class="bot-switch-box">
                                <div>
                                    <div class="bot-switch-title">
                                        <i class="fa-solid fa-sparkles text-primary me-1"></i> Ms. Sumi
                                    </div>
                                    <div class="bot-switch-sub">Google Gemini AI</div>
                                    <span class="status-pill {{ $geminiEnabled ? 'status-on' : 'status-off' }}" id="geminiStatus">
                                        {{ $geminiEnabled ? 'ON' : 'OFF' }}
                                    </span>
                                </div>
                                <div class="form-check form-switch m-0">
                                    <input class="form-check-input bot-toggle" type="checkbox" role="switch" id="gemini_enabled" name="gemini_enabled" value="1" data-status="geminiStatus" {{ $geminiEnabled ? 'checked' : '' }}>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-4">
                            <div class="bot-switch-box">
                                <div>
                                    <div class="bot-switch-title">
                                        <i class="fa-solid fa-brain text-success me-1"></i> Ms. Tuli
                                    </div>
                                    <div class="bot-switch-sub">OpenAI ChatGPT</div>
                                    <span class="status-pill {{ $openaiEnabled ? 'status-on' : 'status-off' }}" id="openaiStatus">
                                        {{ $openaiEnabled ? 'ON' : 'OFF' }}
                                    </span>
                                </div>
                                <div class="form-check form-switch m-0">
                                    <input class="form-check-input bot-toggle" type="checkbox" role="switch" id="openai_enabled" name="openai_enabled" value="1" data-status="openaiStatus" {{ $openaiEnabled ? 'checked' : '' }}>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-4">
                            <div class="bot-switch-box">
                                <div>
                                    <div class="bot-switch-title">
                                        <i class="fa-solid fa-robot text-secondary me-1"></i> Ms. Aira
                                    </div>
                                    <div class="bot-switch-sub">Local FAQ Server</div>
                                    <span class="status-pill {{ $airaEnabled ? 'status-on' : 'status-off' }}" id="airaStatus">
                                        {{ $airaEnabled ? 'ON' : 'OFF' }}
                                    </span>
                                </div>
                                <div class="form-check form-switch m-0">
                                    <input class="form-check-input bot-toggle" type="checkbox" role="switch" id="aira_enabled" name="aira_enabled" value="1" data-status="airaStatus" {{ $airaEnabled ? 'checked' : '' }}>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="row g-3">
                        <div class="col-lg-4">
                            <div class="bot-config-box">
                                <div class="d-flex justify-content-between align-items-center mb-3 pb-2 border-bottom">
                                    <h6 class="fw-bold text-dark mb-0"><i class="fa-solid fa-sparkles text-primary me-1"></i> Gemini Agent</h6>
                                    @if($setting->sumi_avatar)
                                        <img src="{{ asset($setting->sumi_avatar) }}" class="avatar-preview" alt="Sumi">
                                    @endif
                                </div>

                                <div class="mb-3">
                                    <label class="form-label small fw-bold text-secondary mb-1">এজেন্টের নাম</label>
                                    <input type="text" name="sumi_name" class="form-control form-control-custom" value="{{ old('sumi_name', $setting->sumi_name ?? 'Ms. Sumi') }}" required>
                                </div>

                                <div class="mb-3">
                                    <label class="form-label small fw-bold text-secondary mb-1">প্রোফাইল পিকচার</label>
                                    <input type="file" name="sumi_avatar" class="form-control form-control-custom" accept="image/*">
                                </div>

                                <div class="mb-0">
                                    <label class="form-label small fw-bold text-secondary mb-1">সিস্টেম প্রম্পট</label>
                                    <textarea name="sumi_system_prompt" rows="5" class="form-control form-control-custom">{{ old('sumi_system_prompt', $setting->sumi_system_prompt ?? '') }}</textarea>
                                </div>
                            </div>
                        </div>

                        <div class="col-lg-4">
                            <div class="bot-config-box">
                                <div class="d-flex justify-content-between align-items-center mb-3 pb-2 border-bottom">
                                    <h6 class="fw-bold text-dark mb-0"><i class="fa-solid fa-brain text-success me-1"></i> OpenAI Agent</h6>
                                    @if($setting->openai_avatar)
                                        <img src="{{ asset($setting->openai_avatar) }}" class="avatar-preview" alt="OpenAI">
                                    @endif
                                </div>

                                <div class="mb-3">
                                    <label class="form-label small fw-bold text-secondary mb-1">এজেন্টের নাম</label>
                                    <input type="text" name="openai_name" class="form-control form-control-custom" value="{{ old('openai_name', $setting->openai_name ?? 'Ms. Tuli') }}" required>
                                </div>

                                <div class="mb-3">
                                    <label class="form-label small fw-bold text-secondary mb-1">প্রোফাইল পিকচার</label>
                                    <input type="file" name="openai_avatar" class="form-control form-control-custom" accept="image/*">
                                </div>

                                <div class="mb-0">
                                    <label class="form-label small fw-bold text-secondary mb-1">সিস্টেম প্রম্পট</label>
                                    <textarea name="openai_system_prompt" rows="5" class="form-control form-control-custom">{{ old('openai_system_prompt', $setting->openai_system_prompt ?? '') }}</textarea>
                                </div>
                            </div>
                        </div>

                        <div class="col-lg-4">
                            <div class="bot-config-box">
                                <div class="d-flex justify-content-between align-items-center mb-3 pb-2 border-bottom">
                                    <h6 class="fw-bold text-dark mb-0"><i class="fa-solid fa-robot text-secondary me-1"></i> Local Server Agent</h6>
                                    @if($setting->aira_avatar)
                                        <img src="{{ asset($setting->aira_avatar) }}" class="avatar-preview" alt="Aira">
                                    @endif
                                </div>

                                <div class="mb-3">
                                    <label class="form-label small fw-bold text-secondary mb-1">এজেন্টের নাম</label>
                                    <input type="text" name="aira_name" class="form-control form-control-custom" value="{{ old('aira_name', $setting->aira_name ?? 'Ms. Aira') }}" required>
                                </div>

                                <div class="mb-3">
                                    <label class="form-label small fw-bold text-secondary mb-1">প্রোফাইল পিকচার</label>
                                    <input type="file" name="aira_avatar" class="form-control form-control-custom" accept="image/*">
                                </div>

                                <div class="p-3 bg-white rounded-3 border text-muted small mt-4">
                                    Ms. Aira শুধু Local FAQ/Server Memory থেকে উত্তর দিবে। OFF থাকলে FAQ try করবে না।
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="text-end mt-4">
                        <button type="submit" class="btn-save-settings">
                            <i class="fa-solid fa-floppy-disk me-1"></i> সেটিংস সংরক্ষণ করুন
                        </button>
                    </div>
                </form>
            </div>

        </div>
    </div>
</main>

<script>
    function setStatus(id, isOn) {
        const el = document.getElementById(id);
        if (!el) return;

        el.textContent = isOn ? 'ON' : 'OFF';
        el.classList.remove('status-on', 'status-off');
        el.classList.add(isOn ? 'status-on' : 'status-off');
    }

    document.querySelectorAll('.bot-toggle').forEach(toggle => {
        toggle.addEventListener('change', function () {
            setStatus(this.dataset.status, this.checked);
        });
    });
</script>
@endsection