@extends('agency.layouts.app')

@section('title', 'Mesajlarım')
@section('page_title', 'Mesajlarım')

@push('styles')
@php
    $reverbOn = config('broadcasting.default') === 'reverb' && config('broadcasting.connections.reverb.key');
@endphp
<style>
    :root { --mx-a:#5b5bf0; --mx-a2:#8b5cf6; --mx-ink:#0e1526; --mx-ink2:#1b2437;
            --mx-text:#0f172a; --mx-muted:#8b93a7; --mx-soft:#f4f5f9; --mx-soft2:#eceef4;
            --mx-border:#eceef4; --mx-online:#22c55e; }
    .content-area:has(.msgx) { padding:1.4rem 1.6rem; }
    /* Bu sayfada zaten tam messenger var; sağ-alttaki yüzen launcher'ı gizle (gönder butonunu kapatmasın) */
    #chatWidget { display:none !important; }
    .msgx { display:grid; grid-template-columns:360px 1fr; grid-template-rows:minmax(0, 1fr); gap:0; height:calc(100vh - var(--header-height, 70px) - 2.8rem);
        background:#fff; border:1px solid #e9edf3; border-radius:26px; overflow:hidden;
        box-shadow:0 24px 60px -30px rgba(15,23,42,.28); font-family:'Inter',sans-serif; }
    .msgx * { box-sizing:border-box; }

    /* ── Sol panel: sohbet listesi ── */
    .msgx-side { display:flex; flex-direction:column; border-right:1px solid var(--mx-border); background:#fff; min-width:0; min-height:0; }
    .msgx-side-head { padding:22px 22px 8px; }
    .msgx-side-title { display:flex; align-items:center; justify-content:space-between; }
    .msgx-side-title h2 { font-size:1.3rem; font-weight:800; color:var(--mx-text); letter-spacing:-.02em; margin:0; }
    .msgx-new { width:40px; height:40px; border-radius:13px; border:none; cursor:pointer; color:#fff;
        background:linear-gradient(135deg,var(--mx-a),var(--mx-a2)); box-shadow:0 8px 18px -6px rgba(91,91,240,.5); transition:transform .15s; }
    .msgx-new:hover { transform:translateY(-2px); }
    .msgx-search { display:flex; align-items:center; gap:10px; margin:14px 0 4px; padding:11px 15px;
        background:var(--mx-soft); border:1px solid transparent; border-radius:14px; color:var(--mx-muted); transition:.15s; }
    .msgx-search:focus-within { background:#fff; border-color:var(--mx-a); box-shadow:0 0 0 4px rgba(91,91,240,.1); }
    .msgx-search input { flex:1; border:none; background:none; outline:none; font-size:.9rem; color:var(--mx-text); }
    .msgx-scroll { flex:1; overflow-y:auto; padding:6px 12px 16px; }
    .msgx-scroll::-webkit-scrollbar { width:8px; }
    .msgx-scroll::-webkit-scrollbar-thumb { background:#e4e7ee; border-radius:8px; }
    .msgx-label { font-size:.64rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--mx-muted); padding:12px 10px 5px; }

    .msgx-conv { display:flex; align-items:center; gap:13px; padding:11px 12px; border-radius:16px; cursor:pointer; transition:background .14s; position:relative; }
    .msgx-conv:hover { background:var(--mx-soft); }
    .msgx-conv.active { background:linear-gradient(135deg,rgba(91,91,240,.1),rgba(139,92,246,.08)); }
    .msgx-conv.active::before { content:''; position:absolute; left:0; top:14px; bottom:14px; width:3px; border-radius:3px; background:linear-gradient(var(--mx-a),var(--mx-a2)); }
    .msgx-conv-body { flex:1; min-width:0; }
    .msgx-conv-top { display:flex; justify-content:space-between; align-items:baseline; gap:8px; }
    .msgx-conv-name { font-weight:700; color:var(--mx-text); font-size:.94rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .msgx-conv-time { font-size:.7rem; color:var(--mx-muted); flex-shrink:0; font-weight:600; }
    .msgx-conv-prev { font-size:.82rem; color:var(--mx-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:2px; }
    .msgx-conv-prev.unread { color:var(--mx-text); font-weight:600; }
    .msgx-conv-badge { min-width:22px; height:22px; padding:0 7px; border-radius:11px; background:linear-gradient(135deg,var(--mx-a),var(--mx-a2));
        color:#fff; font-size:.68rem; font-weight:800; display:flex; align-items:center; justify-content:center; flex-shrink:0; box-shadow:0 3px 8px rgba(91,91,240,.34); }
    .msgx-start-ic { color:var(--mx-a); font-size:1rem; flex-shrink:0; }

    /* ── Avatar ── */
    .mx-av { display:inline-flex; align-items:center; justify-content:center; width:52px; height:52px; border-radius:17px;
        color:#fff; font-weight:800; font-size:1rem; overflow:hidden; flex-shrink:0; background-size:cover; background-position:center; box-shadow:0 3px 10px rgba(15,23,42,.12); }
    .mx-av-sm { width:44px; height:44px; border-radius:14px; font-size:.85rem; }

    /* ── Sağ panel: thread ── */
    .msgx-main { display:flex; flex-direction:column; min-width:0; min-height:0; background:linear-gradient(180deg,#fbfbfe,#f6f7fb); position:relative; }
    .msgx-empty { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; color:var(--mx-muted); padding:40px; }
    .msgx-empty-ic { width:96px; height:96px; border-radius:30px; display:flex; align-items:center; justify-content:center; font-size:2.4rem; color:var(--mx-a);
        background:linear-gradient(135deg,rgba(91,91,240,.12),rgba(139,92,246,.12)); margin-bottom:18px; }
    .msgx-empty h3 { font-size:1.2rem; font-weight:800; color:var(--mx-text); margin:0 0 4px; }
    .msgx-empty p { font-size:.9rem; max-width:280px; margin:0; }

    .msgx-thread-wrap { flex:1; display:none; flex-direction:column; min-height:0; }
    .msgx-thread-wrap.on { display:flex; }
    .msgx-thead { display:flex; align-items:center; gap:13px; padding:16px 22px; background:#fff; border-bottom:1px solid var(--mx-border); flex-shrink:0; }
    .msgx-thead .peer { flex:1; min-width:0; }
    .msgx-thead .peer .nm { font-weight:800; font-size:1.02rem; color:var(--mx-text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .msgx-thead .peer .st { font-size:.75rem; color:var(--mx-muted); display:flex; align-items:center; gap:6px; }
    .msgx-thead .peer .st::before { content:''; width:7px; height:7px; border-radius:50%; background:var(--mx-online); box-shadow:0 0 0 3px rgba(34,197,94,.2); }
    .msgx-thead-open { width:40px; height:40px; border-radius:13px; border:1px solid var(--mx-border); background:#fff; color:#64748b; cursor:pointer; transition:.15s; }
    .msgx-thead-open:hover { background:var(--mx-soft); color:var(--mx-a); }

    .msgx-msgs { flex:1; min-height:0; overflow-y:auto; padding:24px 26px; display:flex; flex-direction:column; gap:3px; }
    .msgx-msgs::-webkit-scrollbar { width:9px; }
    .msgx-msgs::-webkit-scrollbar-thumb { background:#e2e5ee; border-radius:9px; }
    .mx-day { align-self:center; font-size:.68rem; font-weight:700; color:var(--mx-muted); background:rgba(15,23,42,.05); padding:4px 14px; border-radius:20px; margin:14px 0 8px; }
    .mx-msg { max-width:62%; padding:11px 15px; font-size:.9rem; line-height:1.5; word-wrap:break-word; overflow-wrap:anywhere; margin-top:3px; }
    .mx-in { align-self:flex-start; background:#fff; color:#1e293b; border-radius:18px 18px 18px 6px; box-shadow:0 1px 3px rgba(15,23,42,.07); }
    .mx-out { align-self:flex-end; background:linear-gradient(135deg,var(--mx-a),var(--mx-a2)); color:#fff; border-radius:18px 18px 6px 18px; box-shadow:0 6px 16px -4px rgba(91,91,240,.42); }
    .mx-sender { font-size:.68rem; font-weight:800; opacity:.7; margin-bottom:3px; }
    .mx-time { font-size:.64rem; opacity:.66; margin-top:4px; text-align:right; }
    .mx-tick { font-size:.62rem; margin-left:4px; }
    .mx-tick-read { color:#5eead4; opacity:1; }
    .mx-msg.revoked { background:#f1f5f9 !important; color:#94a3b8 !important; box-shadow:none !important; border:1px dashed #cbd5e1; }
    .mx-revoked-note { font-size:.78rem; font-weight:700; color:#ef4444; display:flex; align-items:center; gap:6px; }
    .mx-revoked-body { font-size:.85rem; text-decoration:line-through; opacity:.7; margin-top:3px; }
    .mx-msg.sending { opacity:.55; }

    .mx-att { display:flex; flex-direction:column; gap:7px; margin-top:6px; }
    .mx-att-img { max-width:280px; max-height:280px; border-radius:14px; cursor:pointer; display:block; }
    .mx-att-imgwrap { position:relative; display:inline-block; }
    .mx-att-imgdl { position:absolute; top:8px; right:8px; width:32px; height:32px; border-radius:10px; background:rgba(15,23,42,.62); color:#fff; display:flex; align-items:center; justify-content:center; text-decoration:none; opacity:0; transition:.15s; }
    .mx-att-imgwrap:hover .mx-att-imgdl { opacity:1; }
    .mx-att-file { display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:13px; background:rgba(0,0,0,.06); }
    .mx-out .mx-att-file { background:rgba(255,255,255,.18); }
    .mx-att-file .fic { font-size:1.25rem; flex-shrink:0; }
    .mx-out .mx-att-file .fic, .mx-out .mx-att-name { color:#fff; }
    .mx-in .mx-att-file .fic, .mx-in .mx-att-name { color:var(--mx-text); }
    .mx-att-meta { flex:1; min-width:0; display:flex; flex-direction:column; }
    .mx-att-name { font-size:.82rem; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .mx-att-size { font-size:.68rem; opacity:.7; }
    .mx-att-act { width:30px; height:30px; border-radius:9px; display:flex; align-items:center; justify-content:center; color:inherit; text-decoration:none; flex-shrink:0; font-size:.8rem; background:rgba(0,0,0,.07); transition:.14s; }
    .mx-out .mx-att-act { background:rgba(255,255,255,.16); }
    .mx-att-act:hover { background:rgba(0,0,0,.15); }
    .mx-out .mx-att-act:hover { background:rgba(255,255,255,.32); }

    .mx-links { display:flex; flex-direction:column; gap:7px; margin-top:6px; }
    .mx-lc { display:flex; align-items:center; gap:11px; padding:10px 12px; border-radius:14px; cursor:pointer; text-decoration:none; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.2); transition:.14s; }
    .mx-in .mx-lc { background:#f3f5fb; border-color:#e6e9f2; }
    .mx-lc:hover { transform:translateY(-1px); filter:brightness(.98); }
    .mx-lc-ic { width:36px; height:36px; border-radius:11px; display:flex; align-items:center; justify-content:center; flex-shrink:0; background:rgba(255,255,255,.24); color:#fff; }
    .mx-in .mx-lc-ic { background:linear-gradient(135deg,rgba(91,91,240,.14),rgba(139,92,246,.14)); color:var(--mx-a); }
    .mx-lc-b { flex:1; min-width:0; display:flex; flex-direction:column; }
    .mx-lc-t { font-size:.62rem; font-weight:800; text-transform:uppercase; letter-spacing:.05em; }
    .mx-lc-l { font-size:.86rem; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .mx-out .mx-lc-t { color:rgba(255,255,255,.82); } .mx-out .mx-lc-l { color:#fff; }
    .mx-in .mx-lc-t { color:var(--mx-muted); } .mx-in .mx-lc-l { color:var(--mx-text); }

    /* ── Composer ── */
    .msgx-chips { display:flex; flex-wrap:wrap; gap:7px; padding:0 22px; }
    .msgx-chips:not(:empty) { padding:10px 22px 0; }
    .mx-chip { display:flex; align-items:center; gap:7px; background:var(--mx-soft); color:#4338ca; font-size:.76rem; font-weight:700; border-radius:10px; padding:6px 10px; max-width:220px; }
    .mx-chip.doc { background:#dcfce7; color:#15803d; }
    .mx-chip span { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .mx-chip i.x { cursor:pointer; }
    .msgx-compose { display:flex; align-items:flex-end; gap:10px; padding:16px 22px 20px; background:#fff; border-top:1px solid var(--mx-border); flex-shrink:0; }
    .mx-cbtn { width:44px; height:44px; border-radius:14px; border:none; cursor:pointer; flex-shrink:0; transition:.15s; display:flex; align-items:center; justify-content:center; font-size:1rem; }
    .mx-cbtn.tool { background:var(--mx-soft); color:#64748b; }
    .mx-cbtn.tool:hover { background:var(--mx-soft2); color:var(--mx-a); }
    .mx-cbtn.send { background:linear-gradient(135deg,var(--mx-a),var(--mx-a2)); color:#fff; box-shadow:0 6px 16px -4px rgba(91,91,240,.5); }
    .mx-cbtn.send:hover { transform:translateY(-2px); }
    .msgx-compose textarea { flex:1; resize:none; border:1px solid var(--mx-border); border-radius:16px; padding:12px 16px; font-size:.92rem; max-height:140px; outline:none; line-height:1.5; background:var(--mx-soft); font-family:inherit; transition:.15s; }
    .msgx-compose textarea:focus { background:#fff; border-color:var(--mx-a); box-shadow:0 0 0 4px rgba(91,91,240,.1); }

    /* ── Link picker (composer üstü) ── */
    .msgx-lp { position:absolute; left:0; right:0; bottom:0; z-index:6; background:#fff; border-top:1px solid var(--mx-border);
        box-shadow:0 -18px 44px rgba(15,23,42,.14); border-radius:22px 22px 0 0; display:none; flex-direction:column; max-height:70%; }
    .msgx-lp.on { display:flex; animation:mxUp .2s ease; }
    @keyframes mxUp { from { transform:translateY(20px); opacity:0 } to { transform:translateY(0); opacity:1 } }
    .msgx-lp-head { display:flex; align-items:center; justify-content:space-between; padding:16px 22px 8px; font-weight:800; color:var(--mx-text); }
    .msgx-lp-x { width:34px; height:34px; border-radius:10px; border:none; background:var(--mx-soft); color:#475569; cursor:pointer; }
    .msgx-lp-types { display:flex; flex-wrap:wrap; gap:7px; padding:4px 22px; }
    .msgx-lp-type { display:inline-flex; align-items:center; gap:7px; border:1px solid var(--mx-border); background:#fff; color:#475569; font-size:.78rem; font-weight:700; border-radius:20px; padding:7px 14px; cursor:pointer; transition:.14s; }
    .msgx-lp-type.active { background:linear-gradient(135deg,var(--mx-a),var(--mx-a2)); border-color:transparent; color:#fff; }
    .msgx-lp-results { flex:1; overflow-y:auto; padding:6px 14px 14px; }
    .msgx-lp-item { display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:13px; cursor:pointer; transition:background .14s; }
    .msgx-lp-item:hover { background:var(--mx-soft); }
    .msgx-lp-ic { width:40px; height:40px; border-radius:12px; display:flex; align-items:center; justify-content:center; flex-shrink:0; background:linear-gradient(135deg,rgba(91,91,240,.12),rgba(139,92,246,.12)); color:var(--mx-a); }
    .msgx-lp-name { flex:1; min-width:0; }
    .msgx-lp-name .n { font-weight:700; color:var(--mx-text); font-size:.88rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .msgx-lp-name .s { font-size:.74rem; color:var(--mx-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .msgx-lp-empty { text-align:center; color:var(--mx-muted); padding:20px; font-size:.85rem; }

    @media (max-width:900px) {
        .msgx { grid-template-columns:1fr; }
        .msgx-side { display:flex; }
        .msgx.thread-open .msgx-side { display:none; }
        .msgx.thread-open .msgx-main { display:flex; }
        .msgx:not(.thread-open) .msgx-main { display:none; }
        .msgx-back { display:inline-flex !important; }
    }
    .msgx-back { display:none; width:40px; height:40px; border-radius:13px; border:1px solid var(--mx-border); background:#fff; color:#64748b; cursor:pointer; margin-right:2px; align-items:center; justify-content:center; }
</style>
@endpush

@section('content')
<div class="msgx" id="msgx">
    {{-- Sol: sohbet listesi --}}
    <aside class="msgx-side">
        <div class="msgx-side-head">
            <div class="msgx-side-title">
                <h2>Mesajlar</h2>
                <button class="msgx-new" id="mxNew" title="Yeni sohbet"><i class="fas fa-pen-to-square"></i></button>
            </div>
            <div class="msgx-search">
                <i class="fas fa-magnifying-glass"></i>
                <input type="text" id="mxSearch" placeholder="Sohbet veya kişi ara…" autocomplete="off">
            </div>
        </div>
        <div class="msgx-scroll" id="mxScroll">
            <div id="mxContactsWrap" hidden>
                <div class="msgx-label">Kişiler</div>
                <div id="mxContacts"></div>
            </div>
            <div id="mxConvWrap">
                <div class="msgx-label" id="mxConvLabel" hidden>Sohbetler</div>
                <div id="mxList"></div>
            </div>
            <div class="msgx-lp-empty" id="mxEmptyList" hidden>Henüz sohbet yok. Yukarıdan kişi arayın.</div>
        </div>
    </aside>

    {{-- Sağ: thread --}}
    <main class="msgx-main">
        <div class="msgx-empty" id="mxEmpty">
            <div class="msgx-empty-ic"><i class="fas fa-comments"></i></div>
            <h3>Sohbet seçin</h3>
            <p>Soldan bir sohbet açın veya yeni bir kişiyle konuşma başlatın.</p>
        </div>

        <div class="msgx-thread-wrap" id="mxThreadWrap">
            <div class="msgx-thead">
                <button class="msgx-back" id="mxBack"><i class="fas fa-arrow-left"></i></button>
                <span class="mx-av mx-av-sm" id="mxPeerAv"></span>
                <div class="peer"><div class="nm" id="mxPeerName">—</div><div class="st">Mesajlaşma</div></div>
                <button class="msgx-thead-open" id="mxThreadReload" title="Yenile"><i class="fas fa-rotate"></i></button>
            </div>
            <div class="msgx-msgs" id="mxMsgs"></div>

            {{-- Link/belge seçici --}}
            <div class="msgx-lp" id="mxLp">
                <div class="msgx-lp-head"><span><i class="fas fa-link me-2"></i>Modül Bağlantısı / Belge</span><button class="msgx-lp-x" id="mxLpX"><i class="fas fa-xmark"></i></button></div>
                <div class="msgx-lp-types" id="mxLpTypes"></div>
                <div class="msgx-search" style="margin:8px 22px"><i class="fas fa-magnifying-glass"></i><input type="text" id="mxLpSearch" placeholder="Ara…"></div>
                <div class="msgx-lp-results" id="mxLpResults"></div>
            </div>

            <div class="msgx-chips" id="mxChips"></div>
            <div class="msgx-compose">
                <button class="mx-cbtn tool" id="mxLinkBtn" title="Modül bağlantısı / belge"><i class="fas fa-link"></i></button>
                <button class="mx-cbtn tool" id="mxAttachBtn" title="Dosya/Resim"><i class="fas fa-paperclip"></i></button>
                <input type="file" id="mxFile" multiple hidden>
                <textarea id="mxInput" rows="1" placeholder="Mesaj yazın…"></textarea>
                <button class="mx-cbtn send" id="mxSend" title="Gönder"><i class="fas fa-paper-plane"></i></button>
            </div>
        </div>
    </main>
</div>
@endsection

@push('scripts')
@if($reverbOn)
<script src="https://cdn.jsdelivr.net/npm/pusher-js@8.4.0/dist/web/pusher.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/laravel-echo@1.16.1/dist/echo.iife.js"></script>
@endif
<script>
window.__CHAT_REVERB = @js([
    'enabled' => (bool) $reverbOn,
    'key' => config('broadcasting.connections.reverb.key'),
    'host' => config('broadcasting.connections.reverb.options.host') ?: request()->getHost(),
    'port' => (int) (config('broadcasting.connections.reverb.options.port') ?: 8080),
    'scheme' => config('broadcasting.connections.reverb.options.scheme') ?: (request()->isSecure() ? 'https' : 'http'),
    'authEndpoint' => url('/broadcasting/auth'),
]);
(function () {
    const API = {
        base: @js(url('agency/chat')),
        contacts: @js(route('agency.chat.contacts')),
        conversations: @js(route('agency.chat.conversations')),
        poll: @js(route('agency.chat.poll')),
        start: @js(route('agency.chat.start')),
        linkTypes: @js(route('agency.chat.link-types')),
        linkables: @js(route('agency.chat.linkables')),
        me: {{ auth()->id() ?? 0 }},
    };
    const LBL = { customer:'Müşteri', resource:'Kaynak', supplier:'Tedarikçi', tour:'Tur', departure:'Kalkış', sale:'Satış', contract:'Kontrat' };
    const CSRF = document.querySelector('meta[name="csrf-token"]').content;
    const $ = id => document.getElementById(id);
    const msgx = $('msgx');

    const st = { convs:[], openId:null, lastId:0, peer:null, lastDay:null, pending:[], links:[], docs:[], linkTypes:[], activeType:null };
    let socketOK = false, msgTimer = null;

    const esc = s => { const d=document.createElement('div'); d.textContent=s==null?'':s; return d.innerHTML; };
    const hue = s => { let h=0; for(let i=0;i<(s||'').length;i++) h=s.charCodeAt(i)+((h<<5)-h); return Math.abs(h)%360; };
    function av(o, cls) {
        cls = cls || 'mx-av';
        if (o && o.avatar) return `<span class="${cls}" style="background-image:url('${o.avatar}')"></span>`;
        const bg = `linear-gradient(135deg,hsl(${hue(o&&(o.title||o.name)||'?')},62%,58%),hsl(${(hue(o&&(o.title||o.name)||'?')+34)%360},62%,48%))`;
        return `<span class="${cls}" style="background:${bg}">${esc((o&&o.initials)||'?')}</span>`;
    }
    function api(url, opts) { opts=opts||{}; opts.headers=Object.assign({'X-Requested-With':'XMLHttpRequest','X-CSRF-TOKEN':CSRF}, opts.headers||{}); return fetch(url,opts).then(r=>r.json()); }
    function dayLabel(iso) { if(!iso) return ''; const d=new Date(iso); const diff=Math.floor((new Date().setHours(0,0,0,0)-new Date(iso).setHours(0,0,0,0))/86400000); if(diff===0) return 'Bugün'; if(diff===1) return 'Dün'; return d.toLocaleDateString('tr-TR',{day:'numeric',month:'long'}); }
    function isViewing() { return !!st.openId && document.visibilityState === 'visible'; }

    // ── Liste ──
    function renderList() {
        const items = st.convs, q = $('mxSearch').value.trim().toLowerCase();
        const filtered = q ? items.filter(c => (c.title||'').toLowerCase().includes(q)) : items;
        $('mxConvLabel').hidden = !filtered.length;
        $('mxEmptyList').hidden = filtered.length>0 || !!q;
        const list = $('mxList');
        list.innerHTML = filtered.map(convRow).join('');
        list.querySelectorAll('.msgx-conv').forEach(el => el.addEventListener('click', () => openChat(+el.dataset.id)));
    }
    function convRow(c) {
        const lm = c.last_message;
        const prev = lm ? (lm.mine?'Siz: ':'')+esc(lm.preview||'') : '<span style="opacity:.6">Sohbeti başlatın</span>';
        return `<div class="msgx-conv ${c.id===st.openId?'active':''}" data-id="${c.id}">
            ${av(c)}
            <div class="msgx-conv-body">
                <div class="msgx-conv-top"><span class="msgx-conv-name">${esc(c.title)}</span><span class="msgx-conv-time">${lm?lm.time:''}</span></div>
                <div class="msgx-conv-prev ${c.unread>0?'unread':''}">${prev}</div>
            </div>
            ${c.unread>0?`<span class="msgx-conv-badge">${c.unread>99?'99+':c.unread}</span>`:''}
        </div>`;
    }

    // ── Sohbet aç ──
    function openChat(id) {
        const c = st.convs.find(x=>x.id===id) || st.peer;
        st.openId=id; st.lastId=0; st.peer=c; st.lastDay=null;
        clearPending(); clearLinks(); closeLp();
        $('mxEmpty').style.display='none';
        $('mxThreadWrap').classList.add('on');
        msgx.classList.add('thread-open');
        $('mxPeerName').textContent = c?c.title:'';
        $('mxPeerAv').outerHTML = av(c,'mx-av mx-av-sm').replace('<span','<span id="mxPeerAv"');
        $('mxMsgs').innerHTML = '<div class="mx-day">Yükleniyor…</div>';
        renderList();
        loadMessages(true);
        markRead(id);
        startPolling();
        setTimeout(()=>$('mxInput').focus(),120);
    }

    let msgBusy=false;
    function loadMessages(toBottom) {
        if (!st.openId) return;
        if (!toBottom && msgBusy) return;
        msgBusy=true;
        const url = `${API.base}/conversations/${st.openId}/messages`+(st.lastId?`?after_id=${st.lastId}`:'');
        api(url).then(d=>{
            if (!d.messages) return;
            if (st.lastId===0) { $('mxMsgs').innerHTML=''; st.lastDay=null; }
            let added=false;
            d.messages.forEach(m=>{ appendMsg(m); st.lastId=Math.max(st.lastId,m.id); added=true; });
            if (d.conversation) $('mxPeerName').textContent=d.conversation.title;
            if (added && (toBottom || nearBottom())) scrollBottom();
            if (added && d.messages.some(m=>!m.mine) && isViewing()) markRead(st.openId);
        }).catch(()=>{}).finally(()=>{ msgBusy=false; });
    }
    function appendMsg(m) {
        const t = $('mxMsgs');
        if (m.id && t.querySelector(`.mx-msg[data-id="${m.id}"]`)) return;
        const day = dayLabel(m.at);
        if (day && day!==st.lastDay) { const dd=document.createElement('div'); dd.className='mx-day'; dd.textContent=day; t.appendChild(dd); st.lastDay=day; }
        const div = document.createElement('div');
        div.className = 'mx-msg '+(m.mine?'mx-out':'mx-in');
        div.dataset.id = m.id;
        if (m.revoked) { div.classList.add('revoked'); div.innerHTML = revokedHtml(m); t.appendChild(div); return; }
        let h='';
        if (!m.mine && m.sender) h+=`<div class="mx-sender">${esc(m.sender.name)}</div>`;
        if (m.body) h+=esc(m.body).replace(/\n/g,'<br>');
        if (m.attachments && m.attachments.length) {
            h+='<div class="mx-att">';
            m.attachments.forEach(a=>{
                if (a.kind==='image') h+=`<div class="mx-att-imgwrap"><img class="mx-att-img" src="${a.url}" onclick="window.open('${a.url}','_blank')" alt=""><a class="mx-att-imgdl" href="${a.download_url}" title="İndir" onclick="event.stopPropagation()"><i class="fas fa-download"></i></a></div>`;
                else h+=`<div class="mx-att-file"><i class="fas fa-file-lines fic"></i><span class="mx-att-meta"><span class="mx-att-name">${esc(a.name)}</span>${a.size?`<span class="mx-att-size">${esc(a.size)}</span>`:''}</span><a class="mx-att-act" href="${a.url}" target="_blank" title="Aç"><i class="fas fa-up-right-from-square"></i></a><a class="mx-att-act" href="${a.download_url}" title="İndir"><i class="fas fa-download"></i></a></div>`;
            });
            h+='</div>';
        }
        if (m.links && m.links.length) {
            h+='<div class="mx-links">';
            m.links.forEach((l,i)=>{ h+=`<a class="mx-lc" data-i="${i}"><span class="mx-lc-ic"><i class="fas ${l.icon||'fa-link'}"></i></span><span class="mx-lc-b"><span class="mx-lc-t">${esc(LBL[l.type]||l.type)}</span><span class="mx-lc-l">${esc(l.label)}</span></span></a>`; });
            h+='</div>';
        }
        h+=`<div class="mx-time">${esc(m.time||'')}${m.mine?tick(m.read):''}</div>`;
        div.innerHTML=h;
        if (m.links && m.links.length) div.querySelectorAll('.mx-lc').forEach(el=>el.addEventListener('click',()=>openLink(m.links[+el.dataset.i])));
        t.appendChild(div);
    }
    function tick(read) { return ` <i class="fas ${read?'fa-check-double mx-tick mx-tick-read':'fa-check mx-tick'}"></i>`; }
    function revokedHtml(m) { let h='<div class="mx-revoked-note"><i class="fas fa-ban"></i> Bu içerik geri çekildi / iptal edildi</div>'; if(m.body) h+=`<div class="mx-revoked-body">${esc(m.body).replace(/\n/g,'<br>')}</div>`; h+=`<div class="mx-time">${esc(m.time||'')}</div>`; return h; }
    function openLink(l) { if(!l||!l.url) return; let p=l.url; try{ const u=new URL(l.url,location.origin); p=u.pathname+u.search; }catch(e){} if(l.qv && typeof window.openQuickView==='function'){ try{ window.openQuickView(p); return; }catch(e){} } window.open(l.url,'_blank'); }
    function nearBottom() { const b=$('mxMsgs'); return b.scrollHeight-b.scrollTop-b.clientHeight<160; }
    function scrollBottom() { const b=$('mxMsgs'); b.scrollTop=b.scrollHeight; }

    let patchBusy=false;
    function patchThread() {
        if (!st.openId || patchBusy) return; patchBusy=true;
        api(`${API.base}/conversations/${st.openId}/messages`).then(d=>{
            (d.messages||[]).forEach(m=>{
                const el=$('mxMsgs').querySelector(`.mx-msg[data-id="${m.id}"]`); if(!el) return;
                if (m.revoked) { if(!el.classList.contains('revoked')){ el.classList.add('revoked'); el.innerHTML=revokedHtml(m); } return; }
                if (m.mine) { const tk=el.querySelector('.mx-tick'); if(tk){ const r=tk.classList.contains('mx-tick-read'); if(m.read&&!r) tk.className='fas fa-check-double mx-tick mx-tick-read'; else if(!m.read&&r) tk.className='fas fa-check mx-tick'; } }
            });
        }).catch(()=>{}).finally(()=>{ patchBusy=false; });
    }

    // ── Gönder ──
    function send() {
        const input=$('mxInput'), body=input.value.trim();
        if ((!body && !st.pending.length && !st.links.length && !st.docs.length) || !st.openId) return;
        const fd=new FormData(); fd.append('body',body);
        st.pending.forEach(f=>fd.append('attachments[]',f));
        if (st.links.length) fd.append('links', JSON.stringify(st.links));
        if (st.docs.length) fd.append('contract_docs', JSON.stringify(st.docs.map(d=>d.id)));
        const tmp=document.createElement('div'); tmp.className='mx-msg mx-out sending';
        tmp.innerHTML=(body?esc(body).replace(/\n/g,'<br>'):(st.docs.length?'📄':st.links.length?'🔗':'📎'))+'<div class="mx-time">gönderiliyor…</div>';
        $('mxMsgs').appendChild(tmp); scrollBottom();
        input.value=''; input.style.height='auto'; clearPending(); clearLinks();
        api(`${API.base}/conversations/${st.openId}/messages`,{method:'POST',body:fd}).then(d=>{
            tmp.remove(); if(d.success&&d.message){ appendMsg(d.message); st.lastId=Math.max(st.lastId,d.message.id); scrollBottom(); refreshSoon(); }
        }).catch(()=>{ const t=tmp.querySelector('.mx-time'); if(t) t.textContent='gönderilemedi'; });
    }

    // ── Ekler + link/belge chip'leri ──
    function addFiles(files) { Array.from(files).forEach(f=>st.pending.push(f)); renderChips(); }
    function clearPending() { st.pending=[]; $('mxFile').value=''; renderChips(); }
    function clearLinks() { st.links=[]; st.docs=[]; renderChips(); }
    function renderChips() {
        const a = st.pending.map((f,i)=>`<span class="mx-chip" data-k="f" data-i="${i}"><i class="fas fa-${(f.type||'').startsWith('image')?'image':'file'}"></i><span>${esc(f.name.slice(0,20))}</span><i class="fas fa-xmark x"></i></span>`);
        const l = st.links.map((x,i)=>`<span class="mx-chip" data-k="l" data-i="${i}"><i class="fas ${x.icon}"></i><span>${esc(x.label)}</span><i class="fas fa-xmark x"></i></span>`);
        const d = st.docs.map((x,i)=>`<span class="mx-chip doc" data-k="d" data-i="${i}"><i class="fas ${x.icon||'fa-file-signature'}"></i><span>${esc(x.label)}</span><i class="fas fa-xmark x"></i></span>`);
        $('mxChips').innerHTML = a.concat(l,d).join('');
        $('mxChips').querySelectorAll('.x').forEach(x=>x.addEventListener('click',()=>{ const c=x.closest('.mx-chip'); const arr={f:st.pending,l:st.links,d:st.docs}[c.dataset.k]; arr.splice(+c.dataset.i,1); renderChips(); }));
    }

    // ── Okundu ──
    function markRead(id) { api(`${API.base}/conversations/${id}/read`,{method:'POST'}).then(()=>{ const c=st.convs.find(x=>x.id===id); if(c) c.unread=0; renderList(); }).catch(()=>{}); }

    // ── Polling / socket ──
    function startPolling() { stopPolling(); let t=0; msgTimer=setInterval(()=>{ if(!socketOK) loadMessages(false); if(++t%4===0) patchThread(); },2500); }
    function stopPolling() { if(msgTimer){ clearInterval(msgTimer); msgTimer=null; } }
    let pollBusy=false;
    function refreshConvs() { if(pollBusy) return; pollBusy=true; api(API.conversations).then(d=>{ if(d.conversations){ st.convs=d.conversations; renderList(); } }).catch(()=>{}).finally(()=>{ pollBusy=false; }); }
    let rt=null; function refreshSoon() { clearTimeout(rt); rt=setTimeout(refreshConvs,400); }
    function globalPoll() { if(pollBusy) return; pollBusy=true; api(API.poll).then(d=>{ if(d.conversations){ st.convs=d.conversations; renderList(); } }).catch(()=>{}).finally(()=>{ pollBusy=false; }); }

    function initEcho() {
        try {
            const cfg=window.__CHAT_REVERB;
            if (!cfg||!cfg.enabled||!cfg.key||typeof window.Echo!=='function'||typeof window.Pusher==='undefined') return;
            const echo=new window.Echo({ broadcaster:'reverb', key:cfg.key, wsHost:cfg.host, wsPort:cfg.port, wssPort:cfg.port, forceTLS:cfg.scheme==='https', enabledTransports:['ws','wss'], authEndpoint:cfg.authEndpoint, auth:{headers:{'X-CSRF-TOKEN':CSRF}} });
            echo.private('chat.user.'+API.me).listen('.message.sent',(e)=>{ if(e&&e.conversation_id===st.openId){ loadMessages(false); patchThread(); } refreshConvs(); });
            const p=echo.connector&&echo.connector.pusher;
            if (p&&p.connection){ p.connection.bind('connected',()=>socketOK=true); ['unavailable','disconnected','failed'].forEach(ev=>p.connection.bind(ev,()=>socketOK=false)); }
        } catch(e){ socketOK=false; }
    }

    // ── Birleşik arama (sohbet + kişi) ──
    let sT=null;
    function onSearch() {
        renderList();
        const q=$('mxSearch').value.trim();
        if (!q) { $('mxContactsWrap').hidden=true; return; }
        clearTimeout(sT);
        sT=setTimeout(()=>{
            api(`${API.contacts}?q=${encodeURIComponent(q)}`).then(d=>{
                const cs=d.contacts||[]; $('mxContactsWrap').hidden=!cs.length;
                $('mxContacts').innerHTML = cs.map(u=>`<div class="msgx-conv" data-uid="${u.id}">${av(u)}<div class="msgx-conv-body"><div class="msgx-conv-name">${esc(u.name)}</div><div class="msgx-conv-prev">Sohbet başlat</div></div><i class="fas fa-paper-plane msgx-start-ic"></i></div>`).join('');
                $('mxContacts').querySelectorAll('.msgx-conv').forEach(r=>r.addEventListener('click',()=>startWith(+r.dataset.uid)));
            }).catch(()=>{});
        },250);
    }
    function startWith(uid) {
        api(API.start,{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({user_id:uid})}).then(d=>{
            if (d.success&&d.conversation){ if(!st.convs.find(c=>c.id===d.conversation.id)) st.convs.unshift(Object.assign({unread:0,last_message:null},d.conversation)); st.peer=d.conversation; $('mxSearch').value=''; $('mxContactsWrap').hidden=true; openChat(d.conversation.id); }
        }).catch(()=>{});
    }

    // ── Link/belge seçici ──
    function loadLinkTypes() { if(st.linkTypes.length) return Promise.resolve(); return api(API.linkTypes).then(d=>{ st.linkTypes=d.types||[]; }).catch(()=>{}); }
    function openLp() { loadLinkTypes().then(()=>{ if(!st.activeType&&st.linkTypes.length) st.activeType=st.linkTypes[0].key; renderTypes(); $('mxLpSearch').value=''; searchLinkables(''); $('mxLp').classList.add('on'); setTimeout(()=>$('mxLpSearch').focus(),120); }); }
    function closeLp() { $('mxLp').classList.remove('on'); }
    function renderTypes() {
        $('mxLpTypes').innerHTML = st.linkTypes.map(t=>`<button class="msgx-lp-type ${t.key===st.activeType?'active':''}" data-t="${t.key}"><i class="fas ${t.icon}"></i>${esc(t.label)}</button>`).join('');
        $('mxLpTypes').querySelectorAll('.msgx-lp-type').forEach(b=>b.addEventListener('click',()=>{ st.activeType=b.dataset.t; renderTypes(); searchLinkables($('mxLpSearch').value); }));
    }
    let lpT=null;
    function searchLinkables(q) {
        if (!st.activeType) return;
        $('mxLpResults').innerHTML='<div class="msgx-lp-empty">Aranıyor…</div>';
        clearTimeout(lpT);
        lpT=setTimeout(()=>{
            api(`${API.linkables}?type=${st.activeType}&q=${encodeURIComponent(q)}`).then(d=>{
                const rows=d.results||[];
                if (!rows.length) { $('mxLpResults').innerHTML='<div class="msgx-lp-empty">Sonuç yok.</div>'; return; }
                $('mxLpResults').innerHTML=rows.map((r,i)=>`<div class="msgx-lp-item" data-i="${i}"><div class="msgx-lp-ic"><i class="fas ${r.icon}"></i></div><div class="msgx-lp-name"><div class="n">${esc(r.label)}</div>${r.sub?`<div class="s">${esc(r.sub)}</div>`:''}</div><i class="fas fa-plus msgx-start-ic"></i></div>`).join('');
                $('mxLpResults').querySelectorAll('.msgx-lp-item').forEach(el=>el.addEventListener('click',()=>addLink(rows[+el.dataset.i])));
            }).catch(()=>{});
        },220);
    }
    function addLink(link) {
        if (!link) return;
        if (link.doc) { if(st.docs.length<6 && !st.docs.find(d=>d.id===link.id)) st.docs.push({id:link.id,label:link.label,icon:link.icon}); }
        else { if(st.links.length<6 && !st.links.find(l=>l.type===link.type&&l.id===link.id)) st.links.push(link); }
        renderChips(); closeLp();
    }

    // ── Olaylar ──
    $('mxSend').addEventListener('click', send);
    $('mxInput').addEventListener('keydown', e=>{ if(e.key==='Enter'&&!e.shiftKey){ e.preventDefault(); send(); } });
    $('mxInput').addEventListener('input', function(){ this.style.height='auto'; this.style.height=Math.min(this.scrollHeight,140)+'px'; });
    $('mxAttachBtn').addEventListener('click', ()=>$('mxFile').click());
    $('mxFile').addEventListener('change', e=>addFiles(e.target.files));
    $('mxLinkBtn').addEventListener('click', openLp);
    $('mxLpX').addEventListener('click', closeLp);
    $('mxLpSearch').addEventListener('input', e=>searchLinkables(e.target.value));
    $('mxSearch').addEventListener('input', onSearch);
    $('mxNew').addEventListener('click', ()=>{ $('mxSearch').focus(); });
    $('mxThreadReload').addEventListener('click', ()=>{ if(st.openId){ st.lastId=0; loadMessages(true); } });
    $('mxBack').addEventListener('click', ()=>{ msgx.classList.remove('thread-open'); });
    document.addEventListener('visibilitychange', ()=>{ if(isViewing()) markRead(st.openId); });
    const msgs=$('mxMsgs'); ['dragover','drop'].forEach(ev=>msgs.addEventListener(ev,e=>{ e.preventDefault(); if(ev==='drop'&&e.dataTransfer.files.length) addFiles(e.dataTransfer.files); }));

    // ── Başlat ──
    refreshConvs();
    initEcho();
    let g=0; setInterval(()=>{ if(socketOK&&(++g%6!==0)) return; globalPoll(); }, 4000);
})();
</script>
@endpush