<template>
  <div class="flex flex-col h-full">
    <LayoutHeader :title="$t('settings.title')" />

    <div class="flex-1 overflow-auto">
      <!-- Tabs -->
      <div class="border-b px-5">
        <nav class="flex gap-2">
          <button
            v-for="tab in tabs"
            :key="tab.id"
            class="px-4 py-2 text-sm font-medium transition-colors"
            :class="
              activeTab === tab.id
                ? 'border-b-2 border-ink-gray-9 text-ink-gray-9'
                : 'text-ink-gray-5 hover:text-ink-gray-7'
            "
            @click="activeTab = tab.id"
          >
            {{ $t(tab.label) }}
          </button>
        </nav>
      </div>

      <div class="p-5">
        <!-- Admin Users Tab -->
        <div v-if="activeTab === 'adminUsers'" class="space-y-4">
          <div class="flex justify-between items-center">
            <h3 class="text-lg font-medium text-ink-gray-9">
              {{ $t('settings.adminUsers') }}
            </h3>
            <Button variant="solid" @click="showAddUserModal = true">
              <template #prefix>
                <FeatherIcon name="plus" class="h-4 w-4" />
              </template>
              {{ $t('settings.admin.addUser') }}
            </Button>
          </div>

          <div class="rounded-lg border overflow-hidden">
            <table class="min-w-full divide-y">
              <thead class="bg-surface-gray-2">
                <tr>
                  <th class="px-6 py-3 text-left text-xs font-medium text-ink-gray-5 uppercase">Name</th>
                  <th class="px-6 py-3 text-left text-xs font-medium text-ink-gray-5 uppercase">Email</th>
                  <th class="px-6 py-3 text-left text-xs font-medium text-ink-gray-5 uppercase">{{ $t('settings.admin.role') }}</th>
                  <th class="px-6 py-3 text-left text-xs font-medium text-ink-gray-5 uppercase">{{ $t('settings.admin.lastLogin') }}</th>
                  <th class="px-6 py-3 text-right text-xs font-medium text-ink-gray-5 uppercase">{{ $t('common.actions') }}</th>
                </tr>
              </thead>
              <tbody class="divide-y">
                <tr v-for="user in adminUsers" :key="user.id">
                  <td class="px-6 py-4">
                    <div class="flex items-center gap-3">
                      <div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center">
                        <span class="text-sm font-medium text-blue-600">
                          {{ user.name.charAt(0) }}
                        </span>
                      </div>
                      <span class="text-sm font-medium text-ink-gray-9">{{ user.name }}</span>
                    </div>
                  </td>
                  <td class="px-6 py-4 text-sm text-ink-gray-7">{{ user.email }}</td>
                  <td class="px-6 py-4">
                    <Badge
                      :variant="user.role === 'Super Admin' ? 'warning' : 'info'"
                      :label="user.role"
                    />
                  </td>
                  <td class="px-6 py-4 text-sm text-ink-gray-7">{{ user.lastLogin }}</td>
                  <td class="px-6 py-4 text-right">
                    <div class="flex items-center justify-end gap-2">
                      <Button variant="ghost" size="sm" @click="editUser(user)">
                        <FeatherIcon name="edit-2" class="h-4 w-4" />
                      </Button>
                      <Button variant="ghost" size="sm" @click="deleteUser(user)">
                        <FeatherIcon name="trash-2" class="h-4 w-4 text-red-500" />
                      </Button>
                    </div>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>

        <!-- Security Tab -->
        <div v-else-if="activeTab === 'security'" class="space-y-6">
          <div class="rounded-lg border p-5">
            <h3 class="text-base font-medium text-ink-gray-9 mb-4">
              {{ $t('settings.security.changePassword') }}
            </h3>
            <div class="space-y-4 max-w-md">
              <FormControl
                v-model="passwordForm.current"
                label="Current Password"
                type="password"
              />
              <FormControl
                v-model="passwordForm.new"
                label="New Password"
                type="password"
              />
              <FormControl
                v-model="passwordForm.confirm"
                label="Confirm Password"
                type="password"
              />
              <Button variant="solid" @click="changePassword">
                Update Password
              </Button>
            </div>
          </div>

          <div class="rounded-lg border p-5">
            <div class="flex items-center justify-between mb-4">
              <div>
                <h3 class="text-base font-medium text-ink-gray-9">
                  {{ $t('settings.security.twoFactorAuth') }}
                </h3>
                <p class="text-sm text-ink-gray-5 mt-1">
                  Add an extra layer of security to your account
                </p>
              </div>
              <Button variant="subtle">
                Enable 2FA
              </Button>
            </div>
          </div>

          <div class="rounded-lg border p-5">
            <h3 class="text-base font-medium text-ink-gray-9 mb-4">
              {{ $t('settings.security.activeSessions') }}
            </h3>
            <div class="space-y-3">
              <div
                v-for="session in activeSessions"
                :key="session.id"
                class="flex items-center justify-between py-2 border-b last:border-0"
              >
                <div class="flex items-center gap-3">
                  <FeatherIcon name="monitor" class="h-5 w-5 text-ink-gray-4" />
                  <div>
                    <p class="text-sm text-ink-gray-9">{{ session.device }}</p>
                    <p class="text-xs text-ink-gray-4">{{ session.location }} - {{ session.lastActive }}</p>
                  </div>
                </div>
                <Button v-if="!session.current" variant="ghost" size="sm">
                  Revoke
                </Button>
                <Badge v-else variant="success" label="Current" />
              </div>
            </div>
          </div>
        </div>

        <!-- System Tab -->
        <div v-else-if="activeTab === 'system'" class="space-y-6">
          <div class="rounded-lg border p-5">
            <h3 class="text-base font-medium text-ink-gray-9 mb-4">
              {{ $t('settings.system.language') }}
            </h3>
            <div class="max-w-md">
              <FormControl
                v-model="systemSettings.language"
                type="select"
                :options="languageOptions"
                @change="updateLanguage"
              />
            </div>
          </div>

          <div class="rounded-lg border p-5">
            <h3 class="text-base font-medium text-ink-gray-9 mb-4">
              {{ $t('settings.system.timezone') }}
            </h3>
            <div class="max-w-md">
              <FormControl
                v-model="systemSettings.timezone"
                type="select"
                :options="timezoneOptions"
              />
            </div>
          </div>

          <div class="rounded-lg border p-5">
            <h3 class="text-base font-medium text-ink-gray-9 mb-4">
              {{ $t('settings.system.dateFormat') }}
            </h3>
            <div class="max-w-md">
              <FormControl
                v-model="systemSettings.dateFormat"
                type="select"
                :options="dateFormatOptions"
              />
            </div>
          </div>

          <div class="flex justify-end">
            <Button variant="solid" @click="saveSystemSettings">
              {{ $t('common.save') }}
            </Button>
          </div>
        </div>

        <!-- Notifications Tab -->
        <div v-else-if="activeTab === 'notifications'" class="space-y-6">
          <div class="rounded-lg border p-5">
            <h3 class="text-base font-medium text-ink-gray-9 mb-4">
              {{ $t('settings.notification.emailNotifications') }}
            </h3>
            <div class="space-y-4">
              <label class="flex items-center justify-between">
                <span class="text-sm text-ink-gray-7">{{ $t('settings.notification.newUser') }}</span>
                <input
                  v-model="notificationSettings.newUser"
                  type="checkbox"
                  class="rounded border-gray-300 text-blue-600 focus:ring-blue-500"
                />
              </label>
              <label class="flex items-center justify-between">
                <span class="text-sm text-ink-gray-7">{{ $t('settings.notification.accountFrozen') }}</span>
                <input
                  v-model="notificationSettings.accountFrozen"
                  type="checkbox"
                  class="rounded border-gray-300 text-blue-600 focus:ring-blue-500"
                />
              </label>
              <label class="flex items-center justify-between">
                <span class="text-sm text-ink-gray-7">{{ $t('settings.notification.containerError') }}</span>
                <input
                  v-model="notificationSettings.containerError"
                  type="checkbox"
                  class="rounded border-gray-300 text-blue-600 focus:ring-blue-500"
                />
              </label>
              <label class="flex items-center justify-between">
                <span class="text-sm text-ink-gray-7">{{ $t('settings.notification.payment') }}</span>
                <input
                  v-model="notificationSettings.payment"
                  type="checkbox"
                  class="rounded border-gray-300 text-blue-600 focus:ring-blue-500"
                />
              </label>
            </div>
          </div>

          <div class="flex justify-end">
            <Button variant="solid" @click="saveNotificationSettings">
              {{ $t('common.save') }}
            </Button>
          </div>
        </div>
      </div>
    </div>

    <!-- Add User Modal -->
    <Dialog v-model="showAddUserModal" :options="{ title: $t('settings.admin.addUser') }">
      <template #body-content>
        <div class="space-y-4">
          <FormControl
            v-model="newUser.name"
            label="Name"
            type="text"
          />
          <FormControl
            v-model="newUser.email"
            label="Email"
            type="email"
          />
          <FormControl
            v-model="newUser.role"
            label="Role"
            type="select"
            :options="roleOptions"
          />
          <FormControl
            v-model="newUser.password"
            label="Password"
            type="password"
          />
        </div>
      </template>
      <template #actions>
        <Button variant="subtle" @click="showAddUserModal = false">
          {{ $t('common.cancel') }}
        </Button>
        <Button variant="solid" @click="addUser">
          {{ $t('common.create') }}
        </Button>
      </template>
    </Dialog>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useI18n } from 'vue-i18n'
