<template>
  <AppLayout>
    <div class="flex justify-between items-center mb-6">
      <h1 class="text-2xl font-bold text-gray-900">{{ t('restaurants.pageName') }}</h1>
      <button @click="openModal('create')" class="btn-primary flex items-center gap-2">
        <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="M12 4v16m8-8H4" />
        </svg>
        {{ t('restaurants.add') }}
      </button>
    </div>

    <div class="card overflow-hidden">
      <div class="overflow-x-auto">
        <table class="min-w-full divide-y divide-gray-200">
          <thead class="bg-gray-50">
            <tr>
              <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{{ t('common.id') }}</th>
              <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{{ t('common.name') }}</th>
              <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{{ t('restaurants.host') }}</th>
              <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{{ t('restaurants.https') }}</th>
              <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{{ t('common.login') }}</th>
              <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{{ t('common.created') }}</th>
              <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">{{ t('common.actions') }}</th>
            </tr>
          </thead>
          <tbody class="divide-y divide-gray-200 bg-white">
            <tr v-for="rest in restaurants" :key="rest.id" class="hover:bg-gray-50 transition-colors">
              <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">{{ rest.id }}</td>
              <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ rest.name }}</td>
              <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ rest.host }}</td>
              <td class="px-6 py-4 whitespace-nowrap text-sm">
                <label class="relative inline-flex items-center cursor-pointer">
                  <input type="checkbox" :checked="rest.https" @change="toggleHttps(rest)" class="sr-only peer" />
                  <div class="w-9 h-5 bg-gray-200 rounded-full peer peer-checked:bg-primary-600 transition-colors"></div>
                  <div class="absolute left-0.5 top-0.5 w-4 h-4 bg-white rounded-full transition-transform peer-checked:translate-x-4"></div>
                </label>
              </td>
              <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ rest.login }}</td>
              <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ formatDate(rest.created) }}</td>
              <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                <div class="flex items-center justify-end space-x-3">
                  <button @click="checkRestaurant(rest)" :disabled="rest.checking" class="text-green-600 hover:text-green-800 transition-colors disabled:opacity-50">
                    <svg v-if="!rest.checking" 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="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                    </svg>
                    <svg v-else class="w-5 h-5 animate-spin" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                      <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                    </svg>
                  </button>
                  <button @click="openModal('edit', rest)" class="text-blue-600 hover:text-blue-800 transition-colors">
                    <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>
                  </button>
                  <button @click="confirmDelete(rest.id)" class="text-red-600 hover:text-red-800 transition-colors">
                    <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>
                  <span v-if="rest.checkResult" class="text-xs px-2 py-1 rounded-full bg-green-100 text-green-700 ml-1 whitespace-nowrap">
                    {{ rest.checkResult }}
                  </span>
                </div>
              </td>
            </tr>
            <tr v-if="restaurants.length === 0">
              <td colspan="7" class="px-6 py-12 text-center text-gray-500">{{ t('restaurants.noRestaurants') }}</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>

    <!-- Модалка создания/редактирования (без изменений) -->
    <Transition name="fade">
      <div v-if="modalOpen" class="fixed inset-0 z-50 overflow-y-auto" @click.self="closeModal">
        <div class="fixed inset-0 bg-black/50 backdrop-blur-sm"></div>
        <div class="flex items-center justify-center min-h-screen p-4">
          <div class="relative bg-white rounded-2xl shadow-xl max-w-md w-full transform transition-all">
            <div class="flex justify-between items-center p-6 border-b">
              <h2 class="text-xl font-bold text-gray-900">{{ modalTitle }}</h2>
              <button @click="closeModal" class="text-gray-400 hover:text-gray-600 transition-colors">
                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                </svg>
              </button>
            </div>
            <form @submit.prevent="submitRestaurant" class="p-6 space-y-5">
              <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">{{ t('common.name') }} *</label>
                <input v-model="form.name" type="text" required class="input-field" />
              </div>
              <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">{{ t('restaurants.host') }} *</label>
                <input v-model="form.host" type="text" required class="input-field" placeholder="e.g., api.example.com" />
              </div>
              <div class="flex items-center">
                <input type="checkbox" v-model="form.https" class="rounded border-gray-300 text-primary-600 focus:ring-primary-500 w-4 h-4 mr-2" />
                <label class="text-sm font-medium text-gray-700">{{ t('restaurants.useHttps') }}</label>
              </div>
              <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">{{ t('common.login') }} *</label>
                <input v-model="form.login" type="text" required class="input-field" />
              </div>
              <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">{{ t('common.password') }}</label>
                <input
                  v-model="form.password"
                  :required="modalMode === 'create'"
                  type="password"
                  class="input-field"
                  autocomplete="new-password"
                />
                <p v-if="modalMode === 'edit'" class="text-xs text-gray-500 mt-1">{{ t('common.leavePasswordBlank') }}</p>
              </div>
              <div class="flex justify-end space-x-3 pt-2">
                <button type="button" @click="closeModal" class="btn-secondary">{{ t('app.cancel') }}</button>
                <button type="submit" class="btn-primary">{{ t('app.save') }}</button>
              </div>
            </form>
          </div>
        </div>
      </div>
    </Transition>

    <!-- Модалка подтверждения удаления -->
    <Transition name="fade">
      <div v-if="deleteConfirm.show" class="fixed inset-0 z-50 overflow-y-auto" @click.self="deleteConfirm.show = false">
        <div class="fixed inset-0 bg-black/50 backdrop-blur-sm"></div>
        <div class="flex items-center justify-center min-h-screen p-4">
          <div class="relative bg-white rounded-2xl shadow-xl max-w-md w-full">
            <div class="p-6 text-center">
              <div class="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-red-100 mb-4">
                <svg class="h-6 w-6 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
                </svg>
              </div>
              <h3 class="text-lg font-medium text-gray-900 mb-2">{{ t('restaurants.delete') }}</h3>
              <p class="text-sm text-gray-500 mb-6">{{ t('restaurants.deleteConfirmation') }}</p>
              <div class="flex justify-center space-x-3">
                <button @click="deleteConfirm.show = false" class="btn-secondary">{{ t('app.cancel') }}</button>
                <button @click="deleteRestaurant(deleteConfirm.id)" class="bg-red-600 text-white px-4 py-2 rounded-lg hover:bg-red-700 transition-colors">{{ t('app.delete') }}</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </Transition>
  </AppLayout>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import AppLayout from '@/components/Layout/AppLayout.vue';
