@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])

@push('css')
    <link rel="stylesheet" href="{{ asset('vendor/whatsapp-gateway/dashboard.css') }}">
@endpush

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => 'WhatsApp Gateway'])

    <div class="container-fluid py-4 wa-dashboard">
        {{-- HEADER --}}
        <section class="wa-page-header bg-primary text-white mb-4" id="overview"
            style="background: var(--bs-primary, #5e72e4) !important; background-color: var(--bs-primary, #5e72e4) !important; background-image: none !important;">
            <div class="wa-page-header__content">
                <div class="wa-page-header__main">
                    <div class="d-flex align-items-center gap-2 mb-2">
                        <span class="wa-status-dot" id="sidebarHealthDot"></span>

                        <span class="wa-overline text-white-50" id="sidebarHealthText">
                            Memeriksa gateway
                        </span>
                    </div>

                    <span class="wa-overline text-white">
                        CENTRALIZED WHATSAPP SERVICE
                    </span>

                    <h2 class="mb-2 text-white">
                        WhatsApp Gateway Control Center
                    </h2>

                    <p class="mb-0 text-white-50">
                        Kelola koneksi nomor, pengiriman pesan, antrean, grup,
                        dan log gateway dari satu dashboard Laravel.
                    </p>
                </div>

               <div class="wa-page-header__actions">
    <div class="d-flex flex-column align-items-lg-end align-items-start gap-3">
        <div class="d-flex flex-wrap justify-content-lg-end align-items-center gap-2">
            <div class="wa-health-pill" id="gatewayHealthPill">
                <span></span>
                Checking
            </div>

            <small class="text-white-50" id="lastRefreshText">
                Belum diperbarui
            </small>
        </div>

        <button
            type="button"
            class="btn btn-outline-light mb-0"
            id="refreshDashboard"
        >
            <i class="fas fa-sync-alt me-2"></i>
            Refresh
        </button>
    </div>
