@extends('layouts.app')

@section('title', 'Send Design Link')

@section('body_class', 'np-send-page')

@section('content')
@php
    $sentId = session('sent_request_id') ?: request('sent');
    $sent = $sentId ? \App\Models\NameplateRequest::query()->find($sentId) : null;
    $wiz = \App\Models\NameplateWizardSetting::get();
    $shareText = '';
    if ($sent) {
        $expires = $sent->expires_at
            ? $sent->expires_at->timezone(config('app.deals_display_timezone', 'America/New_York'))->format('M j, Y g:i A T')
            : 'soon';
        $shareText = str_replace(
            ['{link}', '{expires}', '{url}'],
            [$sent->privateUrl(), $expires, $sent->privateUrl()],
            $wiz->shareMessageTemplate()
        );
    }
@endphp
<div class="np-send">
    <header class="np-send__head">
        <p class="np-send__kicker">Nameplates</p>
        <h1>Send Design Link</h1>
        <p class="np-send__lede">Invite a client to design their custom nameplate. Send one private link by SMS and/or email — or copy the public link for Story, bio, Instagram DM, or WhatsApp.</p>
        <p class="np-send__nav">
            <a href="{{ route('nameplates.index') }}">← Nameplates</a>
            <a href="{{ route('nameplates.requests.index') }}">Nameplate Requests</a>
        </p>
    </header>

    @if(session('success'))
        <div class="np-send__flash np-send__flash--ok">{{ session('success') }}</div>
    @endif
    @if(session('error'))
        <div class="np-send__flash np-send__flash--err">{{ session('error') }}</div>
    @endif
    @foreach($errors->all() as $err)
        <div class="np-send__flash np-send__flash--err">{{ $err }}</div>
    @endforeach

    <form method="POST" action="{{ route('nameplates.send-link.send') }}" class="np-send__card">
        @csrf
        <label class="np-send__label" for="phone">Phone <span>(optional)</span></label>
        <input class="np-send__input" type="tel" name="phone" id="phone" value="{{ old('phone') }}" placeholder="(786) 555-0100" autocomplete="tel">

        <label class="np-send__label" for="email">Email <span>(optional)</span></label>
        <input class="np-send__input" type="email" name="email" id="email" value="{{ old('email') }}" placeholder="client@email.com" autocomplete="email">

        <button type="submit" class="np-send__btn">Send Private Design Link</button>
        <p class="np-send__hint">Phone only, email only, or both — always one request and one private link. Do not collect name or address here.</p>
    </form>

    <div class="np-send__card np-send__card--public">
        <p class="np-send__public-label">Public link — for Story, bio, Instagram DM or WhatsApp</p>
        <p class="np-send__public-url" id="np_public_url">{{ $publicUrl }}</p>
        <button type="button" class="np-send__btn np-send__btn--ghost" id="np_copy_public">Copy Public Link</button>
        <p class="np-send__hint">Copies the fixed public URL. Does not create a request or token. Ignores phone/email above.</p>
    </div>

    @if($sent)
        <div class="np-send__card">
            <p class="np-send__public-label">Private link just created</p>
            <p class="np-send__public-url" id="np_private_url">{{ $sent->privateUrl() }}</p>
            <p class="np-send__hint">{{ $sent->originLabel() }} · {{ $sent->contactSummary() }}</p>
            <div class="np-send__row">
                <button type="button" class="np-send__btn np-send__btn--ghost" id="np_copy_private">Copy Private Link</button>
                <button type="button" class="np-send__btn np-send__btn--ghost" id="np_copy_share">Copy WhatsApp / DM Message</button>
            </div>
            <textarea id="np_share_text" class="np-send__ta" readonly>{{ $shareText }}</textarea>
        </div>
    @endif

    <section class="np-send__card">
        <h2 class="np-send__h2">Message templates</h2>
        <p class="np-send__hint">Edit these in Settings → Nameplates → Quick Wizard links.</p>
        <h3 class="np-send__h3">SMS</h3>
        <pre class="np-send__pre">{{ $previews['sms'] ?? '' }}</pre>
        <h3 class="np-send__h3">Email subject</h3>
        <pre class="np-send__pre">{{ $previews['email_subject'] ?? '' }}</pre>
        <h3 class="np-send__h3">Email body</h3>
        <div class="np-send__email">{!! $previews['email_body'] !!}</div>
        <h3 class="np-send__h3">WhatsApp / Instagram DM</h3>
        <pre class="np-send__pre">{{ $previews['share_message'] ?? '' }}</pre>
    </section>
</div>
@endsection

