@extends('layouts.app')

@section('title', '기안함')

@section('content')
    <!-- 페이지 헤더 -->
    <div class="flex flex-col sm:flex-row sm:justify-between sm:items-center gap-4 mb-6">
        <h1 class="text-2xl font-bold text-gray-800">기안함</h1>
        <div class="flex gap-2 w-full sm:w-auto">
            <button onclick="openLineManager()"
                    class="toss-btn-ghost flex-1 sm:flex-none">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.066 2.573c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.573 1.066c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.066-2.573c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
                결재선 관리
            </button>
            <a href="{{ route('approvals.create') }}" class="toss-btn-primary flex-1 sm:flex-none">
                + 새 기안
            </a>
        </div>
    </div>

    <!-- 필터 영역 -->
    <x-filter-collapsible id="filterForm">
        <form id="filterForm" class="flex flex-wrap gap-2 sm:gap-4">
            <div class="flex-1 min-w-0 w-full sm:w-auto">
                <input type="text" name="search" placeholder="제목, 문서번호 검색..."
                       class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
            </div>
            <div class="w-full sm:w-36">
                <select name="status" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                    <option value="">전체 상태</option>
                    <option value="draft">임시저장</option>
                    <option value="pending">진행</option>
                    <option value="approved">완료</option>
                    <option value="rejected">반려</option>
                    <option value="cancelled">회수</option>
                </select>
            </div>
            <button type="submit" class="bg-gray-600 hover:bg-gray-700 text-white px-6 py-2 rounded-lg transition w-full sm:w-auto">
                검색
            </button>
        </form>
    </x-filter-collapsible>

    <!-- 테이블 상단 (선택삭제 + 페이지 사이즈) -->
    <div class="flex items-center justify-between mb-2">
        <div>
            <button id="bulkDeleteBtn" onclick="bulkDelete()" class="hidden bg-red-500 hover:bg-red-600 text-white px-4 py-1.5 rounded-lg text-sm font-medium transition">
                선택삭제 (<span id="selectedCount">0</span>건)
            </button>
        </div>
        <div class="flex items-center gap-2 text-sm text-gray-600">
            <span>페이지당</span>
            <select id="perPageSelect" onchange="loadDrafts(1)" class="px-2 py-1 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm">
                <option value="15" selected>15</option>
                <option value="50">50</option>
                <option value="100">100</option>
                <option value="200">200</option>
                <option value="500">500</option>
            </select>
            <span>건</span>
        </div>
    </div>

    <!-- 테이블 영역 -->
    <div id="approval-table" class="bg-white rounded-lg shadow-sm overflow-hidden">
        <div class="flex justify-center items-center p-12">
            <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600"></div>
        </div>
    </div>

    <!-- 페이지네이션 -->
    <div id="pagination-area" class="mt-4"></div>

    <!-- 결재선 관리 모달 (Toss Style) -->
    <div id="lineManagerModal" class="fixed inset-0 z-50 hidden">
        <div class="toss-backdrop" onclick="closeLineManager()"></div>
        <div class="fixed inset-0 flex items-center justify-center p-4" style="pointer-events: none;">
            <div class="toss-modal" style="pointer-events: auto;">
                <!-- 모달 헤더 -->
                <div class="toss-modal-header">
                    <div class="flex items-center gap-2">
                        <button id="lineBackBtn" onclick="backToLineList()" class="hidden toss-icon-btn">
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7"/>
                            </svg>
                        </button>
                        <h2 id="lineManagerTitle" class="toss-modal-title">결재선 관리</h2>
                    </div>
                    <button onclick="closeLineManager()" class="toss-icon-btn">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/>
                        </svg>
                    </button>
                </div>

                <!-- 모달 바디 -->
                <div class="toss-modal-body">
                    <!-- 목록 화면 -->
                    <div id="lineListView">
                        <div style="padding: 20px 20px 12px;">
                            <button onclick="openLineEdit()" class="toss-add-btn">
                                <svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4"/></svg>
                                새 결재선 만들기
                            </button>
                        </div>
                        <div id="lineListBody" style="padding: 0 20px 20px;">
                            <div class="flex justify-center" style="padding: 40px 0;">
                                <div class="toss-spinner"></div>
                            </div>
                        </div>
                    </div>

                    <!-- 편집 화면 -->
                    <div id="lineEditView" class="hidden">
                        <!-- 이름 입력 -->
                        <div style="padding: 20px 20px 16px;">
                            <label class="toss-label">결재선 이름</label>
                            <input type="text" id="lineNameInput" placeholder="예: 일반 결재선, 팀장 결재선..."
                                   class="toss-input">
                        </div>

                        <!-- 2패널 구조 -->
                        <div class="flex" style="min-height: 340px; border-top: 1px solid #f2f4f6;">
                            <!-- 좌측: 인원 목록 -->
                            <div style="flex: 0 0 240px; max-width: 240px; border-right: 1px solid #f2f4f6;">
                                <div style="padding: 12px;">
                                    <div class="relative">
                                        <svg class="absolute" style="left: 10px; top: 9px; width: 16px; height: 16px; color: #b0b8c1;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
                                        </svg>
                                        <input type="text" id="lineUserSearch" placeholder="이름, 부서 검색"
                                               class="toss-input-sm" style="padding-left: 32px;">
                                    </div>
                                </div>
                                <div id="lineDeptList" class="overflow-y-auto" style="max-height: 300px;"></div>
                            </div>

                            <!-- 우측: 결재선 -->
                            <div class="flex-1 flex flex-col min-w-0">
                                <div id="lineStepList" class="flex-1 overflow-y-auto" style="padding: 12px; max-height: 340px;"></div>
                                <div id="lineStepEmpty" class="flex-1 flex flex-col items-center justify-center" style="padding: 48px 0;">
                                    <div class="toss-empty-icon">
                                        <svg class="w-6 h-6" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z"/>
                                        </svg>
                                    </div>
                                    <span style="font-size: 13px; color: #8b95a1; margin-top: 12px;">좌측에서 결재자를 추가하세요</span>
                                </div>
                            </div>
                        </div>

                        <!-- 하단 요약 -->
                        <div class="toss-summary-bar">
                            <span id="lineSummary">결재 0명 &middot; 합의 0명 &middot; 참조 0명</span>
                            <span id="lineSummaryTotal" class="toss-summary-total">총 0명</span>
                        </div>
                    </div>
                </div>

                <!-- 모달 푸터 (편집 모드에서만) -->
                <div id="lineEditFooter" class="hidden toss-modal-footer">
                    <button onclick="backToLineList()" class="toss-btn-secondary" style="flex: 1;">취소</button>
                    <button onclick="saveLine()" class="toss-btn-primary" style="flex: 2;">저장</button>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('styles')
