@extends('admin.layouts.app')

@section('title', __('global_seo_settings'))

@section('breadcrumb')
    <li class="breadcrumb-item">
        <a href="{{ route('admin.seo.index') }}">{{ __('seo_management') }}</a>
    </li>
    <li class="breadcrumb-item active">{{ __('global_seo_settings') }}</li>
@endsection

@section('page-header')
    <div>
        <h1 class="h3 mb-0">{{ __('global_seo_settings') }}</h1>
        <p class="text-muted">{{ __('configure_global_seo_description') }}</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.global', $localeCode) }}">
                            <i class="fas fa-flag me-2"></i>
                            {{ $localeData['native'] }}
                        </a>
                    </li>
                @endforeach
            </ul>
        </div>
        <a href="{{ route('admin.seo.index') }}" class="btn btn-outline-secondary">
            <i class="fas fa-arrow-left me-1"></i>
            {{ __('back_to_overview') }}
        </a>
    </div>
@endsection

@section('content')
    <form action="{{ route('admin.seo.global.update', $locale) }}" method="POST" enctype="multipart/form-data" id="seoForm">
        @csrf
        @method('PUT')

        <div class="row">
            <!-- Main SEO Settings -->
            <div class="col-lg-8">
                <div class="admin-card mb-4">
                    <div class="card-header-custom">
                        <h5 class="mb-0">
                            <i class="fas fa-search me-2"></i>
                            {{ __('basic_seo_settings') }}
                        </h5>
                    </div>
                    <div class="card-body-custom">
                        <!-- Meta Title -->
                        <div class="mb-3">
                            <label for="meta_title" class="form-label">
                                {{ __('meta_title') }} <span class="text-danger">*</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', $seoSettings->meta_title) }}"
                                       maxlength="60"
                                       placeholder="{{ __('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">{{ __('meta_title_help') }}</div>
                        </div>

                        <!-- Meta Description -->
                        <div class="mb-3">
                            <label for="meta_description" class="form-label">
                                {{ __('meta_description') }} <span class="text-danger">*</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="{{ __('meta_description_placeholder') }}">{{ old('meta_description', $seoSettings->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">{{ __('meta_description_help') }}</div>
                        </div>

                        <!-- Meta Keywords -->
                        <div class="mb-3">
                            <label for="meta_keywords" class="form-label">{{ __('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', $seoSettings->meta_keywords) }}"
                                   placeholder="{{ __('meta_keywords_placeholder') }}">
                            @error('meta_keywords')
                            <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                            <div class="form-text">{{ __('meta_keywords_help') }}</div>
                        </div>

                        <!-- Canonical URL -->
                        <div class="mb-3">
                            <label for="canonical_url" class="form-label">{{ __('canonical_url') }}</label>
                            <input type="url"
                                   class="form-control @error('canonical_url') is-invalid @enderror"
                                   id="canonical_url"
                                   name="canonical_url"
                                   value="{{ old('canonical_url', $seoSettings->canonical_url) }}"
                                   placeholder="https://example.com">
                            @error('canonical_url')
                            <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                            <div class="form-text">{{ __('canonical_url_help') }}</div>
                        </div>
                    </div>
                </div>

                <!-- Open Graph Settings -->
                <div class="admin-card mb-4">
                    <div class="card-header-custom">
                        <h5 class="mb-0">
                            <i class="fab fa-facebook me-2"></i>
                            {{ __('open_graph_settings') }}
                        </h5>
                    </div>
                    <div class="card-body-custom">
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label for="og_title" class="form-label">{{ __('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_type" class="form-label">{{ __('og_type') }}</label>
                                <select class="form-select @error('og_type') is-invalid @enderror" id="og_type" name="og_type">
                                    <option value="website" {{ old('og_type', $seoSettings->og_type) === 'website' ? 'selected' : '' }}>Website</option>
                                    <option value="article" {{ old('og_type', $seoSettings->og_type) === 'article' ? 'selected' : '' }}>Article</option>
                                    <option value="product" {{ old('og_type', $seoSettings->og_type) === 'product' ? 'selected' : '' }}>Product</option>
                                </select>
                                @error('og_type')
                                <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="mb-3">
                            <label for="og_description" class="form-label">{{ __('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 class="mb-3">
                            <label for="og_image" class="form-label">{{ __('og_image') }}</label>
                            <input type="file"
                                   class="form-control @error('og_image') is-invalid @enderror"
                                   id="og_image"
                                   name="og_image"
                                   accept="image/*">
                            @error('og_image')
                            <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                            <div class="form-text">{{ __('og_image_help') }}</div>
                            @if($seoSettings->og_image)
                                <div class="mt-2">
                                    <img src="{{ Storage::url($seoSettings->og_image) }}"
                                         alt="Current OG Image"
                                         class="img-thumbnail"
                                         style="max-width: 200px;">
                                </div>
                            @endif
                        </div>
                    </div>
                </div>

                <!-- Twitter Settings -->
                <div class="admin-card mb-4">
                    <div class="card-header-custom">
                        <h5 class="mb-0">
                            <i class="fab fa-twitter me-2"></i>
                            {{ __('twitter_settings') }}
                        </h5>
                    </div>
                    <div class="card-body-custom">
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label for="twitter_title" class="form-label">{{ __('twitter_title') }}</label>
                                <input type="text"
                                       class="form-control @error('twitter_title') is-invalid @enderror"
                                       id="twitter_title"
                                       name="twitter_title"
                                       value="{{ old('twitter_title', $seoSettings->twitter_title) }}"
                                       maxlength="70">
                                @error('twitter_title')
                                <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-6 mb-3">
                                <label for="twitter_card" class="form-label">{{ __('twitter_card') }}</label>
                                <select class="form-select @error('twitter_card') is-invalid @enderror" id="twitter_card" name="twitter_card">
                                    <option value="summary" {{ old('twitter_card', $seoSettings->twitter_card) === 'summary' ? 'selected' : '' }}>Summary</option>
                                    <option value="summary_large_image" {{ old('twitter_card', $seoSettings->twitter_card) === 'summary_large_image' ? 'selected' : '' }}>Summary Large Image</option>
                                    <option value="app" {{ old('twitter_card', $seoSettings->twitter_card) === 'app' ? 'selected' : '' }}>App</option>
                                    <option value="player" {{ old('twitter_card', $seoSettings->twitter_card) === 'player' ? 'selected' : '' }}>Player</option>
                                </select>
                                @error('twitter_card')
                                <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="mb-3">
                            <label for="twitter_description" class="form-label">{{ __('twitter_description') }}</label>
                            <textarea class="form-control @error('twitter_description') is-invalid @enderror"
                                      id="twitter_description"
                                      name="twitter_description"
                                      rows="3"
                                      maxlength="160">{{ old('twitter_description', $seoSettings->twitter_description) }}</textarea>
                            @error('twitter_description')
                            <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                </div>

                <!-- Advanced Settings -->
                <div class="admin-card mb-4">
                    <div class="card-header-custom">
                        <h5 class="mb-0">
                            <i class="fas fa-cogs me-2"></i>
                            {{ __('advanced_settings') }}
                        </h5>
                    </div>
                    <div class="card-body-custom">
                        <div class="mb-3">
                            <label for="custom_meta_tags" class="form-label">{{ __('custom_meta_tags') }}</label>
                            <textarea class="form-control @error('custom_meta_tags') is-invalid @enderror"
                                      id="custom_meta_tags"
                                      name="custom_meta_tags"
                                      rows="4"
                                      placeholder='property="article:author" content="John Doe"'>{{ old('custom_meta_tags', $seoSettings->custom_meta_tags) }}</textarea>
                            @error('custom_meta_tags')
                            <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                            <div class="form-text">{{ __('custom_meta_tags_help') }}</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">
                                {{ __('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>
                            {{ __('seo_preview') }}
                        </h6>
                    </div>
                    <div class="card-body-custom">
                        <div class="seo-preview">
                            <div class="preview-title" id="previewTitle">{{ $seoSettings->meta_title ?: __('your_site_title') }}</div>
                            <div class="preview-url">{{ config('app.url') }}</div>
                            <div class="preview-description" id="previewDescription">{{ $seoSettings->meta_description ?: __('your_site_description') }}</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>
                            {{ __('seo_score') }}
                        </h6>
                    </div>
                    <div class="card-body-custom">
                        <div class="text-center">
                            <div class="seo-score-circle" data-score="75">
                                <span class="score-text">75</span>
                            </div>
                            <div class="mt-3">
                                <span class="badge bg-success">{{ __('good') }}</span>
                            </div>
                        </div>
                        <div class="mt-3">
                            <h6>{{ __('recommendations') }}:</h6>
                            <ul class="list-unstyled small">
                                <li class="mb-1"><i class="fas fa-check text-success me-1"></i> {{ __('meta_title_optimized') }}</li>
                                <li class="mb-1"><i class="fas fa-exclamation text-warning me-1"></i> {{ __('add_og_image') }}</li>
                            </ul>
                        </div>
                    </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>
                            {{ __('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>
                                {{ __('save_settings') }}
                            </button>
                            <button type="button" class="btn btn-outline-secondary" onclick="generateSuggestions()">
                                <i class="fas fa-magic me-1"></i>
                                {{ __('generate_suggestions') }}
                            </button>
                            <a href="{{ route('admin.seo.index') }}" class="btn btn-outline-secondary">
                                <i class="fas fa-arrow-left me-1"></i>
                                {{ __('back_to_overview') }}
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
@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;
        }

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

        .seo-score-circle {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            background: conic-gradient(#28a745 0deg 270deg, #e9ecef 270deg 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;
        }
    </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 * 0.9 ? 'text-warning' : length > max ? 'text-danger' : '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 || '{{ __("admin.your_site_title") }}';
            const description = document.getElementById('meta_description').value || '{{ __("admin.your_site_description") }}';

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

        // Generate SEO suggestions
        function generateSuggestions() {
            const content = document.getElementById('meta_description').value;

            if (!content) {
                alert('{{ __("admin.please_add_content_first") }}');
                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: 'global',
                    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.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;
                });
        }

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