@extends('admin.base-chamados')

@section('page_title', 'Kanban | Admin Dev')

@section('nav')
    @include('admin.partials.nav-dev')
@endsection

@section('page-header')
    <h1 style="display:flex;align-items:center;gap:.6rem;">
        <i class="bi bi-kanban" style="font-size:1.1rem;color:#4d7cf5;"></i>
        Dev | Kanban
        <button class="saas-btn" id="btn-add-project"
                style="font-size:.72rem;padding:.22rem .7rem;border-radius:6px;margin-left:.5rem;">
            <i class="bi bi-plus"></i> Novo projeto
        </button>
    </h1>
@endsection

@section('content')
<style>
.kanban-wrap {
    padding: 1rem 1.5rem 3rem;
    overflow-x: auto;
}

/* Project tabs */
.kp-tabs {
    display: flex;
    gap: .4rem;
    flex-wrap: wrap;
    margin-bottom: 1.4rem;
}

.kp-tab {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .32rem .85rem;
    border-radius: 20px;
    border: 1px solid var(--dm-border);
    background: var(--dm-surface);
    color: var(--dm-text-muted);
    font-size: .78rem;
    font-weight: 500;
    cursor: pointer;
    transition: all .12s;
}

.kp-tab:hover {
    color: var(--dm-text);
    border-color: #4d7cf5;
}

.kp-tab.active {
    color: var(--dm-text);
    border-color: #4d7cf5;
    background: rgba(77, 124, 245, .08);
}

.kp-tab .kp-tab-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Project section */
.kp-section { margin-bottom: 2.75rem; }

.kp-header {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin-bottom: .8rem;
    padding-bottom: .6rem;
    border-bottom: 1px solid var(--dm-border);
}

.kp-dot {
    width: 9px; height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
}

.kp-header h3 {
    font-size: .96rem;
    font-weight: 700;
    color: var(--dm-text);
    margin: 0;
}

.kp-chip {
    font-size: .67rem;
    color: var(--dm-text-muted);
    background: var(--dm-surface-2);
    border: 1px solid var(--dm-border);
    border-radius: 20px;
    padding: 1px 8px;
}

.kp-gitea-link {
    font-size: .72rem;
    color: var(--dm-text-muted);
    text-decoration: none;
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: .3rem;
    transition: color .12s;
}
.kp-gitea-link:hover { color: var(--dm-text); }

/* Board */
.kp-board {
    display: grid;
    grid-template-columns: repeat(4, minmax(210px, 1fr));
    gap: .75rem;
    min-width: 840px;
}

/* Column */
.kp-col {
    background: var(--dm-surface);
    border: 1px solid var(--dm-border);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
}

.kp-col-header {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .55rem .8rem;
    border-bottom: 1px solid var(--dm-border);
}

.kp-col-header .col-accent-bar {
    width: 3px; height: 14px;
    border-radius: 2px;
    flex-shrink: 0;
}

.kp-col-label {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: var(--dm-text-muted);
    flex: 1;
}

.kp-col-count {
    font-size: .67rem;
    color: var(--dm-text-muted);
    background: var(--dm-surface-2);
    border-radius: 20px;
    padding: 0 6px;
    border: 1px solid var(--dm-border);
    min-width: 20px;
    text-align: center;
}

/* Cards area */
.kp-cards {
    padding: .5rem .45rem;
    display: flex;
    flex-direction: column;
    gap: .4rem;
    flex: 1;
    min-height: 80px;
}

/* Card */
.kp-card {
    background: var(--dm-surface-2);
    border: 1px solid var(--dm-border);
    border-radius: 7px;
    padding: .55rem .7rem;
    transition: border-color .12s, box-shadow .12s;
    position: relative;
}

.kp-card:hover {
    border-color: #4d7cf580;
    box-shadow: 0 2px 8px rgba(0,0,0,.12);
}

.kp-card.kp-card-solved {
    opacity: .5;
}

.kp-card-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .28rem;
}

