@php
    $statusClass = match ($file->status) {
        \App\Models\EnothiFile::STATUS_APPROVED, \App\Models\EnothiFile::STATUS_CLOSED => 'success',
        \App\Models\EnothiFile::STATUS_REJECTED => 'danger',
        \App\Models\EnothiFile::STATUS_IN_REVIEW, \App\Models\EnothiFile::STATUS_SUBMITTED => 'warning',
        \App\Models\EnothiFile::STATUS_RETURNED => 'dark',
        default => 'secondary',
    };
    $isAdmin = auth()->user()->user_type === 'admin';
    $approveRoute = $isAdmin ? route('enothi.approve', $file->id) : route('employee.enothi.approve', $file->id);
    $rejectRoute = $isAdmin ? route('enothi.reject', $file->id) : route('employee.enothi.reject', $file->id);
    $sendBackRoute = $isAdmin ? route('enothi.send_back', $file->id) : route('employee.enothi.send_back', $file->id);
    $forwardRoute = $isAdmin ? route('enothi.forward', $file->id) : route('employee.enothi.forward', $file->id);
    $forwardUsers = $forwardUsers ?? collect();
    $nextApprover = $nextApprover ?? null;
    $attachmentDownloadRoute = $isAdmin ? 'enothi.attachments.download' : 'employee.enothi.attachments.download';
    $noteDownloadRoute = $isAdmin ? 'enothi.notes.download' : 'employee.enothi.notes.download';
    $noteRoute = $isAdmin ? route('enothi.note', $file->id) : null;
    $slaOverdue = !empty($isOverdue) && $isOverdue;

    $noteAttachments = $file->notes->filter(fn ($note) => filled($note->attachment_path));
    $hasAttachments = $file->attachments->isNotEmpty() || $noteAttachments->isNotEmpty();
@endphp

