@extends('layouts.app')

@section('title', 'Send Email')

@php $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">Send Email</h1>
                <p class="text-xs text-muted-foreground">Email parents, staff or a custom list of addresses</p>
            </div>
            <a href="{{ route('communication.email.history') }}" class="rounded-lg border border-border px-3 py-2 text-sm hover:bg-accent">View history</a>
        </div>

        <div class="rounded-lg border border-amber-300 bg-amber-50 px-4 py-2.5 text-xs text-amber-800">
            Email is written to the ledger but <strong>not</strong> handed to an SMTP server — no mail transport is
        configured. Treat this as a staging tool.
        </div>

        <form method="post" action="{{ route('communication.email.send') }}" class="grid gap-6 lg:grid-cols-3">
            @csrf
            <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-3">
                        @foreach (['parents' => 'Parents', 'teachers' => 'Teachers', 'custom' => 'Custom addresses'] 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 sm:col-span-2" data-aud="custom">
                            <span class="text-muted-foreground">Addresses — separated by spaces, commas or semicolons</span>
                            <textarea name="custom" rows="3"
                                      class="rounded-lg border border-input bg-background px-2 py-1.5 text-sm"
                                      placeholder="parent@example.com, another@example.com">{{ old('custom') }}</textarea>
                        </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>

                    <label class="mb-3 flex flex-col gap-1 text-xs">
                        <span class="text-muted-foreground">Subject</span>
                        <input type="text" name="subject" required maxlength="180" value="{{ old('subject') }}"
                               class="rounded-lg border border-input bg-background px-3 py-2 text-sm"
                               placeholder="Subject line">
                    </label>

                    <label class="flex flex-col gap-1 text-xs">
                        <span class="text-muted-foreground">Body — blank lines become separate paragraphs</span>
                        <textarea name="body" rows="10" required
                                  class="w-full rounded-lg border border-input bg-background px-3 py-2 text-sm"
                                  placeholder="Dear Parent,&#10;&#10;…">{{ old('body') }}</textarea>
                    </label>

                    <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-subject="{{ $tpl[0] }}" data-body="{{ $tpl[1] }}">
                                    {{ $tpl[0] }}
                                </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">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">Subject</dt>
                            <dd class="max-w-[60%] truncate text-right font-medium" data-subject-label>—</dd>
                        </div>
                    </dl>
                    <p class="mt-3 text-[11px] text-muted-foreground">
                        The recipient count is resolved from the roster 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 Email
                </button>
            </aside>
        </form>
    </div>
@endsection

@push('scripts')
    <script>
        (function () {
            const form = document.querySelector('form[action$="/communications/email"]');
            if (!form) return;

            const body = form.querySelector('[name="body"]');
            const subject = form.querySelector('[name="subject"]');
            const charsOut = form.querySelector('[data-chars]');
            const labelOut = form.querySelector('[data-aud-label]');
            const subjOut = form.querySelector('[data-subject-label]');

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

            function label() {
                const val = audience();
                if (val === 'teachers') return 'Teachers (' + (form.category.value || 'All Staff') + ')';
                if (val === 'custom') return 'Custom addresses';
                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 len = (body.value || '').length;
                charsOut.textContent = len + ' character' + (len === 1 ? '' : 's');
                labelOut.textContent = label();
                subjOut.textContent = subject.value || '—';

                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-subject]').forEach((btn) => {
                btn.addEventListener('click', function () {
                    subject.value = btn.dataset.subject;
                    body.value = btn.dataset.body;
                    refresh();
                });
            });

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