@extends('layouts.app')

@section('title', 'AI content')

@section('content')
<h1>AI content</h1>

@if(session('success'))
    <p class="message success" style="margin-bottom:16px;">{{ session('success') }}</p>
@endif
@if(session('error'))
    <p class="message error" style="margin-bottom:16px;">{{ session('error') }}</p>
@endif

<div class="card">
    <h2>Generate marketing content</h2>
    <p style="margin-bottom:16px;">Enter a prompt to generate AI-powered marketing content. Requests are queued and processed in the background. Ensure <code>OPENAI_API_KEY</code> is set in .env and run the queue worker (<code>php artisan queue:work</code>) for processing.</p>
    <form method="post" action="{{ route('ai.generate') }}">
        @csrf
        <label style="display:block; margin-bottom:8px; font-weight:500;">Prompt</label>
        <textarea name="prompt" rows="4" required maxlength="4000" placeholder="e.g. Write a short social post about our new product launch" style="width:100%; padding:8px 12px; margin-bottom:16px; border:1px solid var(--m3-outline); border-radius:8px;">{{ old('prompt') }}</textarea>
        @error('prompt')<span style="color:#c62828;font-size:0.875rem;">{{ $message }}</span>@enderror
        <button type="submit" style="padding:10px 20px; border-radius:8px; background:var(--m3-primary); color:var(--m3-on-primary); border:none; cursor:pointer;">Generate</button>
    </form>
</div>

@if(!$recent->isEmpty())
<div class="card" style="margin-top:24px;">
    <h2>Recent requests</h2>
    <div class="table-wrap">
        <table class="data-table">
            <thead>
                <tr>
                    <th>Prompt</th>
                    <th>Status</th>
                    <th>Created</th>
                </tr>
            </thead>
            <tbody>
                @foreach($recent as $r)
                    <tr id="request-{{ $r->id }}" style="{{ $highlightId === $r->id ? 'background: var(--m3-surface-variant);' : '' }}">
                        <td>{{ Str::limit($r->prompt, 60) }}</td>
                        <td>
                            @if($r->status === 'queued')
                                <span style="color:var(--m3-outline);">Queued</span>
                            @elseif($r->status === 'processing')
                                <span style="color:#f9a825;">Processing…</span>
                            @elseif($r->status === 'completed')
                                <span style="color:#2e7d32;">Completed</span>
                            @else
                                <span style="color:#c62828;">Failed</span>
                            @endif
                        </td>
                        <td>{{ $r->created_at->format('M j, Y H:i') }}</td>
                    </tr>
                    @if(($highlightId === $r->id || in_array($r->status, ['completed', 'failed'])) && $r->response !== null)
                    <tr style="{{ $highlightId === $r->id ? 'background: var(--m3-surface-variant);' : '' }}">
                        <td colspan="3" style="padding:12px; border-top:0;">
                            <strong>Response:</strong>
                            <div style="margin-top:8px; white-space:pre-wrap; background:var(--m3-surface); padding:12px; border-radius:8px;">{{ $r->response }}</div>
                            @if($r->tokens_used > 0)
                                <small style="color:var(--m3-outline);">Tokens: {{ $r->tokens_used }}</small>
                            @endif
                        </td>
                    </tr>
                    @endif
                @endforeach
            </tbody>
        </table>
    </div>
</div>
@endif
@endsection