@extends('layouts.admin')

@section('title', 'AI Blog Generator')

@section('content')
<div class="mb-8">
    <h1 class="text-2xl font-bold text-gray-900">AI Blog Generator</h1>
    <p class="text-gray-600">Generate blog content using AI</p>
</div>

<div class="grid grid-cols-1 lg:grid-cols-3 gap-6" x-data="aiGenerator()">
    <!-- Generator Panel -->
    <div class="lg:col-span-2 space-y-6">
        <!-- Step 1: Generate Topics -->
        <div class="bg-white rounded-xl shadow-sm p-6">
            <h3 class="font-semibold text-gray-900 mb-4">
                <span class="inline-flex items-center justify-center w-6 h-6 bg-blue-100 text-blue-600 rounded-full text-sm mr-2">1</span>
                Generate Topics
            </h3>
            
            <div class="space-y-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Expertise Area</label>
                    <input type="text" x-model="expertiseArea" placeholder="e.g., Data Engineering, Cloud Architecture" class="w-full px-4 py-2 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                </div>
                
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">AI Provider</label>
                    <select x-model="provider" class="w-full px-4 py-2 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                        <option value="openai">OpenAI GPT-5.2</option>
                        <option value="claude">Claude Sonnet 4.5</option>
                        <option value="gemini">Gemini 3 Flash</option>
                    </select>
                </div>
                
                <button @click="generateTopics" :disabled="loading" class="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg transition-colors disabled:opacity-50">
                    <span x-show="!loading">Generate Topics</span>
                    <span x-show="loading"><i class="fas fa-spinner fa-spin mr-2"></i>Generating...</span>
                </button>
            </div>
            
            <div x-show="topics" x-cloak class="mt-4 p-4 bg-gray-50 rounded-lg">
                <h4 class="font-medium text-gray-700 mb-2">Generated Topics:</h4>
                <div class="whitespace-pre-wrap text-gray-600" x-text="topics"></div>
            </div>
        </div>
        
        <!-- Step 2: Generate Outline -->
        <div class="bg-white rounded-xl shadow-sm p-6">
            <h3 class="font-semibold text-gray-900 mb-4">
                <span class="inline-flex items-center justify-center w-6 h-6 bg-blue-100 text-blue-600 rounded-full text-sm mr-2">2</span>
                Generate Outline
            </h3>
            
            <div class="space-y-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Topic/Title</label>
                    <input type="text" x-model="topic" placeholder="Enter your blog topic" class="w-full px-4 py-2 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                </div>
                
                <button @click="generateOutline" :disabled="loading" class="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg transition-colors disabled:opacity-50">
                    <span x-show="!loading">Generate Outline</span>
                    <span x-show="loading"><i class="fas fa-spinner fa-spin mr-2"></i>Generating...</span>
                </button>
            </div>
            
            <div x-show="outline" x-cloak class="mt-4 p-4 bg-gray-50 rounded-lg">
                <h4 class="font-medium text-gray-700 mb-2">Generated Outline:</h4>
                <div class="whitespace-pre-wrap text-gray-600" x-text="outline"></div>
            </div>
        </div>
        
        <!-- Step 3: Generate Article -->
        <div class="bg-white rounded-xl shadow-sm p-6">
            <h3 class="font-semibold text-gray-900 mb-4">
                <span class="inline-flex items-center justify-center w-6 h-6 bg-blue-100 text-blue-600 rounded-full text-sm mr-2">3</span>
                Generate Full Article
            </h3>
            
            <div class="space-y-4">
                <button @click="generateArticle" :disabled="loading || !topic" class="px-4 py-2 bg-green-600 hover:bg-green-700 text-white font-medium rounded-lg transition-colors disabled:opacity-50">
                    <span x-show="!loading">Generate Article</span>
                    <span x-show="loading"><i class="fas fa-spinner fa-spin mr-2"></i>Generating...</span>
                </button>
            </div>
            
            <div x-show="article" x-cloak class="mt-4">
                <h4 class="font-medium text-gray-700 mb-2">Generated Article:</h4>
                <div class="p-4 bg-gray-50 rounded-lg max-h-96 overflow-y-auto">
                    <div class="prose prose-sm max-w-none" x-html="marked(article)"></div>
                </div>
                
                <div class="mt-4 flex gap-2">
                    <button @click="saveDraft" class="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg transition-colors">
                        <i class="fas fa-save mr-2"></i>Save as Draft
                    </button>
                    <button @click="copyToClipboard" class="px-4 py-2 bg-gray-100 hover:bg-gray-200 text-gray-700 font-medium rounded-lg transition-colors">
                        <i class="fas fa-copy mr-2"></i>Copy
                    </button>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Sidebar -->
    <div class="space-y-6">
        <!-- Tips -->
        <div class="bg-white rounded-xl shadow-sm p-6">
            <h3 class="font-semibold text-gray-900 mb-4">Tips</h3>
            <ul class="space-y-2 text-sm text-gray-600">
                <li class="flex items-start">
                    <i class="fas fa-lightbulb text-yellow-500 mt-1 mr-2"></i>
                    Be specific about your expertise area for better topic suggestions
                </li>
                <li class="flex items-start">
                    <i class="fas fa-lightbulb text-yellow-500 mt-1 mr-2"></i>
                    Review and customize the outline before generating the full article
                </li>
                <li class="flex items-start">
                    <i class="fas fa-lightbulb text-yellow-500 mt-1 mr-2"></i>
                    Always review and edit AI-generated content before publishing
                </li>
            </ul>
        </div>
        
        <!-- Recent Generations -->
        <div class="bg-white rounded-xl shadow-sm p-6">
            <h3 class="font-semibold text-gray-900 mb-4">Recent Generations</h3>
            <div class="space-y-3">
                @forelse($recentLogs as $log)
                <div class="text-sm">
                    <p class="text-gray-700 truncate">{{ Str::limit($log->prompt, 50) }}</p>
                    <p class="text-gray-400 text-xs">{{ $log->created_at->diffForHumans() }} • {{ ucfirst($log->provider) }}</p>
                </div>
                @empty
                <p class="text-gray-500 text-sm">No recent generations</p>
                @endforelse
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<script>
function aiGenerator() {
    return {
        loading: false,
        expertiseArea: 'Data Engineering and Cloud Architecture',
        provider: 'openai',
        topic: '',
        topics: '',
        outline: '',
        article: '',
        
        async generateTopics() {
            this.loading = true;
            try {
                const response = await fetch('{{ route("admin.ai.topics") }}', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },
                    body: JSON.stringify({
                        expertise_area: this.expertiseArea,
                        provider: this.provider
                    })
                });
                const data = await response.json();
                if (data.success) {
                    this.topics = data.data;
                } else {
                    alert('Error: ' + data.error);
                }
            } catch (error) {
                alert('Error generating topics');
            }
            this.loading = false;
        },
        
        async generateOutline() {
            if (!this.topic) {
                alert('Please enter a topic');
                return;
            }
            this.loading = true;
            try {
                const response = await fetch('{{ route("admin.ai.outline") }}', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },
                    body: JSON.stringify({
                        topic: this.topic,
                        provider: this.provider
                    })
                });
                const data = await response.json();
                if (data.success) {
                    this.outline = data.data;
                } else {
                    alert('Error: ' + data.error);
                }
            } catch (error) {
                alert('Error generating outline');
            }
            this.loading = false;
        },
        
        async generateArticle() {
            if (!this.topic) {
                alert('Please enter a topic');
                return;
            }
            this.loading = true;
            try {
                const response = await fetch('{{ route("admin.ai.article") }}', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },
                    body: JSON.stringify({
                        topic: this.topic,
                        outline: this.outline,
                        provider: this.provider
                    })
                });
                const data = await response.json();
                if (data.success) {
                    this.article = data.data;
                } else {
                    alert('Error: ' + data.error);
                }
            } catch (error) {
                alert('Error generating article');
            }
            this.loading = false;
        },
        
        async saveDraft() {
            try {
                const response = await fetch('{{ route("admin.ai.save-draft") }}', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },
                    body: JSON.stringify({
                        title: this.topic,
                        content: this.article
                    })
                });
                const data = await response.json();
                if (data.success) {
                    alert('Draft saved! Redirecting to edit...');
                    window.location.href = data.edit_url;
                }
            } catch (error) {
                alert('Error saving draft');
            }
        },
        
        copyToClipboard() {
            navigator.clipboard.writeText(this.article);
            alert('Copied to clipboard!');
        },
        
        marked(text) {
            return marked.parse(text);
        }
    }
}
</script>
@endpush
@endsection