@extends('layouts.master')
@section('content')
@php
    $rola   = auth()->user()->rola->nazwa ?? 'Użytkownik';
    $prefix = match ($rola) {
        'Administrator' => 'admin',
        'Moderator'     => 'moderator',
        'Serwisant'     => 'serwisant',
        default         => 'admin',
    };
@endphp

@push('styles')
<style>
  /* --- główny box --- */
  .glass-container {
    max-width: 1200px;
    margin: 2rem auto;
    backdrop-filter: blur(12px);
    background: rgba(255,255,255,0.7);
    border: 1px solid rgba(255,255,255,0.4);
    border-radius: 20px;
    padding: 2rem;
    transition: background .3s, border-color .3s;
  }
  body.dark-mode .glass-container {
    background: rgba(30,30,40,0.6);
    border-color: rgba(255,255,255,0.1);
  }

  /* --- pojedyncze karty --- */
  .glass-card {
    background: transparent;
    border: none;
    transition: transform .2s;
  }
  .glass-card:hover {
    transform: translateY(-3px);
  }

  /* --- pusty stan --- */
  .glass-empty {
    text-align: center;
    padding: 4rem 1rem;
    color: #666;
  }
  body.dark-mode .glass-empty {
    color: #aaa;
  }

  /* --- Egasofcik --- */
  #egasofcik {
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    width: 300px;
    max-width: 90%;
    z-index: 9999;
  }

  /* karta zawsze pełnej szerokości kontenera */
  #egasofcik .card {
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
    transition: background .3s, border-color .3s;
  }

  /* nagłówek */
  #egasofcik .card-header {
    background: #0d6efd;
    color: #fff;
  }
  body.dark-mode #egasofcik .card-header {
    background: #1e1e2f;
    color: #90caf9;
  }

  /* body z przewijaniem */
  #egasofcik .card-body {
    max-height: 250px;
    overflow-y: auto;
    background: #f8f9fa;
    color: #212529;
  }
  body.dark-mode #egasofcik .card-body {
    background: #2a2a2a;
    color: #e0e0e0;
  }

  /* stopka z inputem */
  #egasofcik .card-footer {
  background: #fff;
  padding: .5rem;
  border-top: 1px solid rgba(0,0,0,0.1);
}

body.dark-mode #egasofcik .card-footer {
  background: #212529;
  border-top: 1px solid rgba(255,255,255,0.15) !important;
}
  #egasofcik-input {
    height: 2rem;
    font-size: .9rem;
    background: #fff;
    color: #212529;
    border: 1px solid #ccc;
  }
  body.dark-mode #egasofcik-input {
    background: #2c2c3c;
    color: #e0e0e0;
    border: 1px solid #555;
  }

  /* przycisk wysyłki */
  #egasofcik .btn-primary {
    background: #0d6efd;
    border-color: #0d6efd;
  }
  body.dark-mode #egasofcik .btn-primary {
    background: #90caf9;
    border-color: #90caf9;
    color: #000;
  }

  /* linki wewnątrz body */
  #egasofcik .card-body a {
    color: #0d6efd;
  }
  body.dark-mode #egasofcik .card-body a {
    color: #90caf9;
  }
  /* mark w highlight */
  #egasofcik .card-body mark {
    background: #ffc107;
    color: #000;
  }
  body.dark-mode #egasofcik .card-body mark {
    background: #444;
    color: #fff;
  }
</style>
@endpush

<div class="glass-container">
  <div class="d-flex justify-content-between align-items-center mb-4">
    <h3 class="mb-0">Baza wiedzy</h3>
    <a href="{{ route($prefix . '.wiedza.create') }}" class="btn btn-primary">Dodaj notatkę</a>
  </div>

  @if($notatki->count())
    <div class="row row-cols-1 row-cols-sm-2 row-cols-lg-3 g-3">
      @foreach($notatki as $nota)
        <div class="col">
          <a href="{{ route($prefix . '.wiedza.show', $nota) }}" class="text-decoration-none">
            <div class="card glass-card shadow-sm h-100">
              <div class="card-body">
                <h5 class="card-title">{{ $nota->tytul }}</h5>
                <p class="card-text text-muted small mb-0">
                  Dodana przez {{ $nota->user->name }} · {{ $nota->created_at->format('Y-m-d H:i') }}
                </p>
              </div>
            </div>
          </a>
        </div>
      @endforeach
    </div>
  @else
    <div class="glass-empty">
      <i class="fas fa-book-open fa-2x mb-3"></i>
      <p class="mb-0">Brak dostępnych notatek w bazie wiedzy.</p>
    </div>
  @endif