<style>
/* ====== Toss Design System — 결재선 관리 ====== */
:root {
    --toss-blue: #3182f6;
    --toss-blue-hover: #1b64da;
    --toss-blue-light: #e8f3ff;
    --toss-blue-lighter: #f2f7ff;
    --toss-text-primary: #191f28;
    --toss-text-secondary: #4e5968;
    --toss-text-tertiary: #8b95a1;
    --toss-text-disabled: #b0b8c1;
    --toss-bg: #f7f8fa;
    --toss-bg-card: #ffffff;
    --toss-border: #f2f4f6;
    --toss-border-hover: #e5e8eb;
    --toss-green: #00c471;
    --toss-red: #f04452;
    --toss-radius: 16px;
    --toss-radius-sm: 12px;
    --toss-radius-xs: 8px;
    --toss-shadow: 0 2px 8px rgba(0,0,0,0.04), 0 0 1px rgba(0,0,0,0.06);
    --toss-shadow-lg: 0 8px 32px rgba(0,0,0,0.12), 0 0 1px rgba(0,0,0,0.08);
    --toss-transition: 0.2s cubic-bezier(0.33, 0, 0.2, 1);
}

/* 버튼 */
.toss-btn-primary {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 10px 20px; border-radius: var(--toss-radius-sm); font-size: 14px; font-weight: 600;
    background: var(--toss-blue); color: #fff; border: none; cursor: pointer;
    transition: background var(--toss-transition), transform 0.1s;
    text-decoration: none; text-align: center; line-height: 1.4;
}
.toss-btn-primary:hover { background: var(--toss-blue-hover); }
.toss-btn-primary:active { transform: scale(0.97); }

