@extends('admin.layouts.app')

@section('title', __('admin.links.list_title') . ' — ' . __('admin.brand.name'))
@section('page_title', __('admin.links.list_title'))

@push('styles')
<style>
    /* Single-column stack — one link per row at every viewport. The
       cards keep their internal flex layout (icon + body) so the URL
       has room to breathe on wide screens without wrapping awkwardly. */
    .lnk-list {
        display: grid; gap: 14px;
        grid-template-columns: minmax(0, 1fr);
    }

    .lnk-card {
        background: #fff;
        border: 1px solid #e2e8f0;
        border-radius: 14px;
        padding: 18px;
        display: flex; align-items: flex-start; gap: 14px;
        transition: border-color .15s, box-shadow .15s, transform .15s;
    }
    .lnk-card:hover {
        border-color: #c7d2fe;
        box-shadow: 0 6px 24px -10px rgba(79,70,229,.18);
        transform: translateY(-1px);
    }

    .lnk-icon {
        flex: 0 0 auto;
        width: 44px; height: 44px;
        background: #eef2ff;
        color: #4f46e5;
        border-radius: 12px;
        display: inline-flex; align-items: center; justify-content: center;
        border: 1px solid #c7d2fe;
    }

    .lnk-body { flex: 1; min-width: 0; }
    .lnk-title {
        margin: 0 0 4px;
        font-size: 14px; font-weight: 800; color: #0f172a;
    }
    /* URL pill + actions sit on the SAME horizontal row, so the link is
       always one glanceable line: name on top, then [URL ─── Copy Open]
       underneath. On very narrow phones the row wraps onto two lines so
       the buttons never get squeezed below readable width. */
    .lnk-row {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-wrap: wrap;
    }
    .lnk-url {
        flex: 1 1 240px;
        min-width: 0;
        font-family: 'SFMono-Regular', Consolas, monospace;
        font-size: 12.5px;
        color: #475569;
        background: #f8fafc;
        border: 1px solid #e2e8f0;
        border-radius: 8px;
        padding: 8px 12px;
        line-height: 1.5;
        direction: ltr;
        text-align: start;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        text-decoration: none;
    }
    .lnk-url:hover { color: #1e293b; border-color: #cbd5e1; }

    .lnk-actions { display: flex; gap: 6px; flex-shrink: 0; }
    .lnk-btn {
        display: inline-flex; align-items: center; gap: 6px;
        padding: 7px 12px;
        font: inherit; font-size: 12.5px; font-weight: 700;
        border-radius: 8px;
        cursor: pointer; border: 1px solid transparent;
        transition: background .15s, color .15s, border-color .15s;
    }
    .lnk-btn--copy   { background: #4f46e5; color: #fff; border-color: #4338ca; }
    .lnk-btn--copy:hover  { background: #4338ca; }
    .lnk-btn--copy[data-copied="true"] { background: #10b981; border-color: #059669; }
    .lnk-btn--open   { background: #f1f5f9; color: #1e293b; border-color: #e2e8f0; }
    .lnk-btn--open:hover  { background: #e2e8f0; }
    .lnk-btn svg     { width: 14px; height: 14px; }

    /* Toast — reuses the global flash colour palette but renders as a
       transient pill in the corner so the success state is unobtrusive. */
    .lnk-toast {
        position: fixed;
        bottom: 24px; inset-inline-end: 24px;
        background: #0f172a; color: #fff;
        padding: 12px 18px; border-radius: 999px;
        box-shadow: 0 20px 40px -10px rgba(15,23,42,.4);
        display: inline-flex; align-items: center; gap: 8px;
        font-size: 13.5px; font-weight: 700;
        opacity: 0; transform: translateY(8px);
        pointer-events: none;
        transition: opacity .2s, transform .2s;
        z-index: 80;
    }
    .lnk-toast[data-show="true"] { opacity: 1; transform: translateY(0); }
    .lnk-toast svg { width: 16px; height: 16px; color: #10b981; }
</style>
@endpush

@section('content')
    <x-admin.page-header
        :title="__('admin.links.list_title')"
        :subtitle="__('admin.links.list_subtitle')" />

    @include('admin.partials.flash')

    @if (empty($links))
        <x-admin.empty-state :title="__('admin.links.empty_title')" />
    @else
        <div class="lnk-list">
            @foreach ($links as $link)
                @php $title = __('admin.links.items.' . $link['key']); @endphp
                <article class="lnk-card">
                    <span class="lnk-icon" aria-hidden="true">
                        @switch($link['icon'])
                            @case('globe')
                                <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg>
                                @break
                            @case('home')
                                <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 9.5L12 3l9 6.5V20a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V9.5z"/><polyline points="9 22 9 14 15 14 15 22"/></svg>
                                @break
                            @case('user-plus')
                                <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="8.5" cy="7" r="4"/><line x1="20" y1="8" x2="20" y2="14"/><line x1="23" y1="11" x2="17" y2="11"/></svg>
                                @break
                            @case('building')
                                <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="2" width="16" height="20" rx="2"/><line x1="9" y1="6" x2="9" y2="6.01"/><line x1="13" y1="6" x2="15" y2="6"/><line x1="9" y1="10" x2="9" y2="10.01"/><line x1="13" y1="10" x2="15" y2="10"/><line x1="9" y1="14" x2="9" y2="14.01"/><line x1="13" y1="14" x2="15" y2="14"/><path d="M10 22v-4h4v4"/></svg>
                                @break
                            @case('calendar')
                                <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
                                @break
                            @case('committee')
                                <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="7" r="3"/><circle cx="5"  cy="11" r="2.5"/><circle cx="19" cy="11" r="2.5"/><path d="M2 20v-1a4 4 0 0 1 4-4"/><path d="M22 20v-1a4 4 0 0 0-4-4"/><path d="M7 21v-2a4 4 0 0 1 4-4h2a4 4 0 0 1 4 4v2"/></svg>
                                @break
                            @case('doc')
                                <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
                                @break
                            @default
                                <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg>
                        @endswitch
                    </span>

                    <div class="lnk-body">
                        <h3 class="lnk-title">{{ $title }}</h3>
                        <div class="lnk-row">
                            <a href="{{ $link['url'] }}" target="_blank" rel="noopener noreferrer" class="lnk-url" title="{{ $link['url'] }}">{{ $link['url'] }}</a>
                            <div class="lnk-actions">
                                <button type="button"
                                        class="lnk-btn lnk-btn--copy"
                                        data-lnk-copy="{{ $link['url'] }}"
                                        data-lnk-default="{{ __('admin.links.actions.copy') }}"
                                        data-lnk-copied="{{ __('admin.links.actions.copied') }}">
                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                                        <rect x="9" y="9" width="13" height="13" rx="2" ry="2"/>
                                        <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/>
                                    </svg>
                                    <span data-lnk-label>{{ __('admin.links.actions.copy') }}</span>
                                </button>

                                <a href="{{ $link['url'] }}" target="_blank" rel="noopener noreferrer" class="lnk-btn lnk-btn--open">
                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                                        <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/>
                                        <polyline points="15 3 21 3 21 9"/>
                                        <line x1="10" y1="14" x2="21" y2="3"/>
                                    </svg>
                                    {{ __('admin.links.actions.open') }}
                                </a>
                            </div>
                        </div>
                    </div>
                </article>
            @endforeach
        </div>
    @endif

    {{-- Live toast — mirrors the pattern used on investors / startups
         show pages so admins see the same feedback shape everywhere. --}}
    <div class="lnk-toast" data-lnk-toast role="status" aria-live="polite" data-show="false">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="20 6 9 17 4 12"/></svg>
        <span data-lnk-toast-text>{{ __('admin.links.toast.copied') }}</span>
    </div>
@endsection

@push('scripts')
<script>
(function () {
    'use strict';

    const toast     = document.querySelector('[data-lnk-toast]');
    const toastText = toast?.querySelector('[data-lnk-toast-text]');
    let toastTimer  = null;

    function showToast(msg) {
        if (! toast) return;
        if (msg && toastText) toastText.textContent = msg;
        toast.dataset.show = 'true';
        clearTimeout(toastTimer);
        toastTimer = setTimeout(() => { toast.dataset.show = 'false'; }, 1700);
    }

    // Clipboard write with a textarea fallback for non-HTTPS contexts —
    // identical helper to the one in investors/startups show pages so
    // behaviour stays consistent across admin features.
    async function writeClipboard(text) {
        if (navigator.clipboard && window.isSecureContext) {
            try { await navigator.clipboard.writeText(text); return true; } catch (_) {}
        }
        try {
            const ta = document.createElement('textarea');
            ta.value = text;
            ta.setAttribute('readonly', '');
            ta.style.position = 'absolute'; ta.style.left = '-9999px';
            document.body.appendChild(ta);
            ta.select();
            const ok = document.execCommand('copy');
            document.body.removeChild(ta);
            return ok;
        } catch (_) { return false; }
    }

    document.querySelectorAll('[data-lnk-copy]').forEach(function (btn) {
        const label = btn.querySelector('[data-lnk-label]');
        const def   = btn.getAttribute('data-lnk-default') || 'Copy';
        const copied = btn.getAttribute('data-lnk-copied') || 'Copied';
        let revertTimer = null;

        btn.addEventListener('click', async function () {
            const url = btn.getAttribute('data-lnk-copy') || '';
            if (! url) return;
            const ok = await writeClipboard(url);
            if (! ok) return;

            // Per-button state — the button label flips briefly so the
            // user gets feedback at the click site, in addition to the
            // toast at the corner.
            btn.dataset.copied = 'true';
            if (label) label.textContent = copied;
            clearTimeout(revertTimer);
            revertTimer = setTimeout(() => {
                btn.dataset.copied = 'false';
                if (label) label.textContent = def;
            }, 1500);

            showToast();
        });
    });
})();
</script>
@endpush