@extends('admin.layouts.app')

@section('title', "Logs {$fileName}")

@section('content')
    <div class="p-6 mx-5">

        {{-- Header --}}
        <div class="flex justify-between items-center mb-6">
            <div>
                <h1 class="text-3xl font-bold text-gray-800 mb-1">{{ $fileName }}</h1>
                <p class="text-sm text-gray-500">Log file details and analysis</p>
            </div>
            <a href="{{ route('logs.index') }}"
                class="inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 hover:border-gray-400 transition-all duration-200 shadow-sm">
                <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24"
                    stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18" />
                </svg>
                Back to logs
            </a>
        </div>

        {{-- Filters --}}
        <div class="mb-6">
            <div class="bg-white border border-gray-200 rounded-xl shadow-sm p-5">
                <div class="flex items-center gap-2 mb-4">
                    <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-gray-600" fill="none" viewBox="0 0 24 24"
                        stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" />
                    </svg>
                    <h2 class="text-sm font-semibold text-gray-700">Filters</h2>
                </div>

                <div class="flex flex-wrap items-center justify-between gap-4">
                    <form method="GET" class="flex flex-wrap items-center gap-3">
                        {{-- Level --}}
                        <div class="flex flex-col gap-1">
                            <label class="text-xs font-medium text-gray-600">Level</label>
                            <select name="level"
                                class="h-10 px-4 rounded-lg border border-gray-300 text-sm bg-white text-gray-900 focus:border-teal-500 focus:ring-2 focus:ring-teal-200 transition-all duration-200 cursor-pointer">
                                <option value="">All Levels</option>
                                @foreach (['INFO', 'WARN', 'ERROR'] as $lvl)
                                    <option value="{{ $lvl }}" @selected(request('level') === $lvl)>
                                        {{ $lvl }}
                                    </option>
                                @endforeach
                            </select>
                        </div>

                        {{-- Date --}}
                        <div class="flex flex-col gap-1">
                            <label class="text-xs font-medium text-gray-600">Date</label>
                            <input type="date" name="date" value="{{ request('date') }}"
                                class="h-10 px-4 rounded-lg border border-gray-300 text-sm bg-white text-gray-900 focus:border-teal-500 focus:ring-2 focus:ring-teal-200 transition-all duration-200">
                        </div>

                        {{-- Apply --}}
                        <button type="submit"
                            class="inline-flex items-center gap-2 h-10 px-6 rounded-lg bg-teal-600 text-white text-sm font-medium hover:bg-teal-700 hover:shadow-md transition-all duration-200 mt-auto">
                            <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24"
                                stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                            </svg>
                            Apply
                        </button>
                    </form>

                    {{-- Clear --}}
                    <a href="{{ route('logs.show', $fileName) }}"
                        class="inline-flex items-center gap-2 h-10 px-6 rounded-lg bg-gray-100 text-gray-700 text-sm font-medium hover:bg-gray-200 border border-gray-300 hover:border-gray-400 transition-all duration-200 mt-auto">
                        <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24"
                            stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M6 18L18 6M6 6l12 12" />
                        </svg>
                        Clear Filters
                    </a>
                </div>
            </div>
        </div>

        {{-- KPI Counters (Current Page) --}}
        <div class="grid grid-cols-1 sm:grid-cols-3 gap-4 mb-4">

            {{-- INFO --}}
            <div class="flex items-center gap-4 bg-blue-100 border border-blue-200 rounded-lg p-4 ml-6">
                <div class="flex items-center justify-center w-10 h-10 rounded-full bg-blue-200">
                    {{-- Info Icon --}}
                    <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 16 16" class="w-5 h-5 text-blue-700" xmlns="http://www.w3.org/2000/svg"><path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16"></path><path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0"></path></svg>
                </div>

                <div>
                    <div class="text-sm text-blue-700 font-medium">INFO</div>
                    <div class="text-2xl font-bold text-blue-800">{{ $kpi['INFO'] }}</div>
                    <div class="text-xs text-blue-600">Current page</div>
                </div>
            </div>

            {{-- WARN --}}
            <div class="flex items-center gap-4 bg-yellow-100 border border-yellow-200 rounded-lg p-4">
                <div class="flex items-center justify-center w-10 h-10 rounded-full bg-yellow-200">
                    {{-- Warning Icon --}}
                    <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24"
                        class="w-6 h-6 text-yellow-700" xmlns="http://www.w3.org/2000/svg">
                        <g id="Warning">
                            <g>
                                <g>
                                    <path d="M12.5,8.752a.5.5,0,0,0-1,0h0v6a.5.5,0,0,0,1,0Z"></path>
                                    <circle cx="11.999" cy="16.736" r="0.5"></circle>
                                </g>
                                <path
                                    d="M18.642,20.934H5.385A2.5,2.5,0,0,1,3.163,17.29L9.792,4.421a2.5,2.5,0,0,1,4.444,0L20.865,17.29a2.5,2.5,0,0,1-2.223,3.644ZM12.014,4.065a1.478,1.478,0,0,0-1.334.814L4.052,17.748a1.5,1.5,0,0,0,1.333,2.186H18.642a1.5,1.5,0,0,0,1.334-2.186L13.348,4.879A1.478,1.478,0,0,0,12.014,4.065Z">
                                </path>
                            </g>
                        </g>
                    </svg>
                </div>

                <div>
                    <div class="text-sm text-yellow-700 font-medium">WARN</div>
                    <div class="text-2xl font-bold text-yellow-800">{{ $kpi['WARN'] }}</div>
                    <div class="text-xs text-yellow-600">Current page</div>
                </div>
            </div>

            {{-- ERROR --}}
            <div class="flex items-center gap-4 bg-red-100 border border-red-200 rounded-lg p-4">
                <div class="flex items-center justify-center w-10 h-10 rounded-full bg-red-200">
                    {{-- Error Icon --}}
                    <svg stroke="currentColor" fill="none" stroke-width="0" viewBox="0 0 15 15"
                        class="w-6 h-6 text-red-700" xmlns="http://www.w3.org/2000/svg">
                        <path fill-rule="evenodd" clip-rule="evenodd"
                            d="M11.7816 4.03157C12.0062 3.80702 12.0062 3.44295 11.7816 3.2184C11.5571 2.99385 11.193 2.99385 10.9685 3.2184L7.50005 6.68682L4.03164 3.2184C3.80708 2.99385 3.44301 2.99385 3.21846 3.2184C2.99391 3.44295 2.99391 3.80702 3.21846 4.03157L6.68688 7.49999L3.21846 10.9684C2.99391 11.193 2.99391 11.557 3.21846 11.7816C3.44301 12.0061 3.80708 12.0061 4.03164 11.7816L7.50005 8.31316L10.9685 11.7816C11.193 12.0061 11.5571 12.0061 11.7816 11.7816C12.0062 11.557 12.0062 11.193 11.7816 10.9684L8.31322 7.49999L11.7816 4.03157Z"
                            fill="currentColor"></path>
                    </svg>
                </div>

                <div>
                    <div class="text-sm text-red-700 font-medium">ERROR</div>
                    <div class="text-2xl font-bold text-red-800">{{ $kpi['ERROR'] }}</div>
                    <div class="text-xs text-red-600">Current page</div>
                </div>
            </div>

        </div>

        {{-- Log Viewer --}}
        <div class="text-white text-sm rounded overflow-auto max-h-[80vh] font-mono">

            @forelse ($lines as $i => $line)
                <div class="flex py-0.5 mb-4">

                    {{-- Line Number --}}
                    <span class="text-gray-500 text-right pr-3 select-none">
                        {{ ($page - 1) * 200 + $i + 1 }}
                    </span>

                    {{-- Log Line --}}
                    <span
                        class="flex-1 break-all px-2 py-1 rounded
                    @if (str_contains($line, 'ERROR')) text-red-700 bg-red-100
                    @elseif(str_contains($line, 'WARN')) text-yellow-700 bg-yellow-100
                    @elseif(str_contains($line, 'INFO')) text-blue-700 bg-blue-100
                    @else text-black bg-gray-100 @endif
                ">
                        {{ $line }}
                    </span>

                </div>
            @empty
                <div class="p-4 text-gray-400 text-center">
                    No log entries found for selected filters.
                </div>
            @endforelse
        </div>

        {{-- Pagination --}}
        <div class="flex justify-end items-center mt-4 gap-2">
            @if ($page > 1)
                <a href="{{ request()->fullUrlWithQuery(['page' => $page - 1]) }}"
                    class="bg-teal-600 border px-4 py-2 rounded text-white">
                    ← Previous
                </a>
            @else
                <span></span>
            @endif

            @if ($hasMore)
                <a href="{{ request()->fullUrlWithQuery(['page' => $page + 1]) }}"
                    class="bg-teal-600 border px-4 py-2 rounded text-white">
                    Next →
                </a>
            @endif
        </div>

    </div>
@endsection