@php
    $statusChip = [
        'open' => 'bg-blue-500/15 text-blue-400',
        'answered' => 'bg-green-500/15 text-green-400',
        'closed' => 'bg-slate-500/15 text-slate-400',
    ];
    $faqs = [
        ['What is the difference between Web Cloud and Desktop?',
         'Web Cloud runs entirely on our servers — your computer never needs to stay online. Desktop runs on your own Windows PC or VPS: the app does the downloading, processing and publishing while staying connected to your account for licensing and stats.'],
        ['How do I connect a social media account?',
         'Accounts are connected inside the CC Publisher desktop app, which holds the platform tokens securely on your machine. Once connected, they appear on the web under Accounts and Platforms after the next sync.'],
        ['Why does my analytics chart say "Estimated"?',
         'Your desktop app reports totals on every sync, but per-day history only builds up as it syncs published jobs. Until then the chart shows an estimated shape anchored to your real totals — the badge disappears once real history arrives.'],
        ['Can I move my Desktop license to a new computer?',
         'Yes — one license seat covers one active device. Open a ticket (or contact us) and we will reset the old device so you can activate the new one.'],
        ['How do upgrades and downgrades work?',
         'Change your package any time from Billing → Change plan. Card payments activate instantly; manual payment methods activate once we confirm your payment. Your limits update immediately with the new package.'],
        ['What happens to a failed post?',
         'Failed jobs stay in your Queue with the error message. You can retry them from the web — the desktop app picks the retry up on its next sync. Three failures in a row pause the automation so it doesn\'t burn your quota.'],
    ];
@endphp

