@extends('layouts.app')

@section('title', 'Generate — dreamstudio')

@section('content')
    <div class="mb-8 rounded-md border {{ $warnThresholdReached ? 'border-amber-300 bg-amber-50' : 'border-gray-200 bg-white' }} p-4">
        <div class="flex items-center justify-between text-sm">
            <span class="font-medium">Monthly Runware budget</span>
            <span>{{ number_format($spentEur, 2) }}€ / {{ number_format($capEur, 2) }}€ spent · {{ number_format($remainingEur, 2) }}€ remaining</span>
        </div>
        <div class="mt-2 h-2 w-full overflow-hidden rounded-full bg-gray-100">
            @php $pct = $capEur > 0 ? min(100, ($spentEur / $capEur) * 100) : 0; @endphp
            <div class="h-full {{ $warnThresholdReached ? 'bg-amber-500' : 'bg-gray-800' }}" style="width: {{ $pct }}%"></div>
        </div>
        @if ($warnThresholdReached)
            <p class="mt-2 text-sm text-amber-800">Approaching the monthly cap — new generations will be blocked once it's reached.</p>
        @endif
    </div>

    <div class="mb-8 rounded-md border border-gray-200 bg-white p-6">
        <h2 class="mb-4 text-base font-semibold">New generation</h2>
        <form method="POST" action="{{ route('generations.store') }}" class="space-y-4">
            @csrf

            <div>
                <label class="block text-sm font-medium">Type</label>
                <select name="type" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm" onchange="document.querySelectorAll('[data-type-fields]').forEach(el => el.classList.toggle('hidden', el.dataset.typeFields !== this.value))">
                    <option value="image">Image</option>
                    <option value="video">Video</option>
                    <option value="text">Text</option>
                </select>
            </div>

            <div>
                <label class="block text-sm font-medium">Model (optional — leave blank to use the default cheapest model)</label>
                <select name="model" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm">
                    <option value="">Use default</option>
                    @foreach ($models->flatten() as $model)
                        <option value="{{ $model->air_id }}">[{{ $model->modality }}] {{ $model->label }} ({{ $model->air_id }}) — ${{ $model->price_usd }}/{{ $model->unit }}{{ $model->is_default ? ' · default' : '' }}</option>
                    @endforeach
                </select>
            </div>

            <div>
                <label class="block text-sm font-medium">Prompt</label>
                <textarea name="prompt" rows="3" required class="mt-1 block w-full rounded-md border-gray-300 shadow-sm">{{ old('prompt') }}</textarea>
            </div>

            <div class="grid grid-cols-3 gap-4">
                <div data-type-fields="image">
                    <label class="block text-sm font-medium">Width</label>
                    <input type="number" name="width" value="1024" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm">
                </div>
                <div data-type-fields="image">
                    <label class="block text-sm font-medium">Height</label>
                    <input type="number" name="height" value="1024" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm">
                </div>
                <div data-type-fields="video" class="hidden">
                    <label class="block text-sm font-medium">Duration (seconds)</label>
                    <input type="number" name="duration" value="5" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm">
                </div>
            </div>

            <button type="submit" class="rounded-md bg-gray-900 px-4 py-2 text-sm font-medium text-white hover:bg-gray-700">
                Generate
            </button>
        </form>
    </div>

    <div class="rounded-md border border-gray-200 bg-white p-6">
        <h2 class="mb-4 text-base font-semibold">History</h2>
        <div class="divide-y divide-gray-100">
            @forelse ($generations as $generation)
                <div class="flex items-start justify-between gap-4 py-3">
                    <div class="min-w-0 flex-1">
                        <div class="flex items-center gap-2 text-sm">
                            <span class="rounded bg-gray-100 px-2 py-0.5 font-medium uppercase">{{ $generation->type }}</span>
                            <span class="rounded px-2 py-0.5 {{ match($generation->status) {
                                'completed' => 'bg-green-100 text-green-800',
                                'failed' => 'bg-red-100 text-red-800',
                                default => 'bg-gray-100 text-gray-700',
                            } }}">{{ $generation->status }}</span>
                            <span class="text-gray-400">{{ $generation->model }}</span>
                        </div>
                        <p class="mt-1 truncate text-sm text-gray-700">{{ $generation->prompt }}</p>

                        @if ($generation->type === 'image' && $generation->output_path)
                            <img src="{{ Storage::url($generation->output_path) }}" class="mt-2 h-32 w-32 rounded object-cover">
                        @elseif ($generation->type === 'video' && $generation->output_path)
                            <video src="{{ Storage::url($generation->output_path) }}" controls class="mt-2 h-32 rounded"></video>
                        @elseif ($generation->type === 'text' && $generation->output_text)
                            <p class="mt-2 rounded bg-gray-50 p-2 text-sm text-gray-800">{{ Str::limit($generation->output_text, 300) }}</p>
                        @elseif ($generation->error)
                            <p class="mt-2 text-sm text-red-700">{{ $generation->error }}</p>
                        @endif
                    </div>
                    <div class="shrink-0 text-right text-sm text-gray-500">
                        @if ($generation->cost_eur !== null)
                            <div>{{ number_format($generation->cost_eur, 4) }}€{{ $generation->cost_is_estimated ? ' (est.)' : '' }}</div>
                        @endif
                        <div class="text-xs">{{ $generation->created_at->diffForHumans() }}</div>
                    </div>
                </div>
            @empty
                <p class="py-6 text-center text-sm text-gray-500">No generations yet.</p>
            @endforelse
        </div>

        {{ $generations->links() }}
    </div>
@endsection