@extends('layouts.app')

@section('content')
<div
    class="updates-page"
    x-data="statusApp(@js([
        'feed' => $feed,
        'authUser' => [
            'id' => $user->id,
            'name' => $user->name,
            'avatar' => $user->avatarUrl(),
        ],
        'privacyOptions' => $privacyOptions,
        'reactions' => $reactions,
        'backgroundColors' => $backgroundColors,
        'fontStyles' => $fontStyles,
        'routes' => [
            'store' => route('gc.status.store'),
            'feed' => route('gc.status.feed'),
            'followList' => route('gc.follow.list'),
            'followCounts' => route('gc.follow.counts'),
        ],
        'followCounts' => $followCounts,
        'statusDefaults' => $statusDefaults,
        'messageChats' => collect($messageChats ?? [])->map(function ($chat) {
            $partner = $chat['partner'];
            return [
                'partner' => [
                    'id' => $partner->id,
                    'name' => $partner->name,
                    'avatar' => $partner->avatarUrl(),
                    'online' => $partner->isOnlineNow(),
                ],
                'conversation_id' => $chat['conversation']->id,
                'unread' => $chat['unread'],
                'preview' => $chat['preview'] ?? '',
                'last_message_at' => $chat['last_message_at']
                    ? \App\Support\DateFormat::utcIso($chat['last_message_at'])
                    : null,
                'pinned' => $chat['pinned'],
            ];
        })->values(),
    ]))"
    @keydown.escape.window="closeViewer()"
