<div class="p-6" x-data x-on:clear-message.window="setTimeout(() => $wire.clearMessages(), 3000)">
    <x-page-header title="Settings" subtitle="Configure your system preferences" />

    <div class="space-y-6">
        <!-- Article Processing Settings -->
        <div class="bg-white rounded-lg shadow-sm dark:bg-gray-800">
            <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
                <h2 class="text-lg font-medium text-gray-900 flex items-center dark:text-gray-100">
                    <svg class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.325.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 0 1 1.37.49l1.296 2.247a1.125 1.125 0 0 1-.26 1.431l-1.003.827c-.293.241-.438.613-.43.992a7.723 7.723 0 0 1 0 .255c-.008.378.137.75.43.991l1.004.827c.424.35.534.955.26 1.43l-1.298 2.247a1.125 1.125 0 0 1-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.47 6.47 0 0 1-.22.128c-.331.183-.581.495-.644.869l-.213 1.281c-.09.543-.56.94-1.11.94h-2.594c-.55 0-1.019-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 0 1-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 0 1-1.369-.49l-1.297-2.247a1.125 1.125 0 0 1 .26-1.431l1.004-.827c.292-.24.437-.613.43-.991a6.932 6.932 0 0 1 0-.255c.007-.38-.138-.751-.43-.992l-1.004-.827a1.125 1.125 0 0 1-.26-1.43l1.297-2.247a1.125 1.125 0 0 1 1.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.086.22-.128.332-.183.582-.495.644-.869l.214-1.28Z" />
                        <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
                    </svg>
                    Article Processing
                </h2>
                <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
                    Control how articles are processed and handled
                </p>
            </div>
            <div class="px-6 py-4 space-y-4">
                <div class="flex items-center justify-between">
                    <div>
                        <h3 class="text-sm font-medium text-gray-900 dark:text-gray-100">
                            Article Processing Enabled
                        </h3>
                        <p class="text-sm text-gray-500 dark:text-gray-400">
                            Enable automatic fetching and processing of articles from feeds
                        </p>
                    </div>
                    <button
                        wire:click="toggleArticleProcessing"
                        class="shrink-0"
                    >
                        @if ($articleProcessingEnabled)
                            <svg class="h-6 w-6 text-green-500" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M5.636 5.636a9 9 0 1 0 12.728 0M12 3v9" />
                            </svg>
                        @else
                            <svg class="h-6 w-6 text-gray-300" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M5.636 5.636a9 9 0 1 0 12.728 0M12 3v9" />
                            </svg>
                        @endif
                    </button>
                </div>

                <div class="flex items-center justify-between">
                    <div>
                        <h3 class="text-sm font-medium text-gray-900 dark:text-gray-100">
                            Publishing Interval (minutes)
                        </h3>
                        <p class="text-sm text-gray-500 dark:text-gray-400">
                            Minimum time between publishing articles. Set to 0 for no delay.
                        </p>
                    </div>
                    <div class="flex items-center space-x-2">
                        <input
                            type="number"
                            wire:model="articlePublishingInterval"
                            min="0"
                            max="1440"
                            step="1"
                            class="w-24 rounded-md border border-gray-300 px-3 py-2 shadow-xs focus:border-indigo-500 focus:ring-indigo-500 text-sm dark:border-gray-600"
                        />
                        <button
                            wire:click="updateArticlePublishingInterval"
                            class="inline-flex items-center rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
                        >
                            Save
                        </button>
                    </div>
                </div>
                @error('articlePublishingInterval')
                    <p class="text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                @enderror

                <div class="flex items-center justify-between">
                    <div>
                        <h3 class="text-sm font-medium text-gray-900 dark:text-gray-100">
                            Daily Publish Cap
                        </h3>
                        <p class="text-sm text-gray-500 dark:text-gray-400">
                            Maximum posts per UTC day, counted across all channels. An article sent to
                            three channels counts as three. Set to 0 for no limit.
                        </p>
                    </div>
                    <div class="flex items-center space-x-2">
                        <input
                            type="number"
                            wire:model="dailyPublishCap"
                            min="0"
                            step="1"
                            class="w-24 rounded-md border border-gray-300 px-3 py-2 shadow-xs focus:border-indigo-500 focus:ring-indigo-500 text-sm dark:border-gray-600"
                        />
                        <button
                            wire:click="updateDailyPublishCap"
                            class="inline-flex items-center rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
                        >
                            Save
                        </button>
                    </div>
                </div>
                @error('dailyPublishCap')
                    <p class="text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                @enderror

                <div class="flex items-center justify-between">
                    <div>
                        <h3 class="text-sm font-medium text-gray-900 dark:text-gray-100">
                            Publishing Approvals Required
                        </h3>
                        <p class="text-sm text-gray-500 dark:text-gray-400">
                            Require manual approval before articles are published to platforms
                        </p>
                    </div>
                    <button
                        wire:click="togglePublishingApprovals"
                        class="shrink-0"
                    >
                        @if ($publishingApprovalsEnabled)
                            <svg class="h-6 w-6 text-green-500" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M5.636 5.636a9 9 0 1 0 12.728 0M12 3v9" />
                            </svg>
                        @else
                            <svg class="h-6 w-6 text-gray-300" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M5.636 5.636a9 9 0 1 0 12.728 0M12 3v9" />
                            </svg>
                        @endif
                    </button>
                </div>
            </div>
        </div>

        <!-- Feed Monitoring Settings -->
        <div class="bg-white rounded-lg shadow-sm dark:bg-gray-800">
            <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
                <h2 class="text-lg font-medium text-gray-900 flex items-center dark:text-gray-100">
                    <svg class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126ZM12 15.75h.007v.008H12v-.008Z" />
                    </svg>
                    Feed Monitoring
                </h2>
                <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
                    Configure alerts for feeds that stop returning articles
                </p>
            </div>
            <div class="px-6 py-4 space-y-4">
                <div class="flex items-center justify-between">
                    <div>
                        <h3 class="text-sm font-medium text-gray-900 dark:text-gray-100">
                            Staleness Threshold (hours)
                        </h3>
                        <p class="text-sm text-gray-500 dark:text-gray-400">
                            Alert when a feed hasn't been fetched for this many hours. Set to 0 to disable.
                        </p>
                    </div>
                    <div class="flex items-center space-x-2">
                        <input
                            type="number"
                            wire:model="feedStalenessThreshold"
                            min="0"
                            step="1"
                            class="w-24 rounded-md border border-gray-300 px-3 py-2 shadow-xs focus:border-indigo-500 focus:ring-indigo-500 text-sm dark:border-gray-600"
                        />
                        <button
                            wire:click="updateFeedStalenessThreshold"
                            class="inline-flex items-center rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
                        >
                            Save
                        </button>
                    </div>
                </div>
                @error('feedStalenessThreshold')
                    <p class="text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                @enderror
            </div>
        </div>

        <!-- Status Messages -->
        @if ($successMessage)
            <div class="bg-green-50 border border-green-200 rounded-md p-4 dark:bg-green-900/20 dark:border-green-800">
                <p class="text-green-600 text-sm dark:text-green-400">{{ $successMessage }}</p>
            </div>
        @endif

        @if ($errorMessage)
            <div class="bg-red-50 border border-red-200 rounded-md p-4 dark:bg-red-900/20 dark:border-red-800">
                <p class="text-red-600 text-sm dark:text-red-400">{{ $errorMessage }}</p>
            </div>
        @endif
    </div>
</div>
