@extends('layouts.app')

@section('styles')
<style>
.sortable-ghost {
    opacity: 0.4;
    background-color: #f8f9fa;
}
</style>
@endsection

@section('content')
    <div class="page">
        <div class="page-inner">
            <header class="page-title-bar">
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item">
                            <a href="{{ route('tests.index') }}"><i class="breadcrumb-icon fa fa-angle-left mr-2"></i>{{ __('Tests') }}</a>
                        </li>
                        <li class="breadcrumb-item">
                            <a href="{{ route('tests.edit', $test->id) }}">{{ $test->trans('name') }}</a>
                        </li>
                        <li class="breadcrumb-item active">{{ __('Categories') }}</li>
                    </ol>
                </nav>
                <h1 class="page-title">{{ __('Point Categories') }}: {{ $test->trans('name') }}</h1>
            </header>

            @if(session('success'))
                <div class="alert alert-success alert-dismissible fade show" role="alert">
                    {{ session('success') }}
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
            @endif

            <div class="page-section">
                <div class="row">
                    <div class="col-md-8">
                        <section class="card card-fluid">
                            <header class="card-header">{{ __('Existing Categories') }}</header>
                            <div class="card-body">
                                @if($categories->count() > 0)
                                    <table class="table table-hover mb-0">
                                        <thead>
                                            <tr>
                                                <th style="width: 40px;"></th>
                                                <th>{{ __('Name') }}</th>
                                                <th style="width: 100px;">{{ __('Mean') }}</th>
                                                <th style="width: 100px;">{{ __('Std Dev') }}</th>
                                                <th style="width: 80px;">{{ __('Conv.') }}</th>
                                                <th style="width: 150px;"></th>
                                            </tr>
                                        </thead>
                                        <tbody id="categories-list">
                                            @foreach($categories as $category)
                                                <tr data-id="{{ $category->id }}">
                                                    <td><i class="fa fa-bars text-muted" style="cursor: move;"></i></td>
                                                    <td>{{ $category->trans('name') }}</td>
                                                    <td>
                                                        @if($category->expected_mean !== null)
                                                            {{ number_format($category->expected_mean, 1) }}
                                                        @else
                                                            <span class="text-muted">-</span>
                                                        @endif
                                                    </td>
                                                    <td>
                                                        @if($category->expected_std !== null)
                                                            {{ number_format($category->expected_std, 1) }}
                                                        @else
                                                            <span class="text-muted">-</span>
                                                        @endif
                                                    </td>
                                                    <td>
                                                        @if($category->conversions()->count() > 0)
                                                            <a href="{{ route('tests.categories.conversions', [$test->id, $category->id]) }}" class="badge badge-success" title="{{ $category->conversions()->count() }} {{ __('entries') }}">
                                                                <i class="fa fa-table"></i> {{ $category->conversions()->distinct('gender')->count('gender') }}g
                                                            </a>
                                                        @else
                                                            <a href="{{ route('tests.categories.conversions', [$test->id, $category->id]) }}" class="btn btn-sm btn-outline-secondary" title="{{ __('Add conversion table') }}">
                                                                <i class="fa fa-plus"></i>
                                                            </a>
                                                        @endif
                                                    </td>
                                                    <td>
                                                        <button type="button" class="btn btn-sm btn-outline-primary" 
                                                            onclick="editCategory({{ $category->id }}, {{ json_encode($category->getTranslations('name')) }}, {{ $category->expected_mean ?? 'null' }}, {{ $category->expected_std ?? 'null' }})">
                                                            {{ __('Edit') }}
                                                        </button>
                                                        <form method="POST" action="{{ route('tests.categories.destroy', [$test->id, $category->id]) }}" 
                                                            style="display:inline" onsubmit="return confirm('{{ __('Are you sure?') }}')">
                                                            @csrf
                                                            @method('DELETE')
                                                            <button type="submit" class="btn btn-sm btn-outline-danger">{{ __('Delete') }}</button>
                                                        </form>
                                                    </td>
                                                </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                    <div class="card-footer bg-light">
                                        <small class="text-muted">
                                            <strong>{{ __('Normalization') }}:</strong> {{ __('Set Mean and Std Dev to normalize raw scores to a 0-100 scale (50 = average).') }}
                                        </small>
                                    </div>
                                @else
                                    <p class="text-muted">{{ __('No categories yet. Add your first category.') }}</p>
                                @endif
                            </div>
                        </section>
                    </div>
                    <div class="col-md-4">
                        @if($test->formula_class && class_exists($test->formula_class))
                            @php
                                $formulaClass = $test->formula_class;
                                $expectedCategories = method_exists($formulaClass, 'getExpectedCategories') 
                                    ? $formulaClass::getExpectedCategories() 
                                    : [];
                            @endphp
                            @if(!empty($expectedCategories))
                                <section class="card card-fluid border-primary mb-3">
                                    <header class="card-header bg-primary text-white">
                                        <i class="fa fa-magic mr-2"></i>{{ __('Formula Categories') }}
                                    </header>
                                    <div class="card-body">
                                        <p class="mb-2">
                                            <strong>{{ $formulaClass::getName() }}</strong> {{ __('requires') }} 
                                            <strong>{{ count($expectedCategories) }}</strong> {{ __('categories') }}:
                                        </p>
                                        <ul class="small mb-3" style="max-height: 150px; overflow-y: auto;">
                                            @foreach($expectedCategories as $index => $catName)
                                                <li>{{ $index + 1 }}. {{ $catName }}</li>
                                            @endforeach
                                        </ul>
                                        @if($categories->count() == 0)
                                            <form method="POST" action="{{ route('tests.categories.create-from-formula', $test->id) }}">
                                                @csrf
                                                <button type="submit" class="btn btn-primary btn-block">
                                                    <i class="fa fa-plus mr-2"></i>{{ __('Create All Formula Categories') }}
                                                </button>
                                            </form>
                                        @elseif($categories->count() == count($expectedCategories))
                                            @php
                                                $orderCorrect = true;
                                                $mismatchDetails = [];
                                                foreach($categories as $index => $cat) {
                                                    $expected = $expectedCategories[$index] ?? null;
                                                    if ($expected && strtolower(trim($cat->getTranslation('name', 'en', false) ?: $cat->trans('name'))) !== strtolower(trim($expected))) {
                                                        $orderCorrect = false;
                                                        $mismatchDetails[] = ($index + 1) . ": '{$cat->trans('name')}' should be '{$expected}'";
                                                    }
                                                }
                                            @endphp
                                            @if($orderCorrect)
                                                <div class="alert alert-success mb-0 small">
                                                    <i class="fa fa-check mr-1"></i> {{ __('All required categories are configured in the correct order.') }}
                                                </div>
                                            @else
                                                <div class="alert alert-danger mb-0 small">
                                                    <i class="fa fa-exclamation-circle mr-1"></i>
                                                    <strong>{{ __('Categories are in the wrong order!') }}</strong><br>
                                                    {{ __('Scores will be mapped incorrectly. Please delete all categories and use the auto-create button, or manually reorder them.') }}
                                                    @if(count($mismatchDetails) <= 5)
                                                        <ul class="mb-0 mt-1">
                                                            @foreach($mismatchDetails as $detail)
                                                                <li>{{ $detail }}</li>
                                                            @endforeach
                                                        </ul>
                                                    @endif
                                                </div>
                                            @endif
                                        @else
                                            <div class="alert alert-warning mb-0 small">
                                                <i class="fa fa-exclamation-triangle mr-1"></i>
                                                {{ __('Expected') }} {{ count($expectedCategories) }} {{ __('categories, found') }} {{ $categories->count() }}.
                                                {{ __('Delete existing categories to auto-create from formula.') }}
                                            </div>
                                        @endif
                                    </div>
                                </section>
                            @endif
                        @endif

                        <section class="card card-fluid">
                            <header class="card-header">{{ __('Add Category') }}</header>
                            <div class="card-body">
                                <form method="POST" action="{{ route('tests.categories.store', $test->id) }}">
                                    @csrf
                                    <div class="form-group">
                                        <label>{{ __('Category Name') }}</label>
                                        @include('components.translatable-input', [
                                            'name' => 'name',
                                            'type' => 'text',
                                            'model' => null,
                                            'required' => true
                                        ])
                                    </div>
                                    <button type="submit" class="btn btn-primary">{{ __('Add Category') }}</button>
                                </form>
                            </div>
                        </section>

                        <section class="card card-fluid mt-3" id="edit-category-card" style="display: none;">
                            <header class="card-header">{{ __('Edit Category') }}</header>
                            <div class="card-body">
                                <form method="POST" id="edit-category-form">
                                    @csrf
                                    @method('PUT')
                                    <div class="form-group">
                                        <label>{{ __('Category Name') }}</label>
                                        @php $editLocales = ['en' => 'English', 'nl' => 'Nederlands', 'de' => 'Deutsch', 'fr' => 'Français', 'pl' => 'Polski', 'es' => 'Español']; @endphp
                                        <div class="translatable-field" data-field="name" data-model-type="category" data-model-id="">
                                            <ul class="nav nav-tabs nav-tabs-sm mb-2" role="tablist">
                                                @foreach($editLocales as $locale => $localeName)
                                                    <li class="nav-item">
                                                        <a class="nav-link {{ $locale === 'en' ? 'active' : '' }}" 
                                                           data-toggle="tab" href="#edit_name_{{ $locale }}" role="tab">
                                                            {{ strtoupper($locale) }}
                                                            @if($locale === 'en')
                                                                <span class="badge badge-primary badge-sm">{{ __('Source') }}</span>
                                                            @endif
                                                        </a>
                                                    </li>
                                                @endforeach
                                            </ul>
                                            <div class="tab-content">
                                                @foreach($editLocales as $locale => $localeName)
                                                    <div class="tab-pane fade {{ $locale === 'en' ? 'show active' : '' }}" id="edit_name_{{ $locale }}" role="tabpanel">
                                                        <input type="text" name="name[{{ $locale }}]" 
                                                               class="form-control edit-category-name-input translatable-input" 
                                                               data-locale="{{ $locale }}"
                                                               {{ $locale === 'en' ? 'required' : '' }}>
                                                    </div>
                                                @endforeach
                                            </div>
                                            <div class="mt-2">
                                                <button type="button" class="btn btn-sm btn-outline-secondary auto-translate-btn" 
                                                        data-field="name" data-field-id="edit_name">
                                                    <i class="fa fa-language"></i> {{ __('Auto-translate from English') }}
                                                </button>
                                                <span class="translate-status text-muted small ml-2"></span>
                                            </div>
                                        </div>
                                    </div>
                                    <hr>
                                    <h6>{{ __('Score Normalization') }}</h6>
                                    <p class="text-muted small">{{ __('Set these values to normalize raw scores to a 0-100 scale.') }}</p>
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label for="edit_expected_mean">{{ __('Expected Mean') }}</label>
                                                <input type="number" name="expected_mean" id="edit_expected_mean" class="form-control" step="0.01">
                                                <small class="text-muted">{{ __('Average raw score') }}</small>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label for="edit_expected_std">{{ __('Expected Std Dev') }}</label>
                                                <input type="number" name="expected_std" id="edit_expected_std" class="form-control" step="0.01" min="0.01">
                                                <small class="text-muted">{{ __('Standard deviation') }}</small>
                                            </div>
                                        </div>
                                    </div>
                                    <button type="submit" class="btn btn-primary">{{ __('Save') }}</button>
                                    <button type="button" class="btn btn-secondary" onclick="cancelEdit()">{{ __('Cancel') }}</button>
                                </form>
                            </div>
                        </section>
                    </div>
                </div>

                <div class="mt-3">
                    <a href="{{ route('tests.edit', $test->id) }}" class="btn btn-secondary">{{ __('Back to Test') }}</a>
                    <a href="{{ route('tests.questions', $test->id) }}" class="btn btn-primary">{{ __('Next: Questions') }}</a>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js"></script>
