@extends('layouts.student')

@section('title', 'Chat IA - MentoraMind')

@section('content')
@if(session('error'))
    <div class="alert alert-danger alert-dismissible fade show" role="alert">
        <i class="bi bi-exclamation-triangle me-2"></i>{{ session('error') }}
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
@endif

<div class="page-header d-flex justify-content-between align-items-start align-items-md-center">
    <div>
        <h1 id="chatTitle">
            @if(isset($activeConversation) && $activeConversation->title && $activeConversation->title !== 'Nouvelle conversation')
                {{ $activeConversation->title }}
            @else
                {{ __('student.chat.title') }}
            @endif
        </h1>
        <p class="mb-0">{{ __('student.chat.subtitle') }}</p>

        <div class="d-flex gap-2 mt-3 d-md-none">
            <a href="{{ route('student.chat.history') }}" class="btn btn-sm btn-outline-primary" style="flex: 1;">
                <i class="bi bi-clock-history me-1"></i>{{ __('student.chat.history') }}
            </a>
            
            @if(isset($activeConversation) && $activeConversation->id)
            <div class="dropdown" style="flex: 1;">
                <button class="btn btn-sm btn-outline-secondary dropdown-toggle w-100" type="button" id="chatActions" data-bs-toggle="dropdown" aria-expanded="false">
                    <i class="bi bi-three-dots-vertical me-1"></i>Actions
                </button>
                <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="chatActions">
                    <li>
                        <a class="dropdown-item" href="#" data-bs-toggle="modal" data-bs-target="#editTitleModal">
                            <i class="bi bi-pencil me-2"></i>{{ __('student.chat.edit_title') }}
                        </a>
                    </li>
                    <li><hr class="dropdown-divider"></li>
                    <li>
                        <a class="dropdown-item text-danger" href="#" data-bs-toggle="modal" data-bs-target="#deleteConversationModal">
                            <i class="bi bi-trash me-2"></i>{{ __('student.chat.delete_conversation') }}
                        </a>
                    </li>
                </ul>
            </div>
            @endif
        </div>
    </div>

    <div class="d-none d-md-flex align-items-center gap-2">
        <a href="{{ route('student.chat.history') }}" class="btn btn-outline-primary">
            <i class="bi bi-clock-history me-2"></i>{{ __('student.chat.history') }}
        </a>
        @if(isset($activeConversation) && $activeConversation->id)
            <div class="dropdown">
                <button class="btn btn-outline-secondary dropdown-toggle" type="button" id="chatActionsDesktop" data-bs-toggle="dropdown" aria-expanded="false">
                    <i class="bi bi-three-dots-vertical me-2"></i>{{ __('student.chat.actions') }}
                </button>
                <ul class="dropdown-menu" aria-labelledby="chatActionsDesktop">
                    <li>
                        <a class="dropdown-item" href="#" data-bs-toggle="modal" data-bs-target="#editTitleModal">
                            <i class="bi bi-pencil me-2"></i>{{ __('student.chat.edit_title') }}
                        </a>
                    </li>
                    <li><hr class="dropdown-divider"></li>
                    <li>
                        <a class="dropdown-item text-danger" href="#" data-bs-toggle="modal" data-bs-target="#deleteConversationModal">
                            <i class="bi bi-trash me-2"></i>{{ __('student.chat.delete_conversation') }}
                        </a>
                    </li>
                </ul>
            </div>
        @endif
    </div>
</div>

@livewire('student.chat-interface', ['conversationId' => $activeConversation->id ?? null])

@if(isset($activeConversation) && $activeConversation->id)
    {{-- Modal Edit Title --}}
    <div class="modal fade" id="editTitleModal" tabindex="-1" aria-labelledby="editTitleModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="editTitleModalLabel">{{ __('student.chat.edit_title') }}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form action="{{ route('student.chat.update-title', $activeConversation->id) }}" method="POST">
                    @csrf
                    @method('PATCH')
                    <div class="modal-body">
                        <div class="mb-3">
                            <label for="conversationTitle" class="form-label">{{ __('student.chat.conversation_title') }}</label>
                            <input type="text" class="form-control" id="conversationTitle" name="title"
                                   value="{{ $activeConversation->title }}" required maxlength="100">
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ __('common.cancel') }}</button>
                        <button type="submit" class="btn btn-primary">{{ __('common.save') }}</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    {{-- Modal Delete Conversation --}}
    <div class="modal fade" id="deleteConversationModal" tabindex="-1" aria-labelledby="deleteConversationModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="deleteConversationModalLabel">{{ __('student.chat.delete_conversation') }}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form action="{{ route('student.chat.delete', $activeConversation->id) }}" method="POST">
                    @csrf
                    @method('DELETE')
                    <div class="modal-body">
                        <p>{{ __('student.chat.delete_confirmation') }}</p>
                        <p class="text-muted"><strong>{{ $activeConversation->title }}</strong></p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ __('common.cancel') }}</button>
                        <button type="submit" class="btn btn-danger">{{ __('common.delete') }}</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endif
@endsection