<?php
// AI settings tab — configures the provider/key/model that powers the AI Assistant
// component (and any AI feature) in the GENERATED app. The key is a secret: stored
// server-side in misc.json, never echoed back to the browser (masked to has_key),
// and baked into the built app's private config/ai.php.
$__ai = (array) ($miscConfig['ai'] ?? []);
$__aiHasKey = !empty($__ai['has_key']);
$__aiProviders = \PpPhp\Core\Ai\AiClient::providers();
$__aiProv = (string) ($__ai['provider'] ?? 'anthropic');
?>
<div class="section-card">
    <div class="section-title">✨ AI Assistant</div>
    <p class="text-muted small mb-3">
        Powers the <strong>AI Assistant</strong> component (Summarise / Next actions / Draft) in your
        generated app. <strong>Bring your own AI</strong> — pick any provider below (free or paid) and add its
        key. It is stored privately on the server and baked into the built app; it is never sent to the
        browser and never leaves your app.
    </p>
    <div class="row g-2">
        <div class="col-md-4">
            <label class="form-label small mb-1">Provider</label>
            <select class="form-select form-select-sm ai-setting" id="aiProvider">
                <?php foreach ($__aiProviders as $__k => $__meta): ?>
                <option value="<?= htmlspecialchars($__k) ?>"<?= $__k === $__aiProv ? ' selected' : '' ?>><?= htmlspecialchars($__meta['label']) ?></option>
                <?php endforeach; ?>
            </select>
            <small class="text-muted" id="aiProviderHint">Choose your preferred AI — free or paid.</small>
        </div>
        <div class="col-md-4">
            <label class="form-label small mb-1">Model <span class="text-muted">(optional)</span></label>
            <input type="text" class="form-control form-control-sm ai-setting" id="aiModel" list="aiModelList" placeholder="default (recommended)">
            <datalist id="aiModelList">
                <option value="claude-sonnet-5"></option>
                <option value="claude-opus-4-8"></option>
                <option value="gpt-4o-mini"></option>
                <option value="gpt-4o"></option>
                <option value="gemini-2.0-flash"></option>
                <option value="deepseek-chat"></option>
                <option value="llama-3.3-70b-versatile"></option>
                <option value="mistral-small-latest"></option>
            </datalist>
        </div>
        <div class="col-md-4">
            <label class="form-label small mb-1">Max tokens <span class="text-muted">(optional)</span></label>
            <input type="number" class="form-control form-control-sm ai-setting" id="aiMaxTokens" min="256" max="8192" step="128" placeholder="1024">
        </div>
        <div class="col-12<?= ($__aiProv === 'custom' || trim((string) ($__ai['base_url'] ?? '')) !== '') ? '' : ' d-none' ?>" id="aiBaseUrlRow">
            <label class="form-label small mb-1">Base URL <span class="text-muted">(OpenAI-compatible endpoint)</span></label>
            <input type="text" class="form-control form-control-sm ai-setting" id="aiBaseUrl" placeholder="https://your-endpoint/v1" value="<?= htmlspecialchars((string) ($__ai['base_url'] ?? '')) ?>">
            <small class="text-muted">Only for “Custom” — any server that speaks the OpenAI Chat Completions API (self-hosted, LocalAI, Ollama, etc.).</small>
        </div>
        <div class="col-12">
            <label class="form-label small mb-1">
                API key
                <span id="aiKeyStatus" class="badge bg-success ms-1<?= $__aiHasKey ? '' : ' d-none' ?>"><i class="bi bi-check-lg"></i> key configured</span>
            </label>
            <div class="input-group input-group-sm">
                <input type="password" class="form-control form-control-sm ai-setting" id="aiApiKey" placeholder="<?= $__aiHasKey ? 'Leave blank to keep the saved key' : 'paste your provider API key' ?>" autocomplete="off">
                <button class="btn btn-outline-secondary" type="button" id="btnToggleAiKey" data-tt="Show or hide the API key."><i class="bi bi-eye"></i></button>
                <?php if ($__aiHasKey): ?>
                <button class="btn btn-outline-danger" type="button" id="btnClearAiKey" data-tt="Remove the stored API key."><i class="bi bi-trash"></i></button>
                <?php endif; ?>
            </div>
            <small class="text-muted" id="aiKeyHint">Each provider issues keys from its own console. Storing keys encrypted-at-rest is recommended on production.</small>
        </div>
        <div class="col-12 mt-2">
            <button class="btn btn-sm btn-outline-primary" id="btnTestAi"><i class="bi bi-stars me-1"></i> Test connection</button>
            <span id="aiTestResult" class="small ms-2"></span>
        </div>
    </div>
</div>
