@extends('admin.layouts.app')

@section('title', __('admin.edit_product_seo'))

@section('breadcrumb')
    <li class="breadcrumb-item">
        <a href="{{ route('admin.seo.index') }}">{{ __('admin.seo_management') }}</a>
    </li>
    <li class="breadcrumb-item">
        <a href="{{ route('admin.seo.products') }}">{{ __('admin.product_seo') }}</a>
    </li>
    <li class="breadcrumb-item active">{{ $product->name ?: $product->code }}</li>
@endsection

@section('page-header')
    <div>
        <h1 class="h3 mb-0">{{ __('admin.edit_product_seo') }}</h1>
        <p class="text-muted">{{ $product->name ?: $product->code }} - {{ $availableLocales[$locale]['native'] }}</p>
    </div>
    <div class="d-flex gap-2">
        <!-- Language Selector -->
        <div class="dropdown">
            <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">
                <i class="fas fa-language me-1"></i>
                {{ $availableLocales[$locale]['native'] }}
            </button>
            <ul class="dropdown-menu">
                @foreach($availableLocales as $localeCode => $localeData)
                    <li>
                        <a class="dropdown-item {{ $localeCode === $locale ? 'active' : '' }}"
                           href="{{ route('admin.seo.product.edit', [$product->id, $localeCode]) }}">
                            <i class="fas fa-flag me-2"></i>
                            {{ $localeData['native'] }}
                        </a>
                    </li>
                @endforeach
            </ul>
        </div>
        <a href="{{ route('admin.products.edit', $product->id) }}" class="btn btn-outline-primary">
            <i class="fas fa-box me-1"></i>
            {{ __('admin.edit_product') }}
        </a>
        <a href="{{ route('admin.seo.products') }}" class="btn btn-outline-secondary">
            <i class="fas fa-arrow-left me-1"></i>
            {{ __('admin.back_to_products') }}
        </a>
    </div>
@endsection