>
    @if (session('status'))
        <div class="flash-toast" data-flash>{{ session('status') }}</div>
    @endif

    <header class="updates-header">
        <div class="updates-header-start">
            <a href="{{ route('gc.dashboard') }}" class="back-link" aria-label="Back"><i class="fa-solid fa-arrow-left"></i></a>
            <h1>Updates</h1>
        </div>
        <div class="updates-header-actions">
            <button type="button" class="icon-btn" @click="openCreate()" title="New status">
                <i class="fa-solid fa-camera"></i>
            </button>
        </div>
    </header>

    <section class="updates-section updates-status-rings">
        <h2 class="updates-section-title updates-status-heading">Status</h2>
        <div class="status-rings-scroll" role="list" aria-label="Status updates">
            <button
                type="button"
                class="status-ring-chip status-ring-chip--mine"
                role="listitem"
                @click="myStatuses.length ? openViewer('mine', authUser.id) : openCreate()"
                title="My status"
            >
                <div class="status-wa-card-visual">
                    <div
                        class="status-ring-wrap"
                        :class="{ 'has-status': myStatuses.length }"
                        x-ref="myStatusRing"
                        x-effect="paintMyStatusRing()"
                    >
                        <div class="status-ring-inner" :class="{ 'status-ring-inner--empty': !myStatuses.length }">
                            <template x-if="latestMyStatus()">
                                <div>
                                    <template x-if="latestMyStatus().type === 'text'">
                                        <div
                                            class="status-ring-preview status-ring-preview-text"
                                            :style="{
                                                background: latestMyStatus().background_color || '#128C7E',
                                                color: latestMyStatus().text_color || '#ffffff',
                                                fontFamily: latestMyStatus().font_style || 'sans-serif',
                                            }"
                                            x-text="statusPreviewText(latestMyStatus())"
                                        ></div>
                                    </template>
                                    <template x-if="latestMyStatus().type === 'image'">
                                        <div class="status-ring-preview">
                                            <img :src="latestMyStatus().media_url" alt="" loading="lazy">
                                        </div>
                                    </template>
                                    <template x-if="latestMyStatus().type === 'video'">
                                        <div class="status-ring-preview">
                                            <img :src="latestMyStatus().media_url" alt="" loading="lazy" x-show="latestMyStatus().media_url">
                                            <span class="status-ring-preview-video"><i class="fa-solid fa-play"></i></span>
                                        </div>
                                    </template>
                                    <template x-if="latestMyStatus().type === 'audio'">
                                        <div class="status-ring-preview status-ring-preview-audio">
                                            <i class="fa-solid fa-microphone"></i>
                                        </div>
                                    </template>
                                </div>
                            </template>
                            <template x-if="!myStatuses.length">
                                <img src="{{ $user->avatarUrl() }}" alt="" class="status-ring-avatar status-ring-avatar--solo">
                            </template>
                        </div>
                        <svg class="status-ring-segments" viewBox="0 0 64 64" aria-hidden="true" x-show="myStatuses.length"></svg>
                        <img
                            src="{{ $user->avatarUrl() }}"
                            alt=""
                            class="status-ring-avatar status-ring-avatar--top"
                            x-show="myStatuses.length"
                        >
                        <span class="status-add-badge" x-show="!myStatuses.length"><i class="fa-solid fa-plus"></i></span>
                        <span class="status-add-badge status-add-more" x-show="myStatuses.length" @click.stop="openCreate()" title="Add status">
                            <i class="fa-solid fa-plus"></i>
                        </span>
                    </div>
                </div>
                <span class="status-ring-chip-label">My status</span>
                <span class="status-ring-chip-meta" x-show="myStatuses.length" x-text="`${myStatuses.length} update${myStatuses.length === 1 ? '' : 's'}`"></span>
            </button>

            <template x-for="(row, idx) in filteredRingStatusUsers" :key="'ring-' + row.user.id">
                <button
                    type="button"
                    class="status-ring-chip"
                    role="listitem"
                    :title="row.user.name"
                    @click="openViewer(row.mode, row.user.id)"
                >
                    <div class="status-wa-card-visual">
                        <div
                            class="status-ring-wrap has-status"
                            :class="{ 'viewed': row.mode === 'viewed' || row.mode === 'muted' || row.unviewed_count === 0 }"
                            :data-status-ring-user="row.user.id"
                            x-init="paintStatusRing($el, row)"
                            x-effect="paintStatusRing($el, row)"
                        >
                            <div class="status-ring-inner">
                                <template x-if="latestStatusFromRow(row)">
                                    <div>
                                        <template x-if="latestStatusFromRow(row).type === 'text'">
                                            <div
                                                class="status-ring-preview status-ring-preview-text"
                                                :style="{
                                                    background: latestStatusFromRow(row).background_color || '#128C7E',
                                                    color: latestStatusFromRow(row).text_color || '#ffffff',
                                                    fontFamily: latestStatusFromRow(row).font_style || 'sans-serif',
                                                }"
                                                x-text="statusPreviewText(latestStatusFromRow(row))"
                                            ></div>
                                        </template>
                                        <template x-if="latestStatusFromRow(row).type === 'image'">
                                            <div class="status-ring-preview">
                                                <img :src="latestStatusFromRow(row).media_url" alt="" loading="lazy">
                                            </div>
                                        </template>
                                        <template x-if="latestStatusFromRow(row).type === 'video'">
                                            <div class="status-ring-preview">
                                                <img :src="latestStatusFromRow(row).media_url" alt="" loading="lazy" x-show="latestStatusFromRow(row).media_url">
                                                <span class="status-ring-preview-video"><i class="fa-solid fa-play"></i></span>
                                            </div>
                                        </template>
                                        <template x-if="latestStatusFromRow(row).type === 'audio'">
                                            <div class="status-ring-preview status-ring-preview-audio">
                                                <i class="fa-solid fa-microphone"></i>
                                            </div>
                                        </template>
                                    </div>
                                </template>
                            </div>
                            <svg class="status-ring-segments" viewBox="0 0 64 64" aria-hidden="true"></svg>
                            <img :src="row.user.avatar" :alt="row.user.name" class="status-ring-avatar status-ring-avatar--top">
                            <span class="status-ring-unread-badge" x-show="row.unviewed_count > 0" x-text="row.unviewed_count"></span>
                        </div>
                    </div>
                    <span class="status-ring-chip-label" x-text="statusFirstName(row.user.name)"></span>
                    <span class="status-ring-chip-meta" x-text="row.latest_human || ''"></span>
                </button>
            </template>
        </div>
    </section>

    <div class="updates-search-wrap">
        <label class="updates-search-box">
            <i class="fa-solid fa-magnifying-glass" aria-hidden="true"></i>
            <input
                type="search"
                x-model="updatesSearch"
                @input.debounce.200ms="onUpdatesSearchInput()"
                placeholder="Search updates and chats"
                autocomplete="off"
                aria-label="Search updates and chats"
            >
            <button
                type="button"
                class="updates-search-clear"
                x-show="updatesSearch.trim()"
                @click="updatesSearch = ''; onUpdatesSearchInput()"
                aria-label="Clear search"
            >
                <i class="fa-solid fa-xmark"></i>
            </button>
        </label>
    </div>

    <p class="empty-note updates-search-empty" x-show="isUpdatesSearchActive && !hasUpdatesSearchResults">
        No results for "<span x-text="updatesSearch.trim()"></span>"
    </p>

    <section class="updates-section" x-show="filteredRecent.length">
        <h2 class="updates-section-title">Recent updates</h2>
        <template x-for="row in filteredRecent" :key="'recent-' + row.user.id">
            <div class="status-list-item" @click="openViewer('recent', row.user.id)">
                <div class="status-ring-wrap has-status" :class="{ 'viewed': row.unviewed_count === 0 }" :data-status-ring-user="row.user.id" x-init="paintStatusRing($el, row)" x-effect="paintStatusRing($el, row)">
                    <svg class="status-ring-segments" viewBox="0 0 64 64" aria-hidden="true"></svg>
                    <img :src="row.user.avatar" :alt="row.user.name" class="status-ring-avatar">
                </div>
                <div class="status-list-info">
                    <strong x-text="row.user.name"></strong>
                    <span x-text="row.latest_human"></span>
                </div>
                <div class="status-list-menu" @click.stop>
                    <button type="button" class="icon-btn sm" @click="toggleRowMenu(row.user.id)">
                        <i class="fa-solid fa-ellipsis-vertical"></i>
                    </button>
                    <div class="status-dropdown" x-show="rowMenu === row.user.id" @click.outside="rowMenu = null">
                        <button type="button" @click="muteUser(row.user.id)">Mute</button>
                        <button type="button" @click="archiveUser(row.user.id)">Archive</button>
                        <button type="button" @click="reportUser(row)">Report</button>
                    </div>
                </div>
            </div>
        </template>
    </section>

    <section class="updates-section updates-hub-section" x-show="!isUpdatesSearchActive || hasHubTableResults">
        <div class="updates-hub-toolbar">
            <h2 class="updates-section-title">Updates, followers &amp; chats</h2>
            <span
                class="updates-follow-pending-badge"
                x-show="followCounts.pending > 0"
                x-text="`${followCounts.pending} request${followCounts.pending === 1 ? '' : 's'}`"
            ></span>
        </div>

        <div class="updates-hub-tabs">
            <button type="button" class="updates-hub-tab updates-hub-tab--hidden" :class="{ active: hubTab === 'all' }" @click="hubTab = 'all'">All</button>
            <button type="button" class="updates-hub-tab" :class="{ active: hubTab === 'viewed' }" @click="hubTab = 'viewed'">Viewed</button>
            <button type="button" class="updates-hub-tab" :class="{ active: hubTab === 'followers' }" @click="setHubFollowTab('followers')">
                Followers <span x-text="followCounts.followers"></span>
            </button>
            <button type="button" class="updates-hub-tab" :class="{ active: hubTab === 'following' }" @click="setHubFollowTab('following')">
                Following <span x-text="followCounts.following"></span>
            </button>
            <button type="button" class="updates-hub-tab" :class="{ active: hubTab === 'chats' }" @click="hubTab = 'chats'">Chats</button>
        </div>

        <div class="updates-hub-table-wrap">
            <p class="updates-hub-loading" x-show="followLoading && (hubTab === 'all' || hubTab === 'followers' || hubTab === 'following')">Loading…</p>

            <table class="updates-hub-table" x-show="!followLoading || (hubTab !== 'followers' && hubTab !== 'following' && hubTab !== 'all')">
                <thead>
                    <tr>
                        <th>User</th>
                        <th>Type</th>
                        <th>Details</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody>
                    <template x-for="row in hubTableRows" :key="row.key">
                        <tr
                            class="updates-hub-row"
                            :class="'updates-hub-row--' + row.kind"
                            @click="onHubRowClick(row, $event)"
                        >
                            <td class="updates-hub-user-cell">
                                <div class="updates-hub-user">
                                    <div
                                        class="status-ring-wrap"
                                        :class="{ 'has-status': row.hasStatus, 'viewed': row.statusViewed }"
                                        :data-status-ring-user="row.userId"
                                        x-show="row.hasStatus"
                                        x-init="row.statusRow && paintStatusRing($el, row.statusRow)"
                                    >
                                        <svg class="status-ring-segments" viewBox="0 0 64 64" aria-hidden="true"></svg>
                                        <img :src="row.avatar" alt="" class="status-ring-avatar" loading="lazy">
                                    </div>
                                    <span class="avatar-wrap sm" x-show="!row.hasStatus">
                                        <img :src="row.avatar" alt="" loading="lazy">
                                        <span class="online-dot" x-show="row.online"></span>
                                    </span>
                                    <div class="updates-hub-user-meta">
                                        <strong x-text="row.name"></strong>
                                        <span class="updates-hub-username" x-show="row.username" x-text="'@' + row.username"></span>
                                    </div>
                                </div>
                            </td>
                            <td class="updates-hub-type-cell">
                                <span class="updates-hub-type-badge" :class="'updates-hub-type-badge--' + row.kind" x-text="row.typeLabel"></span>
                            </td>
                            <td class="updates-hub-detail-cell">
                                <span x-text="row.detail"></span>
                                <span class="unread-badge sm" x-show="row.unread > 0" x-text="row.unread"></span>
                            </td>
                            <td class="updates-hub-action-cell" @click.stop>
                                <template x-if="row.kind === 'viewed'">
                                    <button type="button" class="btn-hub btn-hub--status" @click="openViewer(row.raw?.muted ? 'muted' : 'viewed', row.userId)">View status</button>
                                </template>
                                <template x-if="row.kind === 'follow'">
                                    <div class="updates-follow-actions">
                                        <template x-if="row.follow_state === 'incoming_request'">
                                            <div class="updates-follow-request-btns">
                                                <button type="button" class="btn-follow btn-follow--accept" @click="acceptFollow(row.raw)">Accept</button>
                                                <button type="button" class="btn-follow btn-follow--reject" @click="rejectFollow(row.raw)">Delete</button>
                                            </div>
                                        </template>
                                        <template x-if="row.follow_state !== 'incoming_request' && row.follow_state !== 'self'">
                                            <button
                                                type="button"
                                                class="btn-follow"
                                                :class="followButtonClass(row.follow_state)"
                                                @click="toggleFollow(row.raw)"
                                                x-text="followButtonLabel(row.follow_state)"
                                            ></button>
                                        </template>
                                        <a :href="row.chatUrl" class="btn-follow btn-follow--message" title="Message" @click.prevent="openUserFromFollow(row.raw)">
                                            <i class="fa-solid fa-message"></i>
                                        </a>
                                    </div>
                                </template>
                                <template x-if="row.kind === 'chat'">
                                    <a :href="row.chatUrl" class="btn-hub btn-hub--chat">Open chat</a>
                                </template>
                            </td>
                        </tr>
                    </template>
                </tbody>
            </table>

            <p class="updates-hub-empty" x-show="!hubTableRows.length && !followLoading">
                <span x-show="hubTab === 'viewed'">No viewed updates.</span>
                <span x-show="hubTab === 'followers'">No followers yet.</span>
                <span x-show="hubTab === 'following'">You are not following anyone yet.</span>
                <span x-show="hubTab === 'chats'">No message chats yet.</span>
                <span x-show="hubTab === 'all'">Nothing to show yet.</span>
            </p>
        </div>
    </section>

    <p class="empty-note updates-empty" x-show="!recent.length && !viewed.length && !myStatuses.length && !messageChats.length && !followItems.length">
        No status updates yet. Be the first to post!
    </p>

    <div class="status-modal-overlay" x-show="createOpen" x-cloak @click.self="closeCreate()">
        <div class="status-modal">
            <header class="status-modal-header">
                <button type="button" class="icon-btn" @click="closeCreate()"><i class="fa-solid fa-xmark"></i></button>
                <h3>Create status</h3>
                <button type="button" class="status-post-btn" :disabled="posting" @click="submitStatus()">Post</button>
            </header>

            <div class="status-type-tabs">
                <button type="button" :class="{ active: createType === 'text' }" @click="createType = 'text'">Text</button>
                <button type="button" :class="{ active: createType === 'image' }" @click="createType = 'image'">Photo</button>
                <button type="button" :class="{ active: createType === 'video' }" @click="createType = 'video'">Video</button>
                <button type="button" :class="{ active: createType === 'audio' }" @click="createType = 'audio'">Audio</button>
            </div>

            <div class="status-create-body" x-show="createType === 'text'">
                <div class="status-text-preview" :style="{ background: createBg, color: createTextColor, fontFamily: createFont }">
                    <textarea x-model="createContent" placeholder="Type a status..." maxlength="700"></textarea>
                </div>
                <div class="status-create-tools">
                    <div class="color-swatches">
                        <template x-for="c in backgroundColors" :key="c">
                            <button type="button" class="color-swatch" :style="{ background: c }" :class="{ active: createBg === c }" @click="createBg = c"></button>
                        </template>
                    </div>
                    <select x-model="createFont" class="status-select">
                        <template x-for="(label, key) in fontStyles" :key="key">
                            <option :value="key" x-text="label"></option>
                        </template>
                    </select>
                    <input type="color" x-model="createTextColor" title="Text color" class="status-color-input">
                </div>
            </div>

            <div class="status-create-body" x-show="createType === 'image'">
                <div class="status-media-preview" x-show="!imagePreview">
                    <label class="status-upload-zone">
                        <i class="fa-solid fa-image"></i>
                        <span>Upload photo</span>
                        <input type="file" accept="image/*" @change="onImageSelect($event)" hidden>
                    </label>
                </div>
                <div class="status-media-editor" x-show="imagePreview">
                    <canvas id="status-image-canvas" class="status-canvas"></canvas>
                    <div class="status-editor-tools">
                        <input type="text" x-model="imageOverlayText" placeholder="Add text..." class="status-select">
                        <input type="color" x-model="imageOverlayColor" class="status-color-input">
                        <button type="button" class="text-btn" @click="drawMode = !drawMode" x-text="drawMode ? 'Draw: ON' : 'Draw'"></button>
                        <button type="button" class="text-btn" @click="clearCanvas()">Clear</button>
                    </div>
                </div>
            </div>

            <div class="status-create-body" x-show="createType === 'video'">
                <div class="status-media-preview" x-show="!videoPreview">
                    <label class="status-upload-zone">
                        <i class="fa-solid fa-video"></i>
                        <span>Upload video</span>
                        <input type="file" accept="video/*" @change="onVideoSelect($event)" hidden>
                    </label>
                </div>
                <div class="status-media-editor" x-show="videoPreview">
                    <video :src="videoPreview" controls class="status-video-preview"></video>
                </div>
            </div>

            <div class="status-create-body" x-show="createType === 'audio'">
                <div class="status-audio-panel" x-show="!audioPreview">
                    <button
                        type="button"
                        class="status-audio-record-btn"
                        :class="{ recording: audioRecording }"
                        @click="audioRecording ? stopAudioRecord() : startAudioRecord()"
                    >
                        <i class="fa-solid" :class="audioRecording ? 'fa-stop' : 'fa-microphone'"></i>
                    </button>
                    <p class="status-audio-hint" x-show="!audioRecording">Tap to record voice status</p>
                    <p class="status-audio-hint recording" x-show="audioRecording">
                        Recording <span x-text="formatAudioTime(audioRecordSeconds)"></span>
                    </p>
                    <label class="status-audio-upload-link">
                        <span>Or upload audio file</span>
                        <input type="file" accept="audio/*" @change="onAudioFileSelect($event)" hidden>
                    </label>
                </div>
                <div class="status-audio-preview" x-show="audioPreview">
                    <audio :src="audioPreview" controls class="status-audio-player"></audio>
                    <input
                        type="text"
                        x-model="audioCaption"
                        placeholder="Add a caption (optional)"
                        class="status-select full"
                        maxlength="200"
                    >
                    <button type="button" class="text-btn" @click="clearAudioSelection()">Remove audio</button>
                </div>
            </div>

            <div class="status-privacy-block">
                <label>Privacy</label>
                <select x-model="createPrivacy" class="status-select full">
                    <option value="everyone">Everyone</option>
                    <option value="contacts">My contacts</option>
                    <option value="contacts_except">My contacts except…</option>
                    <option value="only_share_with">Only share with…</option>
                    <option value="nobody">Nobody</option>
                </select>
                <div class="status-privacy-users" x-show="['contacts_except','only_share_with'].includes(createPrivacy)">
                    <template x-for="c in contacts" :key="c.id">
                        <label class="privacy-user-chip">
                            <input type="checkbox" :value="c.id" x-model="privacyUserIds">
                            <span x-text="c.name"></span>
                        </label>
                    </template>
                </div>
            </div>
        </div>
    </div>

    @include('status.partials.viewer-overlay', ['includeForwardModal' => true])
</div>
@endsection