@extends('layouts.app')

@section('content')
@php
    $isNotificationsTab = $activeTab === 'notifications';
    $hasExplicitConversation = filled(request()->query('conversation'));
    $showMobileConversation = ! $isNotificationsTab && $hasExplicitConversation && filled($selectedConversation);

    $messageTabParams = ['tab' => 'messages'];
    if ($hasExplicitConversation && $selectedConversationKey) {
        $messageTabParams['conversation'] = $selectedConversationKey;
    }

    $messageTabUrl = route('messages.index', $messageTabParams);
    $messageListUrl = route('messages.index', ['tab' => 'messages']);
    $noticeTabUrl = route('messages.index', ['tab' => 'notifications']);
@endphp

<style>
    .message-hub-shell {
        padding: 0.75rem 1rem 1rem;
        display: flex;
        align-items: flex-start;
        justify-content: center;
        background: #f7f6f4;
    }

    .message-hub-card {
        width: min(1120px, 100%);
        height: min(calc(100vh - 175px), 600px);
        min-height: 520px;
        display: flex;
        flex-direction: column;
        background: #fff;
        border: 1px solid rgba(31, 27, 23, 0.06);
        border-radius: 1.35rem;
        box-shadow: 0 18px 45px rgba(31, 27, 23, 0.08);
        overflow: hidden;
    }

    .message-hub-tabs {
        display: flex;
        align-items: center;
        gap: 1.5rem;
        padding: 1rem 1.7rem 0;
        border-bottom: 1px solid rgba(31, 27, 23, 0.08);
        flex-shrink: 0;
    }

    .message-hub-tab {
        position: relative;
        display: inline-flex;
        align-items: center;
        min-height: 3rem;
        padding: 0 0 0.95rem;
        color: #a4a1a6;
        font-size: 1rem;
        font-weight: 700;
        text-decoration: none;
        transition: color 0.2s ease;
    }

    .message-hub-tab:hover,
    .message-hub-tab:focus {
        color: #17141a;
    }

    .message-hub-tab.is-active {
        color: #17141a;
    }

    .message-hub-tab.is-active::after {
        content: "";
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
        height: 3px;
        border-radius: 999px;
        background: #17141a;
    }

    .message-hub-body {
        flex: 1;
        min-height: 0;
    }

    .message-layout {
        display: grid;
        grid-template-columns: minmax(300px, 360px) minmax(0, 1fr);
        height: 100%;
        min-height: 0;
    }

    .message-sidebar {
        border-right: 1px solid rgba(31, 27, 23, 0.08);
        background: #fff;
        min-height: 0;
    }

    .message-thread-list {
        height: 100%;
        overflow-y: auto;
        padding: 0.9rem;
    }

    .message-thread-link {
        display: block;
        padding: 0.9rem;
        border-radius: 0.95rem;
        text-decoration: none;
        background: #f7f7f7;
        border: 1px solid transparent;
        transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
    }

    .message-thread-link + .message-thread-link {
        margin-top: 0.85rem;
    }

    .message-thread-link:hover,
    .message-thread-link:focus {
        transform: translateY(-1px);
        border-color: rgba(201, 142, 74, 0.28);
        background: #fbfaf8;
    }

    .message-thread-link.is-active {
        border-color: rgba(31, 27, 23, 0.08);
        background: #fcfbf9;
        box-shadow: 0 8px 18px rgba(31, 27, 23, 0.06);
    }

    .message-thread-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
        margin-bottom: 0.45rem;
    }

    .message-thread-name {
        color: #201b17;
        font-size: 0.98rem;
        font-weight: 700;
    }

    .message-thread-time {
        color: #9f9aa2;
        font-size: 0.78rem;
        white-space: nowrap;
    }

    .message-thread-meta {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
        margin-top: 0.7rem;
    }

    .message-thread-subscription {
        color: #9a7a55;
        font-size: 0.78rem;
        font-weight: 700;
    }

    .message-thread-count {
        min-width: 1.7rem;
        height: 1.7rem;
        padding: 0 0.45rem;
        border-radius: 999px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: rgba(201, 142, 74, 0.14);
        color: #b67c39;
        font-size: 0.75rem;
        font-weight: 700;
    }

    .message-thread-snippet {
        color: #6d6872;
        font-size: 0.88rem;
        line-height: 1.55;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .message-skeleton-list {
        padding: 0.9rem;
    }

    .message-skeleton-item {
        height: 2.9rem;
        border-radius: 0.95rem;
        background: linear-gradient(90deg, #f4f3f1 0%, #fbfaf8 50%, #f4f3f1 100%);
        background-size: 200% 100%;
        animation: message-placeholder 1.8s ease-in-out infinite;
    }

    .message-skeleton-item + .message-skeleton-item {
        margin-top: 1.1rem;
    }

    .message-skeleton-note {
        margin: 1rem 1rem 0;
        color: #97939a;
        font-size: 0.9rem;
        text-align: center;
    }

    @keyframes message-placeholder {
        0% {
            background-position: 200% 0;
        }

        100% {
            background-position: -200% 0;
        }
    }

    .message-panel {
        background: #fff;
        display: flex;
        flex-direction: column;
        min-height: 0;
    }

    .message-panel-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        padding: 1rem 1.25rem;
        border-bottom: 1px solid rgba(31, 27, 23, 0.08);
        flex-shrink: 0;
    }

    .message-panel-title {
        color: #201b17;
        font-size: 1rem;
        font-weight: 700;
    }

    .message-panel-heading {
        min-width: 0;
    }

    .message-mobile-back {
        display: none;
        min-width: 2.5rem;
        height: 2.5rem;
        border-radius: 999px;
        align-items: center;
        justify-content: center;
        background: #f6f3ef;
        color: #2e2825;
        text-decoration: none;
        flex-shrink: 0;
    }

    .message-panel-subtitle {
        margin-top: 0.2rem;
        color: #9a7a55;
        font-size: 0.82rem;
    }

    .message-panel-body {
        flex: 1;
        min-height: 0;
        padding: 1rem 1.25rem;
        overflow-y: auto;
        background: #fff;
    }

    .message-bubble-wrap {
        display: flex;
        margin-bottom: 0.85rem;
    }

    .message-bubble-wrap.is-mine {
        justify-content: flex-end;
    }

    .message-bubble {
        max-width: min(78%, 34rem);
        padding: 0.8rem 0.95rem;
        border-radius: 1rem;
        background: #f6f6f6;
        color: #2e2825;
        box-shadow: 0 6px 18px rgba(31, 27, 23, 0.04);
    }

    .message-bubble-wrap.is-mine .message-bubble {
        background: linear-gradient(180deg, #d49a55 0%, #b56f2a 100%);
        color: #fffefb;
    }

    .message-bubble-name {
        font-size: 0.76rem;
        font-weight: 700;
        letter-spacing: 0.01em;
        opacity: 0.74;
        margin-bottom: 0.45rem;
    }

    .message-bubble-text {
        white-space: pre-wrap;
        line-height: 1.6;
        font-size: 0.94rem;
    }

    .message-bubble-time {
        margin-top: 0.55rem;
        font-size: 0.74rem;
        opacity: 0.7;
        text-align: right;
    }

    .message-composer {
        padding: 0.9rem 1.25rem 1.1rem;
        border-top: 1px solid rgba(31, 27, 23, 0.08);
        background: #fff;
        flex-shrink: 0;
    }

    .message-composer form {
        display: flex;
        align-items: center;
        gap: 0.85rem;
    }

    .message-composer .mb-3 {
        flex: 1 1 auto;
        margin-bottom: 0 !important;
    }

    .message-composer textarea.form-control {
        height: 3.15rem;
        min-height: 3.15rem;
        max-height: 6.75rem;
        padding: 0.72rem 1rem;
        border-radius: 1rem;
        border-color: rgba(201, 142, 74, 0.2);
        resize: none;
        box-shadow: none;
        line-height: 1.45;
        overflow-y: auto;
    }

    .message-composer textarea.form-control:focus {
        border-color: rgba(201, 142, 74, 0.45);
    }

    .message-composer .btn {
        min-height: 3.15rem;
        padding-inline: 1.3rem;
        border-radius: 1rem;
        background: linear-gradient(180deg, #d49a55 0%, #b56f2a 100%);
        border: 0;
        box-shadow: 0 12px 22px rgba(181, 111, 42, 0.22);
        align-self: center;
        white-space: nowrap;
    }

    .message-empty-state,
    .notification-empty-state {
        min-height: 100%;
        padding: 2rem;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    .message-empty-box,
    .notification-empty-box {
        max-width: 25rem;
        color: #5f5a61;
    }

    .message-empty-box svg,
    .notification-empty-box svg {
        width: min(13rem, 48vw);
        height: auto;
        color: #ebe7e0;
    }

    .message-empty-title,
    .notification-empty-title {
        margin-top: 1rem;
        color: #514a51;
        font-size: 1.2rem;
        font-weight: 700;
    }

    .message-empty-copy,
    .notification-empty-copy {
        margin-top: 0.45rem;
        color: #8b858d;
        line-height: 1.65;
    }

    .notification-pane {
        display: flex;
        flex-direction: column;
        background: #fff;
        height: 100%;
        min-height: 0;
    }

    .notification-list {
        flex: 1;
        overflow-y: auto;
        padding: 1.1rem 1.25rem;
    }

    .notification-item {
        padding: 1rem 1.05rem;
        border: 1px solid rgba(31, 27, 23, 0.08);
        border-radius: 1rem;
        background: #fcfbfa;
    }

    .notification-item + .notification-item {
        margin-top: 0.9rem;
    }

    .notification-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
        margin-bottom: 0.45rem;
    }

    .notification-title {
        color: #231d1a;
        font-weight: 700;
    }

    .notification-time {
        color: #9f9aa2;
        font-size: 0.8rem;
        white-space: nowrap;
    }

    .notification-text {
        color: #625d65;
        line-height: 1.6;
    }

    .notification-badge {
        margin-top: 0.75rem;
        display: inline-flex;
        align-items: center;
        min-height: 1.8rem;
        padding: 0 0.7rem;
        border-radius: 999px;
        background: rgba(201, 142, 74, 0.14);
        color: #b67c39;
        font-size: 0.76rem;
        font-weight: 700;
    }

    @media (max-width: 991.98px) {
        body.user-theme .floating-chat-btn {
            display: inline-flex !important;
            right: 1rem;
            bottom: calc(6rem + env(safe-area-inset-bottom, 0px));
        }

        .message-hub-shell {
            padding: 0.65rem 0.65rem 0.8rem;
        }

        .message-hub-card {
            height: calc(100vh - 124px);
            min-height: 0;
        }

        .message-layout {
            grid-template-columns: 1fr;
            height: 100%;
        }

        .message-sidebar {
            border-right: 0;
            border-bottom: 0;
        }

        .message-thread-list {
            max-height: none;
        }

        .message-panel-body {
            min-height: 0;
        }

        .message-layout:not(.is-mobile-thread-open) .message-panel {
            display: none;
        }

        .message-layout.is-mobile-thread-open .message-sidebar {
            display: none;
        }

        .message-layout.is-mobile-thread-open .message-panel {
            min-height: 100%;
        }

        .message-layout.is-mobile-thread-open .message-composer {
            margin-bottom: calc(5.25rem + env(safe-area-inset-bottom, 0px));
        }

        .message-mobile-back {
            display: inline-flex;
        }

        .message-panel-header {
            padding: 0.9rem 1rem;
            gap: 0.75rem;
        }

        .message-panel-subtitle {
            display: none;
        }

        .message-composer textarea.form-control {
            height: 2.75rem;
            min-height: 2.75rem;
            max-height: 5.75rem;
            padding-top: 0.62rem;
            padding-bottom: 0.62rem;
            padding-inline: 0.9rem;
            border-radius: 0.85rem;
            line-height: 1.4;
            resize: none;
            overflow-y: auto;
        }

        .message-composer .btn {
            min-height: 2.85rem;
            padding-inline: 1rem;
            border-radius: 0.85rem;
            white-space: nowrap;
            align-self: center;
        }

        .message-thread-subscription {
            display: none;
        }
    }

    @media (max-width: 575.98px) {
        body.user-theme .floating-chat-btn {
            right: 0.95rem;
            bottom: calc(5.8rem + env(safe-area-inset-bottom, 0px));
        }

        .message-hub-shell {
            min-height: auto;
            padding: 0.5rem 0.5rem 0.7rem;
        }

        .message-hub-card {
            height: calc(100vh - 112px);
            min-height: 0;
            border-radius: 1.1rem;
        }

        .message-hub-tabs {
            gap: 1.15rem;
            padding-inline: 1rem;
        }

        .message-panel-header,
        .message-panel-body,
        .message-composer,
        .notification-list {
            padding-inline: 1rem;
        }

        .message-thread-list {
            padding: 0.8rem;
        }

        .message-thread-link {
            padding: 0.85rem;
        }

        .message-panel-title {
            font-size: 0.96rem;
        }

        .message-composer {
            padding-top: 0.8rem;
            padding-bottom: 0.8rem;
        }

        .message-layout.is-mobile-thread-open .message-composer {
            margin-bottom: calc(5rem + env(safe-area-inset-bottom, 0px));
        }

        .message-thread-name,
        .message-thread-time,
        .message-bubble-text,
        .message-composer textarea.form-control,
        .message-composer .btn {
            font-size: 0.9rem;
        }

        .message-composer textarea.form-control {
            height: 2.55rem;
            min-height: 2.55rem;
            max-height: 5.1rem;
            padding-top: 0.5rem;
            padding-bottom: 0.5rem;
            border-radius: 0.78rem;
        }

        .message-composer .btn {
            min-height: 2.55rem;
            padding-inline: 0.9rem;
            border-radius: 0.78rem;
        }

        .message-bubble {
            max-width: 100%;
        }
    }
</style>

<div class="container-xxl flex-grow-1 container-p-y message-hub-shell">
    <div class="message-hub-card">
        <div class="message-hub-tabs">
            <a href="{{ $messageTabUrl }}" class="message-hub-tab {{ $isNotificationsTab ? '' : 'is-active' }}">
                Messages
            </a>
            <a href="{{ $noticeTabUrl }}" class="message-hub-tab {{ $isNotificationsTab ? 'is-active' : '' }}">
                Notifications
            </a>
        </div>

        <div class="message-hub-body">
            @if($isNotificationsTab)
                <div class="notification-pane">
                    @if($notifications->isEmpty())
                        <div class="notification-empty-state">
                            <div class="notification-empty-box">
                                <svg viewBox="0 0 160 170" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                                    <path d="M80 22C92.15 22 102 31.85 102 44V49.16C102 62.29 107.08 74.92 116.18 84.38L123.54 92.04C126.77 95.4 124.39 101 119.73 101H40.27C35.61 101 33.23 95.4 36.46 92.04L43.82 84.38C52.92 74.92 58 62.29 58 49.16V44C58 31.85 67.85 22 80 22Z" fill="currentColor"/>
                                    <path d="M66 117C67.65 126.56 73.14 131 80 131C86.86 131 92.35 126.56 94 117" stroke="currentColor" stroke-width="10" stroke-linecap="round"/>
                                    <path d="M112 13L123 13" stroke="currentColor" stroke-width="7" stroke-linecap="round"/>
                                    <path d="M116 31L127 31" stroke="currentColor" stroke-width="7" stroke-linecap="round"/>
                                    <path d="M124 49L135 49" stroke="currentColor" stroke-width="7" stroke-linecap="round"/>
                                </svg>
                                <div class="notification-empty-title">No notifications</div>
                                <div class="notification-empty-copy">New updates and alerts will appear here.</div>
                            </div>
                        </div>
                    @else
                        <div class="notification-list">
                            @foreach($notifications as $notification)
                                @php
                                    $data = is_array($notification->data) ? $notification->data : [];
                                    $notificationTitle = $data['title'] ?? $data['message'] ?? class_basename($notification->type);
                                    $notificationText = $data['body'] ?? $data['description'] ?? $data['message'] ?? 'You have a new notification.';
                                @endphp
                                <div class="notification-item">
                                    <div class="notification-top">
                                        <div class="notification-title">{{ $notificationTitle }}</div>
                                        <div class="notification-time">{{ $notification->created_at?->diffForHumans() }}</div>
                                    </div>
                                    <div class="notification-text">{{ $notificationText }}</div>
                                    @if(is_null($notification->read_at))
                                        <span class="notification-badge">Unread</span>
                                    @endif
                                </div>
                            @endforeach
                        </div>
                    @endif
                </div>
            @else
                <div class="message-layout {{ $showMobileConversation ? 'is-mobile-thread-open' : '' }}">
                    <aside class="message-sidebar">
                        @if($conversations->isEmpty())
                            <div class="message-skeleton-list">
                                @for($i = 0; $i < 5; $i++)
                                    <div class="message-skeleton-item"></div>
                                @endfor
                            </div>
                            <div class="message-skeleton-note">Chats will appear here when someone joins your package or when you subscribe to someone else's package.</div>
                        @else
                            <div class="message-thread-list">
                                @foreach($conversations as $conversation)
                                    @php
                                        $conversationUrl = route('messages.index', array_filter([
                                            'tab' => 'messages',
                                            'conversation' => $conversation['key'],
                                        ], fn ($value) => filled($value)));
                                    @endphp
                                    <a href="{{ $conversationUrl }}" class="message-thread-link {{ $selectedConversationKey === $conversation['key'] ? 'is-active' : '' }}">
                                        <div class="message-thread-top">
                                            <div class="message-thread-name">{{ $conversation['partner_name'] }}</div>
                                            <div class="message-thread-time">{{ $conversation['latest_at']?->diffForHumans() }}</div>
                                        </div>
                                        <div class="message-thread-snippet">{{ $conversation['latest_message'] }}</div>
                                        <div class="message-thread-meta">
                                            <div class="message-thread-subscription">{{ $conversation['partner_role'] }} - {{ $conversation['subscription_label'] }}</div>
                                            @if($conversation['message_count'] > 0)
                                                <span class="message-thread-count">{{ $conversation['message_count'] }}</span>
                                            @endif
                                        </div>
                                    </a>
                                @endforeach
                            </div>
                        @endif
                    </aside>

                    <section class="message-panel">
                        @if($selectedConversation)
                            <div class="message-panel-header">
                                <a href="{{ $messageListUrl }}" class="message-mobile-back" aria-label="Back to chats">
                                    <i class="fa-solid fa-chevron-left"></i>
                                </a>
                                <div class="message-panel-heading">
                                    <div class="message-panel-title">{{ $selectedConversation['partner_name'] }}</div>
                                    <div class="message-panel-subtitle">{{ $selectedConversation['partner_role'] }} - {{ $selectedConversation['subscription_label'] }}</div>
                                </div>
                                <div class="message-thread-time">{{ $selectedConversation['latest_at']?->format('d M Y, h:i A') }}</div>
                            </div>

                            <div class="message-panel-body">
                                @foreach($selectedConversation['messages'] as $message)
                                    <div class="message-bubble-wrap {{ $message->sender_id === auth()->id() ? 'is-mine' : '' }}">
                                        <div class="message-bubble">
                                            <div class="message-bubble-name">
                                                {{ $message->sender_id === auth()->id() ? 'You' : ($message->sender->name ?? 'Unknown') }}
                                            </div>
                                            <div class="message-bubble-text">{{ $message->message }}</div>
                                            <div class="message-bubble-time">{{ $message->created_at->format('d M, h:i A') }}</div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>

                            <div class="message-composer">
                                <form method="POST" action="{{ route('messages.store') }}">
                                    @csrf
                                    <input type="hidden" name="shared_subscription_id" value="{{ $selectedConversation['shared_subscription_id'] }}">
                                    <input type="hidden" name="receiver_id" value="{{ $selectedConversation['partner_id'] }}">
                                    <div class="mb-3">
                                        <textarea name="message" rows="4" class="form-control" placeholder="Write a message to {{ $selectedConversation['partner_name'] }}..." required>{{ old('message') }}</textarea>
                                    </div>
                                    <button class="btn btn-primary" type="submit">Send message</button>
                                </form>
                            </div>
                        @else
                            <div class="message-empty-state">
                                <div class="message-empty-box">
                                    <svg viewBox="0 0 220 180" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                                        <path d="M113.48 33C80.87 33 54.44 55.98 54.44 84.33C54.44 95.34 58.39 105.55 65.13 114L60.12 142.52L88.14 128.14C95.9 132 104.45 134.1 113.48 134.1C146.09 134.1 172.52 111.12 172.52 82.77C172.52 54.42 146.09 33 113.48 33Z" fill="currentColor"/>
                                        <path d="M58.65 111.5C42.57 111.5 29.54 122.33 29.54 135.69C29.54 140.82 31.37 145.57 34.51 149.49L32.17 163L46 156.16C49.82 158 54.01 159 58.65 159C74.73 159 87.76 148.17 87.76 134.81C87.76 121.45 74.73 111.5 58.65 111.5Z" fill="currentColor" opacity="0.75"/>
                                        <circle cx="93" cy="83" r="8.5" fill="#cbc5bd"/>
                                        <circle cx="116" cy="83" r="8.5" fill="#cbc5bd"/>
                                        <circle cx="139" cy="83" r="8.5" fill="#cbc5bd"/>
                                        <circle cx="49.5" cy="135" r="5.5" fill="#cbc5bd"/>
                                        <circle cx="61.5" cy="135" r="5.5" fill="#cbc5bd"/>
                                        <circle cx="73.5" cy="135" r="5.5" fill="#cbc5bd"/>
                                        <ellipse cx="112" cy="169" rx="47" ry="7" fill="#f1eeea"/>
                                    </svg>
                                    <div class="message-empty-title">Select a conversation</div>
                                    <div class="message-empty-copy">Open an owner or subscriber conversation from the left. Only chats linked to your subscribed package relationships appear here.</div>
                                </div>
                            </div>
                        @endif
                    </section>
                </div>
            @endif
        </div>
    </div>
</div>
@endsection