@extends('layouts.app')

@section('title', ($channel ?? 'sms') === 'whatsapp' ? 'WhatsApp Message' : 'Send SMS')

@php
    $isWhatsApp = ($channel ?? 'sms') === 'whatsapp';
    $audience = old('audience', 'parents');
@endphp

@section('content')
    <div class="flex flex-col gap-6">
        <div class="flex items-end justify-between gap-3">
            <div>
                <h1 class="text-lg font-semibold">{{ $isWhatsApp ? 'WhatsApp Message' : 'Send SMS' }}</h1>
                <p class="text-xs text-muted-foreground">
                    {{ $isWhatsApp
                        ? 'Broadcast a WhatsApp message to parents, staff, a transport route or pasted numbers'
                        : 'Broadcast an SMS to parents, staff, a transport route or pasted numbers' }}
                </p>
            </div>

            <div class="flex items-center gap-3">
                @if ($balance !== null)
                    <span class="rounded-full border border-border bg-card px-3 py-1.5 text-xs">
                        Balance <strong class="font-semibold">{{ number_format($balance) }}</strong> credits
                    </span>
                @endif
                <a href="{{ route($isWhatsApp ? 'communication.whatsapp.history' : 'communication.sms.history') }}"
                   class="rounded-lg border border-border px-3 py-2 text-sm hover:bg-accent">View history</a>
            </div>
        </div>

        @if ($isWhatsApp)
            <div class="rounded-lg border border-amber-300 bg-amber-50 px-4 py-2.5 text-xs text-amber-800">
                WhatsApp sends are recorded in the same ledger as SMS and are <strong>not</strong> delivered to a real
                gateway yet — no Meta Cloud API account is attached. Treat this as a staging tool.
            </div>
        @endif

        <form method="post" action="{{ route($isWhatsApp ? 'communication.whatsapp.send' : 'communication.sms.send') }}"
              class="grid gap-6 lg:grid-cols-3" data-sms-form>
            @csrf
            <input type="hidden" name="channel" value="{{ $isWhatsApp ? 'whatsapp' : 'sms' }}">

            <div class="flex flex-col gap-4 lg:col-span-2">
                <section class="rounded-xl border border-border bg-card p-4">
                    <h2 class="mb-3 text-sm font-semibold">Recipients</h2>

                    <div class="mb-3 grid gap-2 sm:grid-cols-2">
                        @foreach (['parents' => 'Parents', 'teachers' => 'Teachers', 'route' => 'Transport route', 'custom' => 'Custom numbers'] as $key => $label)
                            <label class="flex cursor-pointer items-center gap-2 rounded-lg border p-2.5 text-sm {{ old('audience', 'parents') === $key ? 'border-primary bg-primary/5' : 'border-border hover:bg-accent' }}">
                                <input type="radio" name="audience" value="{{ $key }}" class="size-4"
                                       @checked(old('audience', 'parents') === $key)>
                                <span>{{ $label }}</span>
                            </label>
                        @endforeach
                    </div>

                    <div class="grid gap-3 sm:grid-cols-2">
                        <label class="flex flex-col gap-1 text-xs" data-aud="parents">
                            <span class="text-muted-foreground">Class</span>
                            <select name="form" class="h-9 rounded-lg border border-input bg-background px-2 text-sm">
                                <option value="">All classes</option>
                                @foreach ($forms as $f)
                                    <option value="{{ $f }}" @selected(old('form') === $f)>{{ $f }}</option>
                                @endforeach
                            </select>
                        </label>

                        <label class="flex flex-col gap-1 text-xs" data-aud="parents">
                            <span class="text-muted-foreground">Stream</span>
                            <select name="stream" class="h-9 rounded-lg border border-input bg-background px-2 text-sm">
                                <option value="">All streams</option>
                                @foreach ($streams as $s)
                                    <option value="{{ $s }}" @selected(old('stream') === $s)>{{ $s }}</option>
                                @endforeach
                            </select>
                        </label>

                        <label class="flex flex-col gap-1 text-xs" data-aud="teachers">
                            <span class="text-muted-foreground">Staff category</span>
                            <select name="category" class="h-9 rounded-lg border border-input bg-background px-2 text-sm">
                                @foreach ($categories as $c)
                                    <option value="{{ $c }}" @selected(old('category', 'All Staff') === $c)>{{ $c }}</option>
                                @endforeach
                            </select>
                        </label>

                        <label class="flex flex-col gap-1 text-xs" data-aud="route">
                            <span class="text-muted-foreground">Route</span>
                            <select name="route" class="h-9 rounded-lg border border-input bg-background px-2 text-sm">
                                <option value="">All routes</option>
                                @foreach ($routes as $r)
                                    <option value="{{ $r }}" @selected(old('route') === $r)>{{ $r }}</option>
                                @endforeach
                            </select>
                        </label>

                        <label class="flex flex-col gap-1 text-xs sm:col-span-2" data-aud="custom">
                            <span class="text-muted-foreground">Numbers — paste any text; 07xx and +2547xx are picked out</span>
                            <textarea name="custom" rows="3"
                                      class="rounded-lg border border-input bg-background px-2 py-1.5 text-sm"
                                      placeholder="0712 345 678, +254722000111">{{ old('custom') }}</textarea>
                            <span class="text-[11px] text-muted-foreground" data-count>0 numbers detected</span>
                        </label>
                    </div>
                </section>

                <section class="rounded-xl border border-border bg-card p-4">
                    <div class="mb-3 flex items-center justify-between gap-2">
                        <h2 class="text-sm font-semibold">Message</h2>
                        <span class="text-[11px] text-muted-foreground" data-chars>0 characters</span>
                    </div>

                    <textarea name="message" rows="6" required
                              class="w-full rounded-lg border border-input bg-background px-3 py-2 text-sm"
                              placeholder="Type your message…">{{ old('message') }}</textarea>

                    <div class="mt-3">
                        <span class="mb-1.5 block text-xs text-muted-foreground">Quick templates</span>
                        <div class="flex flex-wrap gap-1.5">
                            @foreach ($templates as $i => $tpl)
                                <button type="button" class="rounded-md border border-border px-2 py-1 text-[11px] hover:bg-accent"
                                        data-template="{{ $tpl }}">#{{ $i + 1 }}</button>
                            @endforeach
                        </div>
                    </div>
                </section>
            </div>

            <aside class="flex flex-col gap-4">
                <section class="rounded-xl border border-border bg-card p-4">
                    <h2 class="mb-2 text-sm font-semibold">Summary</h2>
                    <dl class="flex flex-col gap-1.5 text-xs">
                        <div class="flex justify-between gap-2">
                            <dt class="text-muted-foreground">Channel</dt>
                            <dd class="font-medium">{{ $isWhatsApp ? 'WhatsApp' : 'SMS' }}</dd>
                        </div>
                        <div class="flex justify-between gap-2">
                            <dt class="text-muted-foreground">Audience</dt>
                            <dd class="font-medium" data-aud-label>Parents (All classes)</dd>
                        </div>
                        <div class="flex justify-between gap-2">
                            <dt class="text-muted-foreground">Segments</dt>
                            <dd class="font-medium" data-seg>1</dd>
                        </div>
                        <div class="flex justify-between gap-2 border-t border-border pt-1.5">
                            <dt class="text-muted-foreground">Credits needed</dt>
                            <dd class="font-semibold" data-cost>0</dd>
                        </div>
                    </dl>
                    <p class="mt-3 text-[11px] text-muted-foreground">
                        Estimated from the filters above. The exact cost is confirmed when the send completes.
                    </p>
                </section>

                <button type="submit" class="rounded-lg bg-primary px-4 py-2.5 text-sm font-medium text-primary-foreground hover:bg-primary/90">
                    Send {{ $isWhatsApp ? 'WhatsApp' : 'SMS' }}
                </button>
            </aside>
        </form>
    </div>
