@extends('layouts.app')

@section('title', 'Report Safety/Quality Issue')

@section('content')
    <h1>Report Safety/Quality Issue</h1>
    <p class="subtitle">Select the project and officer, choose a category, and attach a photo of the issue.</p>

    <div class="card">
        <form method="POST" action="{{ route('safety-quality.store') }}" enctype="multipart/form-data" id="sqi-form">
            @csrf
            <input type="hidden" name="job_description" id="job_description">

            <div class="field">
                <label for="job_no">Project</label>
                <select name="job_no" id="job_no" required data-searchable data-placeholder="Search projects…">
                    <option value="">Select a Project…</option>
                    @foreach ($jobs as $job)
                        <option value="{{ $job['no'] }}" data-description="{{ $job['description'] }}"
                            @selected(old('job_no') === $job['no'])>
                            {{ $job['no'] }} — {{ $job['description'] }}
                        </option>
                    @endforeach
                </select>
                @if ($jobs->isEmpty())
                    <small class="hint" style="color:var(--danger)">
                        No Projects returned from the Business Central Job API. Check JOB_API_URL / credentials / field mapping in BusinessCentralService.
                    </small>
                @endif
            </div>

            <div class="field">
                <label for="responsible_officer">Officer</label>
                <select name="responsible_officer" id="responsible_officer" required disabled data-searchable data-placeholder="Search officers…">
                    <option value="">Select a Project first…</option>
                </select>
            </div>

            <div class="field">
                <label>Category</label>
                <div class="category-choice">
                    @if (in_array('safety', $allowedCategories, true))
                        <label>
                            <input type="radio" name="category" value="safety" id="category_safety" required
                                @checked(old('category') === 'safety' || (count($allowedCategories) === 1 && $allowedCategories[0] === 'safety'))>
                            <span>⚠️ Safety<small>Hazards, near misses, PPE</small></span>
                        </label>
                    @endif
                    @if (in_array('quality', $allowedCategories, true))
                        <label>
                            <input type="radio" name="category" value="quality" id="category_quality"
                                @checked(old('category') === 'quality' || (count($allowedCategories) === 1 && $allowedCategories[0] === 'quality'))>
                            <span>✅ Quality<small>Defects, non-conformance</small></span>
                        </label>
                    @endif
                </div>
                @if (count($allowedCategories) === 1)
                    <small class="hint">You're only permitted to report {{ ucfirst($allowedCategories[0]) }} issues. An admin can change this under Admin → Permissions.</small>
                @endif
            </div>

            <div class="field">
                <label for="subcategory">Subcategory</label>
                <select name="subcategory" id="subcategory" required disabled data-searchable data-placeholder="Search subcategories…">
                    <option value="">Select a category first…</option>
                </select>
            </div>

            <div class="field">
                <label for="description">Description (optional)</label>
                <textarea name="description" id="description" rows="4" placeholder="Any extra detail about the issue…">{{ old('description') }}</textarea>
            </div>

            <div class="field">
                <label for="photos">Photo(s) of the issue</label>
                <input type="file" name="photos[]" id="photos" accept="image/*" capture="environment" multiple required>
                <small class="hint">Take a photo with the camera, or choose from gallery. At least one photo is required.</small>
            </div>

            <div id="ai-suggestions"></div>
            <div id="ai-hidden-fields"></div>

            <button class="btn w-full" type="submit">Submit Issue</button>
        </form>
    </div>

    <a class="btn secondary w-full" href="{{ route('safety-quality.index') }}">Cancel</a>

    <style>
        .ai-card { border:1px dashed var(--brand); border-radius:10px; padding:12px 14px; margin-top:12px; font-size:.85rem; background:#eff6ff; }
        .ai-card .ai-title { font-weight:600; margin-bottom:4px; }
        .ai-card .ai-summary { color:#374151; margin-bottom:8px; }
        .ai-card .ai-apply { background:var(--brand); color:#fff; border:none; padding:6px 12px; border-radius:6px; font-size:.8rem; font-weight:600; cursor:pointer; }
        .ai-card.error { border-color:#d1d5db; background:#f9fafb; color:#6b7280; }
        .ai-card.loading { border-color:#d1d5db; background:#f9fafb; color:#6b7280; }
    </style>

    <script>
        const jobSelect = document.getElementById('job_no');
        const jobDescription = document.getElementById('job_description');
        const officerSelect = document.getElementById('responsible_officer');
        const categoryRadios = document.querySelectorAll('input[name="category"]');
        const subcategorySelect = document.getElementById('subcategory');
        const subcategories = @json($subcategories);

        jobSelect.addEventListener('change', () => {
            const opt = jobSelect.options[jobSelect.selectedIndex];
            jobDescription.value = opt ? (opt.dataset.description || '') : '';
            refreshOfficerOptions();
        });

        async function refreshOfficerOptions() {
            const jobNo = jobSelect.value;

            officerSelect.innerHTML = '<option value="">Loading…</option>';
            officerSelect.disabled = true;

            if (!jobNo) {
                officerSelect.innerHTML = '<option value="">Select a Project first…</option>';
                return;
            }

            const params = new URLSearchParams({ job_no: jobNo });
            const res = await fetch(`{{ route('api.officers') }}?${params.toString()}`, {
                headers: { 'Accept': 'application/json' }
            });
            const officers = await res.json();

            if (officers.length === 0) {
                officerSelect.innerHTML = '<option value="">No Officers found for this Project</option>';
                return;
            }

            officerSelect.innerHTML = '<option value="">Select an Officer…</option>' +
                officers.map(o => `<option value="${o}">${o}</option>`).join('');
            officerSelect.disabled = false;
        }

        function refreshSubcategoryOptions() {
            const checked = document.querySelector('input[name="category"]:checked');
            const category = checked ? checked.value : '';
            const options = subcategories[category] || [];

            if (!category || options.length === 0) {
                subcategorySelect.innerHTML = '<option value="">Select a category first…</option>';
                subcategorySelect.disabled = true;
                return;
            }

            subcategorySelect.innerHTML = '<option value="">Select a Subcategory…</option>' +
                options.map(o => `<option value="${o}">${o}</option>`).join('');
            subcategorySelect.disabled = false;
        }

        categoryRadios.forEach(radio => radio.addEventListener('change', refreshSubcategoryOptions));

        // --- AI photo analysis (advisory only — reporter can ignore it) ---
        const photosInput = document.getElementById('photos');
        const suggestionsContainer = document.getElementById('ai-suggestions');
        const hiddenFieldsContainer = document.getElementById('ai-hidden-fields');

        function applySuggestion(category, subcategory) {
            if (category) {
                const radio = document.getElementById('category_' + category);
                if (radio) {
                    radio.checked = true;
                    refreshSubcategoryOptions();
                    if (subcategory) {
                        // Options are populated synchronously by refreshSubcategoryOptions above.
                        subcategorySelect.value = subcategory;
                    }
                }
            }
        }

        photosInput.addEventListener('change', async () => {
            suggestionsContainer.innerHTML = '';
            hiddenFieldsContainer.innerHTML = '';

            const files = Array.from(photosInput.files || []);
            if (files.length === 0) return;

            // One loading card per photo, filled in as each analysis returns.
            files.forEach((file, i) => {
                const card = document.createElement('div');
                card.className = 'ai-card loading';
                card.id = `ai-card-${i}`;
                card.textContent = `Analyzing "${file.name}"…`;
                suggestionsContainer.appendChild(card);
            });

            const results = await Promise.all(files.map(async (file) => {
                try {
                    const formData = new FormData();
                    formData.append('photo', file);
                    const res = await fetch(`{{ route('safety-quality.analyze-photo') }}`, {
                        method: 'POST',
                        headers: {
                            'X-CSRF-TOKEN': document.querySelector('input[name=_token]').value,
                            'Accept': 'application/json',
                        },
                        body: formData,
                    });
                    return await res.json();
                } catch (e) {
                    return { error: 'AI analysis request failed.' };
                }
            }));

            results.forEach((result, i) => {
                const card = document.getElementById(`ai-card-${i}`);

                if (result.error || !result.category) {
                    card.className = 'ai-card error';
                    card.textContent = result.error || 'No suggestion available for this photo.';
                } else {
                    card.className = 'ai-card';
                    const catLabel = result.category === 'safety' ? '⚠️ Safety' : '✅ Quality';
                    card.innerHTML = `
                        <div class="ai-title">AI suggestion: ${catLabel}${result.subcategory ? ' — ' + result.subcategory : ''}</div>
                        ${result.summary ? `<div class="ai-summary">${result.summary}</div>` : ''}
                        <button type="button" class="ai-apply">Apply to form</button>
                    `;
                    card.querySelector('.ai-apply').addEventListener('click', () => {
                        applySuggestion(result.category, result.subcategory);
                    });
                }

                // Hidden fields, index-matched to photos[] so the controller
                // can attach this suggestion to the right stored photo.
                // Field names must match what SafetyQualityIssueController@store validates.
                const fieldNames = {
                    category: 'ai_suggested_category[]',
                    subcategory: 'ai_suggested_subcategory[]',
                    summary: 'ai_summary[]',
                };
                Object.keys(fieldNames).forEach((field) => {
                    const input = document.createElement('input');
                    input.type = 'hidden';
                    input.name = fieldNames[field];
                    input.value = result[field] || '';
                    hiddenFieldsContainer.appendChild(input);
                });
            });
        });

        // Restore state on validation-error redisplay.
        if (jobSelect.value) {
            jobDescription.value = jobSelect.options[jobSelect.selectedIndex]?.dataset.description || '';
            refreshOfficerOptions().then(() => {
                @if (old('responsible_officer'))
                    officerSelect.value = @json(old('responsible_officer'));
                @endif
            });
        }
        if (document.querySelector('input[name="category"]:checked')) {
            refreshSubcategoryOptions();
            @if (old('subcategory'))
                subcategorySelect.value = @json(old('subcategory'));
            @endif
        }
    </script>
@endsection