@extends('layouts.app-sidebar')

@section('content')
<div x-data="giveawayManager()" x-init="init()" class="max-w-6xl mx-auto space-y-6">
    {{-- Page Header --}}
    <x-page-header
        title="Giveaways"
        subtitle="Run giveaways and pick random winners from chat"
        :backRoute="route('dashboard')"
        backLabel="Back to Dashboard"
    >
        <template x-if="!currentGiveaway">
            <button @click="showStartModal = true"
                class="inline-flex items-center justify-center gap-2 px-4 py-2.5 bg-gradient-to-r from-db-accent-primary to-emerald-600 hover:from-emerald-600 hover:to-db-accent-primary text-white text-sm font-medium rounded-xl shadow-lg shadow-db-accent-primary/25 transition-all focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-db-body focus:ring-db-accent-primary">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
                </svg>
                Start Giveaway
            </button>
        </template>
    </x-page-header>

    {{-- Current Giveaway Card --}}
    <x-card padding="p-5 sm:p-6">
        <div class="flex items-center justify-between mb-5">
            <h2 class="text-lg font-semibold text-db-text-primary flex items-center gap-2">
                <svg class="w-5 h-5 text-db-accent-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v13m0-13V6a2 2 0 112 2h-2zm0 0V5.5A2.5 2.5 0 109.5 8H12zm-7 4h14M5 12a2 2 0 110-4h14a2 2 0 110 4M5 12v7a2 2 0 002 2h10a2 2 0 002-2v-7" />
                </svg>
                Current Giveaway
            </h2>
            <template x-if="currentGiveaway">
                <x-badge variant="success" dot pulse>Running</x-badge>
            </template>
            <template x-if="!currentGiveaway">
                <x-badge variant="muted">No Active Giveaway</x-badge>
            </template>
        </div>

        {{-- No Active Giveaway State --}}
        <template x-if="!currentGiveaway">
            <div class="text-center py-10 sm:py-12">
                <div class="w-16 h-16 mx-auto mb-5 bg-db-surface rounded-2xl flex items-center justify-center">
                    <svg class="w-8 h-8 text-db-text-muted" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 8v13m0-13V6a2 2 0 112 2h-2zm0 0V5.5A2.5 2.5 0 109.5 8H12zm-7 4h14M5 12a2 2 0 110-4h14a2 2 0 110 4M5 12v7a2 2 0 002 2h10a2 2 0 002-2v-7" />
                    </svg>
                </div>
                <p class="text-db-text-secondary mb-5">No giveaway is currently running</p>
                <button @click="showStartModal = true"
                    class="inline-flex items-center justify-center gap-2 px-5 py-2.5 bg-gradient-to-r from-db-accent-primary to-emerald-600 hover:from-emerald-600 hover:to-db-accent-primary text-white text-sm font-medium rounded-xl shadow-lg shadow-db-accent-primary/25 transition-all">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
                    </svg>
                    Start New Giveaway
                </button>
            </div>
        </template>

        {{-- Active Giveaway Details --}}
        <template x-if="currentGiveaway">
            <div>
                {{-- Info Grid --}}
                <div class="grid grid-cols-2 md:grid-cols-4 gap-3 sm:gap-4 mb-6">
                    <div class="bg-db-surface rounded-xl p-4">
                        <p class="text-db-text-muted text-xs uppercase tracking-wider mb-1">Title</p>
                        <p class="text-db-text-primary font-medium text-sm" x-text="currentGiveaway.title || 'Untitled'"></p>
                    </div>
                    <div class="bg-db-surface rounded-xl p-4">
                        <p class="text-db-text-muted text-xs uppercase tracking-wider mb-1">Mode</p>
                        <p class="text-db-text-primary font-medium text-sm capitalize" x-text="currentGiveaway.mode === 'keyword' ? 'Keyword Entry' : 'Active Chatters'"></p>
                    </div>
                    <div class="bg-db-surface rounded-xl p-4" x-show="currentGiveaway.mode === 'keyword'">
                        <p class="text-db-text-muted text-xs uppercase tracking-wider mb-1">Keyword</p>
                        <p class="text-db-accent-primary font-mono font-medium text-sm" x-text="currentGiveaway.keyword"></p>
                    </div>
                    <div class="bg-db-surface rounded-xl p-4">
                        <p class="text-db-text-muted text-xs uppercase tracking-wider mb-1">Duration</p>
                        <p class="text-db-text-primary font-medium text-sm" x-text="currentGiveaway.duration || 'Just started'"></p>
                    </div>
                </div>

                {{-- Stats Grid --}}
                <div class="grid grid-cols-3 sm:grid-cols-6 gap-2 sm:gap-3 mb-6">
                    <div class="bg-db-surface rounded-xl p-3 sm:p-4 text-center">
                        <p class="text-xl sm:text-2xl font-bold text-db-text-primary" x-text="stats?.total_entries || 0"></p>
                        <p class="text-[10px] sm:text-xs text-db-text-muted mt-0.5">Entries</p>
                    </div>
                    <div class="bg-db-surface rounded-xl p-3 sm:p-4 text-center">
                        <p class="text-xl sm:text-2xl font-bold text-emerald-400" x-text="stats?.eligible_entries || 0"></p>
                        <p class="text-[10px] sm:text-xs text-db-text-muted mt-0.5">Eligible</p>
                    </div>
                    <div class="bg-db-surface rounded-xl p-3 sm:p-4 text-center">
                        <p class="text-xl sm:text-2xl font-bold text-gray-400" x-text="stats?.viewers || 0"></p>
                        <p class="text-[10px] sm:text-xs text-db-text-muted mt-0.5">Viewers</p>
                    </div>
                    <div class="bg-db-surface rounded-xl p-3 sm:p-4 text-center">
                        <p class="text-xl sm:text-2xl font-bold text-blue-400" x-text="stats?.subscribers || 0"></p>
                        <p class="text-[10px] sm:text-xs text-db-text-muted mt-0.5">Subs</p>
                    </div>
                    <div class="bg-db-surface rounded-xl p-3 sm:p-4 text-center">
                        <p class="text-xl sm:text-2xl font-bold text-purple-400" x-text="stats?.members || 0"></p>
                        <p class="text-[10px] sm:text-xs text-db-text-muted mt-0.5">Members</p>
                    </div>
                    <div class="bg-db-surface rounded-xl p-3 sm:p-4 text-center">
                        <p class="text-xl sm:text-2xl font-bold text-green-400" x-text="stats?.mods || 0"></p>
                        <p class="text-[10px] sm:text-xs text-db-text-muted mt-0.5">Mods</p>
                    </div>
                </div>

                {{-- Winner Display --}}
                <template x-if="winners.length > 0">
                    <div class="bg-gradient-to-r from-yellow-500/10 to-amber-500/10 border border-yellow-500/30 rounded-2xl p-4 sm:p-5 mb-6">
                        <div class="flex items-center gap-3 mb-3">
                            <svg class="w-5 h-5 sm:w-6 sm:h-6 text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M5 2a2 2 0 00-2 2v14l3.5-2 3.5 2 3.5-2 3.5 2V4a2 2 0 00-2-2H5zm2.5 3a1.5 1.5 0 100 3 1.5 1.5 0 000-3zm6.207.293a1 1 0 00-1.414 0l-6 6a1 1 0 101.414 1.414l6-6a1 1 0 000-1.414zM12.5 10a1.5 1.5 0 100 3 1.5 1.5 0 000-3z" clip-rule="evenodd" />
                            </svg>
                            <h3 class="text-base sm:text-lg font-semibold text-yellow-400">Winner(s)</h3>
                        </div>
                        <div class="flex flex-wrap gap-2">
                            <template x-for="winner in winners" :key="winner.user_name">
                                <div class="inline-flex items-center gap-2 px-3 py-2 bg-db-card rounded-xl">
                                    <span class="text-sm sm:text-base font-bold text-db-text-primary" x-text="winner.user_name"></span>
                                    <span :class="winner.role_class" class="text-xs px-2 py-0.5 rounded" x-text="winner.role"></span>
                                </div>
                            </template>
                        </div>
                    </div>
                </template>

                {{-- Winner Chat Messages --}}
                <template x-if="winners.length > 0">
                    <div class="bg-db-surface rounded-xl p-4 sm:p-5 mb-6">
                        <div class="flex items-center justify-between mb-3">
                            <h3 class="text-sm font-semibold text-db-text-primary flex items-center gap-2">
                                <svg class="w-4 h-4 sm:w-5 sm:h-5 text-yellow-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
                                </svg>
                                Winner Chat Messages
                            </h3>
                            <span class="text-xs text-db-text-muted" x-text="winnerMessages.length + ' messages'"></span>
                        </div>
                        <template x-if="winnerMessages.length === 0">
                            <p class="text-sm text-db-text-muted text-center py-4">Winner messages will appear here</p>
                        </template>
                        <template x-if="winnerMessages.length > 0">
                            <div class="space-y-2 max-h-48 overflow-y-auto">
                                <template x-for="msg in winnerMessages" :key="msg.id">
                                    <div class="flex items-start gap-2 p-2.5 bg-db-card rounded-xl">
                                        <span class="text-yellow-400 font-medium text-sm shrink-0" x-text="msg.user_name + ':'"></span>
                                        <span class="text-db-text-primary text-sm break-all" x-text="msg.message"></span>
                                        <span class="text-xs text-db-text-muted ml-auto shrink-0" x-text="msg.sent_at_formatted"></span>
                                    </div>
                                </template>
                            </div>
                        </template>
                    </div>
                </template>

                {{-- Action Buttons --}}
                <div class="flex flex-wrap gap-2 sm:gap-3">
                    <button @click="rollWinner()" :disabled="loading"
                        class="px-4 py-2.5 bg-gradient-to-r from-yellow-500 to-amber-500 hover:from-yellow-400 hover:to-amber-400 text-black text-sm font-semibold rounded-xl transition-all disabled:opacity-50 flex items-center gap-2">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" />
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                        </svg>
                        Roll Winner
                    </button>
                    <button @click="rerollWinner()" :disabled="loading || winners.length === 0"
                        class="px-4 py-2.5 bg-db-surface hover:bg-db-card-hover border border-db-border text-db-text-primary text-sm font-medium rounded-xl transition-colors disabled:opacity-50 flex items-center gap-2">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
                        </svg>
                        Reroll
                    </button>
                    <button @click="stopGiveaway()" :disabled="loading"
                        class="px-4 py-2.5 bg-red-500/10 hover:bg-red-500/20 border border-red-500/20 text-red-400 text-sm font-medium rounded-xl transition-colors disabled:opacity-50 flex items-center gap-2">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 10a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1h-4a1 1 0 01-1-1v-4z" />
                        </svg>
                        Stop
                    </button>
                    <button @click="showStartModal = true"
                        class="px-4 py-2.5 bg-db-surface hover:bg-db-card-hover border border-db-border text-db-text-secondary text-sm font-medium rounded-xl transition-colors flex items-center gap-2">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
                        </svg>
                        New
                    </button>
                </div>
            </div>
        </template>
    </x-card>

    {{-- Two Column Layout: Entries & Settings --}}
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-5 sm:gap-6">
        {{-- Entries Table --}}
        <div class="lg:col-span-2">
            <x-card padding="p-5 sm:p-6">
                <div class="flex items-center justify-between mb-4">
                    <h2 class="text-base sm:text-lg font-semibold text-db-text-primary">Recent Entries</h2>
                    <span class="text-xs sm:text-sm text-db-text-muted" x-text="'Showing ' + entries.length + ' entries'"></span>
                </div>

                <template x-if="entries.length === 0">
                    <div class="text-center py-10">
                        <div class="w-12 h-12 mx-auto mb-4 bg-db-surface rounded-xl flex items-center justify-center">
                            <svg class="w-6 h-6 text-db-text-muted" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z" />
                            </svg>
                        </div>
                        <p class="text-sm text-db-text-muted">No entries yet. Start a giveaway to collect entries!</p>
                    </div>
                </template>

                <template x-if="entries.length > 0">
                    <div class="overflow-x-auto max-h-96 overflow-y-auto -mx-2 px-2">
                        <table class="w-full">
                            <thead class="sticky top-0 bg-db-card z-10">
                                <tr class="text-left text-xs uppercase text-db-text-muted border-b border-db-border">
                                    <th class="pb-3 pr-4 font-semibold">Username</th>
                                    <th class="pb-3 pr-4 font-semibold hidden sm:table-cell">Role</th>
                                    <th class="pb-3 pr-4 font-semibold hidden md:table-cell">Msgs</th>
                                    <th class="pb-3 pr-4 font-semibold hidden md:table-cell">Weight</th>
                                    <th class="pb-3 font-semibold">Status</th>
                                </tr>
                            </thead>
                            <tbody class="divide-y divide-db-border">
                                <template x-for="entry in entries" :key="entry.id">
                                    <tr class="hover:bg-db-surface/50 transition-colors">
                                        <td class="py-3 pr-4">
                                            <span class="font-medium text-sm text-db-text-primary" x-text="entry.user_name"></span>
                                        </td>
                                        <td class="py-3 pr-4 hidden sm:table-cell">
                                            <span :class="entry.role_class" class="text-xs px-2 py-0.5 rounded" x-text="entry.role"></span>
                                        </td>
                                        <td class="py-3 pr-4 text-sm text-db-text-secondary hidden md:table-cell" x-text="entry.messages_count"></td>
                                        <td class="py-3 pr-4 text-sm text-db-text-secondary font-mono hidden md:table-cell" x-text="entry.weight"></td>
                                        <td class="py-3">
                                            <template x-if="entry.is_winner">
                                                <span class="inline-flex items-center gap-1 text-yellow-400 text-xs font-medium">
                                                    <svg class="w-3.5 h-3.5" fill="currentColor" viewBox="0 0 20 20">
                                                        <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
                                                    </svg>
                                                    Winner
                                                </span>
                                            </template>
                                            <template x-if="!entry.is_winner">
                                                <span class="text-db-text-muted text-xs">Entered</span>
                                            </template>
                                        </td>
                                    </tr>
                                </template>
                            </tbody>
                        </table>
                    </div>
                </template>
            </x-card>
        </div>

        {{-- Settings Panel --}}
        <x-card padding="p-5 sm:p-6">
            <h2 class="text-base sm:text-lg font-semibold text-db-text-primary mb-5 flex items-center gap-2">
                <svg class="w-5 h-5 text-db-text-muted" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                </svg>
                Settings
            </h2>

            <form @submit.prevent="saveSettings()" class="space-y-5">
                {{-- Role Luck Multipliers --}}
                <div>
                    <div class="flex items-center justify-between mb-3">
                        <label class="text-sm font-medium text-db-text-primary">Role Luck Multipliers</label>
                        <label class="relative inline-flex items-center cursor-pointer">
                            <input type="checkbox" x-model="settings.enable_role_luck_multipliers" class="sr-only peer">
                            <div class="w-9 h-5 bg-db-surface rounded-full peer peer-checked:after:translate-x-full after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-db-text-muted after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-db-accent-primary peer-checked:after:bg-white"></div>
                        </label>
                    </div>
                    <div x-show="settings.enable_role_luck_multipliers" x-transition class="grid grid-cols-2 gap-3">
                        <div>
                            <label class="text-xs text-db-text-muted">Viewers</label>
                            <input type="number" step="0.1" min="0" max="10" x-model="settings.luck_viewers"
                                class="w-full mt-1 px-3 py-2 bg-db-surface border border-db-border rounded-xl text-db-text-primary text-sm focus:outline-none focus:ring-1 focus:ring-db-accent-primary">
                        </div>
                        <div>
                            <label class="text-xs text-db-text-muted">Subscribers</label>
                            <input type="number" step="0.1" min="0" max="10" x-model="settings.luck_subscribers"
                                class="w-full mt-1 px-3 py-2 bg-db-surface border border-db-border rounded-xl text-db-text-primary text-sm focus:outline-none focus:ring-1 focus:ring-db-accent-primary">
                        </div>
                        <div>
                            <label class="text-xs text-db-text-muted">Members</label>
                            <input type="number" step="0.1" min="0" max="10" x-model="settings.luck_members"
                                class="w-full mt-1 px-3 py-2 bg-db-surface border border-db-border rounded-xl text-db-text-primary text-sm focus:outline-none focus:ring-1 focus:ring-db-accent-primary">
                        </div>
                        <div>
                            <label class="text-xs text-db-text-muted">Mods</label>
                            <input type="number" step="0.1" min="0" max="10" x-model="settings.luck_mods"
                                class="w-full mt-1 px-3 py-2 bg-db-surface border border-db-border rounded-xl text-db-text-primary text-sm focus:outline-none focus:ring-1 focus:ring-db-accent-primary">
                        </div>
                    </div>
                    <p class="text-xs text-db-text-muted mt-2">Higher = more chance to win</p>
                </div>

                <hr class="border-db-border">

                {{-- Entry Settings --}}
                <div class="flex items-center justify-between p-3 bg-db-surface rounded-xl">
                    <div>
                        <p class="text-sm font-medium text-db-text-primary">Case Sensitive</p>
                        <p class="text-xs text-db-text-muted">Keyword matching</p>
                    </div>
                    <label class="relative inline-flex items-center cursor-pointer">
                        <input type="checkbox" x-model="settings.keyword_case_sensitive" class="sr-only peer">
                        <div class="w-9 h-5 bg-db-border rounded-full peer peer-checked:after:translate-x-full after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-db-text-muted after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-db-accent-primary peer-checked:after:bg-white"></div>
                    </label>
                </div>
                <p class="text-xs text-db-text-muted">Each user can only enter once per giveaway</p>

                <button type="submit" :disabled="savingSettings"
                    class="w-full py-2.5 bg-gradient-to-r from-db-accent-primary to-emerald-600 hover:from-emerald-600 hover:to-db-accent-primary text-white text-sm font-medium rounded-xl shadow-lg shadow-db-accent-primary/25 transition-all disabled:opacity-50">
                    <span x-show="!savingSettings">Save Settings</span>
                    <span x-show="savingSettings">Saving...</span>
                </button>
            </form>
        </x-card>
    </div>

    {{-- History Section --}}
    <x-card padding="p-5 sm:p-6">
        <div class="flex items-center justify-between mb-4">
            <h2 class="text-base sm:text-lg font-semibold text-db-text-primary flex items-center gap-2">
                <svg class="w-5 h-5 text-db-text-muted" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
                </svg>
                Giveaway History
            </h2>
            @if(!$history->isEmpty())
            <button @click="clearHistory()"
                class="inline-flex items-center gap-2 px-3 py-1.5 text-sm font-medium text-red-400 hover:text-red-300 hover:bg-red-500/10 rounded-xl transition-colors">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                </svg>
                Clear
            </button>
            @endif
        </div>

        @if($history->isEmpty())
            <div class="text-center py-8">
                <p class="text-sm text-db-text-muted">No past giveaways yet</p>
            </div>
        @else
            <div class="overflow-x-auto max-h-80 overflow-y-auto -mx-2 px-2">
                <table class="w-full">
                    <thead class="sticky top-0 bg-db-card z-10">
                        <tr class="text-left text-xs uppercase text-db-text-muted border-b border-db-border">
                            <th class="pb-3 pr-4 font-semibold">Title</th>
                            <th class="pb-3 pr-4 font-semibold hidden sm:table-cell">Mode</th>
                            <th class="pb-3 pr-4 font-semibold hidden md:table-cell">Entries</th>
                            <th class="pb-3 pr-4 font-semibold">Winner(s)</th>
                            <th class="pb-3 font-semibold hidden lg:table-cell">Date</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-db-border">
                        @foreach($history as $giveaway)
                        <tr class="hover:bg-db-surface/50 transition-colors">
                            <td class="py-3 pr-4 font-medium text-sm text-db-text-primary">{{ $giveaway->title ?? 'Untitled' }}</td>
                            <td class="py-3 pr-4 text-sm text-db-text-secondary capitalize hidden sm:table-cell">{{ $giveaway->mode === 'keyword' ? 'Keyword' : 'Active' }}</td>
                            <td class="py-3 pr-4 text-sm text-db-text-secondary hidden md:table-cell">{{ $giveaway->entries()->count() }}</td>
                            <td class="py-3 pr-4">
                                @if($giveaway->winners)
                                    <span class="text-yellow-400 font-medium text-sm">{{ implode(', ', $giveaway->winners) }}</span>
                                @else
                                    <span class="text-db-text-muted text-sm">No winner</span>
                                @endif
                            </td>
                            <td class="py-3 text-sm text-db-text-muted hidden lg:table-cell">{{ $giveaway->ended_at?->format('M d, Y') ?? '-' }}</td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        @endif
    </x-card>

    {{-- Start Giveaway Modal --}}
    <x-modal name="showStartModal" maxWidth="lg" title="Start New Giveaway"
        icon='<svg class="w-7 h-7 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v13m0-13V6a2 2 0 112 2h-2zm0 0V5.5A2.5 2.5 0 109.5 8H12zm-7 4h14M5 12a2 2 0 110-4h14a2 2 0 110 4M5 12v7a2 2 0 002 2h10a2 2 0 002-2v-7" /></svg>'>
        <form @submit.prevent="startGiveaway()" class="space-y-5">
            {{-- Title --}}
            <div>
                <label class="block text-sm font-medium text-db-text-primary mb-2">Title</label>
                <input type="text" x-model="newGiveaway.title" required placeholder="e.g., Stream Giveaway"
                    class="w-full px-4 py-2.5 bg-db-surface border border-db-border rounded-xl text-db-text-primary placeholder-db-text-muted focus:outline-none focus:ring-2 focus:ring-db-accent-primary focus:border-transparent text-sm">
            </div>

            {{-- Mode Selection --}}
            <div>
                <label class="block text-sm font-medium text-db-text-primary mb-2">Mode</label>
                <div class="grid grid-cols-2 gap-3">
                    <label class="relative cursor-pointer">
                        <input type="radio" x-model="newGiveaway.mode" value="keyword" class="sr-only peer">
                        <div class="p-4 bg-db-surface border border-db-border rounded-xl peer-checked:border-db-accent-primary peer-checked:bg-db-accent-primary/10 transition-all">
                            <div class="flex items-center gap-2 mb-1">
                                <svg class="w-5 h-5 text-db-accent-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 20l4-16m2 16l4-16M6 9h14M4 15h14" />
                                </svg>
                                <span class="font-medium text-sm text-db-text-primary">Keyword</span>
                            </div>
                            <p class="text-xs text-db-text-muted">Type a keyword to enter</p>
                        </div>
                    </label>
                    <label class="relative cursor-pointer">
                        <input type="radio" x-model="newGiveaway.mode" value="active_chatters" class="sr-only peer">
                        <div class="p-4 bg-db-surface border border-db-border rounded-xl peer-checked:border-db-accent-primary peer-checked:bg-db-accent-primary/10 transition-all">
                            <div class="flex items-center gap-2 mb-1">
                                <svg class="w-5 h-5 text-db-accent-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z" />
                                </svg>
                                <span class="font-medium text-sm text-db-text-primary">Active Chatters</span>
                            </div>
                            <p class="text-xs text-db-text-muted">Anyone chatting can win</p>
                        </div>
                    </label>
                </div>
            </div>

            {{-- Keyword (only for keyword mode) --}}
            <div x-show="newGiveaway.mode === 'keyword'" x-transition>
                <label class="block text-sm font-medium text-db-text-primary mb-2">Keyword</label>
                <input type="text" x-model="newGiveaway.keyword" placeholder="!enter"
                    class="w-full px-4 py-2.5 bg-db-surface border border-db-border rounded-xl text-db-text-primary placeholder-db-text-muted focus:outline-none focus:ring-2 focus:ring-db-accent-primary focus:border-transparent font-mono text-sm">
                <p class="text-xs text-db-text-muted mt-1">Users type this to enter</p>
            </div>

            {{-- Min Messages (only for active chatters mode) --}}
            <div x-show="newGiveaway.mode === 'active_chatters'" x-transition>
                <label class="block text-sm font-medium text-db-text-primary mb-2">Min Messages to Qualify</label>
                <input type="number" x-model="newGiveaway.min_messages_to_qualify" min="1" max="100"
                    class="w-full px-4 py-2.5 bg-db-surface border border-db-border rounded-xl text-db-text-primary focus:outline-none focus:ring-2 focus:ring-db-accent-primary focus:border-transparent text-sm">
                <p class="text-xs text-db-text-muted mt-1">Messages needed during giveaway to qualify</p>
            </div>

            {{-- Role Inclusion --}}
            <div>
                <label class="block text-sm font-medium text-db-text-primary mb-2">Who Can Enter</label>
                <div class="grid grid-cols-2 gap-2">
                    <label class="flex items-center gap-2 p-3 bg-db-surface rounded-xl cursor-pointer hover:bg-db-card-hover transition-colors">
                        <input type="checkbox" x-model="newGiveaway.include_viewers" class="rounded border-db-border bg-db-surface text-db-accent-primary focus:ring-db-accent-primary">
                        <span class="text-sm text-db-text-primary">Viewers</span>
                    </label>
                    <label class="flex items-center gap-2 p-3 bg-db-surface rounded-xl cursor-pointer hover:bg-db-card-hover transition-colors">
                        <input type="checkbox" x-model="newGiveaway.include_subscribers" class="rounded border-db-border bg-db-surface text-db-accent-primary focus:ring-db-accent-primary">
                        <span class="text-sm text-db-text-primary">Subscribers</span>
                    </label>
                    <label class="flex items-center gap-2 p-3 bg-db-surface rounded-xl cursor-pointer hover:bg-db-card-hover transition-colors">
                        <input type="checkbox" x-model="newGiveaway.include_members" class="rounded border-db-border bg-db-surface text-db-accent-primary focus:ring-db-accent-primary">
                        <span class="text-sm text-db-text-primary">Members</span>
                    </label>
                    <label class="flex items-center gap-2 p-3 bg-db-surface rounded-xl cursor-pointer hover:bg-db-card-hover transition-colors">
                        <input type="checkbox" x-model="newGiveaway.include_mods" class="rounded border-db-border bg-db-surface text-db-accent-primary focus:ring-db-accent-primary">
                        <span class="text-sm text-db-text-primary">Moderators</span>
                    </label>
                </div>
            </div>

            {{-- Exclude Bots --}}
            <div class="flex items-center justify-between p-3 bg-db-surface rounded-xl">
                <span class="text-sm text-db-text-primary">Exclude Bots</span>
                <label class="relative inline-flex items-center cursor-pointer">
                    <input type="checkbox" x-model="newGiveaway.exclude_bots" class="sr-only peer">
                    <div class="w-9 h-5 bg-db-border rounded-full peer peer-checked:after:translate-x-full after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-db-text-muted after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-db-accent-primary peer-checked:after:bg-white"></div>
                </label>
            </div>

            {{-- Submit Buttons --}}
            <div class="flex gap-3 pt-2">
                <button type="button" @click="showStartModal = false"
                    class="flex-1 py-2.5 bg-db-surface hover:bg-db-card-hover border border-db-border text-db-text-secondary text-sm font-medium rounded-xl transition-colors">
                    Cancel
                </button>
                <button type="submit" :disabled="loading"
                    class="flex-1 py-2.5 bg-gradient-to-r from-db-accent-primary to-emerald-600 hover:from-emerald-600 hover:to-db-accent-primary text-white text-sm font-medium rounded-xl shadow-lg shadow-db-accent-primary/25 transition-all disabled:opacity-50">
                    <span x-show="!loading">Start Giveaway</span>
                    <span x-show="loading">Starting...</span>
                </button>
            </div>
        </form>
    </x-modal>

    {{-- Toast Notification --}}
    <div x-show="toast.show" x-cloak
         x-transition:enter="transform ease-out duration-300"
         x-transition:enter-start="translate-y-2 opacity-0"
         x-transition:enter-end="translate-y-0 opacity-100"
         x-transition:leave="transform ease-in duration-200"
         x-transition:leave-start="translate-y-0 opacity-100"
         x-transition:leave-end="translate-y-2 opacity-0"
         class="fixed bottom-4 right-4 z-50 px-4 py-3 rounded-xl shadow-lg"
         :class="toast.type === 'success' ? 'bg-emerald-500/90 text-white' : 'bg-red-500/90 text-white'">
        <div class="flex items-center gap-2">
            <svg x-show="toast.type === 'success'" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
            </svg>
            <svg x-show="toast.type === 'error'" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd" />
            </svg>
            <span class="text-sm font-medium" x-text="toast.message"></span>
        </div>
    </div>