@endsection

@push('scripts')
    <script>
        (function () {
            const form = document.querySelector('[data-sms-form]');
            if (!form) return;

            const message = form.querySelector('[name="message"]');
            const custom = form.querySelector('[name="custom"]');
            const charsOut = form.querySelector('[data-chars]');
            const segOut = form.querySelector('[data-seg]');
            const costOut = form.querySelector('[data-cost]');
            const countOut = form.querySelector('[data-count]');
            const labelOut = form.querySelector('[data-aud-label]');

            const SEGMENT = 160;

            function audience() {
                return form.querySelector('[name="audience"]:checked')?.value || 'parents';
            }

            function segments() {
                return Math.max(1, Math.ceil((message.value || '').length / SEGMENT));
            }

            // Mirrors parsePhones() in the controller so the counter and the
            // real send agree on how many numbers were found.
            function parsedPhones(raw) {
                const out = new Set();
                const re = /(?:\+?254|0)\s*7(?:[\s\-]?\d){8}/g;
                let m;
                while ((m = re.exec(raw || '')) !== null) {
                    const compact = m[0].replace(/[\s\-]/g, '');
                    out.add(compact.startsWith('+') ? '0' + compact.slice(4)
                        : compact.length === 9 ? '0' + compact : compact);
                }
                return out;
            }

            function label() {
                const val = audience();
                if (val === 'teachers') return 'Teachers (' + (form.category.value || 'All Staff') + ')';
                if (val === 'route') return 'Transport (' + (form.route.value || 'All routes') + ')';
                if (val === 'custom') return 'Custom numbers';
                if (form.form.value && form.stream.value) return 'Parents (' + form.form.value + ' ' + form.stream.value + ')';
                if (form.form.value) return 'Parents (' + form.form.value + ' · All streams)';
                return 'Parents (All classes)';
            }

            function refresh() {
                const segs = segments();
                const len = (message.value || '').length;

                charsOut.textContent = len + ' character' + (len === 1 ? '' : 's');
                segOut.textContent = segs;
                costOut.textContent = segs * ' x recipients';
                labelOut.textContent = label();

                // Only the custom box can be counted client-side without
                // querying the roster, so show a count there and nothing else.
                if (audience() === 'custom') {
                    const n = parsedPhones(custom.value).size;
                    countOut.textContent = n + ' number' + (n === 1 ? '' : 's') + ' detected';
                } else {
                    countOut.textContent = 'Recipients are counted when the send completes.';
                }

                form.querySelectorAll('[data-aud]').forEach((el) => {
                    el.classList.toggle('hidden', el.dataset.aud !== audience());
                });
            }

            form.addEventListener('input', refresh);
            form.addEventListener('change', refresh);

            form.querySelectorAll('[data-template]').forEach((btn) => {
                btn.addEventListener('click', function () {
                    message.value = btn.dataset.template;
                    refresh();
                });
            });

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