import { useI18n } from 'vue-i18n';
import { useNotification } from '@/composables/useNotification';

const { t } = useI18n();
const { showNotification } = useNotification();

type Restaurant = {
  id: number;
  name: string;
  host: string;
  https: boolean;
  login: string;
  created: string;
  checking?: boolean;
  checkResult?: string | null;
};

const restaurants = ref<Restaurant[]>([]);
const modalOpen = ref(false);
const modalMode = ref<'create' | 'edit'>('create');
const form = ref({ id: null, name: '', login: '', password: '', host: '', https: false });
const modalTitle = ref('');
const deleteConfirm = ref({ show: false, id: null });

async function loadRestaurants() {
  try {
    const res = await fetch('/api/admin/restaurants');
    if (!res.ok) throw new Error();
    const data = await res.json();
    restaurants.value = data.map((r: any) => ({
      ...r,
      checking: false,
      checkResult: null
    }));
  } catch (e) {
    showNotification('restaurants.loadError', 'error');
  }
}

function formatDate(dateStr: string) {
  if (!dateStr) return '-';
  return new Date(dateStr).toLocaleString();
}

async function checkRestaurant(rest: Restaurant) {
  rest.checking = true;
  rest.checkResult = null;

  try {
    const response = await fetch(`/api/admin/restaurants/${rest.id}/check`);
    const data = await response.json();

    if (data.success) {
      rest.checkResult = `${data.latency_ms} ms`;
    } else {
      const errorText = data.error || 'Unknown error';
      showNotification('restaurants.checkError', 'error', { error: errorText });
    }
  } catch (error: any) {
    showNotification('restaurants.checkNetworkError', 'error', { error: error.message });
  } finally {
    rest.checking = false;
  }
}

async function toggleHttps(rest: Restaurant) {
  const newHttps = !rest.https;
  const payload = {
    name: rest.name,
    host: rest.host,
    login: rest.login,
    https: newHttps
  };
  try {
    const res = await fetch(`/api/admin/restaurants/${rest.id}`, {
      method: 'PUT',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(payload)
    });
    if (res.ok) {
      rest.https = newHttps;
      showNotification('restaurants.httpsUpdateSuccess', 'success');
    } else {
      showNotification('restaurants.httpsUpdateError', 'error');
    }
  } catch (e) {
    showNotification('restaurants.httpsUpdateError', 'error');
  }
}

function openModal(mode: 'create' | 'edit', rest: Restaurant | null = null) {
  modalMode.value = mode;
  if (mode === 'create') {
    form.value = { id: null, name: '', login: '', password: '', host: '', https: false };
    modalTitle.value = t('restaurants.add');
  } else if (rest) {
    form.value = {
      id: rest.id,
      name: rest.name,
      login: rest.login,
      password: '',
      host: rest.host,
      https: rest.https || false
    };
    modalTitle.value = t('restaurants.edit');
  }
  modalOpen.value = true;
}

function closeModal() {
  modalOpen.value = false;
}

async function submitRestaurant() {
  if (modalMode.value === 'create' && !form.value.password) {
    showNotification('restaurants.passwordRequired', 'error');
    return;
  }

  try {
    const payload = {
      name: form.value.name,
      host: form.value.host,
      https: form.value.https,
      login: form.value.login,
      ...(form.value.password ? { password: form.value.password } : {})
    };
    if (modalMode.value === 'create') {
      const res = await fetch('/api/admin/restaurants', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(payload)
      });
      if (!res.ok) throw new Error();
      showNotification('restaurants.createSuccess', 'success');
    } else {
      const res = await fetch(`/api/admin/restaurants/${form.value.id}`, {
        method: 'PUT',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(payload)
      });
      if (!res.ok) throw new Error();
      showNotification('restaurants.updateSuccess', 'success');
    }
    await loadRestaurants();
    closeModal();
  } catch (e) {
    showNotification(modalMode.value === 'create' ? 'restaurants.createError' : 'restaurants.updateError', 'error');
  }
}

function confirmDelete(id: number) {
  deleteConfirm.value = { show: true, id };
}

async function deleteRestaurant(id: number) {
  try {
    const res = await fetch(`/api/admin/restaurants/${id}`, { method: 'DELETE' });
    if (!res.ok) throw new Error();
    showNotification('restaurants.deleteSuccess', 'success');
    await loadRestaurants();
  } catch (e) {
    showNotification('restaurants.deleteError', 'error');
  } finally {
    deleteConfirm.value.show = false;
  }
}

onMounted(loadRestaurants);
</script>

<style scoped>
@keyframes spin {
  to { transform: rotate(360deg); }
}
.animate-spin {
  animation: spin 1s linear infinite;
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.2s ease;
}
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>