</div>

<script>
function giveawayManager() {
    return {
        urls: {
            start: '/dashboard/giveaways/start',
            stop: '/dashboard/giveaways/stop',
            roll: '/dashboard/giveaways/roll',
            reroll: '/dashboard/giveaways/reroll',
            current: '/dashboard/giveaways/current',
            entries: '/dashboard/giveaways/entries',
            settings: '/dashboard/giveaways/settings',
            winnerMessages: '/dashboard/giveaways/winner-messages',
            clearHistory: '/dashboard/giveaways/history',
        },

        currentGiveaway: @json($currentGiveaway),
        settings: @json($settings),
        entries: @json($entries ?? []),
        stats: @json($stats),
        winners: [],
        winnerMessages: [],
        history: @json($history ?? []),

        showStartModal: false,
        loading: false,
        savingSettings: false,
        pollInterval: null,
        toast: { show: false, message: '', type: 'success' },

        newGiveaway: {
            title: '',
            mode: 'keyword',
            keyword: '!enter',
            include_viewers: true,
            include_subscribers: true,
            include_members: true,
            include_mods: true,
            exclude_bots: true,
            min_messages_to_qualify: 3,
        },

        init() {
            if (this.currentGiveaway) {
                this.startPolling();
                this.loadWinners();
            }
        },

        startPolling() {
            this.pollInterval = setInterval(() => { this.fetchCurrentData(); }, 3000);
        },

        stopPolling() {
            if (this.pollInterval) {
                clearInterval(this.pollInterval);
                this.pollInterval = null;
            }
        },

        async fetchCurrentData() {
            try {
                const [currentRes, entriesRes, winnerMsgsRes] = await Promise.all([
                    fetch(this.urls.current, { headers: { 'Accept': 'application/json' } }),
                    fetch(this.urls.entries, { headers: { 'Accept': 'application/json' } }),
                    fetch(this.urls.winnerMessages, { headers: { 'Accept': 'application/json' } })
                ]);

                const currentData = await currentRes.json();
                const entriesData = await entriesRes.json();
                const winnerMsgsData = await winnerMsgsRes.json();

                if (currentData.success) {
                    this.currentGiveaway = currentData.giveaway;
                    this.stats = currentData.stats;
                    this.winners = currentData.winners || [];
                    if (!this.currentGiveaway) this.stopPolling();
                }

                if (entriesData.success) {
                    this.entries = entriesData.entries;
                    if (entriesData.stats) this.stats = entriesData.stats;
                }

                if (winnerMsgsData.success) {
                    this.winnerMessages = winnerMsgsData.messages || [];
                }
            } catch (error) { console.error('Error fetching giveaway data:', error); }
        },

        loadWinners() {
            if (this.currentGiveaway && this.entries) {
                this.winners = this.entries.filter(e => e.is_winner).map(e => ({
                    user_name: e.user_name, role: e.role, role_class: e.role_class
                }));
            }
        },

        async startGiveaway() {
            this.loading = true;
            try {
                const response = await fetch(this.urls.start, {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json', 'Accept': 'application/json', 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
                    body: JSON.stringify(this.newGiveaway)
                });
                if (!response.ok) { this.showToast('Server error: ' + response.status, 'error'); return; }
                const data = await response.json();
                if (data.success) {
                    this.showToast('Giveaway started!', 'success');
                    this.showStartModal = false;
                    this.currentGiveaway = data.giveaway;
                    this.entries = [];
                    this.stats = { total_entries: 0, eligible_entries: 0, viewers: 0, subscribers: 0, members: 0, mods: 0 };
                    this.winners = [];
                    this.startPolling();
                    this.resetNewGiveawayForm();
                } else { this.showToast(data.message || 'Failed to start giveaway', 'error'); }
            } catch (error) { this.showToast('Error starting giveaway', 'error'); console.error(error); }
            finally { this.loading = false; }
        },

        async stopGiveaway() {
            if (!confirm('Stop this giveaway?')) return;
            this.loading = true;
            try {
                const response = await fetch(this.urls.stop, {
                    method: 'POST', headers: { 'Accept': 'application/json', 'X-CSRF-TOKEN': '{{ csrf_token() }}' }
                });
                const data = await response.json();
                if (data.success) { this.showToast('Giveaway stopped', 'success'); this.stopPolling(); setTimeout(() => window.location.reload(), 1000); }
                else { this.showToast(data.message || 'Failed to stop giveaway', 'error'); }
            } catch (error) { this.showToast('Error stopping giveaway', 'error'); console.error(error); }
            finally { this.loading = false; }
        },

        async rollWinner() {
            this.loading = true;
            try {
                const response = await fetch(this.urls.roll, {
                    method: 'POST', headers: { 'Accept': 'application/json', 'X-CSRF-TOKEN': '{{ csrf_token() }}' }
                });
                const data = await response.json();
                if (data.success) { this.showToast(data.message, 'success'); this.winners.push(data.winner); this.fetchCurrentData(); }
                else { this.showToast(data.message || 'No eligible entries', 'error'); }
            } catch (error) { this.showToast('Error rolling winner', 'error'); console.error(error); }
            finally { this.loading = false; }
        },

        async rerollWinner() {
            this.loading = true;
            try {
                const response = await fetch(this.urls.reroll, {
                    method: 'POST', headers: { 'Accept': 'application/json', 'X-CSRF-TOKEN': '{{ csrf_token() }}' }
                });
                const data = await response.json();
                if (data.success) { this.showToast(data.message, 'success'); this.winners.push(data.winner); this.fetchCurrentData(); }
                else { this.showToast(data.message || 'No more eligible entries', 'error'); }
            } catch (error) { this.showToast('Error rerolling winner', 'error'); console.error(error); }
            finally { this.loading = false; }
        },

        async saveSettings() {
            this.savingSettings = true;
            try {
                const response = await fetch(this.urls.settings, {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json', 'Accept': 'application/json', 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
                    body: JSON.stringify(this.settings)
                });
                const data = await response.json();
                if (data.success) { this.showToast('Settings saved!', 'success'); this.settings = data.settings; }
                else { this.showToast(data.message || 'Failed to save settings', 'error'); }
            } catch (error) { this.showToast('Error saving settings', 'error'); console.error(error); }
            finally { this.savingSettings = false; }
        },

        resetNewGiveawayForm() {
            this.newGiveaway = {
                title: '', mode: 'keyword', keyword: '!enter',
                include_viewers: true, include_subscribers: true, include_members: true, include_mods: true,
                exclude_bots: true, min_messages_to_qualify: 3,
            };
        },

        async clearHistory() {
            if (!confirm('Clear all giveaway history? This cannot be undone.')) return;
            this.loading = true;
            try {
                const response = await fetch(this.urls.clearHistory, {
                    method: 'DELETE', headers: { 'Accept': 'application/json', 'X-CSRF-TOKEN': '{{ csrf_token() }}' }
                });
                const data = await response.json();
                if (data.success) { this.showToast('History cleared!', 'success'); setTimeout(() => window.location.reload(), 1000); }
                else { this.showToast(data.message || 'Failed to clear history', 'error'); }
            } catch (error) { this.showToast('Error clearing history', 'error'); console.error(error); }
            finally { this.loading = false; }
        },

        showToast(message, type = 'success') {
            this.toast = { show: true, message, type };
            setTimeout(() => { this.toast.show = false; }, 3000);
        }
    };
}
</script>
@endsection