import { Button, Badge, FormControl, Dialog, FeatherIcon } from 'frappe-ui'
import LayoutHeader from '@/components/Common/LayoutHeader.vue'

const { locale } = useI18n()
const activeTab = ref('adminUsers')
const showAddUserModal = ref(false)

const tabs = [
  { id: 'adminUsers', label: 'settings.adminUsers' },
  { id: 'security', label: 'settings.security' },
  { id: 'system', label: 'settings.system' },
  { id: 'notifications', label: 'settings.notifications' },
]

const adminUsers = ref([
  {
    id: 1,
    name: 'Admin User',
    email: 'admin@example.com',
    role: 'Super Admin',
    lastLogin: '2024-03-15 10:30',
  },
  {
    id: 2,
    name: 'Developer',
    email: 'dev@example.com',
    role: 'Admin',
    lastLogin: '2024-03-14 15:45',
  },
  {
    id: 3,
    name: 'Support',
    email: 'support@example.com',
    role: 'Viewer',
    lastLogin: '2024-03-13 09:00',
  },
])

const newUser = ref({
  name: '',
  email: '',
  role: 'Admin',
  password: '',
})

const roleOptions = [
  { label: 'Super Admin', value: 'Super Admin' },
  { label: 'Admin', value: 'Admin' },
  { label: 'Viewer', value: 'Viewer' },
]