.kp-meta-text {
    font-size: .62rem;
    color: var(--dm-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 70%;
}

.kp-card-id {
    font-size: .62rem;
    font-weight: 700;
    font-family: 'Courier New', monospace;
    flex-shrink: 0;
    cursor: pointer;
    transition: color .15s;
}

.kp-card-title {
    font-size: 1rem;
    font-weight: 500;
    color: var(--dm-text);
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: .42rem;
    cursor: pointer;
}

.kp-card-title:hover { color: #7da8f5; }

.kp-card-footer {
    display: flex;
    align-items: center;
    gap: .35rem;
}

.kp-opener {
    font-size: .64rem;
    color: var(--dm-text-muted);
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kp-date {
    font-size: .62rem;
    color: var(--dm-text-muted);
    white-space: nowrap;
}

/* Drag & drop — Dragula */
.kp-card { cursor: grab; }
.kp-card:active { cursor: grabbing; }

/* Mirror: card flutuante que segue o cursor */
.gu-mirror {
    position: fixed !important;
    margin: 0 !important;
    z-index: 9999 !important;
    opacity: .92 !important;
    cursor: grabbing !important;
    border-radius: 7px;
    box-shadow: 0 12px 32px rgba(0,0,0,.38), 0 3px 12px rgba(77,124,245,.28) !important;
    transform: rotate(1.8deg) scale(1.04);
    border: 1.5px solid #4d7cf5 !important;
    pointer-events: none;
}

/* Ghost: placeholder semitransparente na origem */
.gu-transit {
    opacity: .22 !important;
    border: 1px dashed #4d7cf580 !important;
}

.gu-hide { display: none !important; }
.gu-unselectable { user-select: none !important; }

.kp-col-dragover {
    outline: 2px dashed #4d7cf5;
    outline-offset: -2px;
    background: rgba(77, 124, 245, .05);
}

/* Pending dot */
.kp-pending-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #4d7cf5;
    flex-shrink: 0;
    animation: kp-blink 1.3s ease-in-out infinite;
}
@keyframes kp-blink {
    0%, 100% { opacity: 1; } 50% { opacity: .2; }
}

/* Empty col */
.kp-empty {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem 0;
    font-size: 1.2rem;
    color: var(--dm-border);
}

/* Global empty */
.kp-global-empty {
    padding: 4rem 0;
    text-align: center;
    color: var(--dm-text-muted);
}
.kp-global-empty h2 { font-size: 1.1rem; font-weight: 600; color: var(--dm-text); margin-top: .75rem; }

/* Add project modal */
#modalAddProject .modal-content { border: 1px solid var(--dm-border); background: var(--dm-surface); }
#modalAddProject .modal-header { border-bottom: 1px solid var(--dm-border); }
#modalAddProject .modal-footer { border-top: 1px solid var(--dm-border); }

.color-swatch-group { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .35rem; }
.color-swatch {
    width: 24px; height: 24px;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color .1s;
}
.color-swatch.selected,
.color-swatch:hover { border-color: #fff; }
</style>

@php
$stageConfig = [
    \App\Models\DevKanbanCard::STAGE_ANALISE         => ['label' => 'Análise',          'accent' => '#64748b'],
    \App\Models\DevKanbanCard::STAGE_TASK            => ['label' => 'Task',             'accent' => '#f0b429'],
    \App\Models\DevKanbanCard::STAGE_TESTE_VALIDACAO => ['label' => 'Teste/Validação',  'accent' => '#4d7cf5'],
    \App\Models\DevKanbanCard::STAGE_SOLUCIONADO     => ['label' => 'Solucionado',      'accent' => '#22c97b'],
];
$stageIds = array_keys($stageConfig);
$minStage = min($stageIds);
$maxStage = max($stageIds);
@endphp

<div class="kanban-wrap">

    @if ($projects->isEmpty())
        <div class="kp-global-empty">
            <i class="bi bi-kanban" style="font-size:2.5rem;opacity:.3;"></i>
            <h2>Nenhum projeto ativo</h2>
        </div>
    @else

        {{-- Tabs de projeto --}}
        <div class="kp-tabs">
            @foreach ($projects as $project)
                <button class="kp-tab {{ $loop->first ? 'active' : '' }}"
                        data-target="kp-board-{{ $project->id }}">
                    <span class="kp-tab-dot" style="background:{{ $project->color }};"></span>
                    {{ $project->name }}
                    @php $total = array_sum(array_map('count', $byProject[$project->id] ?? [])); @endphp
                    @if ($total > 0)
                        <span style="font-size:.65rem;opacity:.6;">({{ $total }})</span>
                    @endif
                </button>
            @endforeach
        </div>

        {{-- Boards — um por projeto, só o primeiro visível --}}
        @foreach ($projects as $project)
            @php $projectStages = $byProject[$project->id] ?? []; @endphp

            <div class="kp-section"
                 id="kp-board-{{ $project->id }}"
                 data-project-id="{{ $project->id }}"
                 style="{{ $loop->first ? '' : 'display:none;' }}">

                <div class="kp-header">
                    <span class="kp-dot" style="background:{{ $project->color }};"></span>
                    <h3>{{ $project->name }}</h3>
                    <span class="kp-chip">
                        {{ array_sum(array_map('count', $projectStages)) }} chamados
                    </span>
                    @if ($project->gitea_repo)
                        <a href="http://gitea.casasdaagua.com.br:3000/{{ $project->gitea_repo }}/issues"
                           target="_blank" rel="noopener" class="kp-gitea-link">
                            <i class="bi bi-git"></i> Gitea
                        </a>
                    @endif
                </div>

                <div class="kp-board">
                    @foreach ($stageConfig as $stageId => $col)
                        @php $stageTickets = $projectStages[$stageId] ?? []; @endphp

                        <div class="kp-col" data-stage="{{ $stageId }}" data-project="{{ $project->id }}">

                            <div class="kp-col-header">
                                <span class="col-accent-bar" style="background:{{ $col['accent'] }};"></span>
                                <span class="kp-col-label">{{ $col['label'] }}</span>
                                <span class="kp-col-count">{{ count($stageTickets) }}</span>
                            </div>

                            <div class="kp-cards">
                                @forelse ($stageTickets as $ticket)
                                    @php
                                        $titulo    = data_get($ticket->payload, 'titulo', $ticket->name);
                                        $typeStr   = $ticket->types?->name ?? '';
                                        $catStr    = $ticket->category?->name ?? '';
                                        $nome      = data_get($ticket->payload, 'nome', '');
                                        $isPending = $ticket->actiontime === 'new';
                                        $isSolved  = $ticket->status === \App\Enums\ChamadoStatus::Solucionado;
                                    @endphp

                                    <div class="kp-card {{ $isSolved ? 'kp-card-solved' : '' }}"
                                         id="kp-card-{{ $ticket->id }}"
                                         data-ticket="{{ $ticket->id }}"
                                         data-stage="{{ $stageId }}"
                                         data-from-stage="{{ $stageId }}">

                                        <div class="kp-card-meta">
                                            <span class="kp-meta-text">{{ implode(' — ', array_filter([$typeStr, $catStr])) }}</span>
                                            <span class="kp-card-id chamado_modal"
                                                  data-tipo="conteudo"
                                                  data-value="{{ $ticket->id }}"
                                                  data-toggle="modal"
                                                  data-target="#modalGeral"
                                                  style="color: {{ $col['accent'] }};"
                                                  title="Ver chamado">#{{ $ticket->id }}</span>
                                        </div>

                                        <div class="kp-card-title chamado_modal"
                                             data-tipo="conteudo"
                                             data-value="{{ $ticket->id }}"
                                             data-toggle="modal"
                                             data-target="#modalGeral">
                                            {{ $titulo }}
                                        </div>

                                        <div class="kp-card-footer">
                                            <span class="kp-opener">
                                                @if($nome)
                                                    <i class="bi bi-person" style="font-size:.6rem;"></i>
                                                    {{ Str::limit(explode(' ', trim($nome))[0], 14) }}
                                                @endif
                                            </span>
                                            <span class="kp-date">{{ date('d/m', strtotime($ticket->date_creation)) }}</span>
                                            @if ($isPending)
                                                <span class="kp-pending-dot" title="Aguardando resposta"></span>
                                            @endif
                                        </div>


                                    </div>
                                @empty
                                    <div class="kp-empty"><i class="bi bi-check2"></i></div>
                                @endforelse
                            </div>

                        </div>
                    @endforeach
                </div>

            </div>
        @endforeach

    @endif

</div>

{{-- Modal: Novo Projeto --}}
<div class="modal fade" id="modalAddProject" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" style="font-size:.82rem;font-weight:700;text-transform:uppercase;letter-spacing:.7px;">
                    <i class="bi bi-plus-circle mr-2" style="color:#4d7cf5;"></i> Novo Projeto
                </h5>
                <button type="button" class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form id="form-add-project">
                    @csrf
                    <div class="form-group mb-3">
                        <label style="font-size:.75rem;font-weight:600;">Nome do projeto</label>
                        <input type="text" class="form-control form-control-sm" name="name" id="proj-name"
                               placeholder="ex: App Mobile" required maxlength="100">
                    </div>
                    <div class="form-group mb-3">
                        <label style="font-size:.75rem;font-weight:600;">Identificador (slug)</label>
                        <input type="text" class="form-control form-control-sm" name="slug" id="proj-slug"
                               placeholder="ex: AppMobile" required maxlength="50">
                        <small style="color:var(--dm-text-muted);font-size:.68rem;">Sem espaços. Mesmo valor do campo "Projeto" no formulário de abertura.</small>
                    </div>
                    <div class="form-group mb-3">
                        <label style="font-size:.75rem;font-weight:600;">Repositório Gitea</label>
                        <select class="form-control form-control-sm" name="gitea_repo" id="proj-gitea-repo">
                            <option value="">Sem repositório</option>
                        </select>
                        <small id="proj-repo-loading" style="color:var(--dm-text-muted);font-size:.68rem;display:none;">
                            <i class="bi bi-arrow-repeat"></i> Carregando repos…
                        </small>
                    </div>
                    <div class="form-group mb-2">
                        <label style="font-size:.75rem;font-weight:600;">Cor</label>
                        <div class="color-swatch-group" id="proj-color-group">
                            @foreach(['#4d7cf5','#16a34a','#f58122','#a78bfa','#e05252','#f0b429','#22c97b','#64748b'] as $c)
                                <span class="color-swatch {{ $c === '#4d7cf5' ? 'selected' : '' }}"
                                      style="background:{{ $c }};"
                                      data-color="{{ $c }}"></span>
                            @endforeach
                        </div>
                        <input type="hidden" name="color" id="proj-color" value="#4d7cf5">
                    </div>
                </form>
                <div id="proj-error" class="alert alert-danger py-1 px-2 mt-2" style="font-size:.75rem;display:none;"></div>
            </div>
            <div class="modal-footer" style="padding:.5rem 1rem;">
                <button type="button" class="saas-btn" data-dismiss="modal" style="font-size:.75rem;">Cancelar</button>
                <button type="button" class="saas-btn primary" id="btn-save-project" style="font-size:.75rem;">
                    <i class="bi bi-check2 mr-1"></i> Salvar
                </button>
            </div>
        </div>
    </div>
</div>

{{-- Modal geral de chamados (necessário pois @section('content') é sobrescrito) --}}
<div class="modal fade" id="modalGeral" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div id="conteudomodal"></div>
        </div>
    </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/dragula/3.6.6/dragula.min.js"
        integrity="sha512-MrA7WH8h42LMq8GWxQGmWjrtalBjrfIzCQ+i2EZA26cZ7OBiBd/Uct5S3NP9IBqKx5b+MMNH1PhzTsk6J9nPQQ=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>

@endsection

@section('scripts-extra')
    var moveUrl    = '{{ route("dev.admin.kanban.move") }}';
    var projectUrl = '{{ route("dev.admin.projects.store") }}';
    var reposUrl   = '{{ route("dev.admin.gitea.repos") }}';
    var csrf       = '{{ csrf_token() }}';
    var stageColors = @json(array_map(fn($c) => $c['accent'], $stageConfig));

    // ── Troca de projeto (tabs) ──────────────────────────────────────────────
    $(document).on('click', '.kp-tab', function () {
        var target = $(this).data('target');
        $('.kp-tab').removeClass('active');
        $(this).addClass('active');
        $('.kp-section').hide();
        $('#' + target).show();
    });

    // ── Drag & Drop (Dragula) ────────────────────────────────────────────────
    var drake = dragula(Array.from(document.querySelectorAll('.kp-cards')), {
        revertOnSpill: true,
        moves: function (el) { return el.classList.contains('kp-card'); },
        accepts: function (el, target) { return target.classList.contains('kp-cards'); }
    });

    drake.on('over', function (el, container) {
        $(container).closest('.kp-col').addClass('kp-col-dragover');
    });

    drake.on('out', function (el, container) {
        $(container).closest('.kp-col').removeClass('kp-col-dragover');
    });

    drake.on('dragend', function () {
        $('.kp-col').removeClass('kp-col-dragover');
    });

    drake.on('drop', function (el, target, source) {
        $('.kp-col').removeClass('kp-col-dragover');

        var newStage  = parseInt($(target).closest('.kp-col').data('stage'), 10);
        var fromStage = parseInt($(source).closest('.kp-col').data('stage'), 10);
        var ticketId  = parseInt($(el).data('ticket'), 10);

        if (newStage === fromStage) return;

        var $card     = $(el);
        var $section  = $card.closest('.kp-section');
        var projectId = $section.data('project-id');

        $card.attr('data-stage', newStage);
        if (newStage === 4) $card.addClass('kp-card-solved');
        else $card.removeClass('kp-card-solved');
        if (stageColors[newStage]) $card.find('.kp-card-id').css('color', stageColors[newStage]);

        updateColCounts(projectId);
        refreshEmptyStates(projectId);

        $.ajax({
            url: moveUrl,
            method: 'POST',
            data: { ticket_id: ticketId, stage: newStage, _token: csrf },
            error: function () {
                // Revert on failure
                var $origCards = $section.find('.kp-col[data-stage="' + fromStage + '"] .kp-cards');
                $card.attr('data-stage', fromStage);
                $origCards.prepend($card);
                if (fromStage === 4) $card.addClass('kp-card-solved');
                else $card.removeClass('kp-card-solved');
                if (stageColors[fromStage]) $card.find('.kp-card-id').css('color', stageColors[fromStage]);
                updateColCounts(projectId);
                refreshEmptyStates(projectId);
                alert('Falha ao mover o chamado. Tente novamente.');
            }
        });
    });

    function updateColCounts(projectId) {
        $('.kp-section[data-project-id="' + projectId + '"] .kp-col').each(function () {
            $(this).find('.kp-col-count').text($(this).find('.kp-card').length);
        });
        var total = $('.kp-section[data-project-id="' + projectId + '"] .kp-card').length;
        $('.kp-section[data-project-id="' + projectId + '"] .kp-chip').text(total + ' chamados');
        // update tab counter
        var $tab = $('.kp-tab[data-target="kp-board-' + projectId + '"]');
        var $counter = $tab.find('span[style*="opacity"]');
        if (total > 0) {
            if ($counter.length) $counter.text('(' + total + ')');
            else $tab.append('<span style="font-size:.65rem;opacity:.6;">(' + total + ')</span>');
        } else {
            $counter.remove();
        }
    }

    function refreshEmptyStates(projectId) {
        $('.kp-section[data-project-id="' + projectId + '"] .kp-col').each(function () {
            var $cards = $(this).find('.kp-cards');
            if ($cards.find('.kp-card').length === 0 && $cards.find('.kp-empty').length === 0) {
                $cards.append('<div class="kp-empty"><i class="bi bi-check2"></i></div>');
            } else if ($cards.find('.kp-card').length > 0) {
                $cards.find('.kp-empty').remove();
            }
        });
    }

    // ── Add project modal ────────────────────────────────────────────────────
    $('#btn-add-project').on('click', function () {
        $('#modalAddProject').modal('show');
    });

    $('#modalAddProject').on('show.bs.modal', function () {
        var $select = $('#proj-gitea-repo');
        if ($select.find('option').length > 1) return;
        $('#proj-repo-loading').show();
        $.get(reposUrl)
            .done(function (repos) {
                $.each(repos, function (_, repo) {
                    $select.append('<option value="' + repo.full_name + '">' + repo.full_name + '</option>');
                });
            })
            .always(function () { $('#proj-repo-loading').hide(); });
    });

    $('#proj-name').on('input', function () {
        var slug = $(this).val()
            .replace(/\s+(.)/g, function (_, c) { return c.toUpperCase(); })
            .replace(/[^a-zA-Z0-9]/g, '');
        $('#proj-slug').val(slug);
    });

    $(document).on('click', '.color-swatch', function () {
        $('.color-swatch').removeClass('selected');
        $(this).addClass('selected');
        $('#proj-color').val($(this).data('color'));
    });

    $('#btn-save-project').on('click', function () {
        var $btn = $(this);
        var data = {
            name:       $('#proj-name').val().trim(),
            slug:       $('#proj-slug').val().trim(),
            gitea_repo: $('#proj-gitea-repo').val(),
            color:      $('#proj-color').val(),
            _token:     csrf,
        };

        $('#proj-error').hide();
        if (!data.name || !data.slug) {
            $('#proj-error').text('Nome e identificador são obrigatórios.').show();
            return;
        }

        $btn.prop('disabled', true).html('<i class="bi bi-arrow-repeat" style="animation:spin .6s linear infinite;display:inline-block;"></i> Salvando…');

        $.ajax({
            url: projectUrl,
            method: 'POST',
            data: data,
            success: function () { location.reload(); },
            error: function (xhr) {
                var msg = (xhr.responseJSON && xhr.responseJSON.errors)
                    ? Object.values(xhr.responseJSON.errors).flat().join(' ')
                    : 'Erro ao salvar projeto.';
                $('#proj-error').text(msg).show();
                $btn.prop('disabled', false).html('<i class="bi bi-check2 mr-1"></i> Salvar');
            }
        });
    });

    $('#modalAddProject').on('hidden.bs.modal', function () {
        $('#form-add-project')[0].reset();
        $('#proj-color').val('#4d7cf5');
        $('.color-swatch').removeClass('selected');
        $('.color-swatch[data-color="#4d7cf5"]').addClass('selected');
        $('#proj-error').hide();
        $('#btn-save-project').prop('disabled', false).html('<i class="bi bi-check2 mr-1"></i> Salvar');
    });

    var styleEl = document.createElement('style');
    styleEl.textContent = '@keyframes spin { to { transform: rotate(360deg); } }';
    document.head.appendChild(styleEl);
@endsection