@extends('layouts.app-sidebar')

@section('content')
<div class="max-w-6xl mx-auto">
    {{-- Page Header --}}
    <x-page-header
        title="Timers"
        :subtitle="'Automated timed messages for ' . $tenant->channel_title"
        :backRoute="route('dashboard')"
        backLabel="Back to Dashboard"
    >
        <x-button
            :href="route('dashboard.timers.create')"
            icon='<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>'
        >
            Add Timer
        </x-button>
    </x-page-header>

    {{-- Info Card --}}
    <x-info-card
        class="mb-6"
        color="emerald"
        icon='<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>'
    >
        Timers automatically send messages at set intervals.
        <span class="text-db-accent-primary font-medium">Minimum Unique Users</span> ensures timers won't fire in dead chat — they wait for X different users to chat (same user chatting multiple times counts as 1).
    </x-info-card>

    {{-- Timers List --}}
    @if($timers->count() > 0)

    {{-- Mobile Card View --}}
    <div class="md:hidden space-y-3">
        @foreach($timers as $timer)
        <x-card class="p-4" hover>
            {{-- Header Row --}}
            <div class="flex items-start justify-between gap-3 mb-3">
                <div class="flex-1 min-w-0">
                    <div class="flex items-center gap-2 mb-1">
                        <h3 class="text-sm font-semibold text-db-text-primary truncate">{{ $timer->name }}</h3>
                        @if($timer->is_enabled)
                            <x-badge variant="success" size="sm" dot>On</x-badge>
                        @else
                            <x-badge variant="muted" size="sm" dot>Off</x-badge>
                        @endif
                    </div>
                </div>
                <div class="flex items-center gap-1">
                    <a href="{{ route('dashboard.timers.edit', $timer) }}"
                       class="p-2 rounded-lg text-db-text-muted hover:text-db-accent-primary hover:bg-db-accent-primary/10 transition-colors"
                       title="Edit">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
                        </svg>
                    </a>
                    <form method="POST" action="{{ route('dashboard.timers.destroy', $timer) }}" class="inline" onsubmit="return confirm('Delete this timer?');">
                        @csrf
                        @method('DELETE')
                        <button type="submit" class="p-2 rounded-lg text-db-text-muted hover:text-red-400 hover:bg-red-500/10 transition-colors" title="Delete">
                            <svg class="w-5 h-5" 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>
                        </button>
                    </form>
                </div>
            </div>

            {{-- Message --}}
            <p class="text-sm text-db-text-secondary mb-3 line-clamp-2">{{ $timer->message }}</p>

            {{-- Stats Row --}}
            <div class="flex items-center gap-4 text-xs">
                <div class="flex items-center gap-1.5 text-db-text-muted">
                    <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 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
                    </svg>
                    <span>{{ $timer->interval_min }} min</span>
                </div>
                <div class="flex items-center gap-1.5 text-db-text-muted">
                    <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="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>{{ $timer->min_chat_lines ?? 0 }} users</span>
                </div>
            </div>
        </x-card>
        @endforeach
    </div>

    {{-- Desktop Table View --}}
    <div class="hidden md:block">
        <x-table>
            <x-slot name="header">
                <tr class="border-b border-db-border bg-db-surface/50">
                    <th class="px-6 py-4 text-left text-xs font-semibold text-db-text-muted uppercase tracking-wider">Name</th>
                    <th class="px-6 py-4 text-left text-xs font-semibold text-db-text-muted uppercase tracking-wider">Message</th>
                    <th class="px-6 py-4 text-left text-xs font-semibold text-db-text-muted uppercase tracking-wider">Interval</th>
                    <th class="px-6 py-4 text-left text-xs font-semibold text-db-text-muted uppercase tracking-wider">Min Users</th>
                    <th class="px-6 py-4 text-left text-xs font-semibold text-db-text-muted uppercase tracking-wider">Status</th>
                    <th class="px-6 py-4 text-right text-xs font-semibold text-db-text-muted uppercase tracking-wider">Actions</th>
                </tr>
            </x-slot>

            @foreach($timers as $timer)
            <tr class="hover:bg-db-card-hover transition-colors">
                <td class="px-6 py-4">
                    <span class="text-sm font-medium text-db-text-primary">{{ $timer->name }}</span>
                </td>
                <td class="px-6 py-4">
                    <span class="text-sm text-db-text-secondary">{{ \Str::limit($timer->message, 50) }}</span>
                </td>
                <td class="px-6 py-4">
                    <span class="text-sm text-db-text-secondary">{{ $timer->interval_min }} min</span>
                </td>
                <td class="px-6 py-4">
                    <span class="text-sm text-db-text-secondary">{{ $timer->min_chat_lines ?? 0 }}</span>
                </td>
                <td class="px-6 py-4">
                    @if($timer->is_enabled)
                        <x-badge variant="success" size="md" dot>Enabled</x-badge>
                    @else
                        <x-badge variant="muted" size="md" dot>Disabled</x-badge>
                    @endif
                </td>
                <td class="px-6 py-4 text-right">
                    <div class="flex items-center justify-end gap-1">
                        <a href="{{ route('dashboard.timers.edit', $timer) }}"
                           class="p-2 rounded-lg text-db-text-muted hover:text-db-accent-primary hover:bg-db-accent-primary/10 transition-colors"
                           title="Edit">
                            <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="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
                            </svg>
                        </a>
                        <form method="POST" action="{{ route('dashboard.timers.destroy', $timer) }}" class="inline" onsubmit="return confirm('Delete this timer?');">
                            @csrf
                            @method('DELETE')
                            <button type="submit" class="p-2 rounded-lg text-db-text-muted hover:text-red-400 hover:bg-red-500/10 transition-colors" title="Delete">
                                <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>
                            </button>
                        </form>
                    </div>
                </td>
            </tr>
            @endforeach
        </x-table>
    </div>

    @if($timers->hasPages())
    <div class="mt-6">
        {{ $timers->links() }}
    </div>
    @endif

    @else
    {{-- Empty State --}}
    <x-empty-state
        title="No timers yet"
        description="Create your first timer to automatically send messages during streams."
        actionLabel="Create Timer"
        :actionHref="route('dashboard.timers.create')"
        icon='<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 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>'
    />
    @endif
</div>
@endsection