@extends('layouts.app-sidebar')

@section('content')
<div class="max-w-6xl mx-auto">
    {{-- Page Header --}}
    <x-page-header
        title="Commands"
        :subtitle="'Custom chat commands for ' . $tenant->channel_title"
        :backRoute="route('dashboard')"
        backLabel="Back to Dashboard"
    >
        <x-button
            :href="route('dashboard.commands.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 Command
        </x-button>
    </x-page-header>

    {{-- Info Card --}}
    <x-info-card
        class="mb-6"
        color="cyan"
        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="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" /></svg>'
    >
        Commands trigger when viewers type <span class="text-db-accent-secondary font-mono">!commandname</span> in chat.
        Use variables like <span class="text-db-accent-secondary font-mono">{user}</span> to personalize responses.
    </x-info-card>

    {{-- Commands List --}}
    @if($commands->count() > 0)

    {{-- Mobile Card View --}}
    <div class="md:hidden space-y-3">
        @foreach($commands as $command)
        <x-card class="p-4" hover>
            {{-- Header Row --}}
            <div class="flex items-start justify-between gap-3 mb-3">
                <div class="flex items-center gap-2 flex-wrap">
                    <span class="text-sm font-mono font-semibold text-db-accent-secondary">!{{ $command->name }}</span>
                    @if($command->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 class="flex items-center gap-1">
                    <a href="{{ route('dashboard.commands.edit', $command) }}"
                       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.commands.destroy', $command) }}" class="inline" onsubmit="return confirm('Delete this command?');">
                        @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>

            {{-- Response --}}
            <p class="text-sm text-db-text-secondary mb-3 line-clamp-2">{{ $command->response }}</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>{{ $command->cooldown_sec }}s cooldown</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="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
                    </svg>
                    <span>{{ ucfirst($command->required_role) }}</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">Command</th>
                    <th class="px-6 py-4 text-left text-xs font-semibold text-db-text-muted uppercase tracking-wider">Response</th>
                    <th class="px-6 py-4 text-left text-xs font-semibold text-db-text-muted uppercase tracking-wider">Cooldown</th>
                    <th class="px-6 py-4 text-left text-xs font-semibold text-db-text-muted uppercase tracking-wider hidden lg:table-cell">Role</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($commands as $command)
            <tr class="hover:bg-db-card-hover transition-colors">
                <td class="px-6 py-4">
                    <span class="text-sm font-mono font-medium text-db-accent-secondary">!{{ $command->name }}</span>
                </td>
                <td class="px-6 py-4">
                    <span class="text-sm text-db-text-secondary">{{ \Str::limit($command->response, 50) }}</span>
                </td>
                <td class="px-6 py-4">
                    <span class="text-sm text-db-text-secondary">{{ $command->cooldown_sec }}s</span>
                </td>
                <td class="px-6 py-4 hidden lg:table-cell">
                    <x-badge variant="default" size="sm">{{ ucfirst($command->required_role) }}</x-badge>
                </td>
                <td class="px-6 py-4">
                    @if($command->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.commands.edit', $command) }}"
                           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.commands.destroy', $command) }}" class="inline" onsubmit="return confirm('Delete this command?');">
                            @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($commands->hasPages())
    <div class="mt-6">
        {{ $commands->links() }}
    </div>
    @endif

    @else
    {{-- Empty State --}}
    <x-empty-state
        title="No commands yet"
        description="Create custom commands like !discord, !socials, or !song."
        actionLabel="Create Command"
        :actionHref="route('dashboard.commands.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="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" /></svg>'
    />
    @endif
</div>
@endsection