@extends('layouts.app')

@section('title', '품목관리')

@section('content')
    <!-- 페이지 헤더 -->
    <div class="flex flex-col sm:flex-row sm:justify-between sm:items-center gap-4 mb-4">
        <h1 class="text-2xl font-bold text-gray-800">품목관리</h1>
    </div>

    <!-- 3-Panel 레이아웃 -->
    <div class="flex gap-4" style="height: calc(100vh - 180px);">

        <!-- 좌측 패널: 품목 리스트 -->
        <div class="w-72 flex-shrink-0 bg-white rounded-lg shadow-sm flex flex-col overflow-hidden">
            <!-- 검색 -->
            <div class="p-3 border-b border-gray-200">
                <input type="text"
                       id="item-search"
                       placeholder="코드 또는 품목명 검색..."
                       class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                <!-- 유형 필터 -->
                <div class="flex flex-wrap gap-1 mt-2">
                    <button type="button" data-type="" class="item-type-filter active px-2 py-0.5 text-xs rounded-full bg-blue-100 text-blue-800 font-medium">전체</button>
                    <button type="button" data-type="FG" class="item-type-filter px-2 py-0.5 text-xs rounded-full bg-gray-100 text-gray-600 hover:bg-blue-50">FG</button>
                    <button type="button" data-type="PT" class="item-type-filter px-2 py-0.5 text-xs rounded-full bg-gray-100 text-gray-600 hover:bg-green-50">PT</button>
                    <button type="button" data-type="SM" class="item-type-filter px-2 py-0.5 text-xs rounded-full bg-gray-100 text-gray-600 hover:bg-yellow-50">SM</button>
                    <button type="button" data-type="RM" class="item-type-filter px-2 py-0.5 text-xs rounded-full bg-gray-100 text-gray-600 hover:bg-orange-50">RM</button>
                    <button type="button" data-type="CS" class="item-type-filter px-2 py-0.5 text-xs rounded-full bg-gray-100 text-gray-600 hover:bg-gray-200">CS</button>
                </div>
            </div>
            <!-- 품목 리스트 (HTMX) -->
            <div id="item-list"
                 class="flex-1 overflow-y-auto"
                 hx-get="/api/admin/items?per_page=50"
                 hx-trigger="load"
                 hx-headers='{"X-CSRF-TOKEN": "{{ csrf_token() }}"}'>
                <div class="flex justify-center items-center p-8">
                    <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
                </div>
            </div>
        </div>

        <!-- 중앙 패널: BOM 트리 + 수식 산출 -->
        <div class="flex-1 bg-white rounded-lg shadow-sm flex flex-col overflow-hidden">
            <div class="px-4 py-3 border-b border-gray-200">
                <div class="flex items-center gap-1">
                    <button type="button" id="tab-static-bom"
                            class="bom-tab px-3 py-1.5 text-xs font-medium rounded-md bg-blue-100 text-blue-800"
                            onclick="switchBomTab('static')">
                        정적 BOM
                    </button>
                    <button type="button" id="tab-formula-bom"
                            class="bom-tab px-3 py-1.5 text-xs font-medium rounded-md bg-gray-100 text-gray-600 hover:bg-gray-200"
                            onclick="switchBomTab('formula')"
                            style="display:none;">
                        수식 산출
                    </button>
                </div>
            </div>

            <!-- 수식 산출 입력 폼 (가변사이즈 품목 선택 시에만 표시) -->
            <div id="formula-input-panel" style="display:none;" class="p-4 bg-gray-50 border-b border-gray-200">
                <div class="flex items-end gap-3 flex-wrap">
                    <div>
                        <label class="block text-xs text-gray-500 mb-1">폭 W (mm)</label>
                        <input type="number" id="input-width" value="1000" min="100" max="10000" step="1"
                               class="w-24 px-2 py-1.5 text-sm border border-gray-300 rounded focus:ring-2 focus:ring-blue-500 focus:outline-none">
                    </div>
                    <div>
                        <label class="block text-xs text-gray-500 mb-1">높이 H (mm)</label>
                        <input type="number" id="input-height" value="1000" min="100" max="10000" step="1"
                               class="w-24 px-2 py-1.5 text-sm border border-gray-300 rounded focus:ring-2 focus:ring-blue-500 focus:outline-none">
                    </div>
                    <div>
                        <label class="block text-xs text-gray-500 mb-1">수량</label>
                        <input type="number" id="input-qty" value="1" min="1" max="100" step="1"
                               class="w-16 px-2 py-1.5 text-sm border border-gray-300 rounded focus:ring-2 focus:ring-blue-500 focus:outline-none">
                    </div>
                    <div>
                        <label class="block text-xs text-gray-500 mb-1">전원</label>
                        <select id="input-mp"
                                class="px-2 py-1.5 text-sm border border-gray-300 rounded focus:ring-2 focus:ring-blue-500 focus:outline-none">
                            <option value="single">단상(220V)</option>
                            <option value="three">삼상(380V)</option>
                        </select>
                    </div>
                    <div>
                        <label class="block text-xs text-gray-500 mb-1">제품모델</label>
                        <select id="input-product-model"
                                class="px-2 py-1.5 text-sm border border-gray-300 rounded focus:ring-2 focus:ring-blue-500 focus:outline-none">
                            <option value="KSS01">KSS01</option>
                            <option value="KSS02">KSS02</option>
                            <option value="KSE01">KSE01</option>
                            <option value="KWE01">KWE01</option>
                            <option value="KTE01">KTE01</option>
                            <option value="KQTS01">KQTS01</option>
                            <option value="KDSS01">KDSS01</option>
                        </select>
                    </div>
                    <div>
                        <label class="block text-xs text-gray-500 mb-1">설치타입</label>
                        <select id="input-installation-type"
                                class="px-2 py-1.5 text-sm border border-gray-300 rounded focus:ring-2 focus:ring-blue-500 focus:outline-none">
                            <option value="벽면형">벽면형</option>
                            <option value="측면형">측면형</option>
                            <option value="혼합형">혼합형</option>
                        </select>
                    </div>
                    <div>
                        <label class="block text-xs text-gray-500 mb-1">마감</label>
                        <select id="input-finishing-type"
                                class="px-2 py-1.5 text-sm border border-gray-300 rounded focus:ring-2 focus:ring-blue-500 focus:outline-none">
                            <option value="SUS">SUS</option>
                            <option value="EGI">EGI</option>
                        </select>
                    </div>
                    <button type="button" id="btn-calculate" onclick="calculateFormula()"
                            class="px-4 py-1.5 text-sm font-medium text-white bg-blue-600 rounded hover:bg-blue-700 transition-colors">
                        산출
                    </button>
                </div>
            </div>

            <!-- 정적 BOM 영역 -->
            <div id="bom-tree-container" class="flex-1 overflow-y-auto p-4">
                <p class="text-gray-400 text-center py-10">좌측에서 품목을 선택하세요.</p>
            </div>

            <!-- 수식 산출 결과 영역 (초기 숨김) -->
            <div id="formula-result-container" class="flex-1 overflow-y-auto p-4" style="display:none;">
                <p class="text-gray-400 text-center py-10">오픈사이즈를 입력하고 산출 버튼을 클릭하세요.</p>
            </div>
        </div>

        <!-- 우측 패널: 품목 상세 -->
        <div class="w-96 flex-shrink-0 bg-white rounded-lg shadow-sm flex flex-col overflow-hidden">
            <div class="px-4 py-3 border-b border-gray-200">
                <h2 class="text-sm font-semibold text-gray-700">품목 상세</h2>
            </div>
            <div id="item-detail" class="flex-1 overflow-y-auto p-4">
                <p class="text-gray-400 text-center py-10">품목을 선택하면 상세정보가 표시됩니다.</p>
            </div>
        </div>

    </div>
