@extends('layouts.app')

@section('title', 'Connexion IA & API Tokens - ' . app_setting('app_name', 'Dev App'))

@section('content')
<div class="max-w-4xl mx-auto space-y-6">
    <!-- Header -->
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
        <div>
            <h1 class="text-2xl font-black text-slate-900 tracking-tight flex items-center space-x-2">
                <span>Connexion IA & Jetons d'API</span>
                <span class="px-2.5 py-0.5 rounded-full text-xs font-bold bg-indigo-100 text-indigo-800 border border-indigo-200">
                    Claude & Gemini
                </span>
            </h1>
            <p class="text-sm text-slate-500 mt-0.5">
                Connectez Claude, Gemini ou vos agents de code (Claude Code, Cursor, Antigravity) pour suivre et actualiser automatiquement vos tâches en cours de développement.
            </p>
        </div>
        <div>
            <a href="{{ route('admin.settings.general') }}" class="px-4 py-2.5 bg-white border border-slate-300 hover:bg-slate-50 text-slate-700 text-xs font-bold rounded-xl shadow-xs transition-colors flex items-center">
                ← Personnalisation & Logo
            </a>
        </div>
    </div>

    <!-- Notification of newly created token -->
    @if(session('new_token'))
        <div x-data="{ copied: false }" class="p-5 rounded-2xl bg-amber-50 border-2 border-amber-300 text-amber-900 shadow-md space-y-2">
            <div class="flex items-center justify-between">
                <span class="text-xs font-black uppercase tracking-wider text-amber-800 flex items-center">
                    🔑 Nouveau jeton d'API généré — Copiez-le maintenant !
                </span>
                <button @click="navigator.clipboard.writeText('{{ session('new_token') }}'); copied = true; setTimeout(() => copied = false, 2500)"
                    class="text-xs font-bold text-amber-900 hover:text-black bg-amber-200/80 px-3 py-1 rounded-lg transition-colors">
                    <span x-show="!copied">📋 Copier le jeton</span>
                    <span x-show="copied" x-cloak class="text-emerald-800 font-black">✓ Jeton copié !</span>
                </button>
            </div>
            <p class="text-xs text-amber-700">Ce jeton ne sera plus jamais réaffiché pour des raisons de sécurité. Conservez-le précieusement.</p>
            <input type="text" readonly value="{{ session('new_token') }}"
                class="w-full bg-white px-3.5 py-2 rounded-xl border border-amber-300 font-mono text-xs text-slate-900 font-bold select-all">
        </div>
    @endif

    <!-- SECTION 1: IN-APP AI ASSISTANT CONFIGURATION -->
    <div class="bg-white rounded-2xl border border-slate-200 p-6 sm:p-8 shadow-xs space-y-6">
        <div>
            <h2 class="text-base font-bold text-slate-900 flex items-center justify-between">
                <span>1. Clé d'API IA (Assistant Direct Intégré)</span>
                @if(!empty($rawApiKey))
                    <span class="px-2.5 py-0.5 rounded-full text-xs font-bold bg-emerald-100 text-emerald-800">
                        ✓ IA configurée & prête
                    </span>
                @else
                    <span class="px-2.5 py-0.5 rounded-full text-xs font-bold bg-slate-100 text-slate-500">
                        Non configurée
                    </span>
                @endif
            </h2>
            <p class="text-xs text-slate-500 mt-1">
                Permet d'utiliser le bouton <strong>« Assistant IA »</strong> directement sur vos tableaux Kanban pour résumer les tâches ou mettre à jour les statuts en tapant simplement une phrase en langage naturel.
            </p>
        </div>

        <form action="{{ route('admin.settings.ai.update') }}" method="POST" class="space-y-4" x-data="{ currentProvider: '{{ $provider }}' }">
            @csrf

            <!-- Provider Selection -->
            <div>
                <label class="block text-xs font-bold uppercase tracking-wider text-slate-700 mb-2">
                    Fournisseur d'IA
                </label>
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
                    <label class="p-3.5 rounded-xl border-2 cursor-pointer transition-all flex items-center space-x-3"
                        :class="currentProvider === 'gemini' ? 'border-indigo-600 bg-indigo-50/50' : 'border-slate-200 hover:border-slate-300'">
                        <input type="radio" name="ai_provider" value="gemini" x-model="currentProvider" class="sr-only">
                        <div class="w-8 h-8 rounded-lg bg-indigo-600 text-white flex items-center justify-center font-bold text-xs shrink-0">
                            G
                        </div>
                        <div>
                            <div class="text-xs font-bold text-slate-900">Google Gemini</div>
                            <div class="text-[11px] text-slate-400">Gemini 2.5 Flash / 2.5 Pro (Clé gratuite sur aistudio.google.com)</div>
                        </div>
                    </label>

                    <label class="p-3.5 rounded-xl border-2 cursor-pointer transition-all flex items-center space-x-3"
                        :class="currentProvider === 'claude' ? 'border-indigo-600 bg-indigo-50/50' : 'border-slate-200 hover:border-slate-300'">
                        <input type="radio" name="ai_provider" value="claude" x-model="currentProvider" class="sr-only">
                        <div class="w-8 h-8 rounded-lg bg-amber-600 text-white flex items-center justify-center font-bold text-xs shrink-0">
                            C
                        </div>
                        <div>
                            <div class="text-xs font-bold text-slate-900">Anthropic Claude</div>
                            <div class="text-[11px] text-slate-400">Claude 3.7 Sonnet / 3.5 Haiku (Console Anthropic)</div>
                        </div>
                    </label>
                </div>
            </div>

            <!-- Model Selection -->
            <div>
                <label class="block text-xs font-bold uppercase tracking-wider text-slate-700 mb-1.5">
                    Modèle d'IA
                </label>
                
                <template x-if="currentProvider === 'gemini'">
                    <select name="ai_model" class="w-full px-3.5 py-2 rounded-xl border border-slate-300 text-xs font-semibold bg-white">
                        @foreach($models['gemini'] as $mId => $mLabel)
                            <option value="{{ $mId }}" {{ $model === $mId ? 'selected' : '' }}>{{ $mLabel }}</option>
                        @endforeach
                    </select>
                </template>

                <template x-if="currentProvider === 'claude'">
                    <select name="ai_model" class="w-full px-3.5 py-2 rounded-xl border border-slate-300 text-xs font-semibold bg-white">
                        @foreach($models['claude'] as $mId => $mLabel)
                            <option value="{{ $mId }}" {{ $model === $mId ? 'selected' : '' }}>{{ $mLabel }}</option>
                        @endforeach
                    </select>
                </template>
            </div>

            <!-- API Key -->
            <div>
                <label class="block text-xs font-bold uppercase tracking-wider text-slate-700 mb-1.5">
                    Clé d'API (API Key)
                </label>
                <div class="relative">
                    <input type="password" name="ai_api_key" placeholder="Laisser vide si inchangée"
                        class="w-full px-3.5 py-2 rounded-xl border border-slate-300 text-xs font-mono focus:ring-2 focus:ring-indigo-500">
                </div>
                @if(!empty($maskedKey))
                    <p class="text-[11px] text-emerald-600 font-semibold mt-1">Clé actuelle enregistrée : <span class="font-mono">{{ $maskedKey }}</span></p>
                @else
                    <p class="text-[11px] text-slate-400 mt-1">Collez votre clé API Gemini (AIzaSy...) ou Claude (sk-ant-...).</p>
                @endif
            </div>

            <div class="flex justify-end pt-2">
                <button type="submit" class="px-5 py-2 bg-indigo-600 hover:bg-indigo-700 text-white text-xs font-bold rounded-xl shadow-xs transition-colors">
                    Enregistrer la configuration IA
                </button>
            </div>
        </form>
    </div>

    <!-- SECTION 2: API TOKENS FOR EXTERNAL AI AGENTS -->
    <div class="bg-white rounded-2xl border border-slate-200 p-6 sm:p-8 shadow-xs space-y-6">
        <div>
            <div class="flex items-center justify-between gap-3">
                <h2 class="text-base font-bold text-slate-900">2. Jetons d'Accès API (Claude, scripts, IfPanel)</h2>
                <a href="{{ route('admin.settings.api_docs') }}" class="shrink-0 px-3 py-1.5 rounded-lg bg-indigo-50 hover:bg-indigo-100 text-indigo-700 text-xs font-bold">Documentation de l'API &rarr;</a>
            </div>
            <p class="text-xs text-slate-500 mt-1">
                Générez des jetons d'accès sécurisés (Bearer Tokens) pour permettre à une IA externe (Claude Code, Cursor, Antigravity ou un script GitHub) d'intéragir directement avec Dev App via l'API REST.
            </p>
        </div>

        <!-- Create Token Form -->
        <form action="{{ route('admin.settings.ai.tokens.store') }}" method="POST" class="p-4 rounded-xl border border-slate-200 bg-slate-50/70 space-y-3">
            @csrf
            <h3 class="text-xs font-bold uppercase tracking-wider text-slate-700">Créer un nouveau jeton d'accès IA</h3>
            
            <div class="grid grid-cols-1 sm:grid-cols-5 gap-3">
                <div class="sm:col-span-2">
                    <input type="text" name="name" required placeholder="Nom de l'agent (Ex: Claude Code CLI, Cursor Assistant, Antigravity Agent)"
                        class="w-full px-3.5 py-2 rounded-xl border border-slate-300 text-xs font-medium bg-white">
                </div>
                <div>
                    <select name="expires_in_days" class="w-full px-3 py-2 rounded-xl border border-slate-300 text-xs font-medium bg-white">
                        <option value="">Sans expiration</option>
                        <option value="30">Expire dans 30 jours</option>
                        <option value="90">Expire dans 90 jours</option>
                        <option value="365">Expire dans 1 an</option>
                    </select>
                </div>
                <div>
                    <input type="text" name="signature" maxlength="8" placeholder="Signature (facultatif)" title="Petit signe affiché après « via API », visible des seuls administrateurs"
                        class="w-full px-3 py-2 rounded-xl border border-slate-300 text-xs font-medium bg-white">
                </div>
                <div>
                    <select name="scope" class="w-full px-3 py-2 rounded-xl border border-slate-300 text-xs font-medium bg-white">
                        @foreach(\App\Models\ApiToken::SCOPES as $scopeValue => $scopeLabel)
                            <option value="{{ $scopeValue }}">{{ $scopeLabel }}</option>
                        @endforeach
                    </select>
                </div>
            </div>
            <p class="text-[11px] text-slate-500">
                <strong>Accès complet</strong> : tous les projets, tickets et comptes (pour Claude ou vos scripts).
                <strong>Intégration panel client</strong> : uniquement les services livrés aux clients et ce qu'ils peuvent voir (pour IfPanel).
                <strong>Signature</strong> : un petit signe ajouté après « via API » dans les historiques, visible des seuls administrateurs. Les autres utilisateurs voient seulement le nom du compte.
            </p>

            <div class="flex justify-end">
                <button type="submit" class="px-4 py-2 bg-slate-900 hover:bg-slate-800 text-white text-xs font-bold rounded-xl transition-colors">
                    + Générer le jeton
                </button>
            </div>
        </form>

        <!-- Active Tokens Table -->
        <div class="overflow-x-auto">
            <table class="w-full text-left border-collapse">
                <thead>
                    <tr class="bg-slate-50 border-b border-slate-200 text-[11px] font-bold uppercase tracking-wider text-slate-500">
                        <th class="py-2.5 px-3">Nom du Jeton</th>
                        <th class="py-2.5 px-3">Accès</th>
                        <th class="py-2.5 px-3">Créé par</th>
                        <th class="py-2.5 px-3">Dernière utilisation</th>
                        <th class="py-2.5 px-3">Expiration</th>
                        <th class="py-2.5 px-3 text-right">Action</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-100 text-xs">
                    @forelse($tokens as $token)
                        <tr class="hover:bg-slate-50/50">
                            <td class="py-3 px-3">
                                <div x-data="{ editing: false }">
                                    <div x-show="!editing" class="flex items-center gap-2">
                                        <span class="font-bold text-slate-800">{{ $token->name }}</span>
                                        @if($token->signature)
                                            <span class="px-1.5 rounded bg-slate-100 text-slate-700" title="Signature affichée après « via API »">{{ $token->signature }}</span>
                                        @endif
                                        <button type="button" @click="editing = true" class="text-[11px] text-indigo-600 hover:text-indigo-800">Modifier</button>
                                    </div>
                                    <form x-show="editing" x-cloak action="{{ route('admin.settings.ai.tokens.update', $token) }}" method="POST" class="flex items-center gap-1">
                                        @csrf
                                        @method('PUT')
                                        <input type="text" name="name" value="{{ $token->name }}" required maxlength="100" class="w-36 px-2 py-1 rounded-lg border border-slate-300 text-xs">
                                        <input type="text" name="signature" value="{{ $token->signature }}" maxlength="8" placeholder="Signature" class="w-20 px-2 py-1 rounded-lg border border-slate-300 text-xs">
                                        <button type="submit" class="px-2 py-1 bg-slate-900 text-white text-[11px] font-semibold rounded-lg">OK</button>
                                    </form>
                                </div>
                                <div class="font-mono text-[10px] text-slate-400">devapp_•••••••• (masqué)</div>
                            </td>
                            <td class="py-3 px-3">
                                <span class="px-2 py-0.5 rounded text-[10px] font-bold {{ $token->scope === 'integration' ? 'bg-sky-100 text-sky-800' : 'bg-indigo-100 text-indigo-800' }}">
                                    {{ \App\Models\ApiToken::SCOPES[$token->scope] ?? $token->scope }}
                                </span>
                            </td>
                            <td class="py-3 px-3 text-slate-600">{{ $token->user->name ?? 'Admin' }}</td>
                            <td class="py-3 px-3 text-slate-500">
                                {{ $token->last_used_at ? $token->last_used_at->diffForHumans() : 'Jamais utilisé' }}
                            </td>
                            <td class="py-3 px-3">
                                @if($token->expires_at)
                                    <span class="{{ $token->isExpired() ? 'text-rose-600 font-bold' : 'text-slate-600' }}">
                                        {{ $token->expires_at->format('d/m/Y') }}
                                        @if($token->isExpired()) (Expiré) @endif
                                    </span>
                                @else
                                    <span class="text-slate-400">Illimité</span>
                                @endif
                            </td>
                            <td class="py-3 px-3 text-right">
                                <form action="{{ route('admin.settings.ai.tokens.destroy', $token) }}" method="POST" class="inline" onsubmit="return confirm('Révoquer immédiatement ce jeton d\'API ?')">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="text-rose-600 hover:text-rose-800 text-xs font-semibold">
                                        Révoquer
                                    </button>
                                </form>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="6" class="py-6 text-center text-slate-400 text-xs italic">
                                Aucun jeton d'API généré pour le moment.
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

    <!-- SECTION 3: READY-TO-USE PROMPT FOR CLAUDE / GEMINI AGENTS -->
    <div class="bg-slate-900 rounded-2xl p-6 sm:p-8 text-white space-y-4 shadow-xl" x-data="{ copiedPrompt: false }">
        <div class="flex items-center justify-between">
            <h2 class="text-base font-black tracking-tight text-white flex items-center space-x-2">
                <span>⚡ Modèle de Prompt & Guide pour votre IA externe</span>
            </h2>
            <button @click="navigator.clipboard.writeText($refs.promptContent.innerText); copiedPrompt = true; setTimeout(() => copiedPrompt = false, 2500)"
                class="px-3.5 py-1.5 rounded-lg bg-indigo-600 hover:bg-indigo-500 text-xs font-bold text-white transition-colors">
                <span x-show="!copiedPrompt">📋 Copier le prompt pour l'IA</span>
                <span x-show="copiedPrompt" x-cloak class="text-emerald-300">✓ Copié !</span>
            </button>
        </div>

        <p class="text-xs text-slate-300 leading-relaxed">
            Copiez ce texte et fournissez-le à votre assistant (Claude Code, Cursor ou Antigravity). Il saura exactement comment inspecter vos projets et actualiser le statut de vos tâches de manière autonome au fur et à mesure du développement.
        </p>

        <div class="p-4 rounded-xl bg-slate-950/80 border border-slate-800 text-xs font-mono text-indigo-300 overflow-x-auto leading-relaxed select-all" x-ref="promptContent">Tu es mon assistant de développement. Tu as accès à mon tracker de développement local Dev App via son API REST.
