@extends('layouts.app')

@section('title', 'New Message')

@section('content')
<div class="container-fluid px-4">
    {{-- Page Header --}}
    <div class="d-flex flex-wrap align-items-center justify-content-between mb-4">
        <div>
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb mb-1">
                    <li class="breadcrumb-item"><a href="{{ route('account.dashboard') }}">Account</a></li>
                    <li class="breadcrumb-item"><a href="{{ route('account.messages.index') }}">Messages</a></li>
                    <li class="breadcrumb-item active" aria-current="page">New Message</li>
                </ol>
            </nav>
            <h1 class="h3 mb-0 fw-700">Start a Conversation</h1>
        </div>
        <div>
            <a href="{{ route('account.messages.index') }}" class="btn btn-sm btn-outline-secondary">
                <i class="fas fa-arrow-left me-1"></i> Back to Inbox
            </a>
        </div>
    </div>

    @if($errors->any())
        <div class="alert alert-danger alert-dismissible fade show" role="alert">
            <i class="fas fa-exclamation-circle me-2"></i>
            <strong>Please fix the following errors:</strong>
            <ul class="mb-0 mt-1">
                @foreach($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif

    <div class="row g-4">
        {{-- Form --}}
        <div class="col-lg-8">
            <div class="card border-0 shadow-sm">
                <div class="card-body">
                    <h6 class="fw-700 mb-3">
                        <i class="fas fa-pen text-primary me-2"></i>Compose Message
                    </h6>

                    <form action="{{ route('account.messages.store') }}"
                          method="POST"
                          id="messageForm">
                        @csrf

                        {{-- Receiver --}}
                        <div class="mb-3">
                            <label class="form-label fw-600">
                                To <span class="text-danger">*</span>
                            </label>
                            @if($receiver)
                                <input type="hidden" name="receiver_id" value="{{ $receiver->id }}">
                                <div class="d-flex align-items-center gap-2 p-2 bg-light rounded">
                                    @if($receiver->avatar)
                                        <img src="{{ asset('storage/' . $receiver->avatar) }}"
                                             alt="{{ $receiver->username }}"
                                             class="rounded-circle" width="40" height="40"
                                             style="object-fit:cover;">
                                    @else
                                        <div class="rounded-circle bg-primary bg-opacity-10 d-flex align-items-center justify-content-center"
                                             style="width:40px;height:40px;">
                                            <span class="text-primary fw-600">
                                                {{ strtoupper(substr($receiver->username ?? 'U', 0, 2)) }}
                                            </span>
                                        </div>
                                    @endif
                                    <div>
                                        <div class="fw-600">
                                            {{ $receiver->username ?: trim(($receiver->first_name ?? '') . ' ' . ($receiver->last_name ?? '')) }}
                                        </div>
                                        <small class="text-muted">{{ $receiver->email ?? '' }}</small>
                                    </div>
                                </div>
                            @else
                                <select name="receiver_id" class="form-select @error('receiver_id') is-invalid @enderror" required>
                                    <option value="">Select a recipient...</option>
                                </select>
                                @error('receiver_id')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            @endif
                        </div>

                        {{-- Product --}}
                        @if($product)
                            <input type="hidden" name="product_id" value="{{ $product->id }}">
                            <div class="mb-3">
                                <label class="form-label fw-600">About Product</label>
                                <div class="d-flex align-items-center gap-2 p-2 bg-light rounded">
                                    <i class="fas fa-cube text-info fs-5"></i>
                                    <div>
                                        <div class="fw-600 small">
                                            {{ $product->details->first()?->title ?? 'Product #' . $product->id }}
                                        </div>
                                        <a href="{{ route('storefront.products.show', $product) }}"
                                           target="_blank"
                                           class="small text-decoration-none">
                                            View product <i class="fas fa-external-link-alt"></i>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        @endif

                        {{-- Subject --}}
                        <div class="mb-3">
                            <label for="subject" class="form-label fw-600">
                                Subject <span class="text-danger">*</span>
                            </label>
                            <input type="text" id="subject" name="subject"
                                   class="form-control @error('subject') is-invalid @enderror"
                                   value="{{ old('subject', $product ? 'Question about: ' . ($product->details->first()?->title ?? '') : '') }}"
                                   required maxlength="500"
                                   placeholder="Brief description of your message">
                            @error('subject')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        {{-- Message --}}
                        <div class="mb-3">
                            <label for="message" class="form-label fw-600">
                                Message <span class="text-danger">*</span>
                            </label>
                            <textarea id="message" name="message"
                                      class="form-control @error('message') is-invalid @enderror"
                                      rows="8"
                                      required
                                      maxlength="10000"
                                      placeholder="Type your message here...">{{ old('message') }}</textarea>
                            @error('message')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                            <div class="d-flex justify-content-between">
                                <small class="text-muted">
                                    <i class="fas fa-info-circle me-1"></i>
                                    Be respectful and clear in your communication.
                                </small>
                                <small class="text-muted">
                                    <span id="charCount">0</span> / 10,000
                                </small>
                            </div>
                        </div>

                        <div class="d-flex gap-2">
                            <button type="submit" class="btn btn-primary" id="submitBtn">
                                <i class="fas fa-paper-plane me-1"></i> Send Message
                            </button>
                            <a href="{{ route('account.messages.index') }}" class="btn btn-outline-secondary">
                                Cancel
                            </a>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        {{-- Sidebar Tips --}}
        <div class="col-lg-4">
            <div class="card border-0 shadow-sm mb-3">
                <div class="card-body">
                    <h6 class="fw-700 mb-3">
                        <i class="fas fa-lightbulb text-warning me-2"></i>Messaging Tips
                    </h6>
                    <ul class="small text-muted mb-0 ps-3">
                        <li class="mb-2">Be clear about what you need or want to discuss.</li>
                        <li class="mb-2">Include order numbers or product references if relevant.</li>
                        <li class="mb-2">Sellers typically respond within 24-48 hours.</li>
                        <li class="mb-2">Keep communication on the platform for your protection.</li>
                        <li>Report suspicious messages to support.</li>
                    </ul>
                </div>
            </div>

            <div class="alert alert-warning">
                <i class="fas fa-shield-alt me-2"></i>
                <strong>Stay Safe:</strong> Never share passwords or payment details outside the platform's
                secure checkout.
            </div>
        </div>
    </div>
</div>
@endsection

@push('styles')
<style>
    .fw-600 { font-weight: 600; }
    .fw-700 { font-weight: 700; }
    textarea#message {
        min-height: 200px;
        resize: vertical;
    }
</style>
@endpush

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    var messageInput = document.getElementById('message');
    var charCount = document.getElementById('charCount');
    var form = document.getElementById('messageForm');
    var submitBtn = document.getElementById('submitBtn');

    if (messageInput && charCount) {
        var updateCount = function() {
            charCount.textContent = messageInput.value.length;
            charCount.parentElement.classList.toggle(
                'text-danger',
                messageInput.value.length > 9500
            );
        };
        messageInput.addEventListener('input', updateCount);
        updateCount();
    }

    if (form && submitBtn) {
        form.addEventListener('submit', function() {
            submitBtn.disabled = true;
            submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-1"></i> Sending...';
        });
    }
});
</script>
@endpush