{% extends "base.html" %}
{% block title %}Generate Content{% endblock %}
{% block content %}
<div x-data="generateApp()">

    <div class="mb-8">
        <h2 class="text-2xl font-bold">✍️ Generate Content</h2>
        <p class="text-slate-400 text-sm mt-1">Use AI to create SEO-optimised blog posts</p>
    </div>

    <!-- Input Form -->
    <div class="card mb-8">
        <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
            <div class="md:col-span-2">
                <label class="block text-slate-300 text-sm font-medium mb-2">🔑 Target Keyword</label>
                <input type="text" x-model="keyword"
                    class="w-full bg-slate-900 border border-slate-600 text-white rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-blue-500"
                    placeholder="e.g. Azure AD Connect troubleshooting">
            </div>
            <div>
                <label class="block text-slate-300 text-sm font-medium mb-2">🎨 Tone</label>
                <select x-model="tone" class="w-full bg-slate-900 border border-slate-600 text-white rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-blue-500">
                    <option value="professional">Professional</option>
                    <option value="casual">Casual</option>
                    <option value="technical">Technical</option>
                </select>
            </div>
            <div>
                <label class="block text-slate-300 text-sm font-medium mb-2">📏 Word Count</label>
                <select x-model="wordCount" class="w-full bg-slate-900 border border-slate-600 text-white rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-blue-500">
                    <option value="1000">1,000 words</option>
                    <option value="1500">1,500 words</option>
                    <option value="2000" selected>2,000 words</option>
                    <option value="2500">2,500 words</option>
                </select>
            </div>
        </div>

        <button @click="generate()"
            :disabled="generating || !keyword"
            class="bg-blue-600 hover:bg-blue-700 disabled:bg-slate-700 disabled:cursor-not-allowed text-white font-bold py-3 px-8 rounded-lg transition-colors text-lg">
            <span x-show="!generating">🤖 Generate with AI</span>
            <span x-show="generating" class="flex items-center gap-2"><div class="spinner-sm"></div> AI is writing your post...</span>
        </button>
    </div>

    <!-- Preview -->
    <div x-show="post" class="space-y-6" style="display: none;">

        <!-- Title & Meta -->
        <div class="card">
            <div class="flex flex-wrap items-center gap-2 mb-4">
                <span class="bg-blue-600/30 text-blue-300 text-xs px-3 py-1 rounded-full" x-text="post?.category"></span>
                <template x-for="tag in (post?.tags || [])" :key="tag">
                    <span class="bg-slate-700 text-slate-300 text-xs px-3 py-1 rounded-full" x-text="tag"></span>
                </template>
            </div>
            <h2 class="text-2xl font-bold mb-2" x-text="post?.title"></h2>
            <p class="text-slate-400 text-sm italic" x-text="post?.meta_description"></p>
            <p class="text-slate-500 text-xs mt-2">Slug: /<span x-text="post?.slug"></span></p>
        </div>

        <!-- Content Preview -->
        <div class="card prose prose-invert max-w-none">
            <h3 class="text-lg font-bold mb-4">📄 Content Preview</h3>
            <div class="bg-slate-900 rounded-xl p-6 border border-slate-700 content-preview" x-html="post?.content_html"></div>
        </div>

        <!-- Publish Buttons -->
        <div class="card flex flex-wrap gap-4">
            <button @click="publish('draft')"
                :disabled="publishing"
                class="bg-amber-600 hover:bg-amber-700 disabled:bg-slate-700 text-white font-bold py-3 px-6 rounded-lg transition-colors">
                <span x-show="!publishing">📝 Save as Draft</span>
                <span x-show="publishing" class="flex items-center gap-2"><div class="spinner-sm"></div> Publishing...</span>
            </button>
            <button @click="publish('publish')"
                :disabled="publishing"
                class="bg-green-600 hover:bg-green-700 disabled:bg-slate-700 text-white font-bold py-3 px-6 rounded-lg transition-colors">
                <span x-show="!publishing">🚀 Publish Now</span>
                <span x-show="publishing" class="flex items-center gap-2"><div class="spinner-sm"></div> Publishing...</span>
            </button>
        </div>

        <!-- Published Result -->
        <div x-show="publishResult" class="card bg-green-900/30 border-green-700" style="display: none;">
            <p class="text-green-400 font-bold mb-2">✅ Post Published Successfully!</p>
            <a :href="publishResult?.link" target="_blank" class="text-blue-400 underline hover:text-blue-300" x-text="publishResult?.link"></a>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
function generateApp() {
    return {
        keyword: '',
        tone: 'professional',
        wordCount: '2000',
        generating: false,
        publishing: false,
        post: null,
        publishResult: null,

        async generate() {
            this.generating = true;
            this.post = null;
            this.publishResult = null;
            try {
                const resp = await apiPost('/api/generate', {
                    keyword: this.keyword,
                    tone: this.tone,
                    word_count: parseInt(this.wordCount),
                });
                if (resp.success) {
                    this.post = resp.data;
                    showToast('Blog post generated successfully!');
                } else {
                    showToast(resp.error || 'Generation failed', 'error');
                }
            } catch (e) {
                showToast('Error: ' + e.message, 'error');
            }
            this.generating = false;
        },

        async publish(status) {
            this.publishing = true;
            this.publishResult = null;
            try {
                const resp = await apiPost('/api/publish', {
                    title: this.post.title,
                    content_html: this.post.content_html,
                    status: status,
                    category: this.post.category,
                    tags: this.post.tags,
                    meta_description: this.post.meta_description,
                    focus_keyword: this.keyword,
                    slug: this.post.slug,
                });
                if (resp.success) {
                    this.publishResult = resp.data;
                    showToast('Post ' + (status === 'draft' ? 'saved as draft' : 'published') + '!');
                } else {
                    showToast(resp.error || 'Publishing failed', 'error');
                }
            } catch (e) {
                showToast('Error: ' + e.message, 'error');
            }
            this.publishing = false;
        }
    };
}
</script>
{% endblock %}