@endsection

@push('scripts')
<script>
(function() {
    const csrfToken = document.querySelector('meta[name="csrf-token"]').content;
    let searchTimer = null;
    let currentTypeFilter = '';
    let currentBomTab = 'static';
    let currentItemId = null;
    let currentItemCode = null;
    let skipCenterUpdate = false;

    // ── 좌측 검색 (debounce 300ms) ──
    const searchInput = document.getElementById('item-search');
    searchInput.addEventListener('input', function() {
        clearTimeout(searchTimer);
        searchTimer = setTimeout(() => {
            loadItemList();
        }, 300);
    });

    // ── 유형 필터 ──
    document.querySelectorAll('.item-type-filter').forEach(btn => {
        btn.addEventListener('click', function() {
            document.querySelectorAll('.item-type-filter').forEach(b => {
                b.classList.remove('active', 'bg-blue-100', 'text-blue-800', 'font-medium');
                b.classList.add('bg-gray-100', 'text-gray-600');
            });
            this.classList.add('active', 'bg-blue-100', 'text-blue-800', 'font-medium');
            this.classList.remove('bg-gray-100', 'text-gray-600');
            currentTypeFilter = this.dataset.type;
            loadItemList();
        });
    });

    // ── 품목 리스트 로드 ──
    function loadItemList() {
        const search = searchInput.value.trim();
        let url = `/api/admin/items?per_page=50`;
        if (search) url += `&search=${encodeURIComponent(search)}`;
        if (currentTypeFilter) url += `&item_type=${currentTypeFilter}`;

        htmx.ajax('GET', url, {
            target: '#item-list',
            swap: 'innerHTML',
            headers: {'X-CSRF-TOKEN': csrfToken}
        });
    }

    // ── 품목 선택 (좌측/중앙 공용) ──
    window.selectItem = function(itemId, updateTree) {
        if (typeof updateTree === 'undefined') updateTree = true;

        // 좌측 하이라이트
        document.querySelectorAll('.item-row').forEach(el => {
            el.classList.remove('bg-blue-50', 'border-l-4', 'border-blue-500');
        });
        const selected = document.querySelector(`[data-item-id="${itemId}"]`);
        if (selected) {
            selected.classList.add('bg-blue-50', 'border-l-4', 'border-blue-500');
        }

        // 중앙 트리 갱신 (좌측에서 클릭 시에만)
        if (updateTree) {
            const treeContainer = document.getElementById('bom-tree-container');
            treeContainer.innerHTML = '<div class="flex justify-center py-10"><div class="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div></div>';

            fetch(`/api/admin/items/${itemId}/bom-tree`, {
                headers: {'X-CSRF-TOKEN': csrfToken}
            })
            .then(res => res.json())
            .then(tree => {
                treeContainer.innerHTML = '';
                if (tree.has_children) {
                    const ul = document.createElement('ul');
                    ul.className = 'text-sm';
                    renderBomTree(tree, ul);
                    treeContainer.appendChild(ul);
                } else {
                    treeContainer.innerHTML = '<p class="text-gray-400 text-center py-10">BOM 구성이 없습니다.</p>';
                }
            })
            .catch(() => {
                treeContainer.innerHTML = '<p class="text-red-400 text-center py-10">BOM 로드 실패</p>';
            });
        }

        // 우측 상세 갱신 (항상)
        htmx.ajax('GET', `/api/admin/items/${itemId}/detail`, {
            target: '#item-detail',
            swap: 'innerHTML',
            headers: {'X-CSRF-TOKEN': csrfToken}
        });
    };

    // 중앙 트리 노드 클릭 (트리 유지, 우측만 갱신)
    window.selectTreeNode = function(itemId) {
        selectItem(itemId, false);
    };

    // ── BOM 트리 렌더링 ──
    function renderBomTree(node, container) {
        const li = document.createElement('li');
        li.className = 'ml-4';

        const nodeEl = document.createElement('div');
        nodeEl.className = 'flex items-center gap-2 py-1.5 px-2 rounded cursor-pointer hover:bg-blue-50 transition-colors';
        nodeEl.onclick = () => selectTreeNode(node.id);

        // 펼침/접힘 토글
        let childList = null;
        if (node.has_children) {
            const toggle = document.createElement('span');
            toggle.className = 'text-gray-400 cursor-pointer select-none text-xs';
            toggle.textContent = '▼';
            toggle.onclick = function(e) {
                e.stopPropagation();
                if (childList.style.display === 'none') {
                    childList.style.display = '';
                    toggle.textContent = '▼';
                } else {
                    childList.style.display = 'none';
                    toggle.textContent = '▶';
                }
            };
            nodeEl.appendChild(toggle);
        } else {
            const spacer = document.createElement('span');
            spacer.className = 'w-3 inline-block';
            nodeEl.appendChild(spacer);
        }

        // 유형 뱃지
        const badge = document.createElement('span');
        badge.className = getTypeBadgeClass(node.item_type);
        badge.textContent = node.item_type;
        nodeEl.appendChild(badge);

        // 코드 + 이름
        const codeSpan = document.createElement('span');
        codeSpan.className = 'font-mono text-xs text-gray-500';
        codeSpan.textContent = node.code;
        nodeEl.appendChild(codeSpan);

        const nameSpan = document.createElement('span');
        nameSpan.className = 'text-gray-700 text-sm truncate';
        nameSpan.textContent = node.name;
        nodeEl.appendChild(nameSpan);

        // 수량
        if (node.quantity) {
            const qtySpan = document.createElement('span');
            qtySpan.className = 'text-blue-600 text-xs font-medium';
            qtySpan.textContent = `(${node.quantity})`;
            nodeEl.appendChild(qtySpan);
        }

        li.appendChild(nodeEl);

        // 자식 노드 재귀 렌더링
        if (node.children && node.children.length > 0) {
            childList = document.createElement('ul');
            childList.className = 'border-l border-gray-200';
            node.children.forEach(child => renderBomTree(child, childList));
            li.appendChild(childList);
        }

        container.appendChild(li);
    }

    // ── 유형별 뱃지 색상 ──
    function getTypeBadgeClass(type) {
        const colors = {
            'FG': 'bg-blue-100 text-blue-800',
            'PT': 'bg-green-100 text-green-800',
            'SM': 'bg-yellow-100 text-yellow-800',
            'RM': 'bg-orange-100 text-orange-800',
            'CS': 'bg-gray-100 text-gray-800',
        };
        return `inline-flex items-center px-1.5 py-0.5 rounded text-xs font-medium ${colors[type] || 'bg-gray-100 text-gray-800'}`;
    }

    // 전역에서 사용하도록 노출
    window.getTypeBadgeClass = getTypeBadgeClass;

    // ── 탭 전환 ──
    window.switchBomTab = function(tab) {
        currentBomTab = tab;

        // 탭 버튼 스타일
        document.querySelectorAll('.bom-tab').forEach(btn => {
            btn.classList.remove('bg-blue-100', 'text-blue-800');
            btn.classList.add('bg-gray-100', 'text-gray-600');
        });
        const activeBtn = document.getElementById(tab === 'static' ? 'tab-static-bom' : 'tab-formula-bom');
        if (activeBtn) {
            activeBtn.classList.remove('bg-gray-100', 'text-gray-600');
            activeBtn.classList.add('bg-blue-100', 'text-blue-800');
        }

        // 콘텐츠 영역 전환
        document.getElementById('bom-tree-container').style.display = (tab === 'static') ? '' : 'none';
        document.getElementById('formula-input-panel').style.display = (tab === 'formula') ? '' : 'none';
        document.getElementById('formula-result-container').style.display = (tab === 'formula') ? '' : 'none';
    };

    // ── 가변사이즈 탭 표시/숨김 ──
    function showFormulaTab() {
        document.getElementById('tab-formula-bom').style.display = '';
        switchBomTab('formula');
    }

    function hideFormulaTab() {
        document.getElementById('tab-formula-bom').style.display = 'none';
        document.getElementById('formula-input-panel').style.display = 'none';
        document.getElementById('formula-result-container').style.display = 'none';
        switchBomTab('static');
    }

    // ── FG 코드 파싱 → 입력폼 자동 세팅 ──
    // FG-KQTS01-벽면형-SUS → { model: 'KQTS01', installation: '벽면형', finishing: 'SUS' }
    // 파싱 실패 시 기본값 유지 (추후 FG 코드 형식 변경 대비)
    function parseFgCode(code) {
        if (!code) return null;
        const parts = code.split('-');
        // FG-{MODEL}-{INSTALLATION}-{FINISHING} 형식인 경우만 파싱
        if (parts.length >= 4 && parts[0] === 'FG') {
            return { model: parts[1], installation: parts[2], finishing: parts[3] };
        }
        return null;
    }

    function setSelectValue(selectId, value) {
        const el = document.getElementById(selectId);
        if (!el) return;
        for (let i = 0; i < el.options.length; i++) {
            if (el.options[i].value === value) {
                el.selectedIndex = i;
                return;
            }
        }
    }

    // ── 상세 로드 완료 후 FG 품목 감지 → 수식 산출 탭 표시 ──
    document.body.addEventListener('htmx:afterSwap', function(event) {
        if (event.detail.target.id === 'item-detail') {
            // 산출 결과 아이템 클릭 시에는 중앙 패널 유지
            if (skipCenterUpdate) {
                skipCenterUpdate = false;
                return;
            }
            const meta = document.getElementById('item-meta-data');
            if (meta) {
                currentItemId = meta.dataset.itemId;
                currentItemCode = meta.dataset.itemCode;
                if (meta.dataset.itemType === 'FG') {
                    // FG 코드에서 모델/설치타입/마감타입 파싱하여 입력폼 자동 세팅
                    const parsed = parseFgCode(currentItemCode);
                    if (parsed) {
                        setSelectValue('input-product-model', parsed.model);
                        setSelectValue('input-installation-type', parsed.installation);
                        setSelectValue('input-finishing-type', parsed.finishing);
                    }
                    showFormulaTab();
                    calculateFormula();
                } else {
                    hideFormulaTab();
                }
            }
        }
    });

    // ── 수식 산출 API 호출 ──
    window.calculateFormula = function() {
        if (!currentItemId) return;

        const width = parseInt(document.getElementById('input-width').value) || 1000;
        const height = parseInt(document.getElementById('input-height').value) || 1000;
        const qty = parseInt(document.getElementById('input-qty').value) || 1;
        const mp = document.getElementById('input-mp').value || 'single';
        const productModel = document.getElementById('input-product-model').value || 'KSS01';
        const installationType = document.getElementById('input-installation-type').value || '벽면형';
        const finishingType = document.getElementById('input-finishing-type').value || 'SUS';

        if (width < 100 || width > 10000 || height < 100 || height > 10000) {
            alert('폭과 높이는 100~10000 범위로 입력하세요.');
            return;
        }

        const container = document.getElementById('formula-result-container');
        container.innerHTML = '<div class="flex justify-center py-10"><div class="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div></div>';

        fetch(`/api/admin/items/${currentItemId}/calculate-formula`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'Accept': 'application/json',
                'X-CSRF-TOKEN': csrfToken,
            },
            body: JSON.stringify({ width, height, qty, mp, product_model: productModel, installation_type: installationType, finishing_type: finishingType }),
        })
        .then(res => {
            if (!res.ok) {
                return res.text().then(text => {
                    let msg = `HTTP ${res.status}`;
                    try { const j = JSON.parse(text); msg = j.error || j.message || msg; } catch(e) {}
                    throw new Error(msg);
                });
            }
            return res.json();
        })
        .then(data => {
            if (data.success === false) {
                container.innerHTML = `
                    <div class="text-center py-10">
                        <p class="text-red-500 text-sm mb-2">${data.error || '산출 실패'}</p>
                        <button onclick="calculateFormula()" class="text-blue-600 text-sm hover:underline">다시 시도</button>
                    </div>`;
                return;
            }
            renderFormulaTree(data, container);
        })
        .catch(err => {
            console.error('calculateFormula error:', err);
            container.innerHTML = `
                <div class="text-center py-10">
                    <p class="text-red-500 text-sm mb-2">${err.message || '서버 연결 실패'}</p>
                    <button onclick="calculateFormula()" class="text-blue-600 text-sm hover:underline">다시 시도</button>
                </div>`;
        });
    };

    // ── 수식 산출 결과 트리 렌더링 ──
    // API 응답 구조: grouped_items = { CATEGORY_CODE: { name, items: [...], subtotal } }
    //               subtotals     = { CATEGORY_CODE: { name, count, subtotal } }
    function renderFormulaTree(data, container) {
        container.innerHTML = '';

        const groupedItems = data.grouped_items || {};

        // 합계 영역
        if (data.grand_total !== undefined) {
            const totalDiv = document.createElement('div');
            totalDiv.className = 'mb-4 p-3 bg-blue-50 rounded-lg flex justify-between items-center';
            totalDiv.innerHTML = `
                <span class="text-sm font-medium text-blue-800">
                    ${data.finished_goods?.name || ''} (${data.finished_goods?.code || ''})
                    <span class="text-xs text-blue-600 ml-2">W:${data.variables?.W0} H:${data.variables?.H0}</span>
                </span>
                <span class="text-sm font-bold text-blue-900">합계: ${Number(data.grand_total).toLocaleString()}원</span>
            `;
            container.appendChild(totalDiv);
        }

        // 카테고리 그룹별 렌더링
        Object.entries(groupedItems).forEach(([groupKey, group]) => {
            // group = { name: '강재', items: [...], subtotal: 12345 }
            const groupItems = group.items || [];
            if (groupItems.length === 0) return;

            const groupDiv = document.createElement('div');
            groupDiv.className = 'mb-3';

            const groupName = group.name || groupKey;
            const subtotal = group.subtotal || 0;

            // 그룹 헤더
            const header = document.createElement('div');
            header.className = 'flex items-center gap-2 py-2 px-3 bg-gray-50 rounded-t-lg cursor-pointer';
            header.innerHTML = `
                <span class="toggle-icon text-xs text-gray-400">▼</span>
                <span>📦</span>
                <span class="text-sm font-semibold text-gray-700">${groupName}</span>
                <span class="text-xs text-gray-500">(${groupItems.length}건)</span>
                <span class="ml-auto text-xs font-medium text-gray-600">소계: ${Number(subtotal).toLocaleString()}원</span>
            `;

            const listDiv = document.createElement('div');
            listDiv.className = 'border border-gray-100 rounded-b-lg divide-y divide-gray-50';

            // 그룹 접기/펼치기
            header.onclick = function() {
                const toggle = header.querySelector('.toggle-icon');
                if (listDiv.style.display === 'none') {
                    listDiv.style.display = '';
                    toggle.textContent = '▼';
                } else {
                    listDiv.style.display = 'none';
                    toggle.textContent = '▶';
                }
            };

            // 아이템 목록
            groupItems.forEach(item => {
                const row = document.createElement('div');
                row.className = 'flex items-center gap-2 py-1.5 px-3 hover:bg-gray-50 cursor-pointer text-sm';
                row.innerHTML = `
                    <span class="inline-flex items-center px-1.5 py-0.5 rounded text-xs font-medium bg-green-100 text-green-800">
                        ${item.item_type || 'PT'}
                    </span>
                    <span class="font-mono text-xs text-gray-500 w-32 truncate">${item.item_code || ''}</span>
                    <span class="text-gray-700 flex-1 truncate">${item.item_name || ''}</span>
                    <span class="text-xs text-gray-500 w-16 text-right">${item.quantity || 0} ${item.unit || ''}</span>
                    <span class="text-xs text-blue-600 font-medium w-20 text-right">${Number(item.total_price || 0).toLocaleString()}원</span>
                `;
                if (item.item_id) {
                    row.onclick = () => {
                        // 활성 행 표시
                        container.querySelectorAll('.formula-row-active').forEach(el => {
                            el.classList.remove('formula-row-active', 'ring-1', 'ring-blue-300');
                        });
                        row.classList.add('formula-row-active', 'ring-1', 'ring-blue-300');

                        // 우측 상세만 갱신, 중앙 패널 유지
                        skipCenterUpdate = true;
                        htmx.ajax('GET', `/api/admin/items/${item.item_id}/detail`, {
                            target: '#item-detail',
                            swap: 'innerHTML',
                            headers: {'X-CSRF-TOKEN': csrfToken}
                        });
                    };
                }
                listDiv.appendChild(row);
            });

            groupDiv.appendChild(header);
            groupDiv.appendChild(listDiv);
            container.appendChild(groupDiv);
        });

        if (Object.keys(groupedItems).length === 0) {
            container.innerHTML = '<p class="text-gray-400 text-center py-10">산출된 자재가 없습니다.</p>';
        }
    }
})();
</script>
@endpush
