<?= $this->extend('layouts/main') ?>
<?= $this->section('content') ?>

<div class="container-fluid">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h1 class="h3 mb-1 text-gray-800 fw-bold"><?= $title ?></h1>
            <p class="text-muted mb-0 small">Konfigurasikan mesin Kecerdasan Buatan (AI Engine) untuk asisten penyusunan perangkat pembelajaran.</p>
        </div>
        <a href="/dashboard" class="btn btn-sm btn-outline-secondary">
            <i class="bi bi-arrow-left"></i> Kembali
        </a>
    </div>

    <!-- Alert Success / Error Messages -->
    <?php if (session()->getFlashdata('success')) : ?>
        <div class="alert alert-success alert-dismissible fade show border-0 shadow-sm mb-4" role="alert">
            <div class="d-flex align-items-center gap-2">
                <i class="bi bi-check-circle-fill fs-5"></i>
                <div><?= session()->getFlashdata('success') ?></div>
            </div>
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    <?php endif; ?>

    <div class="row">
        <!-- Main Form Column -->
        <div class="col-xl-8 col-lg-7">
            <div class="card shadow-sm border-0 rounded-3 mb-4">
                <div class="card-header bg-white border-0 pt-4 pb-0">
                    <h5 class="fw-bold text-dark d-flex align-items-center gap-2 mb-0">
                        <i class="bi bi-cpu text-primary fs-4"></i> Konfigurasi AI Engine
                    </h5>
                </div>
                <div class="card-body p-4">
                    <form action="/settings/ai/save" method="post">
                        <?= csrf_field() ?>

                        <div class="row g-4">
                            <!-- Provider AI -->
                            <div class="col-12">
                                <label class="form-label fw-bold text-dark mb-2">Pilih Penyedia Layanan (AI Provider)</label>
                                <div class="row g-3">
                                    <!-- Gemini Option Card -->
                                    <div class="col-md-4">
                                        <label class="provider-card-label d-block cursor-pointer text-center">
                                            <input type="radio" name="ai_provider" value="gemini" class="provider-radio d-none" 
                                                <?= (($setting['ai_provider'] ?? 'gemini') == 'gemini') ? 'checked' : '' ?>>
                                            <div class="provider-card p-3 border rounded-3 text-center transition-all bg-white">
                                                <div class="icon-wrapper mb-2 bg-primary bg-opacity-10 text-primary rounded-circle mx-auto d-flex align-items-center justify-content-center" style="width: 48px; height: 48px;">
                                                    <i class="bi bi-google fs-4"></i>
                                                </div>
                                                <h6 class="fw-bold mb-1">Google Gemini</h6>
                                                <small class="text-muted d-block" style="font-size: 0.72rem;">Model: gemini-3.5-flash</small>
                                            </div>
                                        </label>
                                    </div>

                                    <!-- OpenAI Option Card -->
                                    <div class="col-md-4">
                                        <label class="provider-card-label d-block cursor-pointer text-center">
                                            <input type="radio" name="ai_provider" value="openai" class="provider-radio d-none" 
                                                <?= (($setting['ai_provider'] ?? '') == 'openai') ? 'checked' : '' ?>>
                                            <div class="provider-card p-3 border rounded-3 text-center transition-all bg-white">
                                                <div class="icon-wrapper mb-2 bg-success bg-opacity-10 text-success rounded-circle mx-auto d-flex align-items-center justify-content-center" style="width: 48px; height: 48px;">
                                                    <i class="bi bi-chat-left-dots fs-4"></i>
                                                </div>
                                                <h6 class="fw-bold mb-1">OpenAI</h6>
                                                <small class="text-muted d-block" style="font-size: 0.72rem;">Model: gpt-5.4-mini</small>
                                            </div>
                                        </label>
                                    </div>

                                    <!-- Deepseek Option Card -->
                                    <div class="col-md-4">
                                        <label class="provider-card-label d-block cursor-pointer text-center">
                                            <input type="radio" name="ai_provider" value="deepseek" class="provider-radio d-none" 
                                                <?= (($setting['ai_provider'] ?? '') == 'deepseek') ? 'checked' : '' ?>>
                                            <div class="provider-card p-3 border rounded-3 text-center transition-all bg-white">
                                                <div class="icon-wrapper mb-2 bg-info bg-opacity-10 text-info rounded-circle mx-auto d-flex align-items-center justify-content-center" style="width: 48px; height: 48px;">
                                                    <i class="bi bi-cpu-fill fs-4"></i>
                                                </div>
                                                <h6 class="fw-bold mb-1">Deepseek</h6>
                                                <small class="text-muted d-block" style="font-size: 0.72rem;">Model: deepseek-v4-flash</small>
                                            </div>
                                        </label>
                                    </div>
                                </div>
                            </div>

                            <!-- API Key -->
                            <div class="col-12">
                                <label for="ai_api_key" class="form-label fw-bold text-dark mb-2">Kunci API (API Key)</label>
                                <div class="input-group">
                                    <span class="input-group-text bg-light border-end-0"><i class="bi bi-key text-muted"></i></span>
                                    <input type="password" name="ai_api_key" id="ai_api_key" class="form-control border-start-0 py-2"
                                        value="<?= esc($setting['ai_api_key'] ?? '') ?>"
                                        placeholder="Masukkan Kunci API (API Key) dari provider terpilih">
                                    <button class="btn btn-outline-secondary" type="button" id="toggle_ai_api_key">
                                        <i class="bi bi-eye" id="eye_icon"></i>
                                    </button>
                                </div>
                                <div class="form-text text-muted small mt-2 d-flex align-items-start gap-1">
                                    <i class="bi bi-shield-lock-fill text-success"></i>
                                    <span>API Key Anda disimpan dengan aman dan terenkripsi di dalam database sistem.</span>
                                </div>
                            </div>
                        </div>

                        <div class="d-flex justify-content-end gap-2 mt-5 pt-3 border-top">
                            <a href="/dashboard" class="btn btn-light px-4">
                                <i class="bi bi-x-circle me-1"></i> Batal
                            </a>
                            <button type="submit" class="btn btn-primary px-4 fw-bold shadow-sm">
                                <i class="bi bi-save me-1"></i> Simpan Perubahan
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <!-- Sidebar Info Column -->
        <div class="col-xl-4 col-lg-5">
            <div class="card shadow-sm border-0 rounded-3 bg-gradient-light border-start border-primary border-4 mb-4">
                <div class="card-body p-4">
                    <h6 class="fw-bold text-dark d-flex align-items-center gap-2 mb-3">
                        <i class="bi bi-info-circle-fill text-primary"></i> Panduan Konfigurasi
                    </h6>
                    <p class="text-muted small text-justify leading-relaxed">
                        Sistem Co-Pilot SIMAK menggunakan kecerdasan buatan untuk membantu guru secara otomatis merumuskan <strong>Tujuan Pembelajaran (TP)</strong>, mengurutkan <strong>ATP</strong>, dan menyusun draf <strong>Modul Ajar Kurikulum Merdeka</strong>.
                    </p>
                    <hr class="my-3 text-muted opacity-25">
                    <ul class="mb-0 ps-3 small text-muted">
                        <li class="mb-2">
                            <strong>Google Gemini:</strong> Sangat disarankan karena mendukung output terstruktur yang sangat cepat menggunakan model <code>gemini-2.0-flash</code>. Jika API Key di form kiri Anda kosongkan, sistem akan mencoba menggunakan API Key default dari berkas lokal <code>.env</code> Anda.
                        </li>
                        <li class="mb-2">
                            <strong>OpenAI:</strong> Menggunakan model <code>gpt-5.4-mini</code> untuk kestabilan hasil dan format deskripsi modul ajar yang rapi.
                        </li>
                        <li class="mb-0">
                            <strong>Deepseek:</strong> Menggunakan model <code>deepseek-v4-flash</code> dengan pemrosesan kontekstual mendalam.
                        </li>
                    </ul>
                </div>
            </div>

            <!-- Active Status Card -->
            <div class="card shadow-sm border-0 rounded-3 bg-white">
                <div class="card-body p-4">
                    <h6 class="fw-bold text-dark mb-3">Status Aktif Engine</h6>
                    <div class="d-flex align-items-center gap-3 p-3 rounded-3 bg-light border">
                        <div class="status-indicator-pulse"></div>
                        <div>
                            <span class="text-muted small d-block">Provider Aktif Saat Ini:</span>
                            <span class="fw-bold text-dark fs-6 d-flex align-items-center gap-1 mt-1">
                                <?php 
                                $activeProv = $setting['ai_provider'] ?? 'gemini';
                                if ($activeProv === 'gemini') {
                                    echo '<i class="bi bi-google text-primary"></i> Google Gemini';
                                } elseif ($activeProv === 'openai') {
                                    echo '<i class="bi bi-chat-left-dots text-success"></i> OpenAI';
                                } else {
                                    echo '<i class="bi bi-cpu-fill text-info"></i> Deepseek';
                                }
                                ?>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