<div class="enothi-detail" id="enothi-print-area">
    <div class="enothi-detail-header d-flex flex-wrap justify-content-between align-items-start mb-4">
        <div class="pr-3" style="min-width: 0; flex: 1 1 280px;">
            <h5 class="mb-2 font-weight-bold">{{ $file->subject }}</h5>
            <div class="enothi-meta-grid">
                <div class="enothi-meta-item">
                    <span class="enothi-meta-label">{{ __('File No.') }}</span>
                    <span class="enothi-meta-value">{{ $file->file_number }}</span>
                </div>
                <div class="enothi-meta-item">
                    <span class="enothi-meta-label">{{ __('Category') }}</span>
                    <span class="enothi-meta-value">{{ \App\Models\EnothiFile::categoryLabel($file->category, $file->enothi_category_id) }}</span>
                </div>
                @if($file->staff?->user)
                    <div class="enothi-meta-item">
                        <span class="enothi-meta-label">{{ __('Employee') }}</span>
                        <span class="enothi-meta-value">{{ $file->staff->user->name }}</span>
                        <span class="enothi-meta-sub text-muted small d-block mt-1">
                            {{ $file->staff->user_id }}
                            @if($file->staff->warehouse?->name)
                                · {{ $file->staff->warehouse->name }}
                            @endif
                            @if($file->staff->designation?->name)
                                · {{ $file->staff->designation->name }}
                            @endif
                        </span>
                    </div>
                @endif
                @if($file->toStaff?->user)
                    <div class="enothi-meta-item">
                        <span class="enothi-meta-label">{{ __('To') }}</span>
                        <span class="enothi-meta-value">
                            {{ $file->toStaff->user->name }}
                            @if($file->toStaff->designation?->name)
                                <span class="text-muted">({{ $file->toStaff->designation->name }})</span>
                            @endif
                        </span>
                    </div>
                @endif
            </div>
        </div>
        <div class="enothi-status-panel text-md-right mt-2 mt-md-0">
            @if($file->isDirectToOnly())
                <span class="badge badge-info mb-1">{{ __('Confidential — direct to recipient') }}</span>
            @endif
            @if($file->priority === \App\Models\EnothiFile::PRIORITY_URGENT)
                <span class="badge badge-danger mb-1">{{ __('Urgent') }}</span>
            @endif
            <span class="badge badge-{{ $statusClass }} mb-1">{{ \App\Models\EnothiFile::statusLabel($file->status) }}</span>
            @if($file->level_due_at && in_array($file->status, [\App\Models\EnothiFile::STATUS_IN_REVIEW, \App\Models\EnothiFile::STATUS_SUBMITTED], true))
                <div class="small mt-1 @if($slaOverdue) text-danger font-weight-bold @else text-muted @endif">
                    {{ __('SLA due') }}: {{ $file->level_due_at->format('Y-m-d H:i') }}
                    @if($slaOverdue) — {{ __('Overdue') }} @endif
                </div>
            @endif
            @if($file->submitted_at)
                <div class="text-muted small mt-1">{{ __('Submitted') }}: {{ $file->submitted_at->format('Y-m-d H:i') }}</div>
            @endif
            @if($file->returned_at)
                <div class="text-muted small mt-1">{{ __('Returned') }}: {{ $file->returned_at->format('Y-m-d H:i') }}</div>
            @endif
        </div>
    </div>

    @if($hasAttachments)
        <div class="enothi-attachments-box mb-4 no-print">
            <div class="d-flex flex-wrap align-items-center justify-content-between mb-2">
                <h6 class="font-weight-bold mb-0">
                    <i class="mdi mdi-paperclip"></i> {{ __('Attachments') }}
                </h6>
                <span class="text-muted small">{{ $file->attachments->count() + $noteAttachments->count() }} {{ __('file(s)') }}</span>
            </div>
            <div class="btn-toolbar-spaced">
                @foreach($file->attachments as $att)
                    <a href="{{ route($attachmentDownloadRoute, $att->id) }}" class="btn btn-sm btn-outline-primary">
                        <i class="mdi mdi-download"></i> {{ $att->original_name }}
                    </a>
                @endforeach
                @foreach($noteAttachments as $note)
                    <a href="{{ route($noteDownloadRoute, $note->id) }}" class="btn btn-sm btn-outline-secondary" title="{{ __('Note attachment') }}">
                        <i class="mdi mdi-download"></i> {{ basename($note->attachment_path) }}
                        <span class="text-muted small">({{ __('Note') }})</span>
                    </a>
                @endforeach
            </div>
        </div>
    @endif

    @include('admin.enothi.partials.approval_stage_stepper', ['file' => $file])

    <h6 class="font-weight-bold border-bottom pb-2 mb-3">{{ __('Noting Timeline') }} / {{ __('নথি') }}</h6>

    <div class="enothi-timeline">
        @forelse($file->notes as $note)
            <div class="enothi-note-item mb-3">
                <div class="d-flex flex-wrap justify-content-between small text-muted mb-1">
                    <span>
                        <strong class="text-dark">{{ $note->author?->name ?? '—' }}</strong>
                        @if($note->author?->staff?->designation)
                            <span class="text-muted">({{ $note->author->staff->designation->name }})</span>
                        @endif
                        · {{ \App\Models\EnothiNote::typeLabel($note->note_type) }}
                        @if($note->level)
                            · {{ __('Level') }} {{ $note->level }}
                        @endif
                    </span>
                    <span>{{ $note->created_at?->format('Y-m-d H:i') }}</span>
                </div>
                <div class="enothi-note-body">{!! nl2br(e($note->body)) !!}</div>
                @if(filled($note->attachment_path))
                    <div class="mt-2 no-print">
                        <a href="{{ route($noteDownloadRoute, $note->id) }}" class="btn btn-xs btn-outline-primary btn-sm">
                            <i class="mdi mdi-download"></i> {{ __('Download attachment') }}
                        </a>
                    </div>
                @endif
            </div>
        @empty
            <p class="text-muted mb-0">{{ __('No notes yet.') }}</p>
        @endforelse
    </div>
</div>

