@extends('layouts.app-sidebar')

@section('content')
<div class="max-w-4xl mx-auto">
    <!-- Back Button -->
    <a href="{{ route('dashboard') }}" class="inline-flex items-center gap-2 text-db-text-muted hover:text-db-text-primary text-sm mb-4 transition-colors group">
        <svg class="w-4 h-4 group-hover:-translate-x-0.5 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18" />
        </svg>
        Back to Dashboard
    </a>

    <!-- Header -->
    <div class="mb-8">
        <h1 class="text-2xl font-bold text-db-text-primary">Streamer Info</h1>
        <p class="mt-1 text-sm text-db-text-muted">Configure your stream details and customize your AI assistant</p>
    </div>

    <form method="POST" action="{{ route('dashboard.streamer-info.update') }}" class="space-y-6">
        @csrf

        <!-- Stream Info Section -->
        <div class="glass-card rounded-xl overflow-hidden">
            <div class="px-6 py-4 border-b border-glass">
                <h2 class="text-lg font-semibold text-db-text-primary flex items-center gap-2">
                    <svg class="w-5 h-5 text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z" />
                    </svg>
                    Stream Details
                </h2>
                <p class="text-sm text-db-text-muted mt-1">Tell the bot about your stream so it can respond appropriately</p>
            </div>

            <div class="p-6 space-y-5">
                <!-- Stream Type -->
                <div>
                    <label for="stream_type" class="block text-sm font-medium text-db-text-secondary mb-2">Stream Type</label>
                    <select name="stream_type" id="stream_type" class="w-full px-4 py-3 glass-input rounded-xl text-db-text-primary focus:outline-none focus:ring-2 focus:ring-db-accent-primary/50 transition-colors">
                        <option value="">Select type...</option>
                        <option value="gaming" {{ $tenant->stream_type === 'gaming' ? 'selected' : '' }}>Gaming</option>
                        <option value="tech" {{ $tenant->stream_type === 'tech' ? 'selected' : '' }}>Tech / Coding</option>
                        <option value="music" {{ $tenant->stream_type === 'music' ? 'selected' : '' }}>Music</option>
                        <option value="cooking" {{ $tenant->stream_type === 'cooking' ? 'selected' : '' }}>Cooking</option>
                        <option value="fitness" {{ $tenant->stream_type === 'fitness' ? 'selected' : '' }}>Fitness</option>
                        <option value="vlog" {{ $tenant->stream_type === 'vlog' ? 'selected' : '' }}>Vlog</option>
                        <option value="education" {{ $tenant->stream_type === 'education' ? 'selected' : '' }}>Education</option>
                        <option value="comedy" {{ $tenant->stream_type === 'comedy' ? 'selected' : '' }}>Comedy</option>
                        <option value="art" {{ $tenant->stream_type === 'art' ? 'selected' : '' }}>Art / Creative</option>
                        <option value="sports" {{ $tenant->stream_type === 'sports' ? 'selected' : '' }}>Sports</option>
                        <option value="other" {{ $tenant->stream_type === 'other' ? 'selected' : '' }}>Other</option>
                    </select>
                </div>

                <!-- Current Game -->
                <div>
                    <label for="current_game" class="block text-sm font-medium text-db-text-secondary mb-2">Current Game</label>
                    <input type="text" name="current_game" id="current_game" value="{{ old('current_game', $tenant->current_game) }}"
                           placeholder="e.g., GTA V, Valorant, Minecraft"
                           class="w-full px-4 py-3 glass-input rounded-xl text-db-text-primary placeholder:text-db-text-dim focus:outline-none focus:ring-2 focus:ring-db-accent-primary/50 transition-colors">
                    <p class="text-xs text-db-text-muted mt-1">Leave empty if not gaming</p>
                </div>

                <!-- Personal Info -->
                <div>
                    <label for="personal_info" class="block text-sm font-medium text-db-text-secondary mb-2">About You (Personal Info)</label>
                    <textarea name="personal_info" id="personal_info" rows="4"
                              placeholder="Tell viewers about yourself, your streaming schedule, social links, etc."
                              class="w-full px-4 py-3 glass-input rounded-xl text-db-text-primary placeholder:text-db-text-dim focus:outline-none focus:ring-2 focus:ring-db-accent-primary/50 transition-colors resize-y">{{ old('personal_info', $tenant->personal_info) }}</textarea>
                    <p class="text-xs text-db-text-muted mt-1">Bot uses this to answer questions about you (max 2000 characters)</p>
                </div>
            </div>
        </div>

        <!-- Current Settings Preview -->
        <div class="glass-card rounded-xl overflow-hidden">
            <div class="px-6 py-4 border-b border-glass">
                <h2 class="text-lg font-semibold text-db-text-primary">Current Configuration</h2>
            </div>
            <div class="p-6">
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                    <div class="p-4 bg-db-surface rounded-xl">
                        <p class="text-xs font-medium text-db-text-muted uppercase tracking-wider mb-1">Stream Type</p>
                        <p class="text-sm text-db-text-primary">{{ $tenant->stream_type ? ucfirst($tenant->stream_type) : 'Not Set' }}</p>
                    </div>
                    <div class="p-4 bg-db-surface rounded-xl">
                        <p class="text-xs font-medium text-db-text-muted uppercase tracking-wider mb-1">Current Game</p>
                        <p class="text-sm text-db-text-primary">{{ $tenant->current_game ?: 'Not Set' }}</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Submit Button -->
        <div class="flex justify-end gap-3">
            <a href="{{ route('dashboard') }}" class="px-5 py-2.5 bg-db-surface hover:bg-db-card-hover text-db-text-secondary rounded-lg text-sm font-medium transition-colors">
                Cancel
            </a>
            <button type="submit" class="px-6 py-2.5 bg-db-accent-primary hover:bg-db-accent-primary-hover text-white text-sm font-semibold rounded-lg shadow-lg transition-all">
                Save Changes
            </button>
        </div>
    </form>
</div>
@endsection