@extends('layouts.app')

@section('title', $article->title)

@section('content')
<div class="container-fluid px-4">
    {{-- Header --}}
    <div class="d-flex flex-wrap align-items-start justify-content-between gap-3 mb-4">
        <div>
            <nav aria-label="{{ __('Breadcrumb') }}">
                <ol class="breadcrumb mb-1">
                    <li class="breadcrumb-item">
                        <a href="{{ route('admin.dashboard') }}">
                            {{ __('Dashboard') }}
                        </a>
                    </li>

                    <li class="breadcrumb-item">
                        <a href="{{ route('admin.knowledge.index') }}">
                            {{ __('Knowledge Base') }}
                        </a>
                    </li>

                    <li class="breadcrumb-item active">
                        {{ Str::limit($article->title, 40) }}
                    </li>
                </ol>
            </nav>

            <h1 class="h3 mb-0 fw-700">
                {{ $article->title }}
            </h1>
        </div>

        <div class="d-flex flex-wrap gap-2">
            <a
                href="{{ route(
                    'admin.knowledge.preview',
                    ['article' => $article]
                ) }}"
                class="btn btn-sm btn-info"
                target="_blank"
                rel="noopener"
            >
                <i class="fas fa-external-link-alt me-1"></i>
                {{ __('Preview') }}
            </a>

            <a
                href="{{ route(
                    'admin.knowledge.edit',
                    ['article' => $article]
                ) }}"
                class="btn btn-sm btn-primary"
            >
                <i class="fas fa-edit me-1"></i>
                {{ __('Edit') }}
            </a>

            <form
                action="{{ route(
                    'admin.knowledge.destroy',
                    ['article' => $article]
                ) }}"
                method="POST"
                class="d-inline"
                onsubmit="return confirm('{{ __('Are you sure you want to delete this article? This action cannot be undone.') }}');"
            >
                @csrf
                @method('DELETE')

                <button type="submit" class="btn btn-sm btn-danger">
                    <i class="fas fa-trash me-1"></i>
                    {{ __('Delete') }}
                </button>
            </form>

            <a
                href="{{ route('admin.knowledge.index') }}"
                class="btn btn-sm btn-outline-secondary"
            >
                <i class="fas fa-arrow-left me-1"></i>
                {{ __('Back') }}
            </a>
        </div>
    </div>

    {{-- Messages --}}
    @if(session('success'))
        <div class="alert alert-success alert-dismissible fade show">
            <i class="fas fa-check-circle me-2"></i>
            {{ session('success') }}

            <button
                type="button"
                class="btn-close"
                data-bs-dismiss="alert"
            ></button>
        </div>
    @endif

    @if(session('error'))
        <div class="alert alert-danger alert-dismissible fade show">
            <i class="fas fa-exclamation-circle me-2"></i>
            {{ session('error') }}

            <button
                type="button"
                class="btn-close"
                data-bs-dismiss="alert"
            ></button>
        </div>
    @endif

    {{-- Article information --}}
    <div class="card border-0 shadow-sm mb-4">
        <div class="card-body">
            <div class="row g-3">
                <div class="col-sm-6 col-lg-3">
                    <span class="text-muted small text-uppercase d-block">
                        {{ __('Category') }}
                    </span>

                    <span class="badge bg-secondary mt-1">
                        {{ $article->category?->name ?? __('Uncategorized') }}
                    </span>
                </div>

                <div class="col-sm-6 col-lg-3">
                    <span class="text-muted small text-uppercase d-block">
                        {{ __('Language') }}
                    </span>

                    <span class="badge bg-info text-dark mt-1">
                        {{ $article->language?->name ?? __('N/A') }}
                    </span>
                </div>

                <div class="col-sm-6 col-lg-3">
                    <span class="text-muted small text-uppercase d-block">
                        {{ __('Order') }}
                    </span>

                    <span class="fw-600">
                        {{ $article->content_order }}
                    </span>
                </div>

                <div class="col-sm-6 col-lg-3">
                    <span class="text-muted small text-uppercase d-block">
                        {{ __('Created') }}
                    </span>

                    <span>
                        {{ $article->created_at?->format('M d, Y') ?? __('N/A') }}
                    </span>
                </div>

                <div class="col-12">
                    <span class="text-muted small text-uppercase d-block">
                        {{ __('Slug') }}
                    </span>

                    <code>{{ $article->slug }}</code>
                </div>
            </div>
        </div>
    </div>

    {{-- Statistics --}}
    @php
        $detailStats = [
            [
                'label' => __('Word Count'),
                'value' => number_format(data_get($stats, 'word_count', 0)),
                'icon' => 'fa-file-word',
                'color' => 'primary',
            ],
            [
                'label' => __('Character Count'),
                'value' => number_format(data_get($stats, 'char_count', 0)),
                'icon' => 'fa-font',
                'color' => 'info',
            ],
            [
                'label' => __('Reading Time'),
                'value' => data_get($stats, 'reading_time', 0).' min',
                'icon' => 'fa-book-reader',
                'color' => 'warning',
            ],
            [
                'label' => __('Has Content'),
                'value' => data_get($stats, 'has_content', false)
                    ? __('Yes')
                    : __('No'),
                'icon' => 'fa-check-circle',
                'color' => data_get($stats, 'has_content', false)
                    ? 'success'
                    : 'danger',
            ],
            [
                'label' => __('Age'),
                'value' => data_get($stats, 'age_days', 0).' days',
                'icon' => 'fa-clock',
                'color' => 'secondary',
            ],
            [
                'label' => __('Article Length'),
                'value' => data_get($stats, 'is_long', false)
                    ? __('Long')
                    : __('Standard'),
                'icon' => 'fa-ruler',
                'color' => 'primary',
            ],
        ];
    @endphp

    <div class="row g-3 mb-4">
        @foreach($detailStats as $stat)
            <div class="col-sm-6 col-xl-4">
                <div class="card border-0 shadow-sm h-100">
                    <div class="card-body">
                        <div class="d-flex justify-content-between gap-3">
                            <div>
                                <p class="text-muted mb-1 small fw-600 text-uppercase">
                                    {{ $stat['label'] }}
                                </p>

                                <h5 class="mb-0 fw-700">
                                    {{ $stat['value'] }}
                                </h5>
                            </div>

                            <div class="stat-icon bg-{{ $stat['color'] }} bg-opacity-10">
                                <i class="fas {{ $stat['icon'] }} text-{{ $stat['color'] }}"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        @endforeach
    </div>

    {{-- Content and related articles --}}
    <div class="card border-0 shadow-sm">
        <div class="card-body">
            <ul class="nav nav-tabs nav-tabs-custom mb-3" role="tablist">
                <li class="nav-item">
                    <button
                        class="nav-link active"
                        data-bs-toggle="tab"
                        data-bs-target="#articleContent"
                        type="button"
                    >
                        <i class="fas fa-file-alt me-1"></i>
                        {{ __('Content') }}
                    </button>
                </li>

                @if($relatedArticles->isNotEmpty())
                    <li class="nav-item">
                        <button
                            class="nav-link"
                            data-bs-toggle="tab"
                            data-bs-target="#relatedArticles"
                            type="button"
                        >
                            <i class="fas fa-link me-1"></i>
                            {{ __('Related') }}

                            <span class="badge bg-secondary ms-1">
                                {{ $relatedArticles->count() }}
                            </span>
                        </button>
                    </li>
                @endif
            </ul>

            <div class="tab-content">
                <div
                    class="tab-pane fade show active"
                    id="articleContent"
                >
                    @include('admin.knowledge.partials.tab-content', [
                        'article' => $article,
                    ])
                </div>

                @if($relatedArticles->isNotEmpty())
                    <div
                        class="tab-pane fade"
                        id="relatedArticles"
                    >
                        @include('admin.knowledge.partials.tab-related', [
                            'relatedArticles' => $relatedArticles,
                        ])
                    </div>
                @endif
            </div>
        </div>
    </div>
</div>
@endsection

@push('styles')
<style>
    .fw-600 { font-weight: 600; }
    .fw-700 { font-weight: 700; }

    .stat-icon {
        width: 40px;
        height: 40px;
        flex: 0 0 40px;
        border-radius: 0.65rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .nav-tabs-custom .nav-link {
        color: #6c757d;
        border: 0;
    }

    .nav-tabs-custom .nav-link:hover {
        color: #212529;
        background-color: #f8f9fa;
    }

    .nav-tabs-custom .nav-link.active {
        color: var(--bs-primary);
        background-color: transparent;
        border-bottom: 3px solid var(--bs-primary);
    }
</style>
@endpush