@extends('layouts.dashboard')
@section('title', __('Submissions'))
@section('page_title', __('Submissions'))

@section('content')
@php($aiOn = module_enabled('ai') && setting('ai_enabled', '1') === '1' && (string) setting('ai_api_key', '') !== '')
<div class="d-flex align-items-center mb-4">
    <a href="{{ route('instructor.assignments.index', $assignment->course) }}" class="btn btn-light btn-sm me-3"><i class="bi bi-arrow-left"></i></a>
    <div class="me-auto">
        <h4 class="mb-0 fw-bold">{{ __('Submissions') }}</h4>
        <p class="text-muted small mb-0">{{ $assignment->title }} &middot; {{ __('Max') }} {{ (int) $assignment->max_marks }} {{ __('marks') }}</p>
    </div>
    @if($assignment->peer_review_enabled)
        <form action="{{ route('instructor.assignments.peers.allocate', $assignment) }}" method="POST">@csrf<button class="btn btn-sm btn-outline-primary"><i class="bi bi-people me-1"></i>{{ __('Auto-assign peer reviewers') }}</button></form>
    @endif
</div>

@forelse ($submissions as $submission)
    <div class="card mb-3" data-submission="{{ $submission->id }}">
        <div class="card-body">
            <div class="d-flex justify-content-between align-items-start mb-2 gap-2">
                <div>
                    <h6 class="fw-semibold mb-0">{{ $submission->student->name ?? __('Student') }}</h6>
                    <small class="text-muted">{{ __('Submitted') }} {{ optional($submission->submitted_at)->format('M d, Y H:i') }}@if((int) $submission->attempt > 1) · {{ __('attempt :n', ['n' => $submission->attempt]) }}@endif</small>
                </div>
                @php($sb = ['submitted' => 'warning', 'reviewed' => 'success', 'rejected' => 'danger', 'resubmitted' => 'info'][$submission->status] ?? 'secondary')
                <span class="badge bg-{{ $sb }}-subtle text-{{ $sb }}-emphasis text-capitalize">{{ status_label($submission->status) }}</span>
            </div>

            @if ($submission->submission_text)
                <div class="border rounded-3 p-3 bg-body-secondary mb-3 small">{!! nl2br(e($submission->submission_text)) !!}</div>
            @endif

            @if ($submission->submission_url)
                <a href="{{ $submission->submission_url }}" target="_blank" rel="noopener" class="btn btn-sm btn-outline-secondary mb-3 me-1"><i class="bi bi-link-45deg me-1"></i>{{ Str::limit(preg_replace('#^https?://#', '', $submission->submission_url), 48) }}</a>
            @endif
            @if ($submission->file_path)
                <a href="{{ $submission->fileUrl() }}" target="_blank" class="btn btn-sm btn-outline-secondary mb-3"><i class="bi bi-paperclip me-1"></i>{{ __('View Attachment') }}</a>
            @endif

            @if($aiOn)
                <div class="border rounded-3 p-3 mb-3" style="background:var(--lf-primary-soft,#eef2ff)">
                    <div class="d-flex justify-content-between align-items-center gap-2 flex-wrap">
                        <div class="small"><i class="bi bi-stars text-primary me-1"></i><span class="fw-semibold">{{ __('AI grading assistant') }}</span> <span class="text-muted">{{ __('suggests marks and feedback — you decide.') }}</span></div>
                        <button type="button" class="btn btn-sm btn-primary js-ai-grade" data-url="{{ route('instructor.ai.grade.suggest', $submission) }}"><i class="bi bi-magic me-1"></i>{{ __('Suggest grade') }}</button>
                    </div>
                    <div class="js-ai-out mt-3 d-none"></div>
                </div>
            @endif

            @if($assignment->peer_review_enabled && ($peerAverages[$submission->id] ?? null) !== null)
                <div class="alert alert-light border small mb-3"><i class="bi bi-people me-1"></i>{{ __('Peer average: :avg / :max', ['avg' => $peerAverages[$submission->id], 'max' => (int) $assignment->max_marks]) }}</div>
            @endif

            @if($submission->submission_text)
                <form action="{{ route('instructor.submissions.originality', $submission) }}" method="POST" class="mb-3">@csrf
                    <button class="btn btn-sm btn-outline-secondary"><i class="bi bi-shield-check me-1"></i>{{ __('Check originality') }}</button>
                    <span class="text-muted small ms-2">{{ __('Compares against classmates’ texts') }}</span>
                </form>
            @endif
            @if(session('originality.submission_id') === $submission->id)
                <div class="alert {{ count(session('originality.matches')) ? 'alert-warning' : 'alert-success' }} small mb-3">
                    @if(count(session('originality.matches')))
                        <div class="fw-semibold mb-1"><i class="bi bi-exclamation-triangle me-1"></i>{{ __('Possible overlap found:') }}</div>
                        <ul class="mb-0">
                            @foreach(session('originality.matches') as $match)
                                <li>{{ __(':score% similar to :name (:shared shared phrases)', ['score' => $match['score'], 'name' => $match['student'], 'shared' => $match['shared']]) }}</li>
                            @endforeach
                        </ul>
                    @else
                        <i class="bi bi-check-circle me-1"></i>{{ __('No significant overlap with classmates’ submissions.') }}
                    @endif
                    @if(session('originality.external_configured'))
                        <div class="mt-2">{{ __('External similarity score: :score%', ['score' => session('originality.external.score')]) }}</div>
                    @endif
                </div>
            @endif

            <form action="{{ route('instructor.submissions.grade', $submission) }}" method="POST" class="row g-2 align-items-end border-top pt-3">
                @csrf @method('PUT')
                <div class="col-md-3">
                    <label class="form-label small">{{ __('Marks') }} ({{ __('max') }} {{ (int) $assignment->max_marks }})</label>
                    <input type="number" step="0.01" min="0" max="{{ $assignment->max_marks }}" name="marks_obtained" class="form-control form-control-sm js-marks" value="{{ old('marks_obtained', $submission->marks_obtained) }}" required>
                </div>
                <div class="col-md-7">
                    <label class="form-label small">{{ __('Feedback') }}</label>
                    <textarea name="feedback" rows="1" class="form-control form-control-sm js-feedback">{{ old('feedback', $submission->feedback) }}</textarea>
                </div>
                <div class="col-md-2 d-flex flex-column gap-1">
                    <button class="btn btn-sm btn-primary w-100" name="decision" value="grade">{{ __('Save Grade') }}</button>
                    <button class="btn btn-sm btn-outline-warning w-100 js-return" name="decision" value="return" formnovalidate title="{{ __('Send back without marks — the student must submit again. Feedback is required.') }}"><i class="bi bi-arrow-counterclockwise me-1"></i>{{ __('Return') }}</button>
                </div>
            </form>
        </div>
    </div>