</div>
            </div>

            <nav class="wa-quick-nav" aria-label="Navigasi dashboard">
                <a href="#instances">
                    <i class="fas fa-mobile-alt"></i>
                    Instance
                </a>

                <a href="#messaging">
                    <i class="fas fa-paper-plane"></i>
                    Kirim Pesan
                </a>

                <a href="#groups">
                    <i class="fas fa-users"></i>
                    Grup
                </a>

                <a href="#logs">
                    <i class="fas fa-list-alt"></i>
                    Log
                </a>
            </nav>
        </section>

        {{-- METRICS --}}
        <div class="row g-3 mb-4">
            <div class="col-xl-3 col-md-6">
                <div class="card wa-metric-card h-100">
                    <div class="card-body">
                        <div class="wa-metric-card__content">
                            <div>
                                <p class="wa-metric-label">Total Instance</p>
                                <h3 id="metricTotal">0</h3>
                                <small>Nomor terdaftar</small>
                            </div>
                            <div class="wa-metric-icon wa-metric-icon--green">
                                <i class="fas fa-mobile-alt"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-xl-3 col-md-6">
                <div class="card wa-metric-card h-100">
                    <div class="card-body">
                        <div class="wa-metric-card__content">
                            <div>
                                <p class="wa-metric-label">Connected</p>
                                <h3 id="metricOpen">0</h3>
                                <small>Status open</small>
                            </div>
                            <div class="wa-metric-icon wa-metric-icon--blue">
                                <i class="fas fa-link"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-xl-3 col-md-6">
                <div class="card wa-metric-card h-100">
                    <div class="card-body">
                        <div class="wa-metric-card__content">
                            <div>
                                <p class="wa-metric-label">Waiting QR</p>
                                <h3 id="metricQr">0</h3>
                                <small>Perlu dipindai</small>
                            </div>
                            <div class="wa-metric-icon wa-metric-icon--amber">
                                <i class="fas fa-qrcode"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-xl-3 col-md-6">
                <div class="card wa-metric-card h-100">
                    <div class="card-body">
                        <div class="wa-metric-card__content">
                            <div>
                                <p class="wa-metric-label">Queue</p>
                                <h3 id="metricQueue">0</h3>
                                <small id="metricQueueLabel">Waiting jobs</small>
                            </div>
                            <div class="wa-metric-icon wa-metric-icon--violet">
                                <i class="fas fa-stream"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- INSTANCE + SYSTEM STATUS --}}
        <div class="row g-4 mb-4">
            <div class="col-xl-8">
                <section class="card wa-section-card h-100" id="instances">
                    <div class="card-header wa-section-header">
                        <div>
                            <span class="wa-overline">INSTANCE MANAGEMENT</span>
                            <h5 class="mb-1">Nomor WhatsApp</h5>
                            <p class="mb-0">Hubungkan dan pantau seluruh akun WhatsApp gateway.</p>
                        </div>

                        <button type="button" class="btn bg-gradient-success mb-0" data-open-modal="createInstanceModal">
                            <i class="fas fa-plus me-2"></i>Tambah Instance
                        </button>
                    </div>

                    <div class="card-body pt-3">
                        <div class="wa-toolbar mb-3">
                            <div class="input-group wa-search-box">
                                <span class="input-group-text">
                                    <i class="fas fa-search"></i>
                                </span>
                                <input type="search" class="form-control" id="instanceSearch"
                                    placeholder="Cari instance, status, atau nomor...">
                            </div>

                            <span class="wa-counter" id="instanceCountText">0 instance</span>
                        </div>

                        <div class="table-responsive wa-table-wrapper">
                            <table class="table align-items-center mb-0 wa-table">
                                <thead>
                                    <tr>
                                        <th>Instance</th>
                                        <th>Status</th>
                                        <th>Akun</th>
                                        <th class="text-center">Reconnect</th>
                                        <th class="text-end">Aksi</th>
                                    </tr>
                                </thead>
                                <tbody id="instanceTableBody">
                                    <tr>
                                        <td colspan="5">
                                            <div class="wa-empty">
                                                <div class="wa-loader"></div>
                                                <span>Memuat instance...</span>
                                            </div>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </section>
            </div>

            <div class="col-xl-4">
                <div class="wa-sticky-panel">
                    <section class="card wa-section-card mb-4">
                        <div class="card-header wa-section-header wa-section-header--compact">
                            <div>
                                <span class="wa-overline">QUEUE MONITOR</span>
                                <h6 class="mb-0">Status Antrean</h6>
                            </div>
                            <span class="badge bg-gradient-secondary" id="queueMode">Loading</span>
                        </div>

                        <div class="card-body">
                            <div class="wa-queue-grid" id="queueStats">
                                <div>
                                    <span>Waiting</span>
                                    <strong>0</strong>
                                </div>
                                <div>
                                    <span>Active</span>
                                    <strong>0</strong>
                                </div>
                                <div>
                                    <span>Completed</span>
                                    <strong>0</strong>
                                </div>
                                <div>
                                    <span>Failed</span>
                                    <strong>0</strong>
                                </div>
                            </div>

                            <div class="wa-inline-note mt-3">
                                <i class="fas fa-info-circle"></i>
                                <p class="mb-0">
                                    Tanpa Redis, antrean berjalan di memory dan hilang ketika service Node.js restart.
                                </p>
                            </div>
                        </div>
                    </section>

                    <section class="card wa-security-card">
                        <div class="card-body">
                            <div class="wa-security-card__header">
                                <div class="wa-security-icon">
                                    <i class="fas fa-shield-alt"></i>
                                </div>
                                <div>
                                    <span class="wa-overline">SECURITY</span>
                                    <h6 class="mb-1">API key aman di backend</h6>
                                </div>
                            </div>

                            <p class="mb-0">
                                Browser berkomunikasi dengan Laravel. Laravel meneruskan request ke
                                service Baileys menggunakan API key dari file environment.
                            </p>
                        </div>
                    </section>
                </div>
            </div>
        </div>

        {{-- MESSAGE COMPOSER --}}
        <section class="card wa-section-card mb-4" id="messaging">
            <div class="card-header wa-section-header">
                <div>
                    <span class="wa-overline">MESSAGE COMPOSER</span>
                    <h5 class="mb-1">Kirim Pesan</h5>
                    <p class="mb-0">Kirim berbagai tipe pesan melalui instance yang aktif.</p>
                </div>
                <span class="badge bg-gradient-success px-3 py-2">REST API</span>
            </div>

            <div class="card-body">
                <form id="messageForm" class="wa-form">
                    <div class="wa-form-section">
                        <div class="wa-form-section__title">
                            <span>01</span>
                            <div>
                                <h6>Tujuan pengiriman</h6>
                                <p>Pilih instance, nomor tujuan, dan tipe pesan.</p>
                            </div>
                        </div>

                        <div class="row g-3">
                            <div class="col-lg-4">
                                <label class="form-label">Instance <span class="text-danger">*</span></label>
                                <select name="instanceId" id="messageInstance" class="form-select" required>
                                    <option value="">Pilih instance</option>
                                </select>
                            </div>

                            <div class="col-lg-4">
                                <label class="form-label">Nomor/JID tujuan <span class="text-danger">*</span></label>
                                <input name="to" class="form-control" placeholder="081234567890" required>
                                <small class="wa-form-help">Nomor lokal akan dinormalisasi otomatis.</small>
                            </div>

                            <div class="col-lg-4">
                                <label class="form-label">Tipe pesan <span class="text-danger">*</span></label>
                                <select name="type" id="messageType" class="form-select" required>
                                    <option value="text">Text</option>
                                    <option value="image">Image</option>
                                    <option value="video">Video</option>
                                    <option value="audio">Audio / Voice Note</option>
                                    <option value="document">Document</option>
                                    <option value="location">Location</option>
                                    <option value="contact">Contact</option>
                                    <option value="poll">Poll</option>
                                    <option value="reaction">Reaction</option>
                                </select>
                            </div>
                        </div>
                    </div>

                    <div class="wa-form-section">
                        <div class="wa-form-section__title">
                            <span>02</span>
                            <div>
                                <h6>Konten pesan</h6>
                                <p>Field akan menyesuaikan dengan tipe pesan yang dipilih.</p>
                            </div>
                        </div>

                        <div class="wa-dynamic-field" data-types="text,reaction">
                            <label class="form-label">Pesan / emoji</label>
                            <textarea name="text" class="form-control" rows="5" placeholder="Tulis isi pesan atau emoji reaksi..."></textarea>
                        </div>

                        <div class="row g-3 wa-dynamic-field" data-types="image,video,audio,document">
                            <div class="col-lg-6">
                                <label class="form-label">URL media</label>
                                <div class="input-group">
                                    <span class="input-group-text"><i class="fas fa-link"></i></span>
                                    <input name="url" type="url" class="form-control"
                                        placeholder="https://domain.com/file.pdf">
                                </div>
                            </div>

                            <div class="col-lg-6">
                                <label class="form-label">File path pada server gateway</label>
                                <div class="input-group">
                                    <span class="input-group-text"><i class="fas fa-folder-open"></i></span>
                                    <input name="filePath" class="form-control"
                                        placeholder="C:\gateway\storage\media\file.pdf">
                                </div>
                            </div>

                            <div class="col-lg-4">
                                <label class="form-label">Nama file</label>
                                <input name="fileName" class="form-control" placeholder="dokumen.pdf">
                            </div>

                            <div class="col-lg-4" id="fieldMimetype">
                                <label class="form-label">MIME type</label>
                                <input name="mimetype" class="form-control" placeholder="application/pdf">
                            </div>

                            <div class="col-lg-4">
                                <label class="form-label d-block">Mode audio</label>
                                <div class="wa-switch-box">
                                    <div class="form-check form-switch mb-0">
                                        <input class="form-check-input" type="checkbox" name="ptt" value="1"
                                            id="messagePtt">
                                        <label class="form-check-label" for="messagePtt">
                                            Kirim sebagai voice note
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="wa-dynamic-field" data-types="image,video,document">
                            <label class="form-label">Caption</label>
                            <textarea name="caption" class="form-control" rows="3" placeholder="Caption opsional"></textarea>
                        </div>

                        <div class="row g-3 wa-dynamic-field" data-types="location">
                            <div class="col-md-3">
                                <label class="form-label">Latitude</label>
                                <input name="latitude" class="form-control" type="number" step="any"
                                    placeholder="-7.2575">
                            </div>
                            <div class="col-md-3">
                                <label class="form-label">Longitude</label>
                                <input name="longitude" class="form-control" type="number" step="any"
                                    placeholder="112.7521">
                            </div>
                            <div class="col-md-3">
                                <label class="form-label">Nama lokasi</label>
                                <input name="name" class="form-control" placeholder="Kantor">
                            </div>
                            <div class="col-md-3">
                                <label class="form-label">Alamat</label>
                                <input name="address" class="form-control" placeholder="Surabaya">
                            </div>
                        </div>

                        <div class="row g-3 wa-dynamic-field" data-types="contact">
                            <div class="col-md-6">
                                <label class="form-label">Nama kontak</label>
                                <input name="displayName" class="form-control" placeholder="John Doe">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Nomor kontak</label>
                                <input name="contactPhone" class="form-control" placeholder="628111111111">
                            </div>
                        </div>

                        <div class="row g-3 wa-dynamic-field" data-types="poll">
                            <div class="col-md-8">
                                <label class="form-label">Pertanyaan</label>
                                <input name="name" class="form-control" placeholder="Makan siang apa?">
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">Selectable count</label>
                                <input name="selectableCount" class="form-control" type="number" min="1"
                                    value="1">
                            </div>
                            <div class="col-12">
                                <label class="form-label">Opsi polling</label>
                                <textarea name="pollValues" class="form-control" rows="4"
                                    placeholder="Satu opsi per baris&#10;Nasi goreng&#10;Mie ayam&#10;Soto"></textarea>
                            </div>
                        </div>

                        <div class="wa-dynamic-field" data-types="reaction">
                            <label class="form-label">Message ID</label>
                            <input name="quotedId" class="form-control" placeholder="3EB0...">
                        </div>

                        <div class="wa-dynamic-field" data-types="text">
                            <label class="form-label">Mention nomor</label>
                            <input name="mentionsText" class="form-control" placeholder="62812..., 62813...">
                            <small class="wa-form-help">Pisahkan beberapa nomor menggunakan koma.</small>
                        </div>
                    </div>

                    <div class="wa-form-actions">
                        <button type="reset" class="btn btn-light mb-0">
                            <i class="fas fa-undo me-2"></i>Reset
                        </button>
                        <button type="submit" class="btn bg-gradient-success mb-0">
                            <i class="fas fa-paper-plane me-2"></i>Kirim Pesan
                        </button>
                    </div>
                </form>
            </div>
        </section>

        {{-- GROUP MANAGEMENT --}}
        <section class="card wa-section-card mb-4" id="groups">
            <div class="card-header wa-section-header">
                <div>
                    <span class="wa-overline">GROUP MANAGEMENT</span>
                    <h5 class="mb-1">Operasi Grup</h5>
                    <p class="mb-0">Membuat grup, mengubah anggota, metadata, dan pengaturan grup.</p>
                </div>
                <div class="wa-section-icon">
                    <i class="fas fa-users"></i>
                </div>
            </div>

            <div class="card-body">
                <form id="groupForm" class="wa-form">
                    <div class="row g-3">
                        <div class="col-lg-4">
                            <label class="form-label">Instance</label>
                            <select name="instanceId" id="groupInstance" class="form-select" required>
                                <option value="">Pilih instance</option>
                            </select>
                        </div>

                        <div class="col-lg-4">
                            <label class="form-label">Aksi</label>
                            <select name="action" id="groupAction" class="form-select" required>
                                <option value="create">Create group</option>
                                <option value="participants">Update participants</option>
                                <option value="subject">Update subject</option>
                                <option value="description">Update description</option>
                                <option value="invite-code">Get invite code</option>
                                <option value="accept-invite">Accept invite</option>
                                <option value="setting">Update setting</option>
                                <option value="metadata">Get metadata</option>
                            </select>
                        </div>

                        <div class="col-lg-4 wa-group-field"
                            data-actions="participants,subject,description,invite-code,setting,metadata">
                            <label class="form-label">Group JID</label>
                            <input name="groupJid" class="form-control" placeholder="12036...@g.us">
                        </div>

                        <div class="col-lg-4 wa-group-field" data-actions="create,subject">
                            <label class="form-label">Subject</label>
                            <input name="subject" class="form-control" placeholder="Nama grup">
                        </div>

                        <div class="col-lg-4 wa-group-field" data-actions="description">
                            <label class="form-label">Description</label>
                            <input name="description" class="form-control" placeholder="Deskripsi grup">
                        </div>

                        <div class="col-lg-4 wa-group-field" data-actions="create,participants">
                            <label class="form-label">Participants</label>
                            <input name="participantsText" class="form-control" placeholder="62812...,62813...">
                        </div>

                        <div class="col-lg-4 wa-group-field" data-actions="participants">
                            <label class="form-label">Operation</label>
                            <select name="operation" class="form-select">
                                <option value="add">Add</option>
                                <option value="remove">Remove</option>
                                <option value="promote">Promote</option>
                                <option value="demote">Demote</option>
                            </select>
                        </div>

                        <div class="col-lg-4 wa-group-field" data-actions="setting">
                            <label class="form-label">Setting</label>
                            <select name="setting" class="form-select">
                                <option value="announcement">Announcement</option>
                                <option value="not_announcement">Not announcement</option>
                                <option value="locked">Locked</option>
                                <option value="unlocked">Unlocked</option>
                            </select>
                        </div>

                        <div class="col-lg-4 wa-group-field" data-actions="accept-invite">
                            <label class="form-label">Invite code</label>
                            <input name="code" class="form-control" placeholder="Kode undangan">
                        </div>
                    </div>

                    <div class="wa-form-actions mt-3">
                        <button type="submit" class="btn bg-gradient-success mb-0">
                            <i class="fas fa-play me-2"></i>Jalankan Aksi
                        </button>
                    </div>
                </form>

                <div class="wa-result-wrapper mt-4">
                    <div class="wa-result-wrapper__header">
                        <span><i class="fas fa-terminal me-2"></i>Operation result</span>
                        <small>JSON response</small>
                    </div>
                    <pre class="wa-result mb-0" id="groupResult">Hasil operasi grup akan tampil di sini.</pre>
                </div>
            </div>
        </section>

        {{-- LOGS --}}
        <section class="card wa-section-card mb-4" id="logs">
            <div class="card-header wa-section-header">
                <div>
                    <span class="wa-overline">ACTIVITY LOG</span>
                    <h5 class="mb-1">Log Gateway</h5>
                    <p class="mb-0">Riwayat pesan dan event dari service Baileys.</p>
                </div>

                <div class="wa-tabs">
                    <button type="button" class="active" data-log-type="messages">
                        <i class="fas fa-comment-alt me-2"></i>Messages
                    </button>
                    <button type="button" data-log-type="events">
                        <i class="fas fa-bolt me-2"></i>Events
                    </button>
                </div>
            </div>

            <div class="card-body pt-3">
                <div class="wa-toolbar mb-3">
                    <div class="input-group wa-search-box">
                        <span class="input-group-text"><i class="fas fa-search"></i></span>
                        <input type="search" class="form-control" id="logSearch" placeholder="Cari log...">
                    </div>

                    <div class="wa-limit-control">
                        <label for="logLimit">Tampilkan</label>
                        <select id="logLimit" class="form-select form-select-sm wa-limit-select">
                            <option>50</option>
                            <option selected>100</option>
                            <option>250</option>
                            <option>500</option>
                        </select>
                    </div>
                </div>

                <div class="table-responsive wa-table-wrapper">
                    <table class="table align-items-center mb-0 wa-table">
                        <thead>
                            <tr>
                                <th>Waktu</th>
                                <th>Instance</th>
                                <th>Direction/Event</th>
                                <th>Status/Type</th>
                                <th>Detail</th>
                            </tr>
                        </thead>
                        <tbody id="logTableBody">
                            <tr>
                                <td colspan="5">
                                    <div class="wa-empty">
                                        <div class="wa-loader"></div>
                                        <span>Memuat log...</span>
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </section>
    </div>

    {{-- CREATE INSTANCE MODAL --}}
    <div class="wa-modal" id="createInstanceModal" aria-hidden="true">
        <div class="wa-modal-dialog">
            <div class="wa-modal-header">
                <div>
                    <span class="wa-overline">NEW INSTANCE</span>
                    <h4 class="mb-0">Tambah Nomor WhatsApp</h4>
                </div>
                <button type="button" class="wa-modal-close" data-close-modal>&times;</button>
            </div>

            <form id="createInstanceForm" class="wa-form">
                <div>
                    <label class="form-label">Instance ID</label>
                    <input name="instanceId" class="form-control" required minlength="2" maxlength="50"
                        pattern="[A-Za-z0-9_-]+" placeholder="whatsapp-hris">
                    <small class="wa-form-help">Gunakan huruf, angka, underscore, atau dash.</small>
                </div>

                <div class="wa-option-card">
                    <div>
                        <strong>Auto-start</strong>
                        <small>Jalankan kembali setelah gateway restart.</small>
                    </div>
                    <div class="form-check form-switch mb-0">
                        <input class="form-check-input" type="checkbox" name="autoStart" value="1" id="autoStart"
                            checked>
                    </div>
                </div>

                <div class="wa-option-card">
                    <div>
                        <strong>Connect sekarang</strong>
                        <small>Langsung hubungkan dan generate QR.</small>
                    </div>
                    <div class="form-check form-switch mb-0">
                        <input class="form-check-input" type="checkbox" name="connect" value="1" id="connectNow"
                            checked>
                    </div>
                </div>

                <div class="wa-form-actions">
                    <button type="button" class="btn btn-light mb-0" data-close-modal>Batal</button>
                    <button type="submit" class="btn bg-gradient-success mb-0">
                        <i class="fas fa-plus me-2"></i>Buat Instance
                    </button>
                </div>
            </form>
        </div>
    </div>

    {{-- QR MODAL --}}
    <div class="wa-modal" id="qrModal" aria-hidden="true">
        <div class="wa-modal-dialog wa-modal-small">
            <div class="wa-modal-header">
                <div>
                    <span class="wa-overline">DEVICE PAIRING</span>
                    <h4 class="mb-0">Scan QR WhatsApp</h4>
                </div>
                <button type="button" class="wa-modal-close" data-close-modal>&times;</button>
            </div>

            <div class="wa-qr-box" id="qrContent">
                <div class="wa-loader"></div>
            </div>

            <div class="wa-inline-note mt-3">
                <i class="fas fa-mobile-alt"></i>
                <p class="mb-0">WhatsApp → Perangkat tertaut → Tautkan perangkat</p>
            </div>
        </div>
    </div>

    {{-- PAIRING CODE MODAL --}}
    <div class="wa-modal" id="pairingModal" aria-hidden="true">
        <div class="wa-modal-dialog wa-modal-small">
            <div class="wa-modal-header">
                <div>
                    <span class="wa-overline">PAIRING CODE</span>
                    <h4 class="mb-0">Hubungkan dengan Nomor</h4>
                </div>
                <button type="button" class="wa-modal-close" data-close-modal>&times;</button>
            </div>

            <form id="pairingForm" class="wa-form">
                <input type="hidden" name="instanceId">

                <div>
                    <label class="form-label">Nomor WhatsApp</label>
                    <input name="phone" class="form-control" required placeholder="628123456789">
                </div>

                <div class="wa-pairing-code" id="pairingCodeResult">— — — —</div>

                <div class="wa-form-actions">
                    <button type="submit" class="btn bg-gradient-success mb-0">
                        <i class="fas fa-key me-2"></i>Generate Code
                    </button>
                </div>
            </form>
        </div>
    </div>

    <div class="wa-toast-container" id="toastContainer"></div>
@endsection

@push('js')
    <script>
        window.WhatsappGatewayDashboard = {
            apiBase: @json(url($dashboardPath)),
            csrfToken: @json(csrf_token()),
            pollInterval: {{ (int) $pollInterval }}
        };
    </script>
    <script src="{{ asset('vendor/whatsapp-gateway/dashboard.js') }}"></script>
@endpush