@extends('layouts.simple.master')

@section('main_content')
  <div class="container">
        <!-- Header با موجودی -->
        <div class="row mb-4">
            <div class="col-12">
  
                <span class="gradient-text">هوش مصنوعی</span>
                <span class="typing-animation">پیشرفته</span>
            </h1>
            <p class="hero-subtitle">با قدرتمندترین مدل‌های AI دنیا گفتگو کنید</p>
        </div>
    </div>

    <div class="models-grid">
        @foreach($models as $model)
        <div class="model-card {{ $model['active'] ? 'active' : 'disabled' }}">
            <div class="model-icon">{{ $model['icon'] }}</div>
            <div class="model-content">
                <h3 class="model-name">{{ $model['name'] }}</h3>
                <p class="model-description">{{ $model['description'] }}</p>
                @if($model['active'])
                    <a href="{{ route('ai.chat', $model['slug']) }}" class="start-chat-btn">
                        <span>شروع گفتگو</span>
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
                            <path d="M8.59 16.59L13.17 12L8.59 7.41L10 6l6 6-6 6-1.41-1.41z"/>
                        </svg>
                    </a>
                @else
                    <div class="coming-soon">به زودی</div>
                @endif
            </div>
            <div class="model-badge">{{ $model['active'] ? 'فعال' : 'غیرفعال' }}</div>
        </div>
        @endforeach
    </div>

    <div class="user-stats">
        <div class="stat-card">
            <div class="stat-icon">🎫</div>
            <div class="stat-content">
                <span class="stat-label">توکن رایگان</span>
                <span class="stat-value">{{ auth()->user()->free_tokens }}</span>
            </div>
        </div>
        <div class="stat-card">
            <div class="stat-icon">💰</div>
            <div class="stat-content">
                <span class="stat-label">موجودی کیف پول</span>
                <span class="stat-value">{{ number_format(auth()->user()->wallet_balance) }} تومان</span>
            </div>
        </div>
    </div>
</div>

<style>
.ai-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
    min-height: 100vh;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    font-family: 'Vazir', sans-serif;
}

.hero-section {
    text-align: center;
    margin-bottom: 4rem;
    padding: 3rem 0;
}

.hero-title {
    font-size: 3.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: white;
}

.gradient-text {
    background: linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.typing-animation {
    display: inline-block;
    animation: typing 2s infinite;
}

@keyframes typing {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

.hero-subtitle {
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 2rem;
}

.models-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2rem;
    margin-bottom: 3rem;
}

.model-card {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 20px;
    padding: 2rem;
    position: relative;
    transition: all 0.3s ease;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.model-card.active:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.model-card.disabled {
    opacity: 0.6;
    filter: grayscale(1);
}

.model-icon {
    font-size: 4rem;
    text-align: center;
    margin-bottom: 1.5rem;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1));
}

.model-content {
    text-align: center;
}

.model-name {
    font-size: 1.5rem;
    font-weight: 600;
    color: #2d3748;
    margin-bottom: 1rem;
}

.model-description {
    color: #718096;
    margin-bottom: 2rem;
    line-height: 1.6;
}

.start-chat-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: linear-gradient(45deg, #667eea, #764ba2);
    color: white;
    padding: 1rem 2rem;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
}

.start-chat-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6);
    color: white;
    text-decoration: none;
}

.coming-soon {
    background: #e2e8f0;
    color: #64748b;
    padding: 1rem 2rem;
    border-radius: 50px;
    font-weight: 600;
}

.model-badge {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: linear-gradient(45deg, #48bb78, #38a169);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
}

.model-card.disabled .model-badge {
    background: #e2e8f0;
    color: #64748b;
}

.user-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
}

.stat-card {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 15px;
    padding: 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.stat-icon {
    font-size: 2rem;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

.stat-content {
    display: flex;
    flex-direction: column;
}

.stat-label {
    color: #718096;
    font-size: 0.9rem;
    margin-bottom: 0.25rem;
}

.stat-value {
    color: #2d3748;
    font-size: 1.2rem;
    font-weight: 600;
}

/* Responsive Design */
@media (max-width: 768px) {
    .ai-container {
        padding: 1rem;
    }
    
    .hero-title {
        font-size: 2.5rem;
    }
    
    .models-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .model-card {
        padding: 1.5rem;
    }
    
    .user-stats {
        grid-template-columns: 1fr;
    }
}

/* انیمیشن‌های اضافی */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.model-card {
    animation: fadeInUp 0.6s ease forwards;
}

.model-card:nth-child(2) {
    animation-delay: 0.2s;
}

.stat-card {
    animation: fadeInUp 0.6s ease forwards;
    animation-delay: 0.4s;
}
</style>
@endsection

@section('script')
<!-- ✅ Confetti Library -->
<script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.9.0/dist/confetti.browser.min.js"></script>

<script>
function sendMessage() {
    const input = document.getElementById('message-input');
    const message = input.value.trim();
    
    if (!message) return;
    
    // نمایش پیام کاربر
    addMessage(message, 'user');
    input.value = '';
    
    // نمایش loading
    const loadingDiv = addMessage('در حال پردازش...', 'ai', true);
    
    fetch('/ai/send', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
        },
        body: JSON.stringify({message})
    })
    .then(r => r.json())
    .then(data => {
        loadingDiv.remove();
        
        if (data.error) {
            addMessage(data.error, 'error');
        } else {
            addMessage(data.reply, 'ai');
            updateTokenDisplay(data.remaining_tokens, data.wallet_balance);
        }
    })
    .catch(() => {
        loadingDiv.remove();
        addMessage('خطا در ارسال پیام', 'error');
    });
}

function addMessage(text, type, isLoading = false) {
    const div = document.createElement('div');
    div.className = `message ${type} ${isLoading ? 'loading' : ''}`;
    div.textContent = text;
    document.getElementById('messages').appendChild(div);
    div.scrollIntoView();
    return div;
}

</script>
@endsection