@extends('layouts.admin')
@section('title', $campaign->exists ? 'Edit SMS' : 'New SMS')
@section('admin')
@php
    $action = $campaign->exists ? route('admin.sms-campaigns.update', $campaign) : route('admin.sms-campaigns.store');
    $tzList = ['UTC','America/Denver','America/Los_Angeles','America/Chicago','America/New_York','Europe/London','Europe/Berlin','Asia/Tokyo'];
@endphp
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8" x-data="smsCampaignBuilder({
    initialBody: @js(old('body', $campaign->body ?? '')),
    locked: @js(in_array($campaign->status ?? 'draft', ['queued','sending','sent'])),
})">
    @include('admin._nav')

    <div class="flex items-center justify-between mb-4">
        <h1 class="text-2xl font-bold text-white">{{ $campaign->exists ? 'Edit SMS Campaign' : 'New SMS Campaign' }}</h1>
        @if($campaign->exists)
            <span class="text-xs px-2 py-1 rounded bg-gray-800 border border-gray-700 text-gray-300 uppercase tracking-wide">{{ $campaign->status }}</span>
        @endif
    </div>

    @if(session('status'))<div class="mb-4 p-3 rounded bg-green-900/40 border border-green-700 text-green-200 text-sm">{{ session('status') }}</div>@endif
    @if(session('error'))<div class="mb-4 p-3 rounded bg-red-900/40 border border-red-700 text-red-200 text-sm">{{ session('error') }}</div>@endif
    @if($errors->any())<div class="mb-4 p-3 rounded bg-red-900/40 border border-red-700 text-red-200 text-sm"><ul class="list-disc list-inside">@foreach($errors->all() as $e)<li>{{ $e }}</li>@endforeach</ul></div>@endif

    <form method="POST" action="{{ $action }}" class="bg-gray-900 border border-gray-800 rounded-lg p-6 space-y-4">
        @csrf
        @if($campaign->exists)@method('PUT')@endif

        <div>
            <label class="block text-sm text-gray-300 mb-1">Name <span class="text-gray-500 text-xs">(internal only)</span></label>
            <input type="text" name="name" required value="{{ old('name', $campaign->name) }}"
                class="w-full bg-gray-800 border border-gray-700 rounded px-3 py-2 text-white">
        </div>

        <div>
            <div class="flex items-center justify-between mb-1">
                <label class="block text-sm text-gray-300">Message body</label>
                <div class="text-xs flex items-center gap-2">
                    <span class="px-1.5 py-0.5 rounded border border-gray-700 text-gray-300"
                          :class="analysis.encoding === 'UCS-2' ? 'bg-amber-900/40 border-amber-700 text-amber-200' : 'bg-gray-800'">
                        <span x-text="analysis.encoding"></span>
                    </span>
                    <span class="text-gray-400">
                        <span x-text="analysis.length"></span>
                        / <span x-text="analysis.segment_size * analysis.segments"></span> chars
                    </span>
                    <span :class="analysis.segments > 1 ? 'text-amber-300' : 'text-emerald-300'">
                        · <span x-text="analysis.segments"></span> segment<span x-show="analysis.segments !== 1">s</span>
                    </span>
                </div>
            </div>
            <textarea name="body" rows="5" required maxlength="1600" x-model="body" @input="recompute()"
                class="w-full bg-gray-800 border border-gray-700 rounded px-3 py-2 text-white font-mono text-sm">{{ old('body', $campaign->body) }}</textarea>
            <p class="text-xs text-gray-500 mt-1">
                "Reply STOP to opt out." is appended automatically if not present. Stay under 160 GSM-7 chars to fit in one SMS segment (or 70 chars for emoji/UCS-2).
            </p>
            <div x-show="analysis.encoding === 'UCS-2'" class="text-xs text-amber-300 mt-1">
                ⚠ Non-GSM characters detected (likely emoji or curly quotes) — switching to UCS-2 reduces capacity to 70 chars/segment.
            </div>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div>
                <label class="block text-sm text-gray-300 mb-1">Media URL <span class="text-gray-500 text-xs">(MMS, optional)</span></label>
                <input type="url" name="media_url" value="{{ old('media_url', $campaign->media_url) }}"
                    class="w-full bg-gray-800 border border-gray-700 rounded px-3 py-2 text-white">
            </div>
            <div class="flex items-center pt-6">
                <label class="inline-flex items-center text-sm text-gray-300">
                    <input type="hidden" name="shorten_links" value="0">
                    <input type="checkbox" name="shorten_links" value="1" class="mr-2"
                        @checked(old('shorten_links', $campaign->shorten_links))>
                    Shorten URLs in body via /s/ links
                </label>
            </div>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
            <div>
                <label class="block text-sm text-gray-300 mb-1">Schedule</label>
                <select name="schedule_mode" class="w-full bg-gray-800 border border-gray-700 rounded px-3 py-2 text-white">
                    <option value="now" @selected(old('schedule_mode', $campaign->schedule_mode) === 'now')>Send now (manual trigger)</option>
                    <option value="datetime" @selected(old('schedule_mode', $campaign->schedule_mode) === 'datetime')>At date/time</option>
                </select>
            </div>
            <div>
                <label class="block text-sm text-gray-300 mb-1">Date/time</label>
                <input type="datetime-local" name="scheduled_at"
                    value="{{ old('scheduled_at', optional($campaign->scheduled_at)->format('Y-m-d\\TH:i')) }}"
                    class="w-full bg-gray-800 border border-gray-700 rounded px-3 py-2 text-white">
            </div>
            <div>
                <label class="block text-sm text-gray-300 mb-1">Timezone</label>
                <select name="schedule_timezone" class="w-full bg-gray-800 border border-gray-700 rounded px-3 py-2 text-white">
                    @foreach($tzList as $tz)
                        <option value="{{ $tz }}" @selected(old('schedule_timezone', $campaign->schedule_timezone ?? 'UTC') === $tz)>{{ $tz }}</option>
                    @endforeach
                </select>
            </div>
        </div>

        <div>
            <label class="block text-sm text-gray-300 mb-1">Throttle (msgs/min, 0 = no throttle)</label>
            <input type="number" name="throttle_per_minute" min="0" max="600"
                value="{{ old('throttle_per_minute', $campaign->throttle_per_minute ?? 0) }}"
                class="w-32 bg-gray-800 border border-gray-700 rounded px-3 py-2 text-white">
        </div>

        <fieldset class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div>
                <legend class="block text-sm text-gray-300 mb-1">Include tags</legend>
                <select name="include_tag_ids[]" multiple class="w-full bg-gray-800 border border-gray-700 rounded px-3 py-2 text-white" size="6">
                    @foreach($tags as $t)<option value="{{ $t->id }}" @selected(in_array($t->id, $includeIds))>{{ $t->name }}</option>@endforeach
                </select>
            </div>
            <div>
                <legend class="block text-sm text-gray-300 mb-1">Exclude tags</legend>
                <select name="exclude_tag_ids[]" multiple class="w-full bg-gray-800 border border-gray-700 rounded px-3 py-2 text-white" size="6">
                    @foreach($tags as $t)<option value="{{ $t->id }}" @selected(in_array($t->id, $excludeIds))>{{ $t->name }}</option>@endforeach
                </select>
            </div>
        </fieldset>

        <div class="flex items-center justify-between">
            <button type="submit" :disabled="locked" class="bg-red-600 hover:bg-red-700 disabled:bg-gray-700 text-white px-4 py-2 rounded">Save draft</button>
            <a href="{{ route('admin.sms-campaigns.index') }}" class="text-sm text-gray-400 hover:text-white">Cancel</a>
        </div>
    </form>

    @if($campaign->exists)
    <div class="mt-6 bg-gray-900 border border-gray-800 rounded-lg p-6 grid grid-cols-1 md:grid-cols-4 gap-3">
        <form method="POST" action="{{ route('admin.sms-campaigns.send', $campaign) }}" onsubmit="return confirm('Build recipients and send to all matching active SMS subscribers?');">
            @csrf
            <button class="w-full bg-red-600 hover:bg-red-700 disabled:bg-gray-700 disabled:cursor-not-allowed text-white px-4 py-2 rounded"
                @disabled(! in_array($campaign->status, ['draft','paused','scheduled']))>
                Build &amp; Send
            </button>
        </form>
        <form method="POST" action="{{ route('admin.sms-campaigns.pause', $campaign) }}">
            @csrf
            <button class="w-full bg-amber-600 hover:bg-amber-700 disabled:bg-gray-700 disabled:cursor-not-allowed text-white px-4 py-2 rounded"
                @disabled(! in_array($campaign->status, ['queued','sending','scheduled']))>
                Pause
            </button>
        </form>
        <form method="POST" action="{{ route('admin.sms-campaigns.resume', $campaign) }}">
            @csrf
            <button class="w-full bg-emerald-600 hover:bg-emerald-700 disabled:bg-gray-700 disabled:cursor-not-allowed text-white px-4 py-2 rounded"
                @disabled($campaign->status !== 'paused')>
                Resume
            </button>
        </form>
        <form method="POST" action="{{ route('admin.sms-campaigns.cancel', $campaign) }}" onsubmit="return confirm('Cancel this SMS campaign? Remaining recipients will be skipped.');">
            @csrf
            <button class="w-full bg-gray-800 hover:bg-gray-700 disabled:bg-gray-900 disabled:cursor-not-allowed text-white px-4 py-2 rounded"
                @disabled(in_array($campaign->status, ['sent','canceled']))>
                Cancel
            </button>
        </form>
    </div>

    <form method="POST" action="{{ route('admin.sms-campaigns.sendTest', $campaign) }}" class="mt-3 bg-gray-900 border border-gray-800 rounded-lg p-4 flex flex-wrap gap-2 items-center">
        @csrf
        <input type="tel" name="phone" required placeholder="+13035551234"
            class="flex-1 min-w-[200px] bg-gray-800 border border-gray-700 rounded px-3 py-2 text-white">
        <button class="bg-gray-700 hover:bg-gray-600 text-white px-4 py-2 rounded">Send test</button>
        <span class="text-xs text-gray-500">Sends to a single Twilio-verified number using the saved body.</span>
    </form>

    <div class="mt-3 text-xs text-gray-400">
        Status: <span class="text-white">{{ $campaign->status }}</span>
        · Sent: {{ $campaign->sent_count }}
        · Failed: {{ $campaign->failed_count }}
        · Delivered: {{ $campaign->delivered_count }} / {{ $campaign->total_recipients }}
        @if($campaign->segment_count) · Cost estimate: {{ $campaign->segment_count }} segment{{ $campaign->segment_count===1?'':'s' }}/recipient @endif
    </div>
    @endif
