@extends('layouts.app')
@section('title', 'Knowledge Intelligence Hub')

@push('styles')
<link rel="stylesheet" href="{{ asset('assets/css/dashboard-final.css') }}">
<style>
    .knowledge-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
        gap: 24px;
        margin-bottom: 32px;
    }
    .article-card {
        display: flex;
        flex-direction: column;
        height: 100%;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .article-card:hover {
        transform: translateY(-5px);
        border-color: var(--accent-soft);
        box-shadow: 0 15px 40px rgba(0,0,0,0.3);
    }
    .article-type-tag {
        font-size: 9px;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        padding: 4px 12px;
        border-radius: 100px;
        background: rgba(14, 165, 233, 0.1);
        color: var(--info-color);
        border: 1px solid rgba(14, 165, 233, 0.2);
    }
</style>
@endpush

@section('content')

@php
    $actionsHtml = '
        <div style="display: flex; gap: 12px;">
            <form action="'.route('knowledge.auto-generate').'" method="POST" style="display: inline;">
                '.csrf_field().'
                <button class="final-btn final-btn-secondary" style="color: #a855f7; border-color: rgba(168, 85, 247, 0.2);">
                    <i class="bi bi-magic"></i> AI Auto-Doc
                </button>
            </form>
            <a href="'.route('knowledge.create').'" class="final-btn final-btn-primary">
                <i class="bi bi-plus-lg"></i> New Article
            </a>
        </div>
    ';
@endphp

@include('components.page-header', [
    'title' => 'Engineering Knowledge Hub',
    'description' => 'Centralized repository for SOPs, architectural documentation, and real-time engineering guides.',
    'breadcrumbs' => ['Home' => route('admin.dashboard'), 'Knowledge Base' => '#'],
    'actions' => $actionsHtml
])

<div class="final-card" style="margin-bottom: 24px;">
    <h3 class="final-card-title"><i class="bi bi-search"></i> Centralized Intelligence Search</h3>
    <form method="GET" action="{{ request()->url() }}">
        <div style="display: grid; grid-template-columns: 2fr 1fr 1fr 120px; gap: 12px;">
            <div class="relative">
                <input type="text" name="q" value="{{ request('q') }}" placeholder="Search articles, documentation, and guides..." class="final-select" style="padding-left: 40px;">
                <i class="bi bi-search" style="position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: var(--text-secondary); font-size: 14px;"></i>
            </div>
            <select name="type" class="final-select">
                <option value="">All Intelligence Types</option>
                <option value="auto_doc" @selected(request('type') == 'auto_doc')>Auto Documentation</option>
                <option value="module_note" @selected(request('type') == 'module_note')>Module Notes</option>
                <option value="api_note" @selected(request('type') == 'api_note')>API Guides</option>
                <option value="bug_kb" @selected(request('type') == 'bug_kb')>Bug Solutions</option>
                <option value="deployment_note" @selected(request('type') == 'deployment_note')>Deployment Notes</option>
            </select>
            <select name="tag" class="final-select">
                <option value="">All Reference Tags</option>
                @foreach($tags as $tag)
                    <option value="{{ $tag->slug }}" @selected(request('tag') == $tag->slug)>{{ $tag->name }}</option>
                @endforeach
            </select>
            <button type="submit" class="final-btn final-btn-secondary" style="justify-content: center;">
                <i class="bi bi-funnel"></i> Filter
            </button>
        </div>
    </form>
</div>

<div class="knowledge-grid">
    @forelse($articles as $article)
    <div class="final-card article-card group">
        <div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 20px;">
            <span class="article-type-tag">{{ str_replace('_', ' ', $article->type) }}</span>
            <div style="display: flex; gap: 8px;">
                <a href="{{ route('knowledge.edit', $article->id) }}" class="final-btn final-btn-secondary" style="padding: 4px 8px; font-size: 10px;">
                    <i class="bi bi-pencil-square"></i>
                </a>
            </div>
        </div>
        
        <h3 style="font-size: 18px; font-weight: 800; color: var(--text-primary); margin-bottom: 12px; line-height: 1.4; min-height: 50px;">{{ $article->title }}</h3>
        
        <div class="final-secondary-text" style="font-size: 13px; line-height: 1.6; color: var(--text-secondary); margin-bottom: 20px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;">
            {!! strip_tags($article->content) !!}
        </div>

        <div style="display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px;">
            @foreach($article->tags as $tag)
                <span style="font-size: 10px; font-weight: 700; color: var(--accent-color); background: rgba(181, 255, 59, 0.05); padding: 2px 8px; border-radius: 4px; border: 1px solid rgba(181, 255, 59, 0.1);">#{{ $tag->name }}</span>
            @endforeach
        </div>

        <div style="margin-top: auto; padding-top: 16px; border-top: 1px solid var(--border-color); display: flex; justify-content: space-between; align-items: center;">
            <div style="font-size: 9px; font-weight: 800; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.1em;">
                UPDATED {{ $article->updated_at->diffForHumans() }}
            </div>
            <i class="bi bi-arrow-right" style="color: var(--accent-color); transition: transform 0.3s;" class="group-hover:translate-x-1"></i>
        </div>
    </div>
    @empty
    <div style="grid-column: 1 / -1;">
        <div class="final-card" style="text-align: center; padding: 60px;">
            <div class="final-empty-state">
                <i class="bi bi-journal-x"></i>
                <p>No organizational knowledge detected</p>
                <p class="final-secondary-text" style="text-transform: none; font-size: 12px; margin-top: 8px;">Try adjusting your search filters or initialize the AI Auto-Doc engine.</p>
            </div>
        </div>
    </div>
    @endforelse
</div>

@if($articles->hasPages())
<div style="margin-top: 32px;">
    {{ $articles->links() }}
</div>
@endif

@endsection