<div class="space-y-5">

    {{-- Title row --}}
    <div class="flex flex-wrap items-start justify-between gap-4">
        <div>
            <h1 class="text-2xl font-bold text-white">Support</h1>
            <p class="mt-1 text-sm text-slate-400">Get help with CC Publisher — we usually reply within one business day.</p>
        </div>
        <button wire:click="openForm"
                class="inline-flex items-center gap-2 rounded-xl bg-brand px-4 py-2.5 text-sm font-semibold text-white shadow-lg shadow-brand/25 hover:bg-brand-700">
            <x-lucide-message-square-plus class="h-4 w-4" /> New ticket
        </button>
    </div>

    <div class="grid grid-cols-1 gap-5 xl:grid-cols-12">
        {{-- Main column --}}
        <div class="space-y-5 xl:col-span-8">
            {{-- Tickets --}}
            <section class="admin-card">
                <div class="border-b border-edge px-5 py-4">
                    <h3 class="text-base font-semibold text-white">Your tickets</h3>
                </div>
                @if ($tickets->count())
                    <div class="divide-y divide-edge">
                        @foreach ($tickets as $t)
                            <div class="px-5 py-4">
                                <div class="flex flex-wrap items-center gap-2.5">
                                    <span class="font-mono text-xs text-slate-600">#{{ $t->id }}</span>
                                    <span class="text-sm font-semibold text-white">{{ $t->subject }}</span>
                                    <span class="admin-chip {{ $statusChip[$t->status] ?? 'bg-slate-500/15 text-slate-400' }}">{{ ucfirst($t->status) }}</span>
                                    <span class="ml-auto text-[11px] text-slate-600">{{ $t->created_at->diffForHumans() }}</span>
                                </div>
                                <p class="mt-1.5 line-clamp-2 text-xs leading-relaxed text-slate-400">{{ $t->message }}</p>
                                @if ($t->admin_reply)
                                    <div class="mt-2.5 rounded-xl border border-green-500/20 bg-green-500/5 px-3.5 py-2.5">
                                        <div class="mb-1 flex items-center gap-1.5 text-[11px] font-semibold text-green-400"><x-lucide-message-circle class="h-3 w-3" /> Support replied {{ $t->replied_at?->diffForHumans() }}</div>
                                        <p class="text-xs leading-relaxed text-slate-300">{{ $t->admin_reply }}</p>
                                    </div>
                                @endif
                                <div class="mt-2 flex items-center gap-3 text-[11px]">
                                    <span class="text-slate-600">{{ $t->categoryLabel() }}</span>
                                    @if ($t->status !== 'closed')
                                        <button wire:click="close({{ $t->id }})" wire:confirm="Close this ticket?" class="font-medium text-slate-500 hover:text-slate-300">Close ticket</button>
                                    @endif
                                </div>
                            </div>
                        @endforeach
                    </div>
                @else
                    <div class="px-6 py-10 text-center">
                        <span class="mx-auto grid h-12 w-12 place-items-center rounded-2xl bg-brand/15 text-brand-500"><x-lucide-life-buoy class="h-6 w-6" /></span>
                        <p class="mt-3 text-sm text-slate-400">No tickets yet. If something's not working, open one and we'll take a look.</p>
                    </div>
                @endif
            </section>

            {{-- FAQ --}}
            <section class="admin-card p-5">
                <h3 class="mb-2 text-base font-semibold text-white">Frequently asked questions</h3>
                <div class="divide-y divide-edge">
                    @foreach ($faqs as [$q, $a])
                        <details class="group py-3">
                            <summary class="flex cursor-pointer list-none items-center justify-between gap-3 text-sm font-medium text-slate-200 hover:text-white [&::-webkit-details-marker]:hidden">
                                {{ $q }}
                                <x-lucide-chevron-down class="h-4 w-4 shrink-0 text-slate-500 transition group-open:rotate-180" />
                            </summary>
                            <p class="mt-2 max-w-2xl text-xs leading-relaxed text-slate-400">{{ $a }}</p>
                        </details>
                    @endforeach
                </div>
            </section>
        </div>

        {{-- Rail --}}
        <div class="space-y-5 xl:col-span-4">
            <section class="admin-card p-5">
                <h3 class="mb-3 text-base font-semibold text-white">Contact us directly</h3>
                <a href="mailto:{{ config('billing.company.email') }}" class="flex items-center gap-3 rounded-xl border border-edge p-3 transition hover:bg-raised">
                    <span class="grid h-9 w-9 shrink-0 place-items-center rounded-lg bg-blue-500/10 text-blue-400"><x-lucide-mail class="h-4 w-4" /></span>
                    <span class="min-w-0">
                        <span class="block text-[13px] font-semibold text-white">Email support</span>
                        <span class="block truncate text-xs text-slate-500">{{ config('billing.company.email') }}</span>
                    </span>
                </a>
                <a href="{{ route('download') }}" class="mt-2 flex items-center gap-3 rounded-xl border border-edge p-3 transition hover:bg-raised">
                    <span class="grid h-9 w-9 shrink-0 place-items-center rounded-lg bg-brand/15 text-brand-500"><x-lucide-download class="h-4 w-4" /></span>
                    <span>
                        <span class="block text-[13px] font-semibold text-white">Download the desktop app</span>
                        <span class="block text-xs text-slate-500">Latest installer for Windows</span>
                    </span>
                </a>
                <a href="{{ route('billing') }}" wire:navigate class="mt-2 flex items-center gap-3 rounded-xl border border-edge p-3 transition hover:bg-raised">
                    <span class="grid h-9 w-9 shrink-0 place-items-center rounded-lg bg-amber-500/10 text-amber-400"><x-lucide-credit-card class="h-4 w-4" /></span>
                    <span>
                        <span class="block text-[13px] font-semibold text-white">Billing questions</span>
                        <span class="block text-xs text-slate-500">Invoices, plans and payments</span>
                    </span>
                </a>
            </section>

            <section class="admin-card p-5 text-xs leading-relaxed text-slate-500">
                <div class="mb-1.5 flex items-center gap-2 font-semibold text-slate-300"><x-lucide-clock class="h-3.5 w-3.5" /> Response times</div>
                Tickets are answered within one business day. Include your automation or account name and any error message — it speeds things up a lot.
            </section>
        </div>
    </div>

    {{-- New ticket modal --}}
    @if ($showForm)
        <div class="fixed inset-0 z-50 overflow-y-auto bg-black/60 p-4 backdrop-blur-sm" x-data @keydown.escape.window="$wire.set('showForm', false)">
            <div class="mx-auto my-8 w-full max-w-lg rounded-2xl border border-edge bg-card shadow-card">
                <div class="flex items-center justify-between border-b border-edge px-6 py-4">
                    <h3 class="text-base font-semibold text-white">New support ticket</h3>
                    <button wire:click="$set('showForm', false)" class="rounded-lg p-1.5 text-slate-400 hover:bg-raised hover:text-white"><x-lucide-x class="h-5 w-5" /></button>
                </div>
                <form wire:submit="submit" class="space-y-4 px-6 py-5">
                    <div>
                        <label class="mb-1.5 block text-xs font-medium text-slate-400" for="t-subject">Subject</label>
                        <input id="t-subject" wire:model="subject" type="text" placeholder="e.g. Pinterest posts failing since yesterday"
                               class="w-full rounded-lg border-edge bg-ink text-sm text-slate-200 placeholder:text-slate-500 focus:border-brand focus:ring-brand">
                        @error('subject') <p class="mt-1 text-xs text-red-400">{{ $message }}</p> @enderror
                    </div>
                    <div>
                        <label class="mb-1.5 block text-xs font-medium text-slate-400" for="t-category">Category</label>
                        <select id="t-category" wire:model="category" class="w-full rounded-lg border-edge bg-ink text-sm text-slate-200 focus:border-brand focus:ring-brand">
                            @foreach (\App\Models\SupportTicket::CATEGORIES as $key => $label)
                                <option value="{{ $key }}">{{ $label }}</option>
                            @endforeach
                        </select>
                        @error('category') <p class="mt-1 text-xs text-red-400">{{ $message }}</p> @enderror
                    </div>
                    <div>
                        <label class="mb-1.5 block text-xs font-medium text-slate-400" for="t-message">What's happening?</label>
                        <textarea id="t-message" wire:model="message" rows="5" placeholder="Describe the issue — include the automation or account name and any error message you see."
                                  class="w-full rounded-lg border-edge bg-ink text-sm text-slate-200 placeholder:text-slate-500 focus:border-brand focus:ring-brand"></textarea>
                        @error('message') <p class="mt-1 text-xs text-red-400">{{ $message }}</p> @enderror
                    </div>
                    <div class="flex justify-end gap-2 border-t border-edge pt-4">
                        <button type="button" wire:click="$set('showForm', false)" class="rounded-xl border border-edge px-4 py-2 text-sm font-medium text-slate-300 hover:bg-raised">Cancel</button>
                        <button type="submit" class="rounded-xl bg-brand px-4 py-2 text-sm font-semibold text-white shadow-lg shadow-brand/25 hover:bg-brand-700">Send ticket</button>
                    </div>
                </form>
            </div>
        </div>
    @endif
</div>