@extends('common.layout')
<link rel="stylesheet" type="text/css" href="{{asset('css/list.css') }}" />
<link rel="stylesheet" type="text/css" href="{{asset('css/form.css') }}" />
<meta name="csrf-token" content="{{ csrf_token() }}">
<style>
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.4);
    overflow: auto;
}

.modal-content {
    background-color: #fefefe;
    margin: 50px auto;
    border-radius: 8px;
    width: 700px;
    max-width: 90%;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.modal-header {
    padding: 20px 30px;
    border-bottom: 1px solid #ddd;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-header h2 {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
}

.close {
    color: #aaa;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    line-height: 1;
}

.close:hover {
    color: #000;
}

.modal-body {
    padding: 30px;
}

.modal-footer {
    padding: 20px 30px;
    border-top: 1px solid #ddd;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #333;
    font-size: 14px;
}

.required {
    color: #dc3545;
}

.form-input, .form-textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    box-sizing: border-box;
}

.form-input:focus, .form-textarea:focus {
    outline: none;
    border-color: #007bff;
}

.form-textarea {
    resize: vertical;
    font-family: inherit;
}

.form-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-weight: 400;
}

.checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.btn-primary, .btn-secondary {
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
}

.btn-primary {
    background: #007bff;
    color: white;
}

.btn-primary:hover {
    background: #0056b3;
}

.btn-secondary {
    background: #6c757d;
    color: white;
}

.btn-secondary:hover {
    background: #545b62;
}
</style>
@section('content')

