@extends('layouts.master')

@section('page-title', 'Lexa Chat History')

@section('styles')
<style>
    .history-wrap {
        max-width: 1100px;
        margin: 1rem auto;
        padding: 0 1rem;
    }

    .history-header {
        background: linear-gradient(135deg, #0f4c81 0%, #1f75b8 100%);
        border-radius: 14px;
        color: #fff;
        padding: 1.25rem 1.5rem;
        box-shadow: 0 12px 28px rgba(15, 76, 129, 0.18);
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
    }

    .history-header h1 {
        margin: 0;
        font-size: 1.5rem;
    }

    .history-header p {
        margin: 0.35rem 0 0;
        opacity: 0.9;
        font-size: 0.92rem;
    }

    .header-actions {
        display: flex;
        gap: 0.6rem;
        flex-wrap: wrap;
    }

    .history-btn {
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
        text-decoration: none;
        border-radius: 10px;
        padding: 0.55rem 0.85rem;
        font-size: 0.87rem;
        font-weight: 600;
        border: 1px solid rgba(255, 255, 255, 0.45);
        color: #fff;
        background: rgba(255, 255, 255, 0.12);
    }

    .history-btn.primary {
        background: #ffffff;
        color: #0f4c81;
        border-color: #ffffff;
    }

    .history-card {
        margin-top: 1rem;
        border: 1px solid #d9e4ee;
        border-radius: 14px;
        background: #fff;
        box-shadow: 0 8px 24px rgba(17, 39, 59, 0.06);
        overflow: hidden;
    }

    .history-toolbar {
        padding: 1rem;
        border-bottom: 1px solid #e8eef5;
        background: #f8fbff;
    }

    .search-input {
        width: 100%;
        border: 1px solid #c8d8e8;
        border-radius: 10px;
        padding: 0.7rem 0.85rem;
        font-size: 0.92rem;
    }

    .search-input:focus {
        outline: none;
        border-color: #1f75b8;
        box-shadow: 0 0 0 3px rgba(31, 117, 184, 0.15);
    }

    .history-list {
        list-style: none;
        margin: 0;
        padding: 0;
        max-height: 65vh;
        overflow: auto;
    }

    .history-item {
        padding: 0.9rem 1rem;
        border-bottom: 1px solid #eef3f7;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
    }

    .history-item:last-child {
        border-bottom: 0;
    }

    .history-main {
        min-width: 0;
        flex: 1;
    }

    .history-title {
        margin: 0;
        font-weight: 700;
        color: #1b2a39;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .history-meta {
        margin-top: 0.35rem;
        color: #5f7388;
        font-size: 0.82rem;
        display: flex;
        gap: 0.9rem;
        flex-wrap: wrap;
    }

    .open-chat-link {
        text-decoration: none;
        background: #0f4c81;
        color: #fff;
        border-radius: 9px;
        padding: 0.45rem 0.7rem;
        font-size: 0.8rem;
        font-weight: 600;
        white-space: nowrap;
    }

    .empty-state {
        padding: 2.25rem 1rem;
        text-align: center;
        color: #5f7388;
    }

    @media (max-width: 760px) {
        .history-header {
            flex-direction: column;
            align-items: flex-start;
        }

        .history-item {
            flex-direction: column;
            align-items: flex-start;
        }
    }
</style>
@endsection

@section('content')
<div class="history-wrap">
    <div class="history-header">
        <div>
            <h1>Previous Lexa Chats</h1>
            <p>Select any previous chat and continue from where you left off.</p>
        </div>
        <div class="header-actions">
            <a href="{{ route('lexa.index') }}" class="history-btn primary">+ New Chat</a>
            <a href="{{ route('lexa.index') }}" class="history-btn">Back to Lexa</a>
        </div>
    </div>

    <div class="history-card">
        <div class="history-toolbar">
            <input id="historySearch" class="search-input" type="text" placeholder="Search by title, model, or conversation id...">
        </div>

        @if($conversations->isEmpty())
            <div class="empty-state">
                <h3>No previous chats found</h3>
                <p>Once you start chatting with Lexa, your conversations will appear here.</p>
            </div>
        @else
            <ul class="history-list" id="historyList">
                @foreach($conversations as $chat)
                    <li class="history-item" data-search="{{ strtolower(($chat->title ?? '') . ' ' . ($chat->model ?? '') . ' ' . ($chat->conversation_id ?? '')) }}">
                        <div class="history-main">
                            <p class="history-title">{{ $chat->title ?: ('Conversation ' . \Illuminate\Support\Str::limit(($chat->conversation_id ?? ''), 16, '...')) }}</p>
                            <div class="history-meta">
                                <span>ID: {{ $chat->conversation_id }}</span>
                                <span>Model: {{ $chat->model ?: 'N/A' }}</span>
                                <span>Messages: {{ $chat->total_messages ?? 0 }}</span>
                                <span>Updated: {{ $chat->last_message_at ? \Carbon\Carbon::parse($chat->last_message_at)->format('M d, Y H:i') : 'N/A' }}</span>
                            </div>
                        </div>
                        <a href="{{ route('lexa.index') }}?conversation={{ $chat->conversation_id }}" class="open-chat-link">Open Chat</a>
                    </li>
                @endforeach
            </ul>
        @endif
    </div>
</div>
@endsection

@push('scripts')
<script>
    (function () {
        const input = document.getElementById('historySearch');
        const rows = Array.from(document.querySelectorAll('#historyList .history-item'));

        if (!input || rows.length === 0) {
            return;
        }

        input.addEventListener('input', function () {
            const query = this.value.trim().toLowerCase();

            rows.forEach(function (row) {
                const haystack = row.dataset.search || '';
                row.style.display = haystack.includes(query) ? 'flex' : 'none';
            });
        });
    })();
</script>
@endpush