const passwordForm = ref({
  current: '',
  new: '',
  confirm: '',
})

const activeSessions = ref([
  {
    id: 1,
    device: 'Chrome on MacOS',
    location: 'Moscow, Russia',
    lastActive: 'Now',
    current: true,
  },
  {
    id: 2,
    device: 'Firefox on Windows',
    location: 'Saint Petersburg, Russia',
    lastActive: '2 hours ago',
    current: false,
  },
])

const systemSettings = ref({
  language: 'ru',
  timezone: 'Europe/Moscow',
  dateFormat: 'DD.MM.YYYY',
})

const languageOptions = [
  { label: 'English', value: 'en' },
  { label: 'Русский', value: 'ru' },
]

const timezoneOptions = [
  { label: 'Europe/Moscow (UTC+3)', value: 'Europe/Moscow' },
  { label: 'Europe/London (UTC+0)', value: 'Europe/London' },
  { label: 'America/New_York (UTC-5)', value: 'America/New_York' },
]

const dateFormatOptions = [
  { label: 'DD.MM.YYYY', value: 'DD.MM.YYYY' },
  { label: 'MM/DD/YYYY', value: 'MM/DD/YYYY' },
  { label: 'YYYY-MM-DD', value: 'YYYY-MM-DD' },
]

const notificationSettings = ref({
  newUser: true,
  accountFrozen: true,
  containerError: true,
  payment: true,
})

function addUser() {
  console.log('Adding user:', newUser.value)
  showAddUserModal.value = false
  newUser.value = { name: '', email: '', role: 'Admin', password: '' }
}

function editUser(user) {
  console.log('Editing user:', user)
}

function deleteUser(user) {
  console.log('Deleting user:', user)
}

function changePassword() {
  console.log('Changing password')
  passwordForm.value = { current: '', new: '', confirm: '' }
}

function updateLanguage() {
  locale.value = systemSettings.value.language
  localStorage.setItem('admin-panel-locale', systemSettings.value.language)
}

function saveSystemSettings() {
  console.log('Saving system settings:', systemSettings.value)
}

function saveNotificationSettings() {
  console.log('Saving notification settings:', notificationSettings.value)
}
</script>