<script src="{{ asset('js/translations.js') }}"></script>
<script>
var categoryUpdateBaseUrl = '/tests/{{ $test->id }}/categories/';

function editCategory(id, translations, mean, std) {
    document.querySelectorAll('.edit-category-name-input').forEach(function(input) {
        var locale = input.getAttribute('data-locale');
        input.value = (translations && translations[locale]) ? translations[locale] : '';
    });
    document.getElementById('edit_expected_mean').value = mean !== null ? mean : '';
    document.getElementById('edit_expected_std').value = std !== null ? std : '';
    document.getElementById('edit-category-form').action = categoryUpdateBaseUrl + id;
    document.getElementById('edit-category-card').style.display = 'block';
}

function cancelEdit() {
    document.getElementById('edit-category-card').style.display = 'none';
}

document.addEventListener('DOMContentLoaded', function() {
    var el = document.getElementById('categories-list');
    if (el) {
        var sortable = Sortable.create(el, {
            animation: 150,
            handle: '.fa-bars',
            ghostClass: 'sortable-ghost',
            onEnd: function(evt) {
                var order = [];
                el.querySelectorAll('li[data-id]').forEach(function(item) {
                    order.push(item.getAttribute('data-id'));
                });
                
                fetch('/tests/{{ $test->id }}/categories/reorder', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },
                    body: JSON.stringify({ order: order })
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        console.log('Order saved');
                    }
                })
                .catch(error => console.error('Error:', error));
            }
        });
    }
});
</script>
@endpush