@extends('layouts.front.app')

@section('title', $q ? "Search: {$q} — JotiJournal" : 'Search — JotiJournal')

@section('content')
<section class="breadcrumb-section">
    <div class="container">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb mb-0">
                <li class="breadcrumb-item"><a class="text-muted text-decoration-none" href="{{ route('welcome') }}">Home</a></li>
                <li aria-current="page" class="breadcrumb-item active text-dark">Search</li>
            </ol>
        </nav>
    </div>
</section>

<main class="container py-5">

    <!-- Search Box Card -->
    <div class="premium-search-container animate-up">
        <form action="{{ route('user.search') }}" method="GET" role="search">
            <div class="mb-2">
                <label class="form-label mb-2 fw-bold small text-uppercase opacity-75" for="globalSearchInput">
                    Search
                </label>
                <div class="search-integrated-wrapper">
                    <i class="fa-solid fa-magnifying-glass inner-icon"></i>
                    <input
                        id="globalSearchInput"
                        class="form-control"
                        type="search"
                        name="q"
                        value="{{ $q }}"
                        placeholder='Try "section 32 ipc", "AIR 2024 SC 891", or "specific performance"'
                        autocomplete="off"
                        autofocus>
                    <div class="integrated-controls">
                        <button class="btn-search-integrated" title="Search" type="submit">
                            <i class="fa-solid fa-magnifying-glass"></i>
                        </button>
                    </div>
                </div>
            </div>
        </form>
    </div>

    @if($q === '')
        <div class="text-center py-5">
            <h2 class="h4 font-serif" style="color: var(--legal-blue);">Start typing to search the legal corpus</h2>
            <p class="text-muted mt-2 mb-0">
                Acts, amendments, judgements, articles, circulars, samasya, research articles —
                <em>one search</em>.
            </p>
        </div>
    @else
        <!-- Result metadata -->
        <div class="d-flex justify-content-between align-items-baseline mb-3 flex-wrap gap-2">
            <div class="results-metadata">
                Showing <span class="text-highlight">{{ $total }}</span>
                result{{ $total === 1 ? '' : 's' }} for <span class="text-highlight">"{{ $q }}"</span>
                @if($type)
                    in <span class="text-highlight">{{ $type }}</span>
                @endif
            </div>
            <span class="gs-intent-badge">
                @switch($intent['kind'])
                    @case('section')  <i class="fa-solid fa-section"></i> Section search @break
                    @case('citation') <i class="fa-solid fa-quote-right"></i> Citation lookup @break
                    @case('party')    <i class="fa-solid fa-user-group"></i> Party name @break
                    @default          <i class="fa-solid fa-magnifying-glass"></i> Free-text
                @endswitch
            </span>
        </div>

        @if($intent['kind'] === 'section')
            <div class="alert gs-section-banner mb-4">
                <span>Showing judgements citing</span>&nbsp;<strong>Section {{ $intent['number'] }}</strong>@if($intent['act_hint'])&nbsp;<span>of</span>&nbsp;<strong>{{ $intent['act_hint'] }}</strong>@endif
            </div>
        @endif

        @if($results->isEmpty())
            <div class="gs-empty-state">
                <i class="fa-solid fa-magnifying-glass-minus mb-3"></i>
                <h3 class="h5 font-serif">No results found</h3>
                <p class="text-muted mb-0">
                    Try different keywords, fewer words, or a broader search.
                </p>
            </div>
        @else
            <div class="gs-results-list">
                @php
                    $clean = fn ($s) => trim(html_entity_decode(strip_tags((string) $s), ENT_QUOTES | ENT_HTML5));
                @endphp
                @foreach($results as $r)
                    <a href="{{ $r['url'] }}" class="gs-result-card animate-up">
                        <div class="gs-result-head">
                            <h3 class="gs-result-title font-serif">{{ $clean($r['title']) }}</h3>
                            <span class="gs-type-pill gs-type-{{ strtolower($r['type']) }}">{{ $r['type'] }}</span>
                        </div>

                        @if(!empty($r['subtitle']))
                            <div class="gs-result-citation">{{ $clean($r['subtitle']) }}</div>
                        @endif

                        @if(!empty($r['body']))
                            <p class="gs-result-snippet">
                                {{ \Illuminate\Support\Str::limit($clean($r['body']), 240) }}
                            </p>
                        @endif

                        @php
                            $rawYear   = $r['year'] ?? null;
                            // Journals store a year only; everything else stores YYYY-MM-DD.
                            $pubDate   = ($rawYear && \Illuminate\Support\Str::contains($rawYear, '-'))
                                ? \Illuminate\Support\Carbon::parse($rawYear)->format('d M Y')
                                : $rawYear;
                        @endphp
                        <div class="gs-result-meta">
                            @if(!empty($r['sections']))
                                <span class="gs-meta-item">
                                    <i class="fa-solid fa-section"></i>
                                    {{ implode(' · ', $r['sections']) }}
                                </span>
                            @endif

                            @switch($r['type'])
                                @case('Journal')
                                    @if(!empty($pubDate))
                                        <span class="gs-meta-item"><i class="fa-regular fa-calendar"></i> Pub Year: <strong>{{ $pubDate }}</strong></span>
                                    @endif
                                    @if(!empty($r['extra2']))
                                        <span class="gs-meta-item"><i class="fa-regular fa-bookmark"></i> Vol: <strong>{{ $r['extra2'] }}</strong></span>
                                    @endif
                                    @if(!empty($r['extra1']))
                                        <span class="gs-meta-item"><i class="fa-regular fa-hashtag"></i> Note No: <strong>{{ $r['extra1'] }}</strong></span>
                                    @endif
                                    @if(!empty($r['id']))
                                        <span class="gs-meta-item"><i class="fa-regular fa-id-card"></i> ID: <strong>{{ $r['id'] }}</strong></span>
                                    @endif
                                    @break

                                @case('Article')
                                    @if(!empty($r['extra1']))
                                        <span class="gs-meta-item"><i class="fa-regular fa-user"></i> {{ $r['extra1'] }}</span>
                                    @endif
                                    @if(!empty($pubDate))
                                        <span class="gs-meta-item"><i class="fa-regular fa-calendar"></i> Published: <strong>{{ $pubDate }}</strong></span>
                                    @endif
                                    @if(!empty($r['extra2']))
                                        <span class="gs-meta-item"><i class="fa-solid fa-folder-open"></i> Category: <strong>{{ $r['extra2'] }}</strong></span>
                                    @endif
                                    <span class="gs-meta-item"><i class="fa-regular fa-id-card"></i> ID: <strong>{{ $r['id'] }}</strong></span>
                                    @break

                                @case('Circular')
                                    @if(!empty($r['extra1']))
                                        <span class="gs-meta-item"><i class="fa-regular fa-file-lines"></i> Notification / Circular No: <strong>{{ $r['extra1'] }}</strong></span>
                                    @endif
                                    @if(!empty($pubDate))
                                        <span class="gs-meta-item"><i class="fa-regular fa-calendar"></i> Published: <strong>{{ $pubDate }}</strong></span>
                                    @endif
                                    @if(!empty($r['extra2']))
                                        <span class="gs-meta-item"><i class="fa-solid fa-folder-open"></i> Subject: <strong>{{ $r['extra2'] }}</strong></span>
                                    @endif
                                    <span class="gs-meta-item"><i class="fa-regular fa-id-card"></i> ID: <strong>{{ $r['id'] }}</strong></span>
                                    @break

                                @case('Samasya')
                                    @if(!empty($pubDate))
                                        <span class="gs-meta-item"><i class="fa-regular fa-calendar"></i> Published: <strong>{{ $pubDate }}</strong></span>
                                    @endif
                                    @if(!empty($r['extra1']))
                                        <span class="gs-meta-item"><i class="fa-solid fa-folder-open"></i> Category: <strong>{{ $r['extra1'] }}</strong></span>
                                    @endif
                                    @if(!empty($r['extra2']))
                                        <span class="gs-meta-item"><i class="fa-solid fa-folder-tree"></i> Subcategory: <strong>{{ $r['extra2'] }}</strong></span>
                                    @endif
                                    @break

                                @default
                                    @if(!empty($pubDate))
                                        <span class="gs-meta-item"><i class="fa-regular fa-calendar"></i> {{ $pubDate }}</span>
                                    @endif
                            @endswitch
                        </div>
                    </a>
                @endforeach
            </div>
        @endif
    @endif

