@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: 600px;
    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;
}

.form-row {
    display: grid;
    grid-template-columns: repeat(3, 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">Open AI 설정 관리</h2>
          <div class="cateWrap">
            <button id="btnAdd" class="btn01 btnBlue">새 설정 추가</button>
          </div>
        </div>

        <div class="tableWrap">
          <table>
            <colgroup>
              <col width="60px">
              <col width="200px">
              <col width="150px">
              <col width="100px">
              <col width="100px">
              <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>
                <th><p class="txt13_400">관리</p></th>
              </tr>
            </thead>
            <tbody id="configTableBody" class="tbodyWrap">
              <tr>
                <td colspan="9"><p class="txt14_400">로딩중...</p></td>
              </tr>
            </tbody>
          </table>
        </div>

        <div class="pageWrap">
          <ul id="pagination" class="pageNum"></ul>
        </div>
      </div>
    </div>
    
    <!-- 설정 등록/수정 모달 -->
    <div id="configModal" 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="configID" value="">
                
                <div class="form-group">
                    <label>설정 이름 <span class="required">*</span></label>
                    <input type="text" id="configName" class="form-input" placeholder="설정 이름을 입력하세요" maxlength="100">
                </div>
                
                <div class="form-group">
                    <label>API Key <span class="required">*</span></label>
                    <input type="password" id="apiKey" class="form-input" placeholder="OpenAI API Key를 입력하세요" maxlength="255">
                </div>
                
                <div class="form-row">
                    <div class="form-group">
                        <label>모델 <span class="required">*</span></label>
                        <select id="model" class="form-input">
                            <option value="gpt-3.5-turbo">GPT-3.5 Turbo</option>
                            <option value="gpt-4">GPT-4</option>
                            <option value="gpt-4-turbo">GPT-4 Turbo</option>
                            <option value="gpt-4o">GPT-4o</option>
                        </select>
                    </div>
                    
                    <div class="form-group">
                        <label>최대 토큰 <span class="required">*</span></label>
                        <input type="number" id="maxTokens" class="form-input" placeholder="1000" value="1000" min="1">
                    </div>
                    
                    <div class="form-group">
                        <label>온도 (0-2) <span class="required">*</span></label>
                        <input type="number" id="temperature" class="form-input" placeholder="0.7" value="0.7" min="0" max="2" step="0.1">
                    </div>
                </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() {
            loadConfigList();
            initModalEvents();
        });
        
        // 설정 목록 조회
        function loadConfigList() {
            fetch(`/mda/api/ai/configs?page=${currentPage}&limit=${limit}`)
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        renderConfigList(data.data);
                        renderPagination(data.total, data.page, data.limit);
                    } else {
                        alert('목록 조회에 실패했습니다.');
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    alert('목록 조회 중 오류가 발생했습니다.');
                });
        }
        
        // 설정 목록 렌더링
        function renderConfigList(configs) {
            const tbody = document.getElementById('configTableBody');
            
            if (configs.length === 0) {
                tbody.innerHTML = '<tr><td colspan="9"><p class="txt14_400">등록된 설정이 없습니다.</p></td></tr>';
                return;
            }
            
            tbody.innerHTML = configs.map((config, index) => `
                <tr>
                    <td><p class="txt14_400">${(currentPage - 1) * limit + index + 1}</p></td>
                    <td><p class="txt14_400">${config.ConfigName}</p></td>
                    <td><p class="txt14_400">${config.Model}</p></td>
                    <td><p class="txt14_400">${config.MaxTokens}</p></td>
                    <td><p class="txt14_400">${config.Temperature}</p></td>
                    <td><p class="txt14_400">${config.UseFlag === 'Y' ? '사용' : '미사용'}</p></td>
                    <td><p class="txt14_400">${config.IsDefault === 'Y' ? '기본' : '-'}</p></td>
                    <td><p class="txt14_400">${config.CreatedAt}</p></td>
                    <td>
                        <button type="button" class="btn03 btnGray" onclick="editConfig(${config.ConfigID})">수정</button>
                        <button type="button" class="btn03 btnGray" onclick="deleteConfig(${config.ConfigID})" ${config.IsDefault === 'Y' ? 'disabled' : ''}>삭제</button>
                    </td>
                </tr>
            `).join('');
        }
        
        // 페이지네이션 렌더링
        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;
            loadConfigList();
        }
        
        // 모달 이벤트 초기화
        function initModalEvents() {
            const modal = document.getElementById('configModal');
            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() {
                saveConfig();
            };
            
            window.onclick = function(event) {
                if (event.target === modal) {
                    closeModal();
                }
            };
        }
        
        // 모달 열기 (신규 등록)
        function openModal() {
            document.getElementById('modalTitle').textContent = '설정 추가';
            document.getElementById('configID').value = '';
            document.getElementById('configName').value = '';
            document.getElementById('apiKey').value = '';
            document.getElementById('model').value = 'gpt-3.5-turbo';
            document.getElementById('maxTokens').value = '1000';
            document.getElementById('temperature').value = '0.7';
            document.getElementById('description').value = '';
            document.getElementById('useFlag').checked = true;
            document.getElementById('isDefault').checked = false;
            
            document.getElementById('configModal').style.display = 'block';
        }
        
        // 모달 닫기
        function closeModal() {
            document.getElementById('configModal').style.display = 'none';
        }
        
        // 설정 수정
        function editConfig(configID) {
            fetch(`/mda/api/ai/config?configID=${configID}`)
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        const config = data.data;
                        document.getElementById('modalTitle').textContent = '설정 수정';
                        document.getElementById('configID').value = config.ConfigID;
                        document.getElementById('configName').value = config.ConfigName;
                        document.getElementById('apiKey').value = config.APIKey;
                        document.getElementById('model').value = config.Model;
                        document.getElementById('maxTokens').value = config.MaxTokens;
                        document.getElementById('temperature').value = config.Temperature;
                        document.getElementById('description').value = config.Description || '';
                        document.getElementById('useFlag').checked = config.UseFlag === 'Y';
                        document.getElementById('isDefault').checked = config.IsDefault === 'Y';
                        
                        document.getElementById('configModal').style.display = 'block';
                    } else {
                        alert('설정 조회에 실패했습니다.');
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    alert('설정 조회 중 오류가 발생했습니다.');
                });
        }
        
        // 설정 저장
        function saveConfig() {
            const configID = document.getElementById('configID').value;
            const configName = document.getElementById('configName').value.trim();
            const apiKey = document.getElementById('apiKey').value.trim();
            const model = document.getElementById('model').value;
            const maxTokens = document.getElementById('maxTokens').value;
            const temperature = document.getElementById('temperature').value;
            const description = document.getElementById('description').value.trim();
            const useFlag = document.getElementById('useFlag').checked ? 'Y' : 'N';
            const isDefault = document.getElementById('isDefault').checked ? 'Y' : 'N';
            
            if (!configName) {
                alert('설정 이름을 입력하세요.');
                return;
            }
            
            if (!apiKey) {
                alert('API Key를 입력하세요.');
                return;
            }
            
            const data = {
                ConfigName: configName,
                APIKey: apiKey,
                Model: model,
                MaxTokens: parseInt(maxTokens),
                Temperature: parseFloat(temperature),
                Description: description,
                UseFlag: useFlag,
                IsDefault: isDefault
            };
            
            const url = configID ? '/mda/api/ai/config/update' : '/mda/api/ai/config/insert';
            if (configID) {
                data.ConfigID = configID;
            }
            
            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();
                    loadConfigList();
                } else {
                    alert(data.message || '저장에 실패했습니다.');
                }
            })
            .catch(error => {
                console.error('Error:', error);
                alert('저장 중 오류가 발생했습니다.');
            });
        }
        
        // 설정 삭제
        function deleteConfig(configID) {
            if (!confirm('정말 삭제하시겠습니까?')) {
                return;
            }
            
            fetch('/mda/api/ai/config/delete', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
                },
                body: JSON.stringify({ ConfigID: configID })
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    alert(data.message);
                    loadConfigList();
                } else {
                    alert(data.message || '삭제에 실패했습니다.');
                }
            })
            .catch(error => {
                console.error('Error:', error);
                alert('삭제 중 오류가 발생했습니다.');
            });
        }
    </script>
  </section>
</div>
@endsection