URL de base : {{ url('/api/v1') }}
En-tête d'authentification : Authorization: Bearer VOTRE_JETON_API

Voici comment intéragir avec Dev App :
1. Consulter les projets :
   GET {{ url('/api/v1/projects') }}

2. Consulter le backlog et la roadmap d'un projet :
   GET {{ url('/api/v1/projects/{project_id}/roadmap') }}

3. Créer un ticket (tâche, bug, fonctionnalité) :
   POST {{ url('/api/v1/projects/{project_id}/tickets') }}
   Body JSON: { "title": "...", "description": "...", "type": "task", "priority": "normal", "column_name": "À faire" }

4. Créer un nouveau projet :
   POST {{ url('/api/v1/projects') }}
   Body JSON: { "name": "Mon projet", "description": "..." }

5. Actualiser le statut d'un ticket quand tu as terminé de coder ou testé :
   PATCH {{ url('/api/v1/tickets/{ticket_id}') }}
   Body JSON: { "column_name": "Terminé", "comment": "Implémenté et validé par les tests automatisés" }

6. Ajouter un commentaire d'avancement :
   POST {{ url('/api/v1/tickets/{ticket_id}/comments') }}
   Body JSON: { "content": "Code écrit dans UserController.php, tests unitaires passés." }

Documentation complète : {{ route('admin.settings.api_docs') }}

Après chaque étape majeure ou à la fin d'un lot, consulte les tickets en cours et mets à jour leurs statuts dans Dev App.</div>
    </div>
</div>
@endsection