@push('styles')
<style>
body.np-send-page { background:#0c0a09; }
body.np-send-page .main { background:#0c0a09; }
body.np-send-page main.main > .container { max-width: 40rem !important; }
body.np-send-page .app-footer { display:none; }
.np-send { color:#f5f0e8; padding:1.5rem 0 3rem; }
.np-send__head { margin-bottom:1.5rem; }
.np-send__kicker { margin:0 0 .5rem; font-size:.7rem; letter-spacing:.4em; text-transform:uppercase; color:#c9a25c; font-weight:600; }
.np-send h1 { margin:0; font-family:"Palatino Linotype",Palatino,"Times New Roman",serif; font-size:clamp(1.8rem,4vw,2.6rem); font-weight:500; }
.np-send__lede { margin:.75rem 0 1rem; color:#b8a994; line-height:1.55; }
.np-send__nav { display:flex; gap:1rem; flex-wrap:wrap; }
.np-send__nav a { color:#c9a25c; text-decoration:none; font-size:.85rem; }
.np-send__card { background:rgba(255,255,255,.03); border:1px solid rgba(201,162,92,.28); border-radius:8px; padding:1.25rem; margin-bottom:1rem; }
.np-send__card--public { border-style:dashed; }
.np-send__label { display:block; margin:.75rem 0 .35rem; font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color:#c9a25c; }
.np-send__label span { color:#78716c; text-transform:none; letter-spacing:0; }
.np-send__input { width:100%; box-sizing:border-box; padding:.85rem 1rem; border-radius:4px; border:1px solid #3f3a34; background:#1c1917; color:#f5f0e8; font-size:16px; }
.np-send__btn { margin-top:1rem; width:100%; padding:.95rem 1rem; border:0; border-radius:3px; background:#c9a25c; color:#1a140c; font-weight:700; letter-spacing:.1em; text-transform:uppercase; font-size:.78rem; cursor:pointer; }
.np-send__btn--ghost { background:transparent; color:#c9a25c; border:1px solid rgba(201,162,92,.5); }
.np-send__row { display:grid; gap:.6rem; }
@media(min-width:640px){ .np-send__row{ grid-template-columns:1fr 1fr; } }
.np-send__hint { margin:.65rem 0 0; color:#78716c; font-size:.82rem; line-height:1.45; }
.np-send__public-label { margin:0 0 .5rem; color:#c9a25c; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; }
.np-send__public-url { margin:0; word-break:break-all; color:#f5f0e8; font-size:.92rem; }
.np-send__h2 { margin:0 0 .5rem; font-size:1.05rem; font-family:Georgia,serif; }
.np-send__h3 { margin:1rem 0 .35rem; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:#c9a25c; }
.np-send__pre { white-space:pre-wrap; background:#1c1917; padding:.85rem; border-radius:4px; color:#d6d3d1; font-size:.85rem; margin:0; }
.np-send__email { background:#1c1917; padding:.85rem; border-radius:4px; color:#d6d3d1; font-size:.9rem; }
.np-send__ta { width:100%; min-height:7rem; margin-top:.75rem; box-sizing:border-box; background:#1c1917; color:#d6d3d1; border:1px solid #3f3a34; border-radius:4px; padding:.75rem; font-size:.85rem; }
.np-send__flash { padding:.75rem 1rem; border-radius:4px; margin-bottom:1rem; }
.np-send__flash--ok { background:rgba(16,185,129,.15); color:#6ee7b7; }
.np-send__flash--err { background:rgba(239,68,68,.15); color:#fca5a5; }
</style>
@endpush

@push('scripts')
<script>
(function () {
    function copyText(text, btn) {
        if (!text) return;
        var done = function () {
            if (!btn) return;
            var old = btn.textContent;
            btn.textContent = 'Copied';
            setTimeout(function () { btn.textContent = old; }, 1200);
        };
        if (navigator.clipboard && navigator.clipboard.writeText) {
            navigator.clipboard.writeText(text.trim()).then(done).catch(function () {
                window.prompt('Copy:', text.trim());
            });
        } else {
            window.prompt('Copy:', text.trim());
        }
    }
    var pub = document.getElementById('np_copy_public');
    if (pub) pub.addEventListener('click', function () {
        copyText((document.getElementById('np_public_url') || {}).textContent || '', pub);
    });
    var priv = document.getElementById('np_copy_private');
    if (priv) priv.addEventListener('click', function () {
        copyText((document.getElementById('np_private_url') || {}).textContent || '', priv);
    });
    var share = document.getElementById('np_copy_share');
    if (share) share.addEventListener('click', function () {
        var ta = document.getElementById('np_share_text');
        copyText(ta ? ta.value : '', share);
    });
})();
</script>
@endpush