<div class="container">
  <section id="sec01" class="sec01">
    <div class="contWrap">
      <div class="listWrap">
        <div class="titleWrap">
          <h2 class="title txt23_700">시스템 프롬프트 관리</h2>
          <div class="cateWrap">
            <button id="btnAdd" class="btn01 btnBlue">새 프롬프트 추가</button>
          </div>
        </div>

        <div class="tableWrap">
          <table>
            <colgroup>
              <col width="60px">
              <col width="180px">
              <col width="120px">
              <col width="*">
              <col width="80px">
              <col width="80px">
              <col width="150px">
              <col width="120px">
            </colgroup>
            <thead>
              <tr>
                <th><p class="txt13_400">번호</p></th>
                <th><p class="txt13_400">프롬프트 이름</p></th>
                <th><p class="txt13_400">카테고리</p></th>
                <th><p class="txt13_400">프롬프트 내용</p></th>
                <th><p class="txt13_400">사용</p></th>
                <th><p class="txt13_400">기본</p></th>
                <th><p class="txt13_400">등록일시</p></th>
                <th><p class="txt13_400">관리</p></th>
              </tr>
            </thead>
            <tbody id="promptTableBody" class="tbodyWrap">
              <tr>
                <td colspan="8"><p class="txt14_400">로딩중...</p></td>
              </tr>
            </tbody>
          </table>
        </div>

        <div class="pageWrap">
          <ul id="pagination" class="pageNum"></ul>
        </div>
      </div>
    </div>
    
    <!-- 프롬프트 등록/수정 모달 -->
    <div id="promptModal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h2 id="modalTitle">프롬프트 추가</h2>
                <span class="close">&times;</span>
            </div>
            <div class="modal-body">
                <input type="hidden" id="promptID" value="">
                
                <div class="form-group">
                    <label>프롬프트 이름 <span class="required">*</span></label>
                    <input type="text" id="promptName" class="form-input" placeholder="프롬프트 이름을 입력하세요" maxlength="100">
                </div>
                
                <div class="form-group">
                    <label>카테고리</label>
                    <input type="text" id="category" class="form-input" placeholder="예: 일반, 상담, 기술, 서비스" maxlength="50">
                </div>
                
                <div class="form-group">
                    <label>프롬프트 내용 <span class="required">*</span></label>
                    <textarea id="promptContent" class="form-textarea" placeholder="AI의 역할과 동작 방식을 정의하세요&#10;&#10;예시:&#10;당신은 친절하고 전문적인 고객 서비스 담당자입니다.&#10;항상 공손하고 명확하게 답변하며, 고객의 문제를 신속하게 해결하기 위해 노력합니다." rows="8"></textarea>
                </div>
                
                <div class="form-group">
                    <label>설명</label>
                    <textarea id="description" class="form-textarea" placeholder="프롬프트에 대한 설명을 입력하세요" rows="3"></textarea>
                </div>
                
                <div class="form-row">
                    <div class="form-group">
                        <label class="checkbox-label">
                            <input type="checkbox" id="useFlag" checked>
                            사용 여부
                        </label>
                    </div>
                    
                    <div class="form-group">
                        <label class="checkbox-label">
                            <input type="checkbox" id="isDefault">
                            기본 프롬프트로 지정
                        </label>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button id="btnCancel" class="btn-secondary">취소</button>
                <button id="btnSave" class="btn-primary">저장</button>
            </div>
        </div>
    </div>
    
    <script>
        let currentPage = 1;
        const limit = 10;
        
        // 페이지 로드 시 목록 조회
        document.addEventListener('DOMContentLoaded', function() {
            loadPromptList();
            initModalEvents();
        });
        
        // 프롬프트 목록 조회
        function loadPromptList() {
            fetch(`/mda/api/ai/prompts?page=${currentPage}&limit=${limit}`)
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        renderPromptList(data.data);
                        renderPagination(data.total, data.page, data.limit);
                    } else {
                        alert('목록 조회에 실패했습니다.');
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    alert('목록 조회 중 오류가 발생했습니다.');
                });
        }
        
        // 프롬프트 목록 렌더링
        function renderPromptList(prompts) {
            const tbody = document.getElementById('promptTableBody');
            
            if (prompts.length === 0) {
                tbody.innerHTML = '<tr><td colspan="8"><p class="txt14_400">등록된 프롬프트가 없습니다.</p></td></tr>';
                return;
            }
            
            tbody.innerHTML = prompts.map((prompt, index) => `
                <tr>
                    <td><p class="txt14_400">${(currentPage - 1) * limit + index + 1}</p></td>
                    <td><p class="txt14_400">${prompt.PromptName}</p></td>
                    <td><p class="txt14_400">${prompt.Category || '-'}</p></td>
                    <td><p class="txt14_400">${truncateText(prompt.PromptContent, 100)}</p></td>
                    <td><p class="txt14_400">${prompt.UseFlag === 'Y' ? '사용' : '미사용'}</p></td>
                    <td><p class="txt14_400">${prompt.IsDefault === 'Y' ? '기본' : '-'}</p></td>
                    <td><p class="txt14_400">${prompt.CreatedAt}</p></td>
                    <td>
                        <button type="button" class="btn03 btnGray" onclick="editPrompt(${prompt.PromptID})">수정</button>
                        <button type="button" class="btn03 btnGray" onclick="deletePrompt(${prompt.PromptID})" ${prompt.IsDefault === 'Y' ? 'disabled' : ''}>삭제</button>
                    </td>
                </tr>
            `).join('');
        }
        
        // 텍스트 자르기
        function truncateText(text, maxLength) {
            if (!text) return '-';
            if (text.length <= maxLength) return text;
            return text.substring(0, maxLength) + '...';
        }
        
        // 페이지네이션 렌더링
        function renderPagination(total, page, limit) {
            const totalPages = Math.ceil(total / limit);
            const pagination = document.getElementById('pagination');
            
            if (totalPages <= 1) {
                pagination.innerHTML = '';
                return;
            }
            
            let html = '';
            
            if (page > 1) {
                html += `<li><a href="javascript:void(0)" onclick="changePage(${page - 1})"><</a></li>`;
            }
            
            for (let i = 1; i <= totalPages; i++) {
                if (i === page) {
                    html += `<li class="active"><a href="javascript:void(0)">${i}</a></li>`;
                } else {
                    html += `<li><a href="javascript:void(0)" onclick="changePage(${i})">${i}</a></li>`;
                }
            }
            
            if (page < totalPages) {
                html += `<li><a href="javascript:void(0)" onclick="changePage(${page + 1})">></a></li>`;
            }
            
            pagination.innerHTML = html;
        }
        
        // 페이지 변경
        function changePage(page) {
            currentPage = page;
            loadPromptList();
        }
        
        // 모달 이벤트 초기화
        function initModalEvents() {
            const modal = document.getElementById('promptModal');
            const btnAdd = document.getElementById('btnAdd');
            const btnCancel = document.getElementById('btnCancel');
            const btnSave = document.getElementById('btnSave');
            const closeBtn = document.querySelector('.close');
            
            btnAdd.onclick = function() {
                openModal();
            };
            
            btnCancel.onclick = function() {
                closeModal();
            };
            
            closeBtn.onclick = function() {
                closeModal();
            };
            
            btnSave.onclick = function() {
                savePrompt();
            };
            
            window.onclick = function(event) {
                if (event.target === modal) {
                    closeModal();
                }
            };
        }
        
        // 모달 열기 (신규 등록)
        function openModal() {
            document.getElementById('modalTitle').textContent = '프롬프트 추가';
            document.getElementById('promptID').value = '';
            document.getElementById('promptName').value = '';
            document.getElementById('category').value = '';
            document.getElementById('promptContent').value = '';
            document.getElementById('description').value = '';
            document.getElementById('useFlag').checked = true;
            document.getElementById('isDefault').checked = false;
            
            document.getElementById('promptModal').style.display = 'block';
        }
        
        // 모달 닫기
        function closeModal() {
            document.getElementById('promptModal').style.display = 'none';
        }
        
        // 프롬프트 수정
        function editPrompt(promptID) {
            fetch(`/mda/api/ai/prompt?promptID=${promptID}`)
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        const prompt = data.data;
                        document.getElementById('modalTitle').textContent = '프롬프트 수정';
                        document.getElementById('promptID').value = prompt.PromptID;
                        document.getElementById('promptName').value = prompt.PromptName;
                        document.getElementById('category').value = prompt.Category || '';
                        document.getElementById('promptContent').value = prompt.PromptContent;
                        document.getElementById('description').value = prompt.Description || '';
                        document.getElementById('useFlag').checked = prompt.UseFlag === 'Y';
                        document.getElementById('isDefault').checked = prompt.IsDefault === 'Y';
                        
                        document.getElementById('promptModal').style.display = 'block';
                    } else {
                        alert('프롬프트 조회에 실패했습니다.');
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    alert('프롬프트 조회 중 오류가 발생했습니다.');
                });
        }
        
        // 프롬프트 저장
        function savePrompt() {
            const promptID = document.getElementById('promptID').value;
            const promptName = document.getElementById('promptName').value.trim();
            const category = document.getElementById('category').value.trim();
            const promptContent = document.getElementById('promptContent').value.trim();
            const description = document.getElementById('description').value.trim();
            const useFlag = document.getElementById('useFlag').checked ? 'Y' : 'N';
            const isDefault = document.getElementById('isDefault').checked ? 'Y' : 'N';
            
            if (!promptName) {
                alert('프롬프트 이름을 입력하세요.');
                return;
            }
            
            if (!promptContent) {
                alert('프롬프트 내용을 입력하세요.');
                return;
            }
            
            const data = {
                PromptName: promptName,
                PromptContent: promptContent,
                Category: category,
                Description: description,
                UseFlag: useFlag,
                IsDefault: isDefault
            };
            
            const url = promptID ? '/mda/api/ai/prompt/update' : '/mda/api/ai/prompt/insert';
            if (promptID) {
                data.PromptID = promptID;
            }
            
            fetch(url, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
                },
                body: JSON.stringify(data)
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    alert(data.message);
                    closeModal();
                    loadPromptList();
                } else {
                    alert(data.message || '저장에 실패했습니다.');
                }
            })
            .catch(error => {
                console.error('Error:', error);
                alert('저장 중 오류가 발생했습니다.');
            });
        }
        
        // 프롬프트 삭제
        function deletePrompt(promptID) {
            if (!confirm('정말 삭제하시겠습니까?')) {
                return;
            }
            
            fetch('/mda/api/ai/prompt/delete', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
                },
                body: JSON.stringify({ PromptID: promptID })
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    alert(data.message);
                    loadPromptList();
                } else {
                    alert(data.message || '삭제에 실패했습니다.');
                }
            })
            .catch(error => {
                console.error('Error:', error);
                alert('삭제 중 오류가 발생했습니다.');
            });
        }
    </script>
  </section>
</div>
@endsection