<!-- #region SystemSettings [C:3] [TYPE Component] [SEMANTICS settings,system,timezone,config] -->
<!-- @BRIEF System settings tab: timezone configuration and API key management. -->
<!-- @PRE: settings object is provided with app_timezone field. -->
<!-- @POST: User can select the application timezone and manage API keys. -->
<script lang="ts">
  import { t, locale } from "$lib/i18n/index.svelte.js";
  import ApiKeysTab from "$lib/components/settings/ApiKeysTab.svelte";

  let { settings = $bindable(), onSave } = $props();

  // Common IANA timezones for selection
  const COMMON_TIMEZONES = [
    { value: "Europe/Moscow", label: "Europe/Moscow (MSK, UTC+3)" },
    { value: "Europe/London", label: "Europe/London (GMT/BST, UTC+0/+1)" },
    { value: "Europe/Berlin", label: "Europe/Berlin (CET/CEST, UTC+1/+2)" },
    { value: "Europe/Paris", label: "Europe/Paris (CET/CEST, UTC+1/+2)" },
    { value: "Europe/Helsinki", label: "Europe/Helsinki (EET/EEST, UTC+2/+3)" },
    { value: "Europe/Kaliningrad", label: "Europe/Kaliningrad (UTC+2)" },
    { value: "Europe/Samara", label: "Europe/Samara (SAMT, UTC+4)" },
    { value: "Asia/Yekaterinburg", label: "Asia/Yekaterinburg (YEKT, UTC+5)" },
    { value: "Asia/Omsk", label: "Asia/Omsk (OMST, UTC+6)" },
    { value: "Asia/Krasnoyarsk", label: "Asia/Krasnoyarsk (KRAT, UTC+7)" },
    { value: "Asia/Irkutsk", label: "Asia/Irkutsk (IRKT, UTC+8)" },
    { value: "Asia/Yakutsk", label: "Asia/Yakutsk (YAKT, UTC+9)" },
    { value: "Asia/Vladivostok", label: "Asia/Vladivostok (VLAT, UTC+10)" },
    { value: "Asia/Kamchatka", label: "Asia/Kamchatka (PETT, UTC+12)" },
    { value: "America/New_York", label: "America/New_York (EST/EDT, UTC-5/-4)" },
    { value: "America/Chicago", label: "America/Chicago (CST/CDT, UTC-6/-5)" },
    { value: "America/Denver", label: "America/Denver (MST/MDT, UTC-7/-6)" },
    { value: "America/Los_Angeles", label: "America/Los_Angeles (PST/PDT, UTC-8/-7)" },
    { value: "Asia/Tokyo", label: "Asia/Tokyo (JST, UTC+9)" },
    { value: "Asia/Shanghai", label: "Asia/Shanghai (CST, UTC+8)" },
    { value: "Asia/Dubai", label: "Asia/Dubai (GST, UTC+4)" },
    { value: "UTC", label: "UTC (Coordinated Universal Time)" },
  ];
</script>

<div class="space-y-8">
  <!-- Timezone Section -->
  <div>
    <h2 class="text-xl font-bold mb-4">{$t.settings?.system || "System"}</h2>
    <p class="text-gray-600 mb-6">{$t.settings?.system_description || "Application-wide system settings including timezone."}</p>

    <div class="bg-gray-50 p-6 rounded-lg border border-gray-200">
      <div class="space-y-6">
        <!-- Timezone selector -->
        <div>
          <label for="app-timezone" class="block text-sm font-medium text-gray-900 mb-1">
            {$t.settings?.app_timezone || "Timezone"}
          </label>
          <p class="text-xs text-gray-500 mb-2">
            {$t.settings?.app_timezone_hint || "All schedule times and timestamps will be displayed and executed in this timezone."}
          </p>
          <select
            id="app-timezone"
            bind:value={settings.app_timezone}
            class="block w-full max-w-md pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md"
          >
            {#each COMMON_TIMEZONES as tz (tz.value)}
              <option value={tz.value}>{tz.label}</option>
            {/each}
          </select>
        </div>

        <!-- Current time preview -->
        <div class="flex items-center gap-2 text-sm text-gray-500 border-t border-gray-200 pt-4">
          <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>{settings.app_timezone}:</span>
          <span class="font-mono text-gray-700">
            {new Date().toLocaleString($locale === 'en' ? 'en-US' : 'ru-RU', { timeZone: settings.app_timezone || 'Europe/Moscow' })}
          </span>
        </div>
      </div>

      <div class="mt-6 flex justify-end">
        <button
          onclick={onSave}
          class="bg-primary text-white px-4 py-2 rounded hover:bg-primary-hover"
        >
          {$t.settings?.save_system || $t.settings?.save_logging || "Save"}
        </button>
      </div>
    </div>
  </div>

  <!-- API Keys Section -->
  <div class="border-t border-gray-200 pt-8">
    <ApiKeysTab />
  </div>
</div>
<!-- #endregion SystemSettings -->
