@extends('layouts.app')

@section('title', 'Dicionário & Mapeador CAEP')
@section('topbar_title', '🗺️ Dicionário & Mapeador de Dados VIMAN')

@section('topbar_extra_actions')
    <a href="{{ route('dicionario.exportar_csv') }}" class="btn btn-secondary" style="display:inline-flex; align-items:center; gap:6px; padding:7px 14px; font-size:0.82rem; font-weight:600; border-radius:8px; text-decoration:none; background:var(--bg-input); border:1px solid var(--border-color); color:var(--text-main);">
        <span>📥</span> Exportar CSV
    </a>
    <button class="btn btn-primary" onclick="reSincronizarCaep()" style="display:inline-flex; align-items:center; gap:6px; padding:7px 14px; font-size:0.82rem; font-weight:700; border-radius:8px; border:none; cursor:pointer; background:var(--brand-primary); color:#ffffff;">
        <span>🔄</span> Sincronizar CAEP
    </button>
@endsection

@section('styles')
    <style>
        :root {
            --bg-page: #0f172a;
            --surface-dark: #1e293b;
            --surface-card: #182234;
            --surface-border: #334155;
            --text-main: #f8fafc;
            --text-muted: #94a3b8;
            --primary: #3b82f6;
            --primary-hover: #2563eb;
            --accent-green: #10b981;
            --accent-amber: #f59e0b;
            --accent-purple: #8b5cf6;
            --accent-cyan: #06b6d4;
            --accent-rose: #f43f5e;
        }

        body {
            background-color: var(--bg-page);
            color: var(--text-main);
            font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
            margin: 0;
            padding: 0;
        }

        .dict-container {
            max-width: 1440px;
            margin: 0 auto;
            padding: 32px 24px 80px 24px;
        }

        /* Top Header */
        .dict-header {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            align-items: center;
            gap: 20px;
            margin-bottom: 28px;
            padding-bottom: 24px;
            border-bottom: 1px solid var(--surface-border);
        }

        .dict-title-group h1 {
            margin: 0 0 8px 0;
            font-size: 28px;
            font-weight: 800;
            letter-spacing: -0.02em;
            background: linear-gradient(135deg, #ffffff 0%, #cbd5e1 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .dict-title-group p {
            margin: 0;
            color: var(--text-muted);
            font-size: 15px;
        }

        .dict-actions {
            display: flex;
            gap: 12px;
            flex-wrap: wrap;
        }

        .btn {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 10px 18px;
            font-size: 14px;
            font-weight: 600;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.2s ease;
            text-decoration: none;
            border: none;
        }

        .btn-primary {
            background: linear-gradient(135deg, #2563eb, #1d4ed8);
            color: #ffffff;
            box-shadow: 0 2px 10px rgba(37, 99, 235, 0.3);
        }
        .btn-primary:hover {
            background: linear-gradient(135deg, #1d4ed8, #1e40af);
            transform: translateY(-1px);
        }

        .btn-secondary {
            background: var(--surface-dark);
            color: #e2e8f0;
            border: 1px solid var(--surface-border);
        }
        .btn-secondary:hover {
            background: #2a374a;
            color: #ffffff;
            border-color: #475569;
        }

        .btn-success {
            background: linear-gradient(135deg, #059669, #047857);
            color: #ffffff;
        }
        .btn-success:hover {
            background: linear-gradient(135deg, #047857, #065f46);
        }

        /* KPI Cards */
        .kpi-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
            gap: 16px;
            margin-bottom: 28px;
        }

        .kpi-card {
            background: var(--surface-dark);
            border: 1px solid var(--surface-border);
            border-radius: 12px;
            padding: 20px;
            position: relative;
            overflow: hidden;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2);
            transition: transform 0.2s ease;
        }
        .kpi-card:hover {
            transform: translateY(-2px);
            border-color: #475569;
        }

        .kpi-label {
            font-size: 13px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            color: var(--text-muted);
            margin-bottom: 8px;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .kpi-value {
            font-size: 32px;
            font-weight: 800;
            color: #ffffff;
            line-height: 1.1;
        }

        .kpi-sub {
            font-size: 12px;
            color: var(--text-muted);
            margin-top: 6px;
        }

        .progress-bar-container {
            width: 100%;
            height: 6px;
            background: #334155;
            border-radius: 999px;
            margin-top: 10px;
            overflow: hidden;
        }

        .progress-bar-fill {
            height: 100%;
            background: linear-gradient(90deg, #10b981, #06b6d4);
            border-radius: 999px;
            transition: width 0.5s ease;
        }

        /* Filter Controls */
        .filter-section {
            background: var(--surface-dark);
            border: 1px solid var(--surface-border);
            border-radius: 12px;
            padding: 18px 20px;
            margin-bottom: 24px;
            display: flex;
            flex-wrap: wrap;
            gap: 16px;
            align-items: center;
            justify-content: space-between;
        }

        .search-box {
            position: relative;
            flex: 1;
            min-width: 280px;
        }

        .search-box input {
            width: 100%;
            background: #0f172a;
            border: 1px solid var(--surface-border);
            border-radius: 8px;
            padding: 10px 14px 10px 40px;
            color: #ffffff;
            font-size: 14px;
            outline: none;
            transition: border-color 0.2s;
            box-sizing: border-box;
        }
        .search-box input:focus {
            border-color: var(--primary);
            box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
        }

        .search-box svg {
            position: absolute;
            left: 14px;
            top: 50%;
            transform: translateY(-50%);
            width: 18px;
            height: 18px;
            color: var(--text-muted);
        }

        .filter-pills {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
        }

        .pill-btn {
            background: #0f172a;
            border: 1px solid var(--surface-border);
            border-radius: 20px;
            padding: 6px 14px;
            color: var(--text-muted);
            font-size: 13px;
            cursor: pointer;
            transition: all 0.2s;
        }
        .pill-btn:hover {
            border-color: #64748b;
            color: #f8fafc;
        }
        .pill-btn.active {
            background: rgba(59, 130, 246, 0.15);
            border-color: var(--primary);
            color: #60a5fa;
            font-weight: 600;
        }

        /* Status Filters */
        .status-select {
            background: #0f172a;
            border: 1px solid var(--surface-border);
            color: #ffffff;
            padding: 9px 14px;
            border-radius: 8px;
            font-size: 13px;
            cursor: pointer;
            outline: none;
        }

        /* Table Design */
        .table-wrapper {
            background: var(--surface-dark);
            border: 1px solid var(--surface-border);
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2);
        }

        table.dict-table {
            width: 100%;
            border-collapse: collapse;
            text-align: left;
            font-size: 14px;
        }

        table.dict-table th {
            background: #182234;
            color: var(--text-muted);
            font-weight: 600;
            font-size: 12px;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            padding: 14px 18px;
            border-bottom: 1px solid var(--surface-border);
        }

        table.dict-table td {
            padding: 16px 18px;
            border-bottom: 1px solid #283548;
            vertical-align: middle;
        }

        table.dict-table tr:hover {
            background: #243042;
        }

        .code-badge {
            font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
            background: #0f172a;
            border: 1px solid #334155;
            color: #38bdf8;
            padding: 4px 8px;
            border-radius: 6px;
            font-weight: 700;
            font-size: 13px;
            display: inline-block;
        }

        .module-badge {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 4px 10px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 600;
        }
        .mod-financeiro { background: rgba(59, 130, 246, 0.15); color: #60a5fa; border: 1px solid rgba(59, 130, 246, 0.3); }
        .mod-fiscal     { background: rgba(139, 92, 246, 0.15); color: #a78bfa; border: 1px solid rgba(139, 92, 246, 0.3); }
        .mod-estoque    { background: rgba(16, 185, 129, 0.15); color: #34d399; border: 1px solid rgba(16, 185, 129, 0.3); }
        .mod-opme       { background: rgba(244, 63, 94, 0.15); color: #fb7185; border: 1px solid rgba(244, 63, 94, 0.3); }
        .mod-compras    { background: rgba(245, 158, 11, 0.15); color: #fbbf24; border: 1px solid rgba(245, 158, 11, 0.3); }
        .mod-vendas     { background: rgba(6, 182, 212, 0.15); color: #22d3ee; border: 1px solid rgba(6, 182, 212, 0.3); }
        .mod-cadastros  { background: rgba(168, 85, 247, 0.15); color: #c084fc; border: 1px solid rgba(168, 85, 247, 0.3); }
        .mod-outros     { background: rgba(148, 163, 184, 0.15); color: #cbd5e1; border: 1px solid rgba(148, 163, 184, 0.3); }

        .friendly-name-cell {
            font-weight: 600;
            color: #ffffff;
            font-size: 14px;
        }

        .friendly-name-pending {
            color: #f59e0b;
            font-style: italic;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 4px 8px;
            background: rgba(245, 158, 11, 0.1);
            border-radius: 6px;
            border: 1px dashed rgba(245, 158, 11, 0.4);
            font-size: 13px;
        }
        .friendly-name-pending:hover {
            background: rgba(245, 158, 11, 0.2);
            border-color: #f59e0b;
        }

        .status-badge {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 4px 10px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 600;
        }
        .status-mapeado { background: rgba(16, 185, 129, 0.15); color: #34d399; }
        .status-pendente { background: rgba(245, 158, 11, 0.15); color: #fbbf24; }

        .btn-table-action {
            background: #1e293b;
            border: 1px solid var(--surface-border);
            color: #cbd5e1;
            padding: 6px 12px;
            border-radius: 6px;
            font-size: 12px;
            cursor: pointer;
            transition: all 0.2s;
            display: inline-flex;
            align-items: center;
            gap: 6px;
        }
        .btn-table-action:hover {
            background: var(--primary);
            color: #ffffff;
            border-color: var(--primary);
        }

        /* Modal / Slide Drawer */
        .dict-modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.75);
            backdrop-filter: blur(4px);
            z-index: 1000;
            display: none;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }

        .dict-modal {
            background: #1e293b;
            border: 1px solid var(--surface-border);
            border-radius: 16px;
            width: 100%;
            max-width: 840px;
            max-height: 90vh;
            display: flex;
            flex-direction: column;
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
            overflow: hidden;
            animation: modalFadeIn 0.25s ease-out;
        }

        @keyframes modalFadeIn {
            from { opacity: 0; transform: scale(0.96); }
            to { opacity: 1; transform: scale(1); }
        }

        .dict-modal-header {
            padding: 20px 24px;
            border-bottom: 1px solid var(--surface-border);
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: #182234;
        }

        .dict-modal-header h3 {
            margin: 0;
            font-size: 20px;
            font-weight: 700;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .dict-modal-body {
            padding: 24px;
            overflow-y: auto;
            flex: 1;
        }

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

        .form-group label {
            display: block;
            font-size: 13px;
            font-weight: 600;
            color: var(--text-muted);
            margin-bottom: 6px;
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }

        .form-control {
            width: 100%;
            background: #0f172a;
            border: 1px solid var(--surface-border);
            border-radius: 8px;
            padding: 10px 14px;
            color: #ffffff;
            font-size: 14px;
            box-sizing: border-box;
            outline: none;
            transition: border-color 0.2s;
        }
        .form-control:focus {
            border-color: var(--primary);
            box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
        }

        textarea.form-control {
            resize: vertical;
            min-height: 80px;
            font-family: inherit;
        }

        .dict-modal-footer {
            padding: 16px 24px;
            border-top: 1px solid var(--surface-border);
            display: flex;
            justify-content: flex-end;
            gap: 12px;
            background: #182234;
        }

        /* Toast notification */
        .toast-notify {
            position: fixed;
            bottom: 24px;
            right: 24px;
            background: #10b981;
            color: #ffffff;
            padding: 14px 20px;
            border-radius: 8px;
            font-weight: 600;
            font-size: 14px;
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
            display: none;
            z-index: 2000;
            align-items: center;
            gap: 10px;
        }

        /* Responsive */
        @media (max-width: 900px) {
            .filter-section {
                flex-direction: column;
                align-items: stretch;
            }
            .search-box {
                min-width: 100%;
        }
    </style>
@endsection

@section('content')
<div class="dict-container">
    {{-- Header --}}
    <div class="dict-header">
        <div class="dict-title-group">
            <h1>
                <span>🗺️</span> Dicionário & Mapeador de Dados VIMAN
            </h1>
            <p>
                Catálogo inteligente do schema <code>SYSADM</code> (baseado em <strong>CAEP.xlsx</strong>) para documentar nomes amigáveis, regras de negócio e filiais físicas.
            </p>
        </div>
        <div class="dict-actions">
            <a href="{{ route('visoes.notas-sem-financeiro') }}" class="btn btn-secondary">
                <span>🚨</span> Notas sem Contas a Pagar
            </a>
            <a href="{{ url('/modulos/integracoes') }}" class="btn btn-secondary">
                <span>⚡</span> Hub Integrações
            </a>
            <a href="{{ route('dicionario.exportar_csv') }}" class="btn btn-secondary">
                <span>📥</span> Exportar CSV
            </a>
            <button class="btn btn-primary" onclick="reSincronizarCaep()">
                <span>🔄</span> Sincronizar CAEP
            </button>
        </div>
    </div>

    {{-- KPIs --}}
    <div class="kpi-grid">
        <div class="kpi-card">
            <div class="kpi-label">
                <span>📋</span> Total de Tabelas
            </div>
            <div class="kpi-value">{{ $totalTabelas }}</div>
            <div class="kpi-sub">Views catalogadas no Viman</div>
        </div>

        <div class="kpi-card">
            <div class="kpi-label">
                <span>✅</span> Tabelas Mapeadas
            </div>
            <div class="kpi-value" style="color: #34d399;">{{ $totalMapeadas }}</div>
            <div class="kpi-sub">Com nome amigável e módulo</div>
        </div>

        <div class="kpi-card">
            <div class="kpi-label">
                <span>⏳</span> Aguardando Mapeamento
            </div>
            <div class="kpi-value" style="color: #fbbf24;">{{ $totalPendentes }}</div>
            <div class="kpi-sub">Clique na tabela para preencher</div>
        </div>

        <div class="kpi-card">
            <div class="kpi-label">
                <span>🧬</span> Campos Catalogados
            </div>
            <div class="kpi-value">{{ number_format($totalCampos, 0, ',', '.') }}</div>
            <div class="kpi-sub">Colunas e tipos de dados</div>
        </div>

        <div class="kpi-card">
            <div class="kpi-label">
                <span>📈</span> Progresso Geral
            </div>
            <div class="kpi-value">{{ $percentualMapeado }}%</div>
            <div class="progress-bar-container">
                <div class="progress-bar-fill" style="width: {{ $percentualMapeado }}%;"></div>
            </div>
            <div class="kpi-sub">{{ $totalMapeadas }} de {{ $totalTabelas }} mapeadas</div>
        </div>
    </div>

    {{-- Filtros & Busca --}}
    <div class="filter-section">
        <div class="search-box">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <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="filtroBusca" placeholder="Buscar por código estranho (ex: VETEDP), nome CAEP ou amigável..." onkeyup="filtrarEmTempoReal()">
        </div>

        <div class="filter-pills" id="filtroModulos">
            <button class="pill-btn active" data-modulo="todos" onclick="filtrarModulo(this, 'todos')">
                Todos ({{ $totalTabelas }})
            </button>
            @foreach ($modulosDisponiveis as $slug => $label)
                @php $qtd = $modulosStats[$slug] ?? 0; @endphp
                @if ($qtd > 0)
                    <button class="pill-btn" data-modulo="{{ $slug }}" onclick="filtrarModulo(this, '{{ $slug }}')">
                        {{ $label }} ({{ $qtd }})
                    </button>
                @endif
            @endforeach
        </div>

        <select id="filtroStatus" class="status-select" onchange="filtrarStatus()">
            <option value="todos">Todos os Status</option>
            <option value="mapeado">Apenas Mapeadas ({{ $totalMapeadas }})</option>
            <option value="pendente">Apenas Pendentes ({{ $totalPendentes }})</option>
        </select>
    </div>

    {{-- Tabela de Dados --}}
    <div class="table-wrapper">
        <table class="dict-table" id="tabelaViman">
            <thead>
                <tr>
                    <th style="width: 140px;">Código (SYSADM)</th>
                    <th style="width: 160px;">Módulo</th>
                    <th>Nome Oficial (CAEP)</th>
                    <th>Nome Amigável / Negócio</th>
                    <th>Empresas / Filiais</th>
                    <th style="text-align: center; width: 90px;">Campos</th>
                    <th style="width: 110px;">Status</th>
                    <th style="text-align: right; width: 140px;">Ações</th>
                </tr>
            </thead>
            <tbody>
                @foreach ($tabelas as $tab)
                    @php
                        $modSlug = mb_strtolower($tab->modulo);
                        $modClass = match ($tab->modulo) {
                            'Financeiro' => 'mod-financeiro',
                            'Fiscal'     => 'mod-fiscal',
                            'Estoque'    => 'mod-estoque',
                            'OPME'       => 'mod-opme',
                            'Compras'    => 'mod-compras',
                            'Vendas'     => 'mod-vendas',
                            'Cadastros'  => 'mod-cadastros',
                            default      => 'mod-outros',
                        };
                    @endphp
                    <tr class="tabela-row" 
                        data-codigo="{{ $tab->tabela_codigo }}" 
                        data-modulo="{{ $tab->modulo }}" 
                        data-status="{{ $tab->status_mapeamento }}"
                        data-texto="{{ mb_strtolower($tab->tabela_codigo . ' ' . $tab->tabela_nome_caep . ' ' . $tab->tabela_nome_amigavel . ' ' . $tab->tabelas_filiais) }}">
                        
                        {{-- Código --}}
                        <td>
                            <span class="code-badge">SYSADM.{{ $tab->tabela_codigo }}</span>
                        </td>

                        {{-- Módulo --}}
                        <td>
                            <span class="module-badge {{ $modClass }}">
                                {{ $tab->modulo }}
                            </span>
                        </td>

                        {{-- Nome Oficial CAEP --}}
                        <td style="color: var(--text-muted);">
                            {{ $tab->tabela_nome_caep ?: 'Não especificado no CAEP' }}
                        </td>

                        {{-- Nome Amigável --}}
                        <td id="td-amigavel-{{ $tab->id }}">
                            @if ($tab->tabela_nome_amigavel)
                                <div class="friendly-name-cell">
                                    {{ $tab->tabela_nome_amigavel }}
                                </div>
                                @if ($tab->descricao_negocio)
                                    <div style="font-size: 12px; color: var(--text-muted); margin-top: 4px;">
                                        {{ Str::limit($tab->descricao_negocio, 65) }}
                                    </div>
                                @endif
                            @else
                                <span class="friendly-name-pending" onclick="abrirModalEdicao({{ json_encode($tab) }})">
                                    <span>⚠️</span> Preencher nome amigável...
                                </span>
                            @endif
                        </td>

                        {{-- Filiais Físicas --}}
                        <td style="font-size: 12px; color: #94a3b8;">
                            {{ $tab->tabelas_filiais ?: 'Padrão ou Compartilhada' }}
                        </td>

                        {{-- Qtd Campos --}}
                        <td style="text-align: center;">
                            <button class="btn-table-action" onclick="abrirModalCampos('{{ $tab->tabela_codigo }}')">
                                {{ $tab->total_campos }} cols
                            </button>
                        </td>

                        {{-- Status --}}
                        <td>
                            @if ($tab->status_mapeamento === 'mapeado')
                                <span class="status-badge status-mapeado">
                                    <span>●</span> Mapeado
                                </span>
                            @else
                                <span class="status-badge status-pendente">
                                    <span>○</span> Pendente
                                </span>
                            @endif
                        </td>

                        {{-- Ações --}}
                        <td style="text-align: right;">
                            <button class="btn-table-action" onclick="abrirModalEdicao({{ json_encode($tab) }})">
                                <span>✏️</span> Mapear
                            </button>
                        </td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>

{{-- MODAL DE EDIÇÃO DA TABELA --}}
<div class="dict-modal-overlay" id="modalEdicao">
    <div class="dict-modal">
        <div class="dict-modal-header">
            <h3>
                <span>✏️</span> Mapear Tabela <span id="modalTabelaCodigo" class="code-badge"></span>
            </h3>
            <button style="background: none; border: none; color: #94a3b8; font-size: 20px; cursor: pointer;" onclick="fecharModalEdicao()">&times;</button>
        </div>
        <form id="formMapeamento" onsubmit="salvarMapeamento(event)">
            <input type="hidden" id="modalTabelaId">
            <div class="dict-modal-body">
                <div class="form-group">
                    <label>Nome Oficial do CAEP</label>
                    <input type="text" id="modalNomeCaep" class="form-control" readonly style="opacity: 0.7; cursor: not-allowed;">
                </div>

                <div class="form-group">
                    <label>Nome Amigável / Regra de Negócio (Como a equipe conhece)</label>
                    <input type="text" id="modalNomeAmigavel" class="form-control" placeholder="Ex: Contas a Pagar e Receber, Notas de Entrada..." required>
                </div>

                <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 16px;">
                    <div class="form-group">
                        <label>Módulo / Categoria</label>
                        <select id="modalModulo" class="form-control" required>
                            <option value="Financeiro">💰 Financeiro & Custos</option>
                            <option value="Fiscal">📑 Fiscal & SPED</option>
                            <option value="Estoque">📦 Estoque & Saldos</option>
                            <option value="OPME">🏥 OPME & Cirurgias</option>
                            <option value="Compras">🛒 Compras & Fornecedores</option>
                            <option value="Vendas">🛍️ Vendas & Faturamento</option>
                            <option value="Cadastros">👥 Cadastros Gerais</option>
                            <option value="Outros">⚙️ Outras Tabelas</option>
                        </select>
                    </div>

                    <div class="form-group">
                        <label>Status do Mapeamento</label>
                        <select id="modalStatus" class="form-control">
                            <option value="mapeado">✅ Mapeado (Completo)</option>
                            <option value="parcial">🟡 Parcial (Em análise)</option>
                            <option value="pendente">⏳ Pendente (Não iniciado)</option>
                        </select>
                    </div>
                </div>

                <div class="form-group">
                    <label>Tabelas por Filial Física (Ex: Empresas 1 a 5)</label>
                    <input type="text" id="modalFiliais" class="form-control" placeholder="Ex: VETEDP01 a VETEDP05 (Empresas Físicas 1 a 5)">
                </div>

                <div class="form-group">
                    <label>Descrição de Negócio & Como Usar (Para analistas e desenvolvedores)</label>
                    <textarea id="modalDescricao" class="form-control" placeholder="Descreva o propósito dessa tabela, filtros essenciais ou particularidades..."></textarea>
                </div>
            </div>
            <div class="dict-modal-footer">
                <button type="button" class="btn btn-secondary" onclick="fecharModalEdicao()">Cancelar</button>
                <button type="submit" class="btn btn-primary">
                    <span>💾</span> Salvar Mapeamento
                </button>
            </div>
        </form>
    </div>
</div>

{{-- MODAL DE VISUALIZAÇÃO E EDIÇÃO DE CAMPOS --}}
<div class="dict-modal-overlay" id="modalCampos">
    <div class="dict-modal" style="max-width: 1050px;">
        <div class="dict-modal-header">
            <h3>
                <span>🧬</span> Estrutura de Campos: <span id="modalCamposTabelaCodigo" class="code-badge"></span>
            </h3>
            <button style="background: none; border: none; color: #94a3b8; font-size: 20px; cursor: pointer;" onclick="fecharModalCampos()">&times;</button>
        </div>
        <div class="dict-modal-body" style="padding: 0;">
            <div style="padding: 14px 20px; background: #0f172a; border-bottom: 1px solid var(--surface-border); display: flex; justify-content: space-between; align-items: center;">
                <input type="text" id="buscaCampos" placeholder="Filtrar campos (código ou descrição)..." class="form-control" style="max-width: 350px; padding: 8px 12px; font-size: 13px;" onkeyup="filtrarCamposModal()">
                <span id="contadorCamposModal" style="font-size: 13px; color: var(--text-muted);"></span>
            </div>
            <table class="dict-table" style="margin: 0;" id="tabelaCamposModal">
                <thead>
                    <tr>
                        <th style="width: 130px;">Código Campo</th>
                        <th style="width: 100px;">Tipo</th>
                        <th>Descrição Oficial CAEP</th>
                        <th>Nome Amigável / Anotação</th>
                        <th style="width: 140px;">Tabela Relacionada</th>
                        <th style="width: 80px; text-align: center;">Salvar</th>
                    </tr>
                </thead>
                <tbody id="listaCamposBody">
                    {{-- Preenchido dinamicamente via JS --}}
                </tbody>
            </table>
        </div>
        <div class="dict-modal-footer">
            <button type="button" class="btn btn-secondary" onclick="fecharModalCampos()">Fechar</button>
        </div>
    </div>
</div>

{{-- Toast de Notificação --}}
<div class="toast-notify" id="toast">
    <span>✅</span> <span id="toastMsg">Alteração salva com sucesso!</span>
</div>

<script>
    let moduloAtivo = 'todos';
    let statusAtivo = 'todos';

    function filtrarEmTempoReal() {
        const termo = document.getElementById('filtroBusca').value.toLowerCase().trim();
        const rows = document.querySelectorAll('.tabela-row');

        rows.forEach(row => {
            const rowModulo = row.getAttribute('data-modulo');
            const rowStatus = row.getAttribute('data-status');
            const rowTexto  = row.getAttribute('data-texto');

            const matchTexto  = !termo || rowTexto.includes(termo);
            const matchModulo = (moduloAtivo === 'todos') || (rowModulo === moduloAtivo);
            const matchStatus = (statusAtivo === 'todos') || (rowStatus === statusAtivo);

            if (matchTexto && matchModulo && matchStatus) {
                row.style.display = '';
            } else {
                row.style.display = 'none';
            }
        });
    }

    function filtrarModulo(btn, mod) {
        document.querySelectorAll('#filtroModulos .pill-btn').forEach(b => b.classList.remove('active'));
        btn.classList.add('active');
        moduloAtivo = mod;
        filtrarEmTempoReal();
    }

    function filtrarStatus() {
        statusAtivo = document.getElementById('filtroStatus').value;
        filtrarEmTempoReal();
    }

    // Modal de Edição de Tabela
    function abrirModalEdicao(tab) {
        document.getElementById('modalTabelaId').value = tab.id;
        document.getElementById('modalTabelaCodigo').innerText = 'SYSADM.' + tab.tabela_codigo;
        document.getElementById('modalNomeCaep').value = tab.tabela_nome_caep || '';
        document.getElementById('modalNomeAmigavel').value = tab.tabela_nome_amigavel || '';
        document.getElementById('modalModulo').value = tab.modulo || 'Outros';
        document.getElementById('modalStatus').value = tab.status_mapeamento || 'pendente';
        document.getElementById('modalFiliais').value = tab.tabelas_filiais || '';
        document.getElementById('modalDescricao').value = tab.descricao_negocio || '';

        document.getElementById('modalEdicao').style.display = 'flex';
        document.getElementById('modalNomeAmigavel').focus();
    }

    function fecharModalEdicao() {
        document.getElementById('modalEdicao').style.display = 'none';
    }

    async function salvarMapeamento(e) {
        e.preventDefault();
        const id = document.getElementById('modalTabelaId').value;
        const payload = {
            tabela_nome_amigavel: document.getElementById('modalNomeAmigavel').value,
            modulo: document.getElementById('modalModulo').value,
            status_mapeamento: document.getElementById('modalStatus').value,
            tabelas_filiais: document.getElementById('modalFiliais').value,
            descricao_negocio: document.getElementById('modalDescricao').value,
        };

        try {
            const resp = await fetch(`/modulos/dicionario-viman/tabelas/${id}`, {
                method: 'PUT',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                },
                body: JSON.stringify(payload)
            });

            const data = await resp.json();
            if (data.success) {
                exibirToast(data.message);
                fecharModalEdicao();

                // Atualiza a linha na tabela visual sem recarregar tudo
                const td = document.getElementById(`td-amigavel-${id}`);
                if (td) {
                    td.innerHTML = `
                        <div class="friendly-name-cell">${payload.tabela_nome_amigavel}</div>
                        ${payload.descricao_negocio ? `<div style="font-size: 12px; color: var(--text-muted); margin-top: 4px;">${payload.descricao_negocio.substring(0, 65)}...</div>` : ''}
                    `;
                }
                setTimeout(() => window.location.reload(), 900);
            } else {
                Swal.fire({
                    icon: 'error',
                    title: 'Erro ao Salvar',
                    text: data.message || 'Falha ao salvar',
                    confirmButtonColor: '#c8102e'
                });
            }
        } catch (err) {
            Swal.fire({
                icon: 'error',
                title: 'Erro de Comunicação',
                text: err.message,
                confirmButtonColor: '#c8102e'
            });
        }
    }

    // Modal de Campos
    async function abrirModalCampos(codigoTabela) {
        document.getElementById('modalCamposTabelaCodigo').innerText = 'SYSADM.' + codigoTabela;
        document.getElementById('listaCamposBody').innerHTML = '<tr><td colspan="6" style="text-align: center; padding: 30px; color: #94a3b8;">Carregando campos do CAEP...</td></tr>';
        document.getElementById('modalCampos').style.display = 'flex';

        try {
            const resp = await fetch(`/modulos/dicionario-viman/${codigoTabela}`);
            const data = await resp.json();
            
            document.getElementById('contadorCamposModal').innerText = `${data.campos.length} campos encontrados`;
            
            let html = '';
            data.campos.forEach(c => {
                html += `
                    <tr class="campo-row" data-campo="${(c.campo_codigo + ' ' + (c.campo_nome_caep || '') + ' ' + (c.campo_nome_amigavel || '')).toLowerCase()}">
                        <td>
                            <span class="code-badge" style="color: #60a5fa;">${c.campo_codigo}</span>
                        </td>
                        <td style="font-size: 12px; color: #cbd5e1;">
                            ${c.tipo_dado || 'VARCHAR'}${c.tamanho ? `(${c.tamanho})` : ''}
                        </td>
                        <td style="color: #94a3b8; font-size: 13px;">
                            ${c.campo_nome_caep || '-'}
                        </td>
                        <td>
                            <input type="text" id="campo-amigavel-${c.id}" value="${c.campo_nome_amigavel || ''}" placeholder="Nome amigável..." class="form-control" style="padding: 6px 10px; font-size: 13px;">
                        </td>
                        <td>
                            <input type="text" id="campo-rel-${c.id}" value="${c.tabela_relacionada || ''}" placeholder="Ex: VETECL" class="form-control" style="padding: 6px 10px; font-size: 13px; width: 110px;">
                        </td>
                        <td style="text-align: center;">
                            <button class="btn-table-action" onclick="salvarCampo(${c.id})">
                                Salvar
                            </button>
                        </td>
                    </tr>
                `;
            });
            document.getElementById('listaCamposBody').innerHTML = html;
        } catch (err) {
            document.getElementById('listaCamposBody').innerHTML = '<tr><td colspan="6" style="color: #f87171; text-align: center;">Erro ao carregar campos: ' + err.message + '</td></tr>';
        }
    }

    function filtrarCamposModal() {
        const termo = document.getElementById('buscaCampos').value.toLowerCase();
        document.querySelectorAll('.campo-row').forEach(row => {
            const txt = row.getAttribute('data-campo');
            row.style.display = txt.includes(termo) ? '' : 'none';
        });
    }

    function fecharModalCampos() {
        document.getElementById('modalCampos').style.display = 'none';
    }

    async function salvarCampo(campoId) {
        const amigavel = document.getElementById(`campo-amigavel-${campoId}`).value;
        const rel = document.getElementById(`campo-rel-${campoId}`).value;

        try {
            const resp = await fetch(`/modulos/dicionario-viman/campos/${campoId}`, {
                method: 'PUT',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                },
                body: JSON.stringify({
                    campo_nome_amigavel: amigavel,
                    tabela_relacionada: rel
                })
            });

            const data = await resp.json();
            if (data.success) {
                exibirToast(data.message);
            } else {
                Swal.fire({
                    icon: 'error',
                    title: 'Erro ao Salvar Campo',
                    text: data.message || 'Falha ao salvar campo',
                    confirmButtonColor: '#c8102e'
                });
            }
        } catch (err) {
            Swal.fire({
                icon: 'error',
                title: 'Erro de Comunicação',
                text: err.message,
                confirmButtonColor: '#c8102e'
            });
        }
    }

    async function reSincronizarCaep() {
        const isDark = document.documentElement.getAttribute('data-theme') === 'dark' || document.body.classList.contains('erp-theme-dark');
        const resultado = await Swal.fire({
            title: 'Re-sincronizar CAEP',
            text: 'Deseja re-sincronizar as tabelas a partir do CAEP.xlsx? Suas personalizações serão mantidas.',
            icon: 'question',
            showCancelButton: true,
            confirmButtonColor: '#c8102e',
            cancelButtonColor: '#64748b',
            confirmButtonText: 'Sim, sincronizar',
            cancelButtonText: 'Cancelar',
            background: isDark ? '#111827' : '#ffffff',
            color: isDark ? '#f3f4f6' : '#0f172a'
        });

        if (!resultado.isConfirmed) {
            return;
        }

        try {
            const resp = await fetch('/modulos/dicionario-viman/sincronizar', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                }
            });

            const data = await resp.json();
            if (data.success) {
                exibirToast(data.message);
                setTimeout(() => window.location.reload(), 1200);
            } else {
                Swal.fire({
                    icon: 'error',
                    title: 'Erro na Sincronização',
                    text: data.message,
                    confirmButtonColor: '#c8102e'
                });
            }
        } catch (err) {
            Swal.fire({
                icon: 'error',
                title: 'Erro de Comunicação',
                text: err.message,
                confirmButtonColor: '#c8102e'
            });
        }
    }

    function exibirToast(msg) {
        const toast = document.getElementById('toast');
        document.getElementById('toastMsg').innerText = msg;
        toast.style.display = 'flex';
        setTimeout(() => {
            toast.style.display = 'none';
        }, 3000);
    }
</script>
@endsection