@extends('layouts.app')

@section('title', 'Compose')

@section('content')
<div x-data="composer({ storeUrl: '{{ route('statuses.store') }}' })">

    {{-- Format Tabs --}}
    <div class="flex p-base bg-surface-container-high rounded-lg shadow-inner overflow-x-auto hide-scrollbar border border-outline-variant/30">
        @foreach(['text' => 'notes', 'image' => 'image', 'voice' => 'mic', 'video' => 'videocam'] as $type => $icon)
        <button @click="format = '{{ $type }}'"
            class="flex-1 min-w-[80px] py-2 px-4 rounded-md font-data-label text-data-label flex items-center justify-center gap-xs active:scale-95 transition-transform"
            :class="format === '{{ $type }}' ? 'bg-primary-container text-on-primary-container shadow-sm' : 'text-on-surface-variant hover:bg-surface-variant/50'">
            <span class="material-symbols-outlined text-[16px]">{{ $icon }}</span>
            {{ ucfirst($type) }}
        </button>
        @endforeach
    </div>

    {{-- Compose Area --}}
    <div class="glass-card rounded-xl flex flex-col overflow-hidden">
        <template x-if="format === 'text'">
            <div>
                <div class="flex gap-sm p-sm overflow-x-auto hide-scrollbar border-b border-outline-variant/30 bg-surface-container-lowest/50">
                    <template x-for="grad in gradients" :key="grad.start">
                        <div @click="gradientStart = grad.start; gradientEnd = grad.end"
                             class="w-8 h-8 rounded-full border cursor-pointer flex-shrink-0"
                             :class="gradientStart === grad.start ? 'border-primary' : 'border-outline-variant'"
                             :style="`background: linear-gradient(135deg, ${grad.start}, ${grad.end})`"></div>
                    </template>
                </div>
                <div class="relative p-md min-h-[200px] flex flex-col justify-center" :style="gradientStart ? `background: linear-gradient(135deg, ${gradientStart}, ${gradientEnd})` : ''">
                    <textarea x-model="caption" class="w-full bg-transparent border-none focus:ring-0 text-center font-headline-lg-mobile text-headline-lg-mobile text-on-surface placeholder:text-on-surface-variant/50 resize-none h-full outline-none" placeholder="What's happening?" maxlength="2000"></textarea>
                    <button type="button" @click="requestAiCaption()" :disabled="aiLoading" class="absolute bottom-md right-md bg-surface-container-highest hover:bg-surface-bright text-primary p-xs rounded-full border border-primary/30 flex items-center gap-xs px-3 shadow-md transition-colors group disabled:opacity-50">
                        <span class="material-symbols-outlined text-[18px]" :class="aiLoading ? 'animate-spin' : 'group-hover:animate-pulse'">auto_awesome</span>
                        <span class="font-data-label text-data-label" x-text="aiLoading ? 'Thinking…' : 'AI Assist'"></span>
                    </button>
                </div>
            </div>
        </template>

        <template x-if="format !== 'text'">
            <div class="p-md flex flex-col gap-md">
                <input type="file" @change="mediaFile = $event.target.files[0]" :accept="format === 'image' ? 'image/*' : (format === 'voice' ? 'audio/*' : 'video/*')" class="text-on-surface-variant">
                <textarea x-model="caption" class="w-full bg-surface-container-lowest border border-outline-variant/50 rounded-lg p-3 text-on-surface" placeholder="Add a caption..." rows="3" maxlength="2000"></textarea>
            </div>
        </template>
    </div>

    {{-- Options --}}
    <div class="flex flex-col gap-md">
        <div class="glass-panel p-md rounded-lg flex items-center justify-between">
            <div class="flex items-center gap-md">
                <div class="w-10 h-10 rounded-full bg-surface-container-highest flex items-center justify-center text-on-surface-variant">
                    <span class="material-symbols-outlined">link</span>
                </div>
                <div>
                    <h3 class="font-body-md text-body-md font-semibold text-on-surface">Attach Social Link</h3>
                    <p class="font-body-sm text-body-sm text-on-surface-variant">WhatsApp, Telegram, etc.</p>
                </div>
            </div>
            <select x-model="ctaChannel" class="bg-surface-container-lowest border border-outline-variant/50 rounded-lg p-2 text-on-surface">
                <option value="">None</option>
                <option value="whatsapp">WhatsApp</option>
                <option value="telegram">Telegram</option>
            </select>
        </div>

        <template x-if="ctaChannel">
            <input x-model="ctaMessage" placeholder="Pre-filled message (optional)" class="w-full bg-surface-container-lowest border border-outline-variant/50 rounded-lg p-3 text-on-surface">
        </template>

        <div class="flex items-center justify-center gap-sm mt-sm">
            <div class="flex items-center gap-xs bg-surface-container-low px-3 py-1.5 rounded-full border border-outline-variant/30">
                <span class="material-symbols-outlined text-[14px] text-secondary">lock</span>
                <span class="font-data-label text-data-label text-on-surface-variant">End-to-End Encrypted</span>
            </div>
        </div>

        <p x-show="error" x-text="error" class="text-error font-body-sm text-body-sm text-center"></p>
    </div>

    <button @click="publish()" :disabled="publishing" class="w-full mt-lg py-4 rounded-lg bg-primary-container text-on-primary-container font-headline-lg-mobile text-headline-lg-mobile shadow-[0_-4px_20px_rgba(79,70,229,0.15)] hover:opacity-90 active:scale-[0.98] transition-all flex items-center justify-center gap-sm disabled:opacity-50">
        <span x-text="publishing ? 'Publishing…' : 'Publish Status'"></span>
        <span class="material-symbols-outlined">send</span>
    </button>
</div>
@endsection

@push('scripts')
<script>
function composer({ storeUrl }) {
    return {
        format: 'text',
        caption: '',
        gradientStart: null,
        gradientEnd: null,
        mediaFile: null,
        ctaChannel: '',
        ctaMessage: '',
        publishing: false,
        aiLoading: false,
        error: '',
        gradients: [
            { start: '#4f46e5', end: '#4d44e3' },
            { start: '#c3c0ff', end: '#4f46e5' },
            { start: '#00a572', end: '#4edea3' },
            { start: '#ffb95f', end: '#885500' },
        ],
        async requestAiCaption() {
            this.error = '';
            this.aiLoading = true;
            try {
                const { data } = await window.axios.post('{{ route('statuses.ai-caption') }}', {
                    draft: this.caption,
                    type: this.format,
                });
                this.caption = data.caption;
            } catch (e) {
                this.error = e.response?.data?.message || 'AI Assist is unavailable right now.';
            } finally {
                this.aiLoading = false;
            }
        },
        async publish() {
            this.error = '';
            this.publishing = true;
            const form = new FormData();
            form.append('type', this.format);
            form.append('caption', this.caption);
            if (this.gradientStart) form.append('gradient_start', this.gradientStart);
            if (this.gradientEnd) form.append('gradient_end', this.gradientEnd);
            if (this.mediaFile) form.append('media', this.mediaFile);
            if (this.ctaChannel) {
                form.append('cta_channel', this.ctaChannel);
                form.append('cta_prefill_message', this.ctaMessage);
            }

            try {
                const { data } = await window.axios.post(storeUrl, form, { headers: { 'Content-Type': 'multipart/form-data' } });
                window.location.href = `/statuses/${data.status.id}`;
            } catch (e) {
                this.error = e.response?.data?.message || 'Unable to publish. Check the required fields.';
            } finally {
                this.publishing = false;
            }
        },
    };
}
</script>
@endpush