@extends('layouts.tutorly')

@section('title', 'Chat with Tutorly - Primary Learning Tutor')

@section('content')
<div class="tutorly-container">
    <!-- Main Content Area -->
    <div class="main-tutorly-content">
        <!-- Header with Level and Subject -->
        <div class="content-header">
            <div class="header-left">
                <h1 class="level-subject-title">
                    @if(request('class_id') && request('subject_id'))
                        @php
                            $class = $classes->find(request('class_id'));
                            $subject = $class ? $class->activeSubjects->find(request('subject_id')) : null;
                        @endphp
                        {{ $class ? $class->name : 'Primary 1' }} - {{ $subject ? $subject->name : 'Mathematics' }}
                    @elseif(request('class_id'))
                        @php $class = $classes->find(request('class_id')); @endphp
                        {{ $class ? $class->name : 'Primary 1' }} - Select a Subject
                    @else
                        Primary 1 - Select a Subject
                    @endif
                </h1>
            </div>
            <div class="header-right">
                <button class="btn btn-outline-secondary btn-sm" onclick="resetChat()">
                    <span>🔄</span> Reset
                </button>
            </div>
        </div>

        <!-- Tabs Navigation -->
        <div class="tabs-container">
            <button class="tab-button active" onclick="switchTab('learn')" id="tab-learn">
                Learn & Quiz
            </button>
            <button class="tab-button" onclick="switchTab('videos')" id="tab-videos">
                📺 Videos
            </button>
            <button class="tab-button" onclick="switchTab('papers')" id="tab-papers">
                Past Year Papers
            </button>
            <button class="tab-button" onclick="switchTab('notes')" id="tab-notes">
                Study Notes
            </button>
        </div>

        <!-- Tab Content -->
        <div class="tab-content">
            <!-- Learn & Quiz Tab -->
            <div id="content-learn" class="tab-pane active">
                <div class="greeting-section">
                    <h3>Let's Get Learning! 🚀</h3>
                </div>

                <!-- Chat with Tutorly Section -->
                @php
                    $selectedClass = $classes->firstWhere('id', request('class_id'));
                    $selectedSubject = $selectedClass ? $selectedClass->activeSubjects->firstWhere('id', request('subject_id')) : null;
                    $currentSubjectName = $selectedSubject ? $selectedSubject->name : 'Mathematics';
                    $hasSubject = request('subject_id') ? true : false;
                    $inputPlaceholder = $hasSubject ? "Type your question here... Don't be shy!" : "Please select a subject from the sidebar first";
                    $disabledAttr = $hasSubject ? '' : 'disabled';
                @endphp
                
                <div class="chat-intro-section" data-subject-name="{{ $currentSubjectName }}">
                    <div class="chat-header-row">
                        <h4>Chat with Tutorly</h4>
                        <button class="btn-help" onclick="showHelpModal()">
                            <span>❓</span> How To Use Tutorly
                        </button>
                    </div>
                    
                    <p class="chat-prompt">
                        @if($selectedSubject)
                            Got a question about {{ $currentSubjectName }}? I'm all ears! Fire away! 🚀
                        @else
                            Please select a subject from the sidebar to get started!
                        @endif
                    </p>

                    <!-- Quick Start Section -->
                    <div class="quick-start-section">
                        <div class="section-icon">💭</div>
                        <div class="section-content">
                            <h5>1. Quick Start: Ask Tutorly about any topic</h5>
                            <div class="action-buttons">
                                <button class="btn-action btn-learn" onclick="quickStart('learn')">
                                    <span>📖</span> Learn
                                </button>
                                <button class="btn-action btn-quiz" onclick="quickStart('quiz')">
                                    <span>❓</span> Quiz
                                </button>
                            </div>
                        </div>
                    </div>

                    <div class="divider-or">
                        <span>- OR -</span>
                    </div>

                    <!-- Popular Topics Section -->
                    <div class="popular-topics-section">
                        <div class="section-icon">✏️</div>
                        <div class="section-content">
                            <h5>2. Jump straight into popular topics</h5>
                            <div class="topics-grid" id="popularTopics">
                                <!-- Topics will be loaded based on selected subject -->
                                @if($hasSubject)
                                    @if($topics && $topics->count() > 0)
                                        <!-- Dynamic topics from database -->
                                        @foreach($topics as $topic)
                                            @php
                                                $questionTemplate = $topic->question_template ?? 'Tell me about {name}';
                                                $question = str_replace('{name}', $topic->name, $questionTemplate);
                                            @endphp
                                            <div class="topic-card" onclick="selectTopicWithQuestion('{{ addslashes($question) }}')">
                                                <h6>{{ $topic->name }}</h6>
                                                <p>{{ $topic->description ?? 'Click to learn about this topic' }}</p>
                                            </div>
                                        @endforeach
                                    @else
                                        <!-- No topics available message -->
                                        <div class="topic-card">
                                            <p class="text-muted">No topics available for this subject yet. Please add topics in the admin panel.</p>
                                        </div>
                                    @endif
                                @else
                                    <!-- Default topics when no subject selected -->
                                    <div class="topic-card">
                                        <p class="text-muted">Please select a subject from the sidebar to see topics</p>
                                    </div>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Chat Interface -->
                <div class="chat-interface-section">
                    <div class="chat-messages-container" id="chatBox">
                        <div class="welcome-message">
                            <div class="welcome-icon">👋</div>
                            <h4>Welcome to Tutorly!</h4>
                            <p>Select a subject from the sidebar, then ask me any questions or choose a topic to get started!</p>
                        </div>
                    </div>

                    <div class="chat-input-section">
                        <div class="input-group-custom">
                            <input 
                                type="text" 
                                id="questionInput" 
                                class="form-control chat-input" 
                                placeholder="{{ $inputPlaceholder }}"
                                onkeypress="handleKeyPress(event)"
                                {{ $disabledAttr }}
                            >
                            <button 
                                id="voiceBtn" 
                                class="btn-voice" 
                                onclick="toggleVoiceInput()" 
                                title="Voice input (Click to start/stop recording)" 
                                {{ $disabledAttr }}
                            >
                                <span id="voiceIcon">🎤</span>
                            </button>
                            <button class="btn-upload" onclick="toggleFileUpload()" title="Upload file" {{ $disabledAttr }}>
                                <span>📤</span>
                            </button>
                            <input type="file" id="fileInput" accept=".pdf,.docx,.doc,.txt,.xlsx,.csv,.png,.jpg,.jpeg" hidden>
                            <button 
                                id="askBtn" 
                                class="btn-ask" 
                                onclick="askQuestion()"
                                {{ $disabledAttr }}
                            >
                                <span>✈️</span> Ask
                            </button>
                        </div>
                        <div id="voiceStatus" class="status-message"></div>
                        <div id="uploadStatus" class="status-message"></div>
                        <div id="questionStatus" class="status-message"></div>
                    </div>
                </div>
            </div>

            <!-- Videos Tab -->
            <div id="content-videos" class="tab-pane">
                <div class="videos-section">
                    <div class="videos-header">
                        <h4>📺 Educational Videos</h4>
                        <p class="text-muted">
                            @if($selectedSubjectId)
                                Videos related to {{ $classes->firstWhere('id', $selectedClassId)?->name }} - {{ $classes->firstWhere('id', $selectedClassId)?->activeSubjects->firstWhere('id', $selectedSubjectId)?->name }}
                            @else
                                All educational videos
                            @endif
                        </p>
                    </div>

                    @if($relatedVideos->count() > 0)
                        <div class="videos-grid">
                            @foreach($relatedVideos as $video)
                                <a href="{{ route('videos.show', $video) }}" class="video-card" style="text-decoration: none; color: inherit; cursor: pointer;">
                                    <div class="video-thumbnail">
                                        @if($video->thumbnail_url)
                                            <img src="{{ $video->thumbnail_url }}" alt="{{ $video->title }}" loading="lazy">
                                        @else
                                            <div class="video-thumbnail-placeholder">📹</div>
                                        @endif
                                        <div class="video-play-overlay">
                                            <span class="play-icon">▶</span>
                                        </div>
                                        @if($video->duration)
                                            <span class="video-duration">{{ $video->duration }}</span>
                                        @endif
                                    </div>
                                    <div class="video-info">
                                        <h6 class="video-title">{{ $video->title }}</h6>
                                        <div class="video-meta">
                                            <span class="video-type">{{ $video->type }}</span>
                                            @if($video->genre)
                                                <span class="video-genre">{{ $video->genre }}</span>
                                            @endif
                                            @if($video->rating > 0)
                                                <span class="video-rating">⭐ {{ number_format($video->rating, 1) }}</span>
                                            @endif
                                        </div>
                                        @if($video->classModel || $video->subject)
                                            <div class="video-subject">
                                                @if($video->classModel)
                                                    <span>{{ $video->classModel->name }}</span>
                                                @endif
                                                @if($video->subject)
                                                    <span>• {{ $video->subject->name }}</span>
                                                @endif
                                                @if($video->topic)
                                                    <span>• {{ $video->topic }}</span>
                                                @endif
                                            </div>
                                        @endif
                                        @if($video->description)
                                            <p class="video-description">{{ Str::limit($video->description, 100) }}</p>
                                        @endif
                                    </div>
                                </a>
                            @endforeach
                        </div>
                    @else
                        <div class="no-videos-message">
                            <div class="placeholder-icon">📺</div>
                            <h5>No videos available</h5>
                            <p class="text-muted">There are no videos available yet. Check back later!</p>
                        </div>
                    @endif

                    @if($featuredVideos->count() > 0)
                        <div class="featured-videos-section mt-5">
                            <h5 class="mb-3">⭐ Featured Videos</h5>
                            <div class="videos-grid">
                                @foreach($featuredVideos as $video)
                                    <a href="{{ route('videos.show', $video) }}" class="video-card" style="text-decoration: none; color: inherit; cursor: pointer;">
                                        <div class="video-thumbnail">
                                            @if($video->thumbnail_url)
                                                <img src="{{ $video->thumbnail_url }}" alt="{{ $video->title }}" loading="lazy">
                                            @else
                                                <div class="video-thumbnail-placeholder">📹</div>
                                            @endif
                                            <div class="video-play-overlay">
                                                <span class="play-icon">▶</span>
                                            </div>
                                            @if($video->duration)
                                                <span class="video-duration">{{ $video->duration }}</span>
                                            @endif
                                            <span class="featured-badge">⭐ Featured</span>
                                        </div>
                                        <div class="video-info">
                                            <h6 class="video-title">{{ $video->title }}</h6>
                                            <div class="video-meta">
                                                <span class="video-type">{{ $video->type }}</span>
                                                @if($video->genre)
                                                    <span class="video-genre">{{ $video->genre }}</span>
                                                @endif
                                                @if($video->rating > 0)
                                                    <span class="video-rating">⭐ {{ number_format($video->rating, 1) }}</span>
                                                @endif
                                            </div>
                                            @if($video->classModel || $video->subject)
                                                <div class="video-subject">
                                                    @if($video->classModel)
                                                        <span>{{ $video->classModel->name }}</span>
                                                    @endif
                                                    @if($video->subject)
                                                        <span>• {{ $video->subject->name }}</span>
                                                    @endif
                                                    @if($video->topic)
                                                        <span>• {{ $video->topic }}</span>
                                                    @endif
                                                </div>
                                            @endif
                                        </div>
                                    </a>
                                @endforeach
                            </div>
                        </div>
                    @endif
                </div>
            </div>

            <!-- Past Year Papers Tab -->
            <div id="content-papers" class="tab-pane">
                <div class="videos-section">
                    @if($selectedClassId)
                        <div class="videos-header">
                            <h4>📄 Past Year Papers</h4>
                            <p class="text-muted">
                                @if($selectedSubjectId)
                                    Past papers for {{ $classes->firstWhere('id', $selectedClassId)?->name }} - {{ $classes->firstWhere('id', $selectedClassId)?->activeSubjects->firstWhere('id', $selectedSubjectId)?->name }}
                                @else
                                    All past papers for {{ $classes->firstWhere('id', $selectedClassId)?->name }}
                                @endif
                            </p>
                        </div>

                        @if($pastPapers && $pastPapers->count() > 0)
                            <div class="videos-grid">
                                @foreach($pastPapers as $paper)
                                    <div class="video-card" style="cursor: pointer;">
                                        <div class="video-thumbnail">
                                            <div class="video-thumbnail-placeholder" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">📄</div>
                                            <div class="video-play-overlay">
                                                <span class="play-icon">⬇️</span>
                                            </div>
                                        </div>
                                        <div class="video-info">
                                            <h6 class="video-title">{{ $paper->title }}</h6>
                                            <div class="video-meta">
                                                @if($paper->year || $paper->term)
                                                    <span class="video-type">
                                                        @if($paper->year){{ $paper->year }}@endif
                                                        @if($paper->year && $paper->term) / @endif
                                                        @if($paper->term){{ $paper->term }}@endif
                                                    </span>
                                                @endif
                                                <span class="video-genre">{{ number_format($paper->file_size / 1024, 1) }} KB</span>
                                            </div>
                                            @if($paper->description)
                                                <p class="video-description">{{ Str::limit($paper->description, 100) }}</p>
                                            @endif
                                            <a href="{{ route('download.past-paper', $paper) }}" class="btn btn-primary btn-sm mt-2" onclick="event.stopPropagation();">
                                                📥 Download
                                            </a>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        @else
                            <div class="no-videos-message">
                                <div class="placeholder-icon">📄</div>
                                <h5>No past papers available</h5>
                                <p class="text-muted">There are no past papers available for this selection yet. Check back later!</p>
                            </div>
                        @endif
                    @else
                        <div class="tab-placeholder">
                            <div class="placeholder-icon">📄</div>
                            <h4>Past Year Papers</h4>
                            <p>Select a class from the sidebar to view available past year papers!</p>
                            <p class="text-muted small">Access past year exam papers for practice and preparation.</p>
                        </div>
                    @endif
                </div>
            </div>

            <!-- Study Notes Tab -->
            <div id="content-notes" class="tab-pane">
                <div class="videos-section">
                    @if($selectedClassId)
                        <div class="videos-header">
                            <h4>📝 Study Notes</h4>
                            <p class="text-muted">
                                @if($selectedSubjectId)
                                    Study notes for {{ $classes->firstWhere('id', $selectedClassId)?->name }} - {{ $classes->firstWhere('id', $selectedClassId)?->activeSubjects->firstWhere('id', $selectedSubjectId)?->name }}
                                @else
                                    All study notes for {{ $classes->firstWhere('id', $selectedClassId)?->name }}
                                @endif
                            </p>
                        </div>

                        @if($studyNotes && $studyNotes->count() > 0)
                            <div class="videos-grid">
                                @foreach($studyNotes as $note)
                                    <div class="video-card" style="cursor: pointer;">
                                        <div class="video-thumbnail">
                                            <div class="video-thumbnail-placeholder" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);">📝</div>
                                            <div class="video-play-overlay">
                                                <span class="play-icon">⬇️</span>
                                            </div>
                                        </div>
                                        <div class="video-info">
                                            <h6 class="video-title">{{ $note->title }}</h6>
                                            <div class="video-meta">
                                                @if($note->topic)
                                                    <span class="video-type">{{ $note->topic }}</span>
                                                @endif
                                                <span class="video-genre">{{ number_format($note->file_size / 1024, 1) }} KB</span>
                                            </div>
                                            @if($note->description)
                                                <p class="video-description">{{ Str::limit($note->description, 100) }}</p>
                                            @endif
                                            <a href="{{ route('download.study-note', $note) }}" class="btn btn-primary btn-sm mt-2" onclick="event.stopPropagation();">
                                                📥 Download
                                            </a>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        @else
                            <div class="no-videos-message">
                                <div class="placeholder-icon">📝</div>
                                <h5>No study notes available</h5>
                                <p class="text-muted">There are no study notes available for this selection yet. Check back later!</p>
                            </div>
                        @endif
                    @else
                        <div class="tab-placeholder">
                            <div class="placeholder-icon">📝</div>
                            <h4>Study Notes</h4>
                            <p>Select a class from the sidebar to view available study notes!</p>
                            <p class="text-muted small">Access study notes for your selected subject and topic.</p>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>

    <!-- Help Modal -->
    <div class="modal fade" id="helpModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">How To Use Tutorly</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <h6>Step 1: Select a Level & Subject</h6>
                    <p>Choose your level (e.g., Primary 1) and subject (e.g., Mathematics) from the sidebar on the left.</p>
                    
                    <h6>Step 2: Ask Questions or Choose Topics</h6>
                    <p>Type your question in the input field or click on a popular topic card to get started.</p>
                    
                    <h6>Step 3: Upload Files (Optional)</h6>
                    <p>Click the upload button to upload PDFs, images, or documents for Tutorly to analyze and explain.</p>
                    
                    <h6>Step 4: Learn & Practice</h6>
                    <p>Get instant explanations, practice with quizzes, and ask follow-up questions!</p>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script src="{{ asset('js/chat.js') }}"></script>
@endpush