</div>

{{-- Egasofcik --}}
@if(in_array($rola, ['Administrator','Moderator','Serwisant']))
  <div id="egasofcik">
    <div class="card shadow-sm">
      <div class="card-header bg-primary text-white d-flex justify-content-between align-items-center">
        <span>Egasofcik</span>
        <button class="btn-close btn-close-white btn-sm"
                onclick="document.getElementById('egasofcik').remove()"></button>
      </div>
      <div class="card-body" id="egasofcik-body">
        <div class="mb-2"><strong>Egasofcik:</strong> Cześć! W czym mogę pomóc?</div>
      </div>
      <div class="card-footer">
        <form onsubmit="egasofcikSend(event)">
          <input type="text" id="egasofcik-input"
                 class="form-control" placeholder="Zadaj pytanie…" required>
        </form>
      </div>
    </div>
  </div>

    <script>
        function egasofcikSend(event) {
            event.preventDefault();
            const input = document.getElementById('egasofcik-input');
            const body = document.getElementById('egasofcik-body');
            const msg = input.value.trim();
            if (!msg) return;

            const userMsg = document.createElement('div');
            userMsg.className = "text-end text-primary mb-2";
            userMsg.innerHTML = `<strong>Ty:</strong> ${escapeHTML(msg)}`;
            body.appendChild(userMsg);
            body.scrollTop = body.scrollHeight;
            input.value = '';

            fetch("{{ route($prefix . '.egasofcik.search') }}", {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                },
                body: JSON.stringify({ query: msg })
            })
            .then(res => res.json())
            .then(data => {
                let html = '';

                if (data.notatki.length > 0) {
                    html += '<div class="mb-2"><strong>Notatki powiązane:</strong><ul class="ps-3">';
                    data.notatki.forEach(nota => {
                        const title = highlight(nota.tytul, data.highlight);
                        html += `<li><a href="/{{ $prefix }}/wiedza/${nota.id}">${title}</a></li>`;
                    });
                    html += '</ul></div>';
                }

                if (data.tickets.length > 0) {
                    html += '<div class="mb-2"><strong>Zgłoszenia powiązane:</strong><ul class="ps-3">';
                    data.tickets.forEach(ticket => {
                        const subject = highlight(ticket.subject, data.highlight);
                        html += `<li><a href="/{{ $prefix }}/tickets/${ticket.id}">#${ticket.id} - ${subject}</a></li>`;
                    });
                    html += '</ul></div>';
                }

                if (!html) {
                    html = '<div class="mb-2"><strong>Egasofcik:</strong> Nie znalazłem niczego pasującego 😔</div>';
                } else {
                    html = `<div class="mb-2"><strong>Egasofcik:</strong><br>${html}<div class="mt-2">Czy mogę jeszcze w czymś pomóc?</div></div>`;
                }

                const responseDiv = document.createElement('div');
                responseDiv.innerHTML = html;
                body.appendChild(responseDiv);
                body.scrollTop = body.scrollHeight;
            })
            .catch(() => {
                const errorMsg = document.createElement('div');
                errorMsg.className = "mb-2 text-danger";
                errorMsg.innerHTML = `<strong>Egasofcik:</strong> Wystąpił błąd przy wyszukiwaniu 😵`;
                body.appendChild(errorMsg);
            });
        }

        function highlight(text, words) {
            if (!words || words.length === 0) return escapeHTML(text);
            let safe = escapeHTML(text);
            words.forEach(word => {
                const regex = new RegExp(`(${escapeRegExp(word)})`, 'gi');
                safe = safe.replace(regex, '<mark>$1</mark>');
            });
            return safe;
        }

        function escapeHTML(str) {
            return str.replace(/[&<>"']/g, m => ({
                '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;'
            }[m]));
        }

        function escapeRegExp(string) {
            return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
        }
    </script>
@endif
@endsection