.cursor-pointer {
    cursor: pointer;
}
.provider-card {
    border: 2px solid #e2e8f0;
    position: relative;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.provider-card:hover {
    border-color: #cbd5e1;
    transform: translateY(-2px);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.04);
}
.provider-radio:checked + .provider-card {
    border-color: var(--bs-primary) !important;
    background-color: rgba(13, 110, 253, 0.03) !important;
    box-shadow: 0 0.5rem 1rem rgba(13, 110, 253, 0.08) !important;
}
.provider-radio:checked + .provider-card::after {
    content: "\f272"; /* bi-check-circle-fill */
    font-family: "bootstrap-icons";
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 1.1rem;
    color: var(--bs-primary);
}
.status-indicator-pulse {
    width: 12px;
    height: 12px;
    background-color: var(--bs-success);
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(25, 135, 84, 0.7);
    animation: pulse 1.6s infinite;
}
@keyframes pulse {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(25, 135, 84, 0.7);
    }
    70% {
        transform: scale(1);
        box-shadow: 0 0 0 6px rgba(25, 135, 84, 0);
    }
    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(25, 135, 84, 0);
    }
}
.text-justify {
    text-align: justify;
}
.leading-relaxed {
    line-height: 1.6;
}
</style>

<?= $this->section('scripts') ?>
<script>
$(document).ready(function() {
    $('#toggle_ai_api_key').on('click', function() {
        const input = $('#ai_api_key');
        const icon = $('#eye_icon');
        if (input.attr('type') === 'password') {
            input.attr('type', 'text');
            icon.removeClass('bi-eye').addClass('bi-eye-slash');
        } else {
            input.attr('type', 'password');
            icon.removeClass('bi-eye-slash').addClass('bi-eye');
        }
    });
});
</script>
<?= $this->endSection() ?>

<?= $this->endSection() ?>