</main>

@once
<style>
    .gs-intent-badge {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 4px 12px;
        font-size: .78rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: .05em;
        color: var(--legal-blue);
        background: var(--legal-gold-light);
        border-radius: 999px;
    }
    .gs-intent-badge i { color: var(--legal-gold); }

    .gs-section-banner {
        background: var(--legal-gold-light);
        border: 1px solid rgba(197, 160, 89, .25);
        color: var(--legal-blue);
        border-radius: 10px;
        padding: .85rem 1.25rem;
        font-size: .92rem;
    }

    .gs-empty-state {
        text-align: center;
        padding: 4rem 1rem;
        background: #fff;
        border-radius: 12px;
        box-shadow: var(--premium-shadow);
        border: 1px solid rgba(226, 232, 240, .6);
    }
    .gs-empty-state i { font-size: 2.5rem; color: var(--legal-gold); opacity: .55; }

    .gs-results-list { display: flex; flex-direction: column; gap: 1rem; }

    .gs-result-card {
        display: block;
        background: #fff;
        border: 1px solid rgba(226, 232, 240, .7);
        border-radius: 12px;
        padding: 1.25rem 1.5rem;
        text-decoration: none;
        color: inherit;
        box-shadow: var(--premium-shadow);
        transition: transform .2s ease, box-shadow .25s ease;
    }
    .gs-result-card:hover {
        transform: translateY(-2px);
        box-shadow: var(--premium-shadow-ho);
        color: inherit;
        text-decoration: none;
    }

    .gs-result-head {
        display: flex;
        justify-content: space-between;
        align-items: start;
        gap: 1rem;
        margin-bottom: .35rem;
    }
    .gs-result-title {
        margin: 0;
        font-size: 1.1rem;
        font-weight: 700;
        color: var(--legal-blue);
        line-height: 1.35;
        flex: 1;
    }

    .gs-type-pill {
        display: inline-flex;
        align-items: center;
        font-size: .68rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .06em;
        padding: 3px 10px;
        border-radius: 999px;
        white-space: nowrap;
        background: var(--legal-gold-light);
        color: var(--legal-blue);
        border: 1px solid rgba(197, 160, 89, .3);
    }
    .gs-type-journal      { background: rgba(15, 23, 42, .08);  color: var(--legal-blue);  border-color: rgba(15, 23, 42, .15); }
    .gs-type-article      { background: rgba(197, 160, 89, .12); color: var(--legal-blue);  border-color: rgba(197, 160, 89, .35); }
    .gs-type-circular     { background: rgba(2, 132, 199, .08);  color: #075985;            border-color: rgba(2, 132, 199, .25); }
    .gs-type-amendement   { background: rgba(217, 119, 6, .1);   color: #92400e;            border-color: rgba(217, 119, 6, .25); }
    .gs-type-act          { background: rgba(99, 102, 241, .1);  color: #3730a3;            border-color: rgba(99, 102, 241, .25); }
    .gs-type-samasya      { background: rgba(16, 185, 129, .1);  color: #065f46;            border-color: rgba(16, 185, 129, .25); }
    .gs-type-researcharticle { background: rgba(139, 92, 246, .1); color: #5b21b6; border-color: rgba(139, 92, 246, .25); }

    .gs-result-citation {
        font-family: 'Libre Baskerville', serif;
        font-style: italic;
        font-size: .85rem;
        color: var(--legal-slate);
        margin-bottom: .5rem;
    }
    .gs-result-snippet {
        margin: 0;
        font-size: .92rem;
        line-height: 1.55;
        color: #334155;
    }
    .gs-result-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 14px;
        margin-top: .85rem;
        padding-top: .75rem;
        border-top: 1px dashed rgba(15, 23, 42, .08);
    }
    .gs-meta-item {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-size: .8rem;
        color: var(--legal-slate);
    }
    .gs-meta-item i { color: var(--legal-gold); font-size: .85rem; }

    /* Dark mode */
    [data-bs-theme="dark"] .gs-empty-state,
    [data-bs-theme="dark"] .gs-result-card {
        background: var(--bs-card-bg);
        border-color: var(--bs-border-color);
        color: var(--bs-body-color);
    }
    [data-bs-theme="dark"] .gs-result-title { color: var(--bs-body-color); }
    [data-bs-theme="dark"] .gs-result-snippet { color: rgba(255,255,255,.75); }
    [data-bs-theme="dark"] .gs-result-citation,
    [data-bs-theme="dark"] .gs-meta-item { color: rgba(255,255,255,.6); }
    [data-bs-theme="dark"] .gs-result-meta { border-top-color: rgba(255,255,255,.1); }
    [data-bs-theme="dark"] .gs-section-banner {
        background: rgba(197, 160, 89, .12);
        border-color: rgba(197, 160, 89, .3);
        color: var(--bs-body-color);
    }
    /* Type pills — dark mode: lighter hue text on tinted backgrounds */
    [data-bs-theme="dark"] .gs-type-journal {
        background: rgba(203, 213, 225, .12);
        color: #cbd5e1;
        border-color: rgba(203, 213, 225, .25);
    }
    [data-bs-theme="dark"] .gs-type-article {
        background: rgba(197, 160, 89, .18);
        color: #fcd9a4;
        border-color: rgba(197, 160, 89, .4);
    }
    [data-bs-theme="dark"] .gs-type-circular {
        background: rgba(56, 189, 248, .12);
        color: #7dd3fc;
        border-color: rgba(56, 189, 248, .3);
    }
    [data-bs-theme="dark"] .gs-type-amendement {
        background: rgba(251, 191, 36, .12);
        color: #fcd34d;
        border-color: rgba(251, 191, 36, .3);
    }
    [data-bs-theme="dark"] .gs-type-act {
        background: rgba(129, 140, 248, .14);
        color: #a5b4fc;
        border-color: rgba(129, 140, 248, .3);
    }
    [data-bs-theme="dark"] .gs-type-samasya {
        background: rgba(52, 211, 153, .12);
        color: #6ee7b7;
        border-color: rgba(52, 211, 153, .3);
    }
    [data-bs-theme="dark"] .gs-type-researcharticle {
        background: rgba(167, 139, 250, .14);
        color: #c4b5fd;
        border-color: rgba(167, 139, 250, .3);
    }
    [data-bs-theme="dark"] .gs-intent-badge {
        background: rgba(197, 160, 89, .12);
        color: #fcd9a4;
    }

    @media (max-width: 575.98px) {
        .gs-result-head { flex-direction: column; align-items: start; }
    }
</style>
@endonce
@endsection