@if(!empty($canAct) && $canAct)
    <div class="card mt-4 border-warning no-print">
        <div class="card-header bg-light">
            <strong>{{ __('Your action required') }}</strong>
        </div>
        <div class="card-body">
            <form method="post" action="{{ $approveRoute }}" enctype="multipart/form-data" class="mb-3">
                @csrf
                <div class="form-group">
                    <label>{{ __('Note / Observation') }} <span class="text-danger">*</span></label>
                    <textarea name="note" class="form-control" rows="4" required maxlength="5000" placeholder="{{ __('Write your observation or recommendation before approving') }}">{{ old('note') }}</textarea>
                </div>
                <div class="form-group">
                    <label>{{ __('Attachment (optional)') }}</label>
                    <input type="file" name="attachment" class="form-control-file" accept=".pdf,.jpg,.jpeg,.png,.doc,.docx">
                </div>

                @if(! empty($nextApprover))
                    <div class="alert alert-info py-2 mb-3">
                        <div class="font-weight-bold mb-1">
                            <i class="mdi mdi-share-forward"></i>
                            {{ __('After approval, this file will be forwarded to') }}:
                        </div>
                        <div>
                            <strong>{{ $nextApprover['name'] }}</strong>
                            @if(! empty($nextApprover['designation']))
                                <span class="text-muted">· {{ $nextApprover['designation'] }}</span>
                            @endif
                            @if(! empty($nextApprover['branch']))
                                <span class="text-muted">· {{ $nextApprover['branch'] }}</span>
                            @endif
                            <span class="badge badge-primary ml-1">{{ __('Level') }} {{ $nextApprover['level'] }}</span>
                        </div>
                    </div>
                    <button type="submit" class="btn btn-success"
                            onclick="return confirm(@json(__('Approve and forward to :name?', ['name' => $nextApprover['name']])))">
                        <i class="mdi mdi-check-all"></i>
                        {{ __('Approve & Forward') }} → {{ $nextApprover['name'] }}
                    </button>
                @else
                    <div class="alert alert-success py-2 mb-3">
                        <i class="mdi mdi-flag-checkered"></i>
                        {{ __('This is the final approval stage. Submitting will fully approve this file.') }}
                    </div>
                    <button type="submit" class="btn btn-success"
                            onclick="return confirm(@json(__('Fully approve this application?')))">
                        <i class="mdi mdi-check"></i> {{ __('Final Approve') }}
                    </button>
                @endif
            </form>

            <div class="border-top pt-3 mb-3">
                <div class="d-flex flex-wrap align-items-center justify-content-between gap-2 mb-2">
                    <label class="mb-0 font-weight-bold">{{ __('Forward to another officer') }}</label>
                    <button type="button" class="btn btn-warning btn-sm" data-toggle="modal" data-target="#enothiForwardModal">
                        <i class="mdi mdi-share-forward"></i> {{ __('Forward') }}
                    </button>
                </div>
                <p class="text-muted small mb-0">{{ __('Send this file to a colleague at the same level with a forward note.') }}</p>
            </div>

            <form method="post" action="{{ $sendBackRoute }}" class="mb-3 border-top pt-3">
                @csrf
                <div class="form-group">
                    <label>{{ __('Send back to previous officer') }} <span class="text-danger">*</span></label>
                    <textarea name="note" class="form-control" rows="3" required maxlength="5000" placeholder="{{ __('Reason for sending back') }}">{{ old('note') }}</textarea>
                </div>
                <div class="form-group form-check">
                    <input type="checkbox" name="to_applicant" value="1" class="form-check-input" id="to_applicant">
                    <label class="form-check-label" for="to_applicant">{{ __('Send back to applicant for revision') }}</label>
                </div>
                <button type="submit" class="btn btn-outline-warning" onclick="return confirm('{{ __('Send this file back?') }}')">{{ __('Send Back') }}</button>
            </form>

            <form method="post" action="{{ $rejectRoute }}" enctype="multipart/form-data">
                @csrf
                <div class="form-group">
                    <label>{{ __('Rejection note (optional)') }}</label>
                    <textarea name="note" class="form-control" rows="2" maxlength="5000">{{ old('note') }}</textarea>
                </div>
                <button type="submit" class="btn btn-outline-danger" onclick="return confirm('{{ __('Reject this application?') }}')">{{ __('Reject') }}</button>
            </form>
        </div>
    </div>

    <div class="modal fade" id="enothiForwardModal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <form method="post" action="{{ $forwardRoute }}" class="modal-content">
                @csrf
                <div class="modal-header">
                    <h5 class="modal-title">{{ __('Forward file') }}</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="{{ __('Close') }}">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label for="enothi_forward_to">{{ __('Forward to') }} <span class="text-danger">*</span></label>
                        <select name="forward_to_user_id" id="enothi_forward_to" class="form-control enothi-forward-select" required
                                data-placeholder="{{ __('Select or search officer') }}">
                            <option value=""></option>
                            @foreach($forwardUsers as $forwardUser)
                                @php
                                    $fwdLabel = $forwardUser->name;
                                    if ($forwardUser->staff?->designation?->name) {
                                        $fwdLabel .= ' · '.$forwardUser->staff->designation->name;
                                    }
                                    if ($forwardUser->staff?->warehouse?->name) {
                                        $fwdLabel .= ' · '.$forwardUser->staff->warehouse->name;
                                    }
                                @endphp
                                <option value="{{ $forwardUser->id }}" @selected((int) old('forward_to_user_id') === (int) $forwardUser->id)>
                                    {{ $fwdLabel }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="form-group mb-0">
                        <label for="enothi_forward_note">{{ __('Forward note') }} <span class="text-danger">*</span></label>
                        <textarea name="forward_note" id="enothi_forward_note" class="form-control" rows="4" required maxlength="5000"
                                  placeholder="{{ __('Explain why you are forwarding this file') }}">{{ old('forward_note') }}</textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-light" data-dismiss="modal">{{ __('Cancel') }}</button>
                    <button type="submit" class="btn btn-warning">{{ __('Forward') }}</button>
                </div>
            </form>
        </div>
    </div>
@endif

@if(!empty($noteRoute))
    <div class="card mt-3 no-print">
        <div class="card-header bg-light">
            <strong>{{ __('Add observation (without approval action)') }}</strong>
        </div>
        <div class="card-body">
            <form method="post" action="{{ $noteRoute }}" enctype="multipart/form-data">
                @csrf
                <div class="form-group">
                    <textarea name="body" class="form-control" rows="3" required maxlength="5000"></textarea>
                </div>
                <button type="submit" class="btn btn-sm btn-primary">{{ __('Add Note') }}</button>
            </form>
        </div>
    </div>
@endif

@push('css')
<style>
    .enothi-meta-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: .75rem 1.25rem;
    }
    .enothi-meta-label {
        display: block;
        font-size: 0.7rem;
        text-transform: uppercase;
        letter-spacing: .03em;
        color: #6c757d;
        font-weight: 600;
        margin-bottom: .15rem;
    }
    .enothi-meta-value {
        display: block;
        font-size: 0.875rem;
        color: #1f2937;
        word-break: break-word;
    }
    .enothi-meta-sub {
        font-size: 0.8125rem;
        line-height: 1.4;
    }
    .enothi-attachments-box {
        background: #f8f9fb;
        border: 1px solid rgba(17,24,39,.08);
        border-radius: 10px;
        padding: .85rem 1rem;
    }
    .enothi-note-item {
        padding-left: .85rem;
        border-left: 3px solid var(--ui-primary, #615dad);
        background: #fafbfc;
        border-radius: 0 8px 8px 0;
        padding-top: .65rem;
        padding-bottom: .65rem;
        padding-right: .75rem;
    }
    .enothi-note-body { white-space: pre-wrap; word-break: break-word; font-size: 0.9375rem; }
    .enothi-stage-stepper {
        display: flex;
        flex-wrap: wrap;
        gap: 0;
        padding: 18px 12px 14px;
        background: #fff;
        border: 1px solid #edf0f6;
        border-radius: 14px;
        box-shadow: 0 2px 10px rgba(15, 23, 42, .04);
    }
    .enothi-stage {
        flex: 1 1 110px;
        text-align: center;
        position: relative;
        padding: 0 8px;
        min-width: 96px;
    }
    .enothi-stage:not(:last-child)::after {
        content: '';
        position: absolute;
        top: 15px;
        left: calc(50% + 18px);
        width: calc(100% - 36px);
        height: 2px;
        background: #e2e8f0;
        z-index: 0;
    }
    .enothi-stage.done:not(:last-child)::after { background: #22c55e; }
    .enothi-stage.active:not(:last-child)::after {
        background: linear-gradient(90deg, #7367f0 0%, #e2e8f0 100%);
    }
    .enothi-stage.rejected:not(:last-child)::after { background: #f87171; }
    .enothi-stage-dot {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        font-weight: 800;
        background: #f1f5f9;
        color: #64748b;
        border: 2px solid #e2e8f0;
        position: relative;
        z-index: 1;
    }
    .enothi-stage.active .enothi-stage-dot {
        background: #7367f0;
        color: #fff;
        border-color: #7367f0;
        box-shadow: 0 0 0 4px rgba(115, 103, 240, .14);
    }
    .enothi-stage.done .enothi-stage-dot {
        background: #22c55e;
        color: #fff;
        border-color: #22c55e;
    }
    .enothi-stage.rejected .enothi-stage-dot {
        background: #ef4444;
        color: #fff;
        border-color: #ef4444;
    }
    .enothi-stage-label {
        margin-top: 8px;
        font-size: 11px;
        font-weight: 700;
        color: #64748b;
        line-height: 1.3;
    }
    .enothi-stage.active .enothi-stage-label { color: #7367f0; }
    .enothi-stage.done .enothi-stage-label { color: #166534; }
    .enothi-stage.rejected .enothi-stage-label { color: #b91c1c; }
    .enothi-stage-sub {
        margin-top: 2px;
        font-size: 10px;
        color: #94a3b8;
        line-height: 1.25;
        word-break: break-word;
    }
    #enothiForwardModal .select2-container { width: 100% !important; }
    @media print {
        .no-print, .sidebar-shell, .topbar, .breadcrumb-area { display: none !important; }
        .enothi-detail { font-size: 12px; }
        .enothi-note-item { background: transparent; }
    }
</style>
@endpush

@push('script')
<script>
$(function () {
    var $forwardSelect = $('#enothi_forward_to');
    if (!$forwardSelect.length || typeof $.fn.select2 !== 'function') {
        return;
    }

    $forwardSelect.select2({
        dropdownParent: $('#enothiForwardModal'),
        width: '100%',
        placeholder: $forwardSelect.data('placeholder') || '',
        allowClear: true
    });

    @if($errors->has('forward_to_user_id') || $errors->has('forward_note'))
        $('#enothiForwardModal').modal('show');
    @endif
});
</script>
@endpush