</div>

<script>
function smsCampaignBuilder({ initialBody, locked }) {
    return {
        body: initialBody || '',
        locked: !!locked,
        analysis: { length: 0, chars: 0, encoding: 'GSM-7', segments: 1, segment_size: 160, remaining_in_segment: 160 },
        gsmBasic: "@£$¥èéùìòÇ\nØø\rÅåΔ_ΦΓΛΩΠΨΣΘΞ\u001bÆæßÉ !\"#¤%&'()*+,-./0123456789:;<=>?¡ABCDEFGHIJKLMNOPQRSTUVWXYZÄÖÑܧ¿abcdefghijklmnopqrstuvwxyzäöñüà",
        gsmExt: "^{}\\[~]|€\f",
        init() { this.recompute(); },
        recompute() {
            // Match the server-side SmsBodyAnalyzer for instant feedback.
            let encoding = 'GSM-7', units = 0, chars = [...this.body].length;
            for (const ch of this.body) {
                if (this.gsmBasic.indexOf(ch) === -1 && this.gsmExt.indexOf(ch) === -1) { encoding = 'UCS-2'; break; }
            }
            if (encoding === 'GSM-7') {
                for (const ch of this.body) units += (this.gsmExt.indexOf(ch) !== -1) ? 2 : 1;
                const perSeg = units <= 160 ? 160 : 153;
                const segments = Math.max(1, Math.ceil(units / perSeg));
                this.analysis = { length: units, chars, encoding, segments, segment_size: perSeg, remaining_in_segment: Math.max(0, segments * perSeg - units) };
            } else {
                const perSeg = chars <= 70 ? 70 : 67;
                const segments = Math.max(1, Math.ceil(chars / perSeg));
                this.analysis = { length: chars, chars, encoding, segments, segment_size: perSeg, remaining_in_segment: Math.max(0, segments * perSeg - chars) };
            }
        },
    };
}
</script>
@endsection