@section('content')
    <form action="{{ route('admin.seo.product.update', [$product->id, $locale]) }}" method="POST" id="seoForm">
        @csrf
        @method('PUT')

        <div class="row">
            <!-- Main Content -->
            <div class="col-lg-8">
                <!-- Product Information -->
                <div class="admin-card mb-4">
                    <div class="card-header-custom">
                        <h5 class="mb-0">
                            <i class="fas fa-info-circle me-2"></i>
                            {{ __('admin.product_information') }}
                        </h5>
                    </div>
                    <div class="card-body-custom">
                        <div class="row">
                            <div class="col-md-2">
                                @if($product->main_image)
                                    <img src="{{ Storage::url($product->main_image->image_path) }}"
                                         alt="{{ $product->name }}"
                                         class="img-thumbnail"
                                         style="width: 100px; height: 100px; object-fit: cover;">
                                @else
                                    <div class="bg-light border rounded d-flex align-items-center justify-content-center"
                                         style="width: 100px; height: 100px;">
                                        <i class="fas fa-image text-muted fa-2x"></i>
                                    </div>
                                @endif
                            </div>
                            <div class="col-md-10">
                                <div class="row">
                                    <div class="col-md-6">
                                        <p><strong>{{ __('admin.product_name') }}:</strong> {{ $translation->name ?: $product->code }}</p>
                                        <p><strong>{{ __('admin.product_code') }}:</strong> {{ $product->code }}</p>
                                        <p><strong>{{ __('admin.sku') }}:</strong> {{ $product->sku }}</p>
                                    </div>
                                    <div class="col-md-6">
                                        <p><strong>{{ __('admin.price') }}:</strong> {{ number_format($product->current_price, 2) }} {{ __('admin.currency') }}</p>
                                        <p><strong>{{ __('admin.status') }}:</strong>
                                            <span class="badge {{ $product->is_active ? 'bg-success' : 'bg-secondary' }}">
                                            {{ $product->is_active ? __('admin.active') : __('admin.inactive') }}
                                        </span>
                                        </p>
                                        <p><strong>{{ __('admin.categories') }}:</strong>
                                            @foreach($product->categories->take(3) as $category)
                                                <span class="badge bg-info me-1">{{ $category->translate($locale)->name ?? $category->name }}</span>
                                            @endforeach
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- SEO Settings -->
                <div class="admin-card mb-4">
                    <div class="card-header-custom">
                        <h5 class="mb-0">
                            <i class="fas fa-search me-2"></i>
                            {{ __('admin.seo_settings') }}
                        </h5>
                    </div>
                    <div class="card-body-custom">
                        <!-- Meta Title -->
                        <div class="mb-3">
                            <label for="meta_title" class="form-label">
                                {{ __('admin.meta_title') }}
                                <span class="text-muted">({{ __('admin.optional') }})</span>
                            </label>
                            <div class="input-group">
                                <input type="text"
                                       class="form-control @error('meta_title') is-invalid @enderror"
                                       id="meta_title"
                                       name="meta_title"
                                       value="{{ old('meta_title', $translation->meta_title) }}"
                                       maxlength="60"
                                       placeholder="{{ __('admin.meta_title_placeholder') }}">
                                <span class="input-group-text" id="titleCounter">0/60</span>
                            </div>
                            @error('meta_title')
                            <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                            <div class="form-text">
                                {{ __('admin.meta_title_help') }}
                                <br>
                                <strong>{{ __('admin.suggestion') }}:</strong> {{ $translation->name }} - {{ __('admin.your_store_name') }}
                            </div>
                        </div>

                        <!-- Meta Description -->
                        <div class="mb-3">
                            <label for="meta_description" class="form-label">
                                {{ __('admin.meta_description') }}
                                <span class="text-muted">({{ __('admin.optional') }})</span>
                            </label>
                            <div class="input-group">
                            <textarea class="form-control @error('meta_description') is-invalid @enderror"
                                      id="meta_description"
                                      name="meta_description"
                                      rows="3"
                                      maxlength="160"
                                      placeholder="{{ __('admin.meta_description_placeholder') }}">{{ old('meta_description', $translation->meta_description) }}</textarea>
                                <span class="input-group-text align-items-start pt-2" id="descCounter">0/160</span>
                            </div>
                            @error('meta_description')
                            <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                            <div class="form-text">
                                {{ __('admin.meta_description_help') }}
                                @if($translation->short_description)
                                    <br>
                                    <strong>{{ __('admin.suggestion') }}:</strong> {{ Str::limit($translation->short_description, 150) }}
                                @endif
                            </div>
                        </div>

                        <!-- Meta Keywords -->
                        <div class="mb-3">
                            <label for="meta_keywords" class="form-label">{{ __('admin.meta_keywords') }}</label>
                            <input type="text"
                                   class="form-control @error('meta_keywords') is-invalid @enderror"
                                   id="meta_keywords"
                                   name="meta_keywords"
                                   value="{{ old('meta_keywords', $translation->meta_keywords) }}"
                                   placeholder="{{ __('admin.meta_keywords_placeholder') }}">
                            @error('meta_keywords')
                            <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                            <div class="form-text">{{ __('admin.meta_keywords_help') }}</div>
                        </div>

                        <!-- Focus Keywords -->
                        <div class="mb-3">
                            <label for="focus_keywords" class="form-label">{{ __('admin.focus_keywords') }}</label>
                            <input type="text"
                                   class="form-control @error('focus_keywords') is-invalid @enderror"
                                   id="focus_keywords"
                                   name="focus_keywords"
                                   value="{{ old('focus_keywords', $seoSettings->focus_keywords) }}"
                                   placeholder="{{ __('admin.focus_keywords_placeholder') }}">
                            @error('focus_keywords')
                            <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                            <div class="form-text">{{ __('admin.focus_keywords_help') }}</div>
                        </div>
                    </div>
                </div>

                <!-- Advanced SEO -->
                <div class="admin-card mb-4">
                    <div class="card-header-custom">
                        <h5 class="mb-0">
                            <i class="fas fa-cogs me-2"></i>
                            {{ __('admin.advanced_seo') }}
                        </h5>
                    </div>
                    <div class="card-body-custom">
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label for="og_title" class="form-label">{{ __('admin.og_title') }}</label>
                                <input type="text"
                                       class="form-control @error('og_title') is-invalid @enderror"
                                       id="og_title"
                                       name="og_title"
                                       value="{{ old('og_title', $seoSettings->og_title) }}"
                                       maxlength="60">
                                @error('og_title')
                                <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-6 mb-3">
                                <label for="og_description" class="form-label">{{ __('admin.og_description') }}</label>
                                <textarea class="form-control @error('og_description') is-invalid @enderror"
                                          id="og_description"
                                          name="og_description"
                                          rows="3"
                                          maxlength="160">{{ old('og_description', $seoSettings->og_description) }}</textarea>
                                @error('og_description')
                                <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="form-check">
                            <input class="form-check-input"
                                   type="checkbox"
                                   id="is_active"
                                   name="is_active"
                                   value="1"
                                {{ old('is_active', $seoSettings->is_active) ? 'checked' : '' }}>
                            <label class="form-check-label" for="is_active">
                                {{ __('admin.activate_seo_settings') }}
                            </label>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Sidebar -->
            <div class="col-lg-4">
                <!-- SEO Preview -->
                <div class="admin-card mb-4">
                    <div class="card-header-custom">
                        <h6 class="mb-0">
                            <i class="fas fa-eye me-2"></i>
                            {{ __('admin.seo_preview') }}
                        </h6>
                    </div>
                    <div class="card-body-custom">
                        <div class="seo-preview">
                            <div class="preview-title" id="previewTitle">
                                {{ $translation->meta_title ?: $translation->name ?: $product->code }}
                            </div>
                            <div class="preview-url">{{ route('products.show', $translation->slug ?? $product->id) }}</div>
                            <div class="preview-description" id="previewDescription">
                                {{ $translation->meta_description ?: $translation->short_description ?: __('admin.product_preview_default') }}
                            </div>
                        </div>
                    </div>
                </div>

                <!-- SEO Score -->
                <div class="admin-card mb-4">
                    <div class="card-header-custom">
                        <h6 class="mb-0">
                            <i class="fas fa-chart-line me-2"></i>
                            {{ __('admin.seo_score') }}
                        </h6>
                    </div>
                    <div class="card-body-custom">
                        <div class="text-center">
                            <div class="seo-score-circle" data-score="65">
                                <span class="score-text">65</span>
                            </div>
                            <div class="mt-3">
                                <span class="badge bg-warning">{{ __('admin.needs_improvement') }}</span>
                            </div>
                        </div>
                        <div class="mt-3">
                            <h6>{{ __('admin.recommendations') }}:</h6>
                            <ul class="list-unstyled small">
                                <li class="mb-1">
                                    <i class="fas fa-exclamation text-warning me-1"></i>
                                    {{ __('admin.add_meta_title') }}
                                </li>
                                <li class="mb-1">
                                    <i class="fas fa-exclamation text-warning me-1"></i>
                                    {{ __('admin.add_meta_description') }}
                                </li>
                                <li class="mb-1">
                                    <i class="fas fa-check text-success me-1"></i>
                                    {{ __('admin.product_has_images') }}
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>

                <!-- Product Content Analysis -->
                <div class="admin-card mb-4">
                    <div class="card-header-custom">
                        <h6 class="mb-0">
                            <i class="fas fa-analytics me-2"></i>
                            {{ __('admin.content_analysis') }}
                        </h6>
                    </div>
                    <div class="card-body-custom">
                        @if($translation->description)
                            @php
                                $wordCount = str_word_count(strip_tags($translation->description));
                                $readingTime = ceil($wordCount / 200);
                            @endphp
                            <div class="d-flex justify-content-between mb-2">
                                <span class="small text-muted">{{ __('admin.word_count') }}</span>
                                <span class="small fw-medium">{{ $wordCount }}</span>
                            </div>
                            <div class="d-flex justify-content-between mb-2">
                                <span class="small text-muted">{{ __('admin.reading_time') }}</span>
                                <span class="small fw-medium">{{ $readingTime }} {{ __('admin.minutes') }}</span>
                            </div>
                            <div class="d-flex justify-content-between mb-2">
                                <span class="small text-muted">{{ __('admin.images') }}</span>
                                <span class="small fw-medium">{{ $product->images->count() }}</span>
                            </div>
                        @else
                            <p class="text-muted small">{{ __('admin.no_content_to_analyze') }}</p>
                        @endif
                    </div>
                </div>

                <!-- Quick Actions -->
                <div class="admin-card">
                    <div class="card-header-custom">
                        <h6 class="mb-0">
                            <i class="fas fa-bolt me-2"></i>
                            {{ __('admin.quick_actions') }}
                        </h6>
                    </div>
                    <div class="card-body-custom">
                        <div class="d-grid gap-2">
                            <button type="submit" class="btn btn-primary">
                                <i class="fas fa-save me-1"></i>
                                {{ __('admin.save_seo_settings') }}
                            </button>

                            <button type="button" class="btn btn-outline-secondary" onclick="generateSuggestions()">
                                <i class="fas fa-magic me-1"></i>
                                {{ __('admin.generate_suggestions') }}
                            </button>

                            <button type="button" class="btn btn-outline-info" onclick="copyFromProduct()">
                                <i class="fas fa-copy me-1"></i>
                                {{ __('admin.copy_from_product') }}
                            </button>

                            <div class="dropdown">
                                <button class="btn btn-outline-secondary dropdown-toggle w-100" type="button" data-bs-toggle="dropdown">
                                    <i class="fas fa-tools me-1"></i>
                                    {{ __('admin.more_actions') }}
                                </button>
                                <ul class="dropdown-menu w-100">
                                    <li>
                                        <a class="dropdown-item" href="{{ route('products.show', $translation->slug ?? $product->id) }}" target="_blank">
                                            <i class="fas fa-external-link-alt me-2"></i>
                                            {{ __('admin.preview_product') }}
                                        </a>
                                    </li>
                                    <li>
                                        <a class="dropdown-item" href="{{ route('admin.products.edit', $product->id) }}">
                                            <i class="fas fa-edit me-2"></i>
                                            {{ __('admin.edit_product_details') }}
                                        </a>
                                    </li>
                                    <li>
                                        <button class="dropdown-item" onclick="resetSeo()">
                                            <i class="fas fa-undo me-2"></i>
                                            {{ __('admin.reset_seo') }}
                                        </button>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>

    <!-- Related Products Section -->
    <div class="row mt-4">
        <div class="col-12">
            <div class="admin-card">
                <div class="card-header-custom">
                    <h5 class="mb-0">
                        <i class="fas fa-link me-2"></i>
                        {{ __('admin.related_products_seo') }}
                    </h5>
                </div>
                <div class="card-body-custom">
                    @if($product->categories->count() > 0)
                        @php
                            $relatedProducts = App\Models\Product::whereHas('categories', function($query) use ($product) {
                                $query->whereIn('categories.id', $product->categories->pluck('id'));
                            })
                            ->where('id', '!=', $product->id)
                            ->with('translations')
                            ->limit(5)
                            ->get();
                        @endphp

                        @if($relatedProducts->count() > 0)
                            <div class="row">
                                @foreach($relatedProducts as $related)
                                    @php
                                        $relatedTranslation = $related->translate($locale);
                                        $hasSeo = $relatedTranslation && ($relatedTranslation->meta_title || $relatedTranslation->meta_description);
                                    @endphp
                                    <div class="col-md-4 mb-3">
                                        <div class="border rounded p-3">
                                            <h6 class="mb-2">{{ $relatedTranslation->name ?? $related->code }}</h6>
                                            <div class="d-flex justify-content-between align-items-center">
                                            <span class="badge {{ $hasSeo ? 'bg-success' : 'bg-warning' }}">
                                                {{ $hasSeo ? __('admin.seo_configured') : __('admin.seo_missing') }}
                                            </span>
                                                <a href="{{ route('admin.seo.product.edit', [$related->id, $locale]) }}"
                                                   class="btn btn-sm btn-outline-primary">
                                                    {{ __('admin.edit_seo') }}
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        @else
                            <p class="text-muted">{{ __('admin.no_related_products') }}</p>
                        @endif
                    @else
                        <p class="text-muted">{{ __('admin.product_has_no_categories') }}</p>
                    @endif
                </div>
            </div>
        </div>
    </div>