@empty
    <div class="card"><div class="lf-empty py-5"><i class="bi bi-inbox"></i>{{ __('No submissions yet.') }}</div></div>
@endforelse
@endsection

@push('scripts')
<script>
document.addEventListener('click', function (e) {
    var btn = e.target.closest('.js-return'); if (!btn) return;
    var form = btn.closest('form'); var fb = form.querySelector('.js-feedback');
    if (!fb.value.trim()) { e.preventDefault(); fb.focus(); fb.classList.add('is-invalid'); return; }
    if (!confirm(@json(__('Return this submission to the student for another attempt?')))) e.preventDefault();
});
</script>
<script>
document.querySelectorAll('.js-ai-grade').forEach(function (btn) {
    btn.addEventListener('click', function () {
        var card = btn.closest('[data-submission]'), out = card.querySelector('.js-ai-out');
        var original = btn.innerHTML;
        btn.disabled = true; btn.innerHTML = '<span class="spinner-border spinner-border-sm me-1"></span>{{ __('Reading the submission…') }}';
        out.classList.remove('d-none');
        out.innerHTML = '<div class="placeholder-glow"><span class="placeholder col-7"></span><span class="placeholder col-10"></span><span class="placeholder col-5"></span></div>';
        fetch(btn.dataset.url, { method: 'POST', headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': '{{ csrf_token() }}', 'Accept': 'application/json' }, body: '{}' })
            .then(function (r) { return r.json().then(function (b) { return { ok: r.ok, body: b }; }); })
            .then(function (res) {
                btn.disabled = false; btn.innerHTML = original;
                if (!res.ok) { out.innerHTML = '<div class="alert alert-warning small mb-0">' + (res.body.message || '{{ __('Could not generate a suggestion.') }}') + '</div>'; return; }
                var d = res.body;
                var list = function (title, items, icon) { return items && items.length ? '<div class="col-md-6"><div class="fw-semibold small mb-1">' + icon + ' ' + title + '</div><ul class="small mb-0 ps-3">' + items.map(function (i) { return '<li>' + i.replace(/</g, '&lt;') + '</li>'; }).join('') + '</ul></div>' : ''; };
                out.innerHTML =
                    '<div class="d-flex align-items-center gap-3 mb-2 flex-wrap">' +
                        '<span class="badge bg-primary fs-6">' + d.marks + ' / ' + d.max_marks + '</span>' +
                        '<span class="text-muted small">' + d.percentage + '%</span>' +
                        '<button type="button" class="btn btn-sm btn-outline-primary ms-auto js-apply"><i class="bi bi-check2 me-1"></i>{{ __('Use this grade') }}</button>' +
                    '</div>' +
                    (d.summary ? '<p class="small mb-2">' + d.summary.replace(/</g, '&lt;') + '</p>' : '') +
                    '<div class="row g-3">' + list('{{ __('Strengths') }}', d.strengths, '<i class="bi bi-hand-thumbs-up text-success"></i>') + list('{{ __('Improvements') }}', d.improvements, '<i class="bi bi-arrow-up-right-circle text-warning"></i>') + '</div>' +
                    (d.flags && d.flags.length ? '<div class="alert alert-warning small mt-3 mb-0"><i class="bi bi-flag me-1"></i>' + d.flags.join(' · ').replace(/</g, '&lt;') + '</div>' : '') +
                    (d.feedback ? '<div class="mt-3"><div class="fw-semibold small mb-1">{{ __('Draft feedback') }}</div><div class="small bg-body rounded-2 p-2 js-draft">' + d.feedback.replace(/</g, '&lt;') + '</div></div>' : '') +
                    '<div class="text-muted mt-2" style="font-size:.72rem">{{ __('AI suggestion — review before saving. Credits left this month') }}: ' + (d.remaining === null ? '∞' : d.remaining) + '</div>';
                out.querySelector('.js-apply').addEventListener('click', function () {
                    card.querySelector('.js-marks').value = d.marks;
                    card.querySelector('.js-feedback').value = d.feedback || '';
                    card.querySelector('.js-feedback').focus();
                });
            })
            .catch(function () { btn.disabled = false; btn.innerHTML = original; out.innerHTML = '<div class="alert alert-danger small mb-0">{{ __('Request failed. Try again.') }}</div>'; });
    });
});
</script>
@endpush