.toss-btn-secondary {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 10px 20px; border-radius: var(--toss-radius-sm); font-size: 14px; font-weight: 600;
    background: var(--toss-bg); color: var(--toss-text-secondary); border: none; cursor: pointer;
    transition: background var(--toss-transition), transform 0.1s;
}
.toss-btn-secondary:hover { background: #eceef0; }
.toss-btn-secondary:active { transform: scale(0.97); }

.toss-btn-ghost {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 10px 16px; border-radius: var(--toss-radius-sm); font-size: 14px; font-weight: 500;
    background: transparent; color: var(--toss-text-secondary); border: 1px solid var(--toss-border-hover);
    cursor: pointer; transition: all var(--toss-transition);
}
.toss-btn-ghost:hover { background: var(--toss-bg); border-color: #d1d6db; }

.toss-icon-btn {
    display: flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: 50%; border: none; cursor: pointer;
    background: transparent; color: var(--toss-text-tertiary);
    transition: all var(--toss-transition);
}
.toss-icon-btn:hover { background: var(--toss-bg); color: var(--toss-text-primary); }

/* 모달 */
.toss-backdrop {
    position: fixed; inset: 0;
    background: rgba(0, 0, 0, 0.45); backdrop-filter: blur(4px);
    animation: toss-fade-in 0.2s ease;
}
.toss-modal {
    width: 100%; max-width: 700px; max-height: 88vh;
    background: var(--toss-bg-card); border-radius: 24px;
    box-shadow: var(--toss-shadow-lg);
    display: flex; flex-direction: column;
    animation: toss-slide-up 0.3s cubic-bezier(0.33, 0, 0.2, 1);
    overflow: hidden;
}
.toss-modal-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 20px 20px 16px; flex-shrink: 0;
}
.toss-modal-title {
    font-size: 18px; font-weight: 700; color: var(--toss-text-primary);
    letter-spacing: -0.02em;
}
.toss-modal-body { flex: 1; overflow-y: auto; min-height: 0; }
.toss-modal-footer {
    display: flex; gap: 8px; padding: 16px 20px;
    border-top: 1px solid var(--toss-border); flex-shrink: 0;
}

/* 새 결재선 버튼 */
.toss-add-btn {
    width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 14px; border-radius: var(--toss-radius-sm);
    background: var(--toss-blue-lighter); color: var(--toss-blue);
    font-size: 14px; font-weight: 600; border: 2px dashed #c2d9f7;
    cursor: pointer; transition: all var(--toss-transition);
}
.toss-add-btn:hover { background: var(--toss-blue-light); border-color: #9ec3f5; }

/* 결재선 카드 */
.toss-line-card {
    display: flex; align-items: center; gap: 14px;
    padding: 16px; border-radius: var(--toss-radius-sm);
    background: var(--toss-bg-card); cursor: pointer;
    transition: all var(--toss-transition);
    border: 1px solid transparent;
}
.toss-line-card:hover { background: var(--toss-bg); }
.toss-line-card + .toss-line-card { margin-top: 4px; }
.toss-line-card .toss-card-actions {
    display: flex; gap: 2px; opacity: 0;
    transition: opacity var(--toss-transition);
}
.toss-line-card:hover .toss-card-actions { opacity: 1; }

/* 결재선 번호 아이콘 */
.toss-line-icon {
    display: flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 12px; flex-shrink: 0;
    background: var(--toss-blue-light); color: var(--toss-blue);
    font-size: 14px; font-weight: 700;
}

/* 인풋 */
.toss-label {
    display: block; font-size: 13px; font-weight: 600; color: var(--toss-text-secondary);
    margin-bottom: 8px; letter-spacing: -0.01em;
}
.toss-input {
    width: 100%; padding: 12px 14px; border-radius: var(--toss-radius-xs);
    border: 1px solid var(--toss-border-hover); font-size: 15px; color: var(--toss-text-primary);
    background: var(--toss-bg-card); transition: all var(--toss-transition);
    outline: none;
}
.toss-input:focus { border-color: var(--toss-blue); box-shadow: 0 0 0 3px rgba(49, 130, 246, 0.12); }
.toss-input::placeholder { color: var(--toss-text-disabled); }

.toss-input-sm {
    width: 100%; padding: 8px 10px; border-radius: var(--toss-radius-xs);
    border: 1px solid var(--toss-border-hover); font-size: 13px; color: var(--toss-text-primary);
    background: var(--toss-bg); outline: none; transition: all var(--toss-transition);
}
.toss-input-sm:focus { border-color: var(--toss-blue); background: #fff; box-shadow: 0 0 0 3px rgba(49, 130, 246, 0.08); }

/* 스피너 */
.toss-spinner {
    width: 28px; height: 28px; border: 3px solid var(--toss-border); border-top-color: var(--toss-blue);
    border-radius: 50%; animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Empty 아이콘 */
.toss-empty-icon {
    width: 56px; height: 56px; border-radius: 50%;
    background: var(--toss-bg); color: var(--toss-text-disabled);
    display: flex; align-items: center; justify-content: center;
}

/* 하단 요약 */
.toss-summary-bar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 20px; border-top: 1px solid var(--toss-border);
    background: var(--toss-bg); font-size: 13px; color: var(--toss-text-tertiary);
}
.toss-summary-total { font-weight: 700; color: var(--toss-text-primary); }

/* 부서 인원 목록 */
.toss-dept-header {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; padding: 10px 12px; border: none; cursor: pointer;
    background: transparent; font-size: 12px; font-weight: 700; color: var(--toss-text-secondary);
    letter-spacing: -0.01em; transition: background var(--toss-transition);
    text-align: left;
}
.toss-dept-header:hover { background: var(--toss-bg); }

.toss-user-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 7px 12px; transition: background var(--toss-transition);
}
.toss-user-row:hover { background: var(--toss-blue-lighter); }

.toss-user-add-btn {
    flex-shrink: 0; padding: 4px 10px; border-radius: 6px;
    font-size: 12px; font-weight: 600; border: none; cursor: pointer;
    transition: all var(--toss-transition);
}
.toss-user-add-btn.active { background: var(--toss-blue-light); color: var(--toss-blue); }
.toss-user-add-btn.active:hover { background: #d3e5ff; }
.toss-user-add-btn.disabled { background: var(--toss-bg); color: var(--toss-text-disabled); cursor: default; }

/* Step 카드 */
.toss-step-card {
    display: flex; align-items: center; gap: 10px; padding: 10px 12px;
    border-radius: var(--toss-radius-xs); background: var(--toss-bg);
    transition: all var(--toss-transition);
}
.toss-step-card + .toss-step-card { margin-top: 6px; }
.toss-step-card:hover { background: #eef0f3; }
.toss-step-card .step-actions { opacity: 0; transition: opacity var(--toss-transition); }
.toss-step-card:hover .step-actions { opacity: 1; }

.toss-step-num {
    display: flex; align-items: center; justify-content: center;
    width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0;
    background: var(--toss-blue); color: #fff;
    font-size: 11px; font-weight: 700;
}

.toss-step-type {
    flex-shrink: 0; padding: 3px 8px; border-radius: 6px; border: none;
    font-size: 12px; font-weight: 500; background: #fff;
    color: var(--toss-text-secondary); cursor: pointer;
    outline: none; transition: all var(--toss-transition);
    -webkit-appearance: none; appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238b95a1' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 4px center;
    padding-right: 20px;
}
.toss-step-type:focus { box-shadow: 0 0 0 2px rgba(49, 130, 246, 0.2); }

/* 뱃지 */
.toss-badge {
    display: inline-flex; align-items: center; padding: 2px 8px;
    border-radius: 6px; font-size: 11px; font-weight: 600;
}
.toss-badge-blue { background: var(--toss-blue-light); color: var(--toss-blue); }
.toss-badge-default { background: #e8f5e9; color: #2e7d32; }

/* 화살표 아이콘 */
.toss-arrow-flow {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 12px; color: var(--toss-text-tertiary);
}
.toss-arrow-flow .arrow { color: var(--toss-text-disabled); font-size: 10px; }

/* 애니메이션 */
@keyframes toss-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes toss-slide-up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
</style>
@endpush

@push('scripts')
<script>
const isSuperAdmin = @json(auth()->user()->isSuperAdmin());
let selectedIds = new Set();

document.addEventListener('DOMContentLoaded', function() {
    loadDrafts();

    document.getElementById('filterForm').addEventListener('submit', function(e) {
        e.preventDefault();
        loadDrafts();
    });
});

function loadDrafts(page = 1) {
    selectedIds.clear();
    updateBulkDeleteBtn();

    const form = document.getElementById('filterForm');
    const params = new URLSearchParams(new FormData(form));
    params.set('page', page);
    params.set('per_page', document.getElementById('perPageSelect').value);

    fetch(`/api/admin/approvals/drafts?${params}`, {
        headers: { 'Accept': 'application/json', 'X-CSRF-TOKEN': '{{ csrf_token() }}' }
    })
    .then(r => r.json())
    .then(data => {
        renderTable(data.data || [], data);
    })
    .catch(() => {
        document.getElementById('approval-table').innerHTML = '<div class="p-8 text-center text-gray-500">데이터를 불러올 수 없습니다.</div>';
    });
}

function toggleSelectAll(checkbox) {
    const checkboxes = document.querySelectorAll('.row-checkbox');
    checkboxes.forEach(cb => {
        cb.checked = checkbox.checked;
        const id = parseInt(cb.value);
        if (checkbox.checked) {
            selectedIds.add(id);
        } else {
            selectedIds.delete(id);
        }
    });
    updateBulkDeleteBtn();
}

function toggleRowCheckbox(checkbox) {
    const id = parseInt(checkbox.value);
    if (checkbox.checked) {
        selectedIds.add(id);
    } else {
        selectedIds.delete(id);
    }
    // 전체선택 체크박스 동기화
    const allCb = document.getElementById('selectAllCheckbox');
    const rowCbs = document.querySelectorAll('.row-checkbox');
    if (allCb) {
        allCb.checked = rowCbs.length > 0 && [...rowCbs].every(cb => cb.checked);
    }
    updateBulkDeleteBtn();
}

function updateBulkDeleteBtn() {
    const btn = document.getElementById('bulkDeleteBtn');
    const count = document.getElementById('selectedCount');
    if (selectedIds.size > 0) {
        btn.classList.remove('hidden');
        count.textContent = selectedIds.size;
    } else {
        btn.classList.add('hidden');
    }
}

function bulkDelete() {
    if (selectedIds.size === 0) return;
    if (!confirm(`선택한 ${selectedIds.size}건의 문서를 삭제하시겠습니까?`)) return;

    fetch('/api/admin/approvals/bulk-delete', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'Accept': 'application/json',
            'X-CSRF-TOKEN': '{{ csrf_token() }}',
        },
        body: JSON.stringify({ ids: [...selectedIds] }),
    })
    .then(r => r.json())
    .then(data => {
        if (data.success) {
            if (typeof showToast === 'function') showToast(data.message, 'success');
            loadDrafts();
        } else {
            if (typeof showToast === 'function') showToast(data.message || '삭제 실패', 'error');
        }
    })
    .catch(() => {
        if (typeof showToast === 'function') showToast('삭제 중 오류가 발생했습니다.', 'error');
    });
}

function renderTable(items, pagination) {
    const container = document.getElementById('approval-table');

    if (!items.length) {
        container.innerHTML = '<div class="p-8 text-center text-gray-500">기안 문서가 없습니다.</div>';
        document.getElementById('pagination-area').innerHTML = '';
        return;
    }

    const statusBadge = (status) => {
        const map = {
            draft: '<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-700">임시저장</span>',
            pending: '<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-700">진행</span>',
            approved: '<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-700">완료</span>',
            rejected: '<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-700">반려</span>',
            cancelled: '<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-700">회수</span>',
        };
        return map[status] || status;
    };

    const resubmitBadge = (item) => {
        const count = item.resubmit_count || 0;
        if (count === 0) return '<span class="text-xs text-gray-400">-</span>';
        const label = count === 1 ? '재상신' : `재상신(${count}차)`;
        return `<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-purple-100 text-purple-700">${label}</span>`;
    };

    let html = `<div class="overflow-x-auto">
        <table class="min-w-full divide-y divide-gray-200">
            <thead class="bg-gray-50">
                <tr>
                    <th class="px-2 py-3 text-center" style="width: 40px;">
                        <input type="checkbox" id="selectAllCheckbox" onchange="toggleSelectAll(this)" class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500">
                    </th>
                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">문서번호</th>
                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">제목</th>
                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">작성자</th>
                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">양식</th>
                    <th class="px-4 py-3 text-center text-xs font-medium text-gray-500 uppercase">상태</th>
                    <th class="px-4 py-3 text-center text-xs font-medium text-gray-500 uppercase">구분</th>
                    <th class="px-4 py-3 text-center text-xs font-medium text-gray-500 uppercase">긴급</th>
                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">작성일</th>
                    ${isSuperAdmin ? '<th class="px-4 py-3 text-center text-xs font-medium text-gray-500 uppercase">관리</th>' : ''}
                </tr>
            </thead>
            <tbody class="bg-white divide-y divide-gray-200">`;

    items.forEach(item => {
        const createdAt = item.created_at ? new Date(item.created_at).toLocaleDateString('ko-KR') : '-';
        const urgent = item.is_urgent ? '<span class="text-red-500 font-bold text-xs">긴급</span>' : '';
        const url = item.status === 'draft' || item.status === 'rejected'
            ? `/approval-mgmt/${item.id}/edit`
            : `/approval-mgmt/${item.id}`;

        html += `<tr class="hover:bg-gray-50 cursor-pointer" onclick="location.href='${url}'">
            <td class="px-2 py-3 text-center" onclick="event.stopPropagation();">
                <input type="checkbox" class="row-checkbox w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500" value="${item.id}" onchange="toggleRowCheckbox(this)">
            </td>
            <td class="px-4 py-3 text-sm text-gray-600 whitespace-nowrap">${item.document_number || '-'}</td>
            <td class="px-4 py-3 text-sm text-gray-800 font-medium">${item.title || '-'}</td>
            <td class="px-4 py-3 text-sm text-gray-600 whitespace-nowrap">${item.drafter?.name || '-'}</td>
            <td class="px-4 py-3 text-sm text-gray-600">${item.form?.name || '-'}</td>
            <td class="px-4 py-3 text-center">${statusBadge(item.status)}</td>
            <td class="px-4 py-3 text-center">${resubmitBadge(item)}</td>
            <td class="px-4 py-3 text-center">${urgent}</td>
            <td class="px-4 py-3 text-sm text-gray-500 whitespace-nowrap">${createdAt}</td>
            ${isSuperAdmin ? `<td class="px-4 py-3 text-center"><button onclick="event.stopPropagation(); confirmForceDelete(${item.id}, '${escapeHtml(item.title)}')" class="text-xs text-red-500 hover:text-red-700 font-medium whitespace-nowrap">영구삭제</button></td>` : ''}
        </tr>`;
    });

    html += '</tbody></table></div>';
    container.innerHTML = html;

    // 페이지네이션
    renderPagination(pagination);
}

function renderPagination(data) {
    const area = document.getElementById('pagination-area');
    if (!data.last_page || data.last_page <= 1) {
        area.innerHTML = '';
        return;
    }

    let html = '<div class="flex justify-center gap-1">';
    for (let i = 1; i <= data.last_page; i++) {
        const active = i === data.current_page ? 'bg-blue-600 text-white' : 'bg-white text-gray-700 hover:bg-gray-100';
        html += `<button onclick="loadDrafts(${i})" class="px-3 py-1 rounded border text-sm ${active}">${i}</button>`;
    }
    html += '</div>';
    area.innerHTML = html;
}

// =========================================================================
// 결재선 관리 모달
// =========================================================================

let lineManagerState = 'list';
let editingLineId = null;
let lineSteps = [];
let lineDepartments = [];
let lineExpandedDepts = {};
const csrfToken = '{{ csrf_token() }}';

function openLineManager() {
    document.getElementById('lineManagerModal').classList.remove('hidden');
    document.body.style.overflow = 'hidden';
    switchToLineList();
    loadLineList();
    loadLineDepartments();
}

function closeLineManager() {
    document.getElementById('lineManagerModal').classList.add('hidden');
    document.body.style.overflow = '';
}

function switchToLineList() {
    lineManagerState = 'list';
    editingLineId = null;
    lineSteps = [];
    document.getElementById('lineListView').classList.remove('hidden');
    document.getElementById('lineEditView').classList.add('hidden');
    document.getElementById('lineEditFooter').classList.add('hidden');
    document.getElementById('lineBackBtn').classList.add('hidden');
    document.getElementById('lineManagerTitle').textContent = '결재선 관리';
}

function switchToLineEdit() {
    lineManagerState = 'edit';
    document.getElementById('lineListView').classList.add('hidden');
    document.getElementById('lineEditView').classList.remove('hidden');
    document.getElementById('lineEditFooter').classList.remove('hidden');
    document.getElementById('lineBackBtn').classList.remove('hidden');
    document.getElementById('lineManagerTitle').textContent = editingLineId ? '결재선 수정' : '새 결재선';
    renderLineSteps();
    renderLineDeptList();
}

function loadLineList() {
    const body = document.getElementById('lineListBody');
    body.innerHTML = '<div class="flex justify-center" style="padding: 40px 0;"><div class="toss-spinner"></div></div>';

    fetch('/api/admin/approvals/lines', {
        headers: { 'Accept': 'application/json', 'X-CSRF-TOKEN': csrfToken }
    })
    .then(r => r.json())
    .then(data => {
        const lines = data.data || [];
        if (!lines.length) {
            body.innerHTML = `<div class="flex flex-col items-center" style="padding: 48px 0;">
                <div class="toss-empty-icon"><svg class="w-6 h-6" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/></svg></div>
                <span style="font-size: 14px; color: var(--toss-text-tertiary); margin-top: 14px;">등록된 결재선이 없습니다</span>
                <span style="font-size: 13px; color: var(--toss-text-disabled); margin-top: 4px;">위 버튼으로 새 결재선을 만들어 보세요</span>
            </div>`;
            return;
        }
        body.innerHTML = lines.map((line, idx) => {
            const stepsArr = line.steps || [];
            const flowHtml = stepsArr.map((s, si) => {
                const typeLabel = s.step_type === 'agreement' ? '합의' : s.step_type === 'reference' ? '참조' : '';
                const suffix = typeLabel ? `<span style="font-size: 10px; color: var(--toss-text-disabled);">(${typeLabel})</span>` : '';
                const arrow = si < stepsArr.length - 1 ? '<span class="arrow">&rarr;</span>' : '';
                return `<span>${escapeHtml(s.user_name || '?')}${suffix}</span>${arrow}`;
            }).join('');

            return `<div class="toss-line-card" onclick="openLineEdit(${line.id})">
                <div class="toss-line-icon">${idx + 1}</div>
                <div class="flex-1 min-w-0">
                    <div class="flex items-center gap-2">
                        <span style="font-size: 15px; font-weight: 600; color: var(--toss-text-primary);">${escapeHtml(line.name)}</span>
                        ${line.is_default ? '<span class="toss-badge toss-badge-default">기본</span>' : ''}
                    </div>
                    <div class="toss-arrow-flow" style="margin-top: 4px;">${flowHtml}</div>
                    <div style="font-size: 12px; color: var(--toss-text-disabled); margin-top: 2px;">${stepsArr.length}단계</div>
                </div>
                <div class="toss-card-actions">
                    <button onclick="event.stopPropagation(); openLineEdit(${line.id})" class="toss-icon-btn" style="width: 32px; height: 32px;" title="수정">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/></svg>
                    </button>
                    <button onclick="event.stopPropagation(); deleteLine(${line.id}, '${escapeHtml(line.name)}')" class="toss-icon-btn" style="width: 32px; height: 32px; color: var(--toss-red);" title="삭제">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
                    </button>
                </div>
            </div>`;
        }).join('');
    })
    .catch(() => {
        body.innerHTML = '<div style="padding: 40px 0; text-align: center; color: var(--toss-red); font-size: 14px;">목록을 불러올 수 없습니다</div>';
    });
}

function loadLineDepartments() {
    if (lineDepartments.length > 0) return;
    fetch('/api/admin/tenant-users/list', {
        headers: { 'Accept': 'application/json' }
    })
    .then(r => r.json())
    .then(data => {
        if (data.success) {
            lineDepartments = data.data;
            lineDepartments.forEach(d => {
                lineExpandedDepts[d.department_id ?? 'none'] = true;
            });
        }
    });
}

function openLineEdit(id = null) {
    editingLineId = id;
    lineSteps = [];
    document.getElementById('lineNameInput').value = '';

    if (id) {
        // 기존 결재선 로드
        fetch('/api/admin/approvals/lines', {
            headers: { 'Accept': 'application/json', 'X-CSRF-TOKEN': csrfToken }
        })
        .then(r => r.json())
        .then(data => {
            const line = (data.data || []).find(l => l.id === id);
            if (line) {
                document.getElementById('lineNameInput').value = line.name;
                lineSteps = (line.steps || []).map((s, i) => ({
                    _key: i + 1,
                    user_id: s.user_id,
                    user_name: s.user_name || '',
                    department: s.department || '',
                    position: s.position || '',
                    step_type: s.step_type || 'approval',
                }));
            }
            switchToLineEdit();
        });
    } else {
        switchToLineEdit();
    }
}

function backToLineList() {
    switchToLineList();
    loadLineList();
}

function saveLine() {
    const name = document.getElementById('lineNameInput').value.trim();
    if (!name) {
        if (typeof showToast === 'function') showToast('결재선 이름을 입력하세요.', 'warning');
        return;
    }
    if (lineSteps.length === 0) {
        if (typeof showToast === 'function') showToast('결재자를 1명 이상 추가하세요.', 'warning');
        return;
    }

    const payload = {
        name: name,
        steps: lineSteps.map(s => ({
            user_id: s.user_id,
            step_type: s.step_type,
        })),
        is_default: false,
    };

    const url = editingLineId
        ? `/api/admin/approvals/lines/${editingLineId}`
        : '/api/admin/approvals/lines';
    const method = editingLineId ? 'PUT' : 'POST';

    fetch(url, {
        method: method,
        headers: {
            'Content-Type': 'application/json',
            'Accept': 'application/json',
            'X-CSRF-TOKEN': csrfToken,
        },
        body: JSON.stringify(payload),
    })
    .then(r => r.json())
    .then(data => {
        if (data.success) {
            if (typeof showToast === 'function') showToast(data.message, 'success');
            backToLineList();
        } else {
            const msg = data.message || '저장에 실패했습니다.';
            if (typeof showToast === 'function') showToast(msg, 'error');
        }
    })
    .catch(() => {
        if (typeof showToast === 'function') showToast('저장 중 오류가 발생했습니다.', 'error');
    });
}

function deleteLine(id, name) {
    if (!confirm(`"${name}" 결재선을 삭제하시겠습니까?`)) return;

    fetch(`/api/admin/approvals/lines/${id}`, {
        method: 'DELETE',
        headers: { 'X-CSRF-TOKEN': csrfToken, 'Accept': 'application/json' },
    })
    .then(r => r.json())
    .then(data => {
        if (data.success) {
            if (typeof showToast === 'function') showToast(data.message, 'success');
            loadLineList();
        } else {
            if (typeof showToast === 'function') showToast(data.message || '삭제 실패', 'error');
        }
    });
}

function addLineStep(user, deptName) {
    if (lineSteps.some(s => s.user_id === user.id)) {
        if (typeof showToast === 'function') showToast('이미 추가된 결재자입니다.', 'warning');
        return;
    }
    lineSteps.push({
        _key: Date.now(),
        user_id: user.id,
        user_name: user.name,
        department: deptName || '',
        position: user.position || user.job_title || '',
        step_type: 'approval',
    });
    renderLineSteps();
    renderLineDeptList();
}

function removeLineStep(index) {
    lineSteps.splice(index, 1);
    renderLineSteps();
    renderLineDeptList();
}

function changeLineStepType(index, value) {
    lineSteps[index].step_type = value;
    updateLineSummary();
}

function moveLineStep(index, direction) {
    const newIndex = index + direction;
    if (newIndex < 0 || newIndex >= lineSteps.length) return;
    const temp = lineSteps[index];
    lineSteps[index] = lineSteps[newIndex];
    lineSteps[newIndex] = temp;
    renderLineSteps();
}

function renderLineSteps() {
    const container = document.getElementById('lineStepList');
    const emptyEl = document.getElementById('lineStepEmpty');

    if (lineSteps.length === 0) {
        container.innerHTML = '';
        container.classList.add('hidden');
        emptyEl.classList.remove('hidden');
    } else {
        emptyEl.classList.add('hidden');
        container.classList.remove('hidden');

        container.innerHTML = lineSteps.map((step, i) => {
            const info = [step.department, step.position].filter(Boolean).join(' / ');
            return `<div class="toss-step-card">
                <div style="flex-shrink: 0; display: flex; flex-direction: column; gap: 1px;">
                    <button onclick="moveLineStep(${i}, -1)" class="toss-icon-btn" style="width: 22px; height: 22px; ${i === 0 ? 'visibility: hidden;' : ''}">
                        <svg style="width: 12px; height: 12px;" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M5 15l7-7 7 7"/></svg>
                    </button>
                    <button onclick="moveLineStep(${i}, 1)" class="toss-icon-btn" style="width: 22px; height: 22px; ${i === lineSteps.length - 1 ? 'visibility: hidden;' : ''}">
                        <svg style="width: 12px; height: 12px;" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"/></svg>
                    </button>
                </div>
                <div class="toss-step-num">${i + 1}</div>
                <div class="flex-1 min-w-0">
                    <div style="font-size: 13px; font-weight: 600; color: var(--toss-text-primary);">${escapeHtml(step.user_name)}</div>
                    <div style="font-size: 11px; color: var(--toss-text-tertiary); margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">${escapeHtml(info)}</div>
                </div>
                <select onchange="changeLineStepType(${i}, this.value)" class="toss-step-type">
                    <option value="approval" ${step.step_type === 'approval' ? 'selected' : ''}>결재</option>
                    <option value="agreement" ${step.step_type === 'agreement' ? 'selected' : ''}>합의</option>
                    <option value="reference" ${step.step_type === 'reference' ? 'selected' : ''}>참조</option>
                </select>
                <button onclick="removeLineStep(${i})" class="toss-icon-btn step-actions" style="width: 28px; height: 28px; color: var(--toss-red);">
                    <svg style="width: 14px; height: 14px;" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
                </button>
            </div>`;
        }).join('');
    }

    updateLineSummary();
}

function renderLineDeptList() {
    const container = document.getElementById('lineDeptList');
    const query = (document.getElementById('lineUserSearch')?.value || '').trim().toLowerCase();

    let depts = lineDepartments;
    if (query) {
        depts = depts.map(dept => {
            const deptMatch = dept.department_name.toLowerCase().includes(query);
            const matched = dept.users.filter(u =>
                u.name.toLowerCase().includes(query) ||
                (u.position && u.position.toLowerCase().includes(query))
            );
            if (deptMatch) return dept;
            if (matched.length > 0) return { ...dept, users: matched };
            return null;
        }).filter(Boolean);
    }

    if (!depts.length) {
        container.innerHTML = `<div class="flex flex-col items-center" style="padding: 32px 0;">
            <span style="font-size: 12px; color: var(--toss-text-disabled);">${query ? '검색 결과가 없습니다' : '인원 정보가 없습니다'}</span>
        </div>`;
        return;
    }

    container.innerHTML = depts.map(dept => {
        const deptKey = dept.department_id ?? 'none';
        const expanded = lineExpandedDepts[deptKey] !== false;
        return `<div>
            <button type="button" onclick="toggleLineDept('${deptKey}')" class="toss-dept-header">
                <span class="flex items-center gap-1">
                    <svg style="width: 12px; height: 12px; transition: transform 0.2s; ${expanded ? 'transform: rotate(90deg);' : ''}" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7"/>
                    </svg>
                    ${escapeHtml(dept.department_name)}
                </span>
                <span style="color: var(--toss-text-disabled); font-weight: 500;">${dept.users.length}</span>
            </button>
            <div id="lineDept-${deptKey}" class="${expanded ? '' : 'hidden'}">
                ${dept.users.map(user => {
                    const added = lineSteps.some(s => s.user_id === user.id);
                    return `<div class="toss-user-row" style="${added ? 'opacity: 0.45;' : ''}">
                        <div class="flex-1 min-w-0">
                            <span style="font-size: 13px; font-weight: 500; color: var(--toss-text-primary);">${escapeHtml(user.name)}</span>
                            <span style="font-size: 11px; color: var(--toss-text-disabled); margin-left: 4px;">${escapeHtml(user.position || user.job_title || '')}</span>
                        </div>
                        <button onclick='addLineStep(${JSON.stringify({id: user.id, name: user.name, position: user.position || user.job_title || ""})}, "${escapeHtml(dept.department_name)}")'
                                ${added ? 'disabled' : ''}
                                class="toss-user-add-btn ${added ? 'disabled' : 'active'}">
                            ${added ? '추가됨' : '+ 추가'}
                        </button>
                    </div>`;
                }).join('')}
            </div>
        </div>`;
    }).join('');
}

function toggleLineDept(key) {
    lineExpandedDepts[key] = !lineExpandedDepts[key];
    const el = document.getElementById('lineDept-' + key);
    if (el) el.classList.toggle('hidden');
}

function updateLineSummary() {
    const counts = { approval: 0, agreement: 0, reference: 0 };
    lineSteps.forEach(s => { if (counts[s.step_type] !== undefined) counts[s.step_type]++; });
    const total = lineSteps.length;
    document.getElementById('lineSummary').textContent =
        `결재 ${counts.approval}명 \u00B7 합의 ${counts.agreement}명 \u00B7 참조 ${counts.reference}명`;
    document.getElementById('lineSummaryTotal').textContent = `총 ${total}명`;
}

function escapeHtml(str) {
    if (!str) return '';
    const div = document.createElement('div');
    div.textContent = str;
    return div.innerHTML;
}

// 인원 검색 디바운스
document.addEventListener('DOMContentLoaded', function() {
    const searchInput = document.getElementById('lineUserSearch');
    if (searchInput) {
        let timer;
        searchInput.addEventListener('input', function() {
            clearTimeout(timer);
            timer = setTimeout(() => renderLineDeptList(), 200);
        });
    }
});

function confirmForceDelete(id, title) {
    if (!confirm(`"${title}" 문서를 영구삭제하시겠습니까?\n\n이 작업은 되돌릴 수 없습니다.`)) return;

    fetch(`/api/admin/approvals/${id}/force`, {
        method: 'DELETE',
        headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}', 'Accept': 'application/json' }
    })
    .then(r => r.json())
    .then(data => {
        if (data.success) {
            showToast(data.message, 'success');
            loadDrafts();
        } else {
            showToast(data.message, 'error');
        }
    });
}

function confirmDelete(id, title) {
    if (!confirm(`"${title}" 문서를 삭제하시겠습니까?`)) return;

    fetch(`/api/admin/approvals/${id}`, {
        method: 'DELETE',
        headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}', 'Accept': 'application/json' }
    })
    .then(r => r.json())
    .then(data => {
        if (data.success) {
            showToast(data.message, 'success');
            loadDrafts();
        } else {
            showToast(data.message, 'error');
        }
    });
}
</script>
@endpush