@endsection

@push('styles')
    <style>
        .seo-preview {
            border: 1px solid #e0e0e0;
            border-radius: 8px;
            padding: 16px;
            background: #f9f9f9;
        }

        .preview-title {
            color: #1a0dab;
            font-size: 18px;
            line-height: 1.3;
            margin-bottom: 4px;
            cursor: pointer;
        }

        .preview-url {
            color: #006621;
            font-size: 14px;
            margin-bottom: 4px;
            word-break: break-all;
        }

        .preview-description {
            color: #545454;
            font-size: 14px;
            line-height: 1.4;
        }

        .seo-score-circle {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            background: conic-gradient(#ffc107 0deg 234deg, #e9ecef 234deg 360deg);
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto;
            position: relative;
        }

        .seo-score-circle::before {
            content: '';
            width: 60px;
            height: 60px;
            border-radius: 50%;
            background: white;
            position: absolute;
        }

        .score-text {
            font-size: 18px;
            font-weight: bold;
            z-index: 1;
        }

        .content-suggestions {
            background: #f8f9fa;
            border-left: 4px solid #007bff;
            padding: 12px;
            margin: 16px 0;
        }
    </style>
@endpush

@push('scripts')
    <script>
        // Character counters
        function setupCharacterCounters() {
            const titleInput = document.getElementById('meta_title');
            const descInput = document.getElementById('meta_description');
            const titleCounter = document.getElementById('titleCounter');
            const descCounter = document.getElementById('descCounter');

            function updateCounter(input, counter, max) {
                const length = input.value.length;
                counter.textContent = `${length}/${max}`;
                counter.className = 'input-group-text ' +
                    (length > max ? 'text-danger' : length > max * 0.9 ? 'text-warning' : 'text-success');
            }

            titleInput.addEventListener('input', () => {
                updateCounter(titleInput, titleCounter, 60);
                updatePreview();
            });

            descInput.addEventListener('input', () => {
                updateCounter(descInput, descCounter, 160);
                updatePreview();
            });

            // Initial update
            updateCounter(titleInput, titleCounter, 60);
            updateCounter(descInput, descCounter, 160);
        }

        // Update SEO preview
        function updatePreview() {
            const title = document.getElementById('meta_title').value ||
                '{{ $translation->name ?: $product->code }}';
            const description = document.getElementById('meta_description').value ||
                '{{ $translation->short_description ?: __("admin.product_preview_default") }}';

            document.getElementById('previewTitle').textContent = title;
            document.getElementById('previewDescription').textContent = description;
        }

        // Generate SEO suggestions
        function generateSuggestions() {
            const productName = '{{ $translation->name ?? $product->code }}';
            const productDescription = '{{ $translation->description ?? $translation->short_description ?? "" }}';
            const content = productName + ' ' + productDescription;

            if (!content.trim()) {
                alert('{{ __("admin.no_content_to_analyze") }}');
                return;
            }

            // Show loading state
            const btn = event.target;
            const originalText = btn.innerHTML;
            btn.innerHTML = '<i class="fas fa-spinner fa-spin me-1"></i> {{ __("admin.generating") }}...';
            btn.disabled = true;

            fetch('{{ route("admin.seo.generate-suggestions") }}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                },
                body: JSON.stringify({
                    page_type: 'product',
                    page_identifier: '{{ $product->id }}',
                    locale: '{{ $locale }}',
                    content: content
                })
            })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        if (data.suggestions.meta_title) {
                            document.getElementById('meta_title').value = data.suggestions.meta_title;
                        }
                        if (data.suggestions.meta_description) {
                            document.getElementById('meta_description').value = data.suggestions.meta_description;
                        }
                        if (data.suggestions.suggested_keywords) {
                            document.getElementById('meta_keywords').value = data.suggestions.suggested_keywords;
                        }
                        updatePreview();
                        setupCharacterCounters();
                    } else {
                        alert('{{ __("admin.could_not_generate_suggestions") }}');
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    alert('{{ __("admin.something_went_wrong") }}');
                })
                .finally(() => {
                    btn.innerHTML = originalText;
                    btn.disabled = false;
                });
        }

        // Copy from product data
        function copyFromProduct() {
            const productName = '{{ $translation->name ?? $product->code }}';
            const productDesc = '{{ $translation->short_description ?? "" }}';

            if (productName) {
                document.getElementById('meta_title').value = productName;
            }

            if (productDesc) {
                document.getElementById('meta_description').value = productDesc.substring(0, 160);
            }

            updatePreview();
            setupCharacterCounters();
        }

        // Reset SEO fields
        function resetSeo() {
            if (confirm('{{ __("admin.confirm_reset_seo") }}')) {
                document.getElementById('meta_title').value = '';
                document.getElementById('meta_description').value = '';
                document.getElementById('meta_keywords').value = '';
                document.getElementById('focus_keywords').value = '';
                document.getElementById('og_title').value = '';
                document.getElementById('og_description').value = '';

                updatePreview();
                setupCharacterCounters();
            }
        }

        // Initialize on page load
        document.addEventListener('DOMContentLoaded', function() {
            setupCharacterCounters();
            updatePreview();
        });
    </script>
@endpush