<script lang="ts">
  import { browser } from '$app/environment';
  import { goto } from '$app/navigation';
  import { onMount } from 'svelte';
  import { isAuthenticated, getUsers, createUser, updateUser, deleteUser, type UserInfo } from '$lib/api';
  import { toast } from 'svelte-sonner';
  import { Users, Plus, Save, X, Trash2 } from 'lucide-svelte';

  let users: UserInfo[] = [];
  let loading = true;

  // Создание
  let creating = false;
  let newUsername = '';
  let newPassword = '';
  let newRole = 'viewer';

  // Редактирование
  let editing: string | null = null;
  let editUsername = '';
  let editPassword = '';
  let editRole = 'viewer';

  // Подтверждение удаления
  let deleteTarget: string | null = null;
  let deleteUsername = '';
  let deleteIsLastAdmin = false;

  if (browser && !isAuthenticated()) {
    goto('/login');
  }

  onMount(() => {
    loadUsers();
  });

  async function loadUsers() {
    loading = true;
    try {
      users = await getUsers();
    } catch (e: any) {
      toast.error(e.message || 'Ошибка загрузки');
    } finally {
      loading = false;
    }
  }

  // ── Создание ────────────────────────────────────────────────────

  async function handleCreate() {
    if (!newUsername || !newPassword) {
      toast.error('Заполните имя и пароль');
      return;
    }
    try {
      const u = await createUser({ username: newUsername, password: newPassword, role: newRole });
      users = [...users, u];
      creating = false;
      newUsername = ''; newPassword = ''; newRole = 'viewer';
      toast.success('Пользователь создан');
    } catch (e: any) {
      toast.error(e.message || 'Ошибка создания');
    }
  }

  function cancelCreate() {
    creating = false;
    newUsername = ''; newPassword = ''; newRole = 'viewer';
  }

  // ── Редактирование ──────────────────────────────────────────────

  function startEdit(u: UserInfo) {
    editing = u.id;
    editUsername = u.username;
    editPassword = '';
    editRole = u.role;
  }

  function cancelEdit() {
    editing = null;
  }

  async function saveEdit() {
    if (!editing || !editUsername) return;
    const data: { username?: string; password?: string; role?: string } = {
      username: editUsername,
      role: editRole,
    };
    if (editPassword) {
      data.password = editPassword;
    }
    try {
      const updated = await updateUser(editing, data);
      const idx = users.findIndex(u => u.id === editing);
      if (idx >= 0) {
        users = [...users.slice(0, idx), updated, ...users.slice(idx + 1)];
      }
      editing = null;
      toast.success('Пользователь обновлён');
    } catch (e: any) {
      toast.error(e.message || 'Ошибка обновления');
    }
  }

  // ── Удаление ────────────────────────────────────────────────────

  function confirmDelete(u: UserInfo) {
    const adminCount = users.filter(x => x.role === 'admin').length;
    deleteIsLastAdmin = u.role === 'admin' && adminCount <= 1;
    deleteTarget = u.id;
    deleteUsername = u.username;
  }

  function cancelDelete() {
    deleteTarget = null;
  }

  async function executeDelete() {
    if (!deleteTarget || deleteIsLastAdmin) return;
    try {
      await deleteUser(deleteTarget);
      users = users.filter(u => u.id !== deleteTarget);
      deleteTarget = null;
      toast.success('Пользователь удалён');
    } catch (e: any) {
      toast.error(e.message || 'Ошибка удаления');
    }
  }

  // ── Форматирование ──────────────────────────────────────────────

  function roleBadge(role: string): string {
    return role === 'admin'
      ? 'bg-purple-100 text-purple-700'
      : 'bg-gray-100 text-gray-700';
  }

  function formatDate(d: string): string {
    if (!d) return '—';
    return new Date(d).toLocaleDateString('ru-RU', {
      year: 'numeric', month: '2-digit', day: '2-digit',
      hour: '2-digit', minute: '2-digit',
    });
  }

  // Проверка: является ли текущий пользователь владельцем строки
  function currentUsername(): string {
    const token = browser ? localStorage.getItem('token') : null;
    if (!token) return '';
    try {
      const payload = JSON.parse(atob(token.split('.')[1]));
      return payload?.username || '';
    } catch { return ''; }
  }
</script>

<div class="space-y-6">
  <!-- Заголовок -->
  <div class="flex items-center justify-between">
    <h1 class="text-xl font-bold flex items-center gap-2">
      <Users class="h-5 w-5" /> Пользователи
    </h1>
    <button
      on:click={() => (creating = true)}
      class="flex items-center gap-2 px-4 py-2 bg-primary text-primary-foreground rounded-md text-sm font-medium hover:opacity-90"
    >
      <Plus class="h-4 w-4" /> Создать
    </button>
  </div>

  <!-- ── Форма создания ────────────────────────────────────────── -->

  {#if creating}
    <div class="border rounded-lg p-4 bg-yellow-50 border-yellow-200">
      <h3 class="text-sm font-semibold mb-3">Новый пользователь</h3>
      <div class="grid grid-cols-1 sm:grid-cols-3 gap-3 mb-3">
        <input
          class="px-3 py-2 border rounded-md text-sm bg-background"
          placeholder="Имя пользователя"
          bind:value={newUsername}
        />
        <input
          class="px-3 py-2 border rounded-md text-sm bg-background"
          type="password"
          placeholder="Пароль"
          bind:value={newPassword}
        />
        <select
          class="px-3 py-2 border rounded-md text-sm bg-background"
          bind:value={newRole}
        >
          <option value="admin">admin</option>
          <option value="viewer">viewer</option>
        </select>
      </div>
      <div class="flex gap-2">
        <button
          on:click={handleCreate}
          class="flex items-center gap-1 px-3 py-2 bg-primary text-primary-foreground rounded-md text-sm"
        >
          <Save class="h-3 w-3" /> Создать
        </button>
        <button
          on:click={cancelCreate}
          class="flex items-center gap-1 px-3 py-2 border rounded-md text-sm"
        >
          <X class="h-3 w-3" /> Отмена
        </button>
      </div>
    </div>
  {/if}

  <!-- ── Таблица ────────────────────────────────────────────────── -->

  {#if loading}
    <p class="text-muted-foreground text-sm">Загрузка...</p>
  {:else if users.length === 0}
    <p class="text-muted-foreground text-sm py-8 text-center">
      Нет пользователей. Создайте первого.
    </p>
  {:else}
    <div class="border rounded-lg overflow-hidden">
      <table class="w-full text-sm">
        <thead class="bg-secondary">
          <tr>
            <th class="px-4 py-3 text-left font-medium">Имя пользователя</th>
            <th class="px-4 py-3 text-left font-medium">Роль</th>
            <th class="px-4 py-3 text-left font-medium">Создан</th>
            <th class="px-4 py-3 text-right font-medium">Действия</th>
          </tr>
        </thead>
        <tbody>
          {#each users as u (u.id)}
            {#if editing === u.id}
              <!-- ── Строка редактирования ── -->
              <tr class="border-t bg-yellow-50">
                <td class="px-4 py-2">
                  <input
                    class="w-full px-2 py-1 border rounded text-sm bg-background"
                    bind:value={editUsername}
                  />
                </td>
                <td class="px-4 py-2">
                  {#if u.id === 'user-01'}
                    <span class="px-2 py-1 rounded text-xs font-medium bg-purple-100 text-purple-700">
                      admin 🔒
                    </span>
                    <span class="text-xs text-muted-foreground ml-1">защищён</span>
                  {:else}
                    <select
                      class="w-full px-2 py-1 border rounded text-sm bg-background"
                      bind:value={editRole}
                    >
                      <option value="admin">admin</option>
                      <option value="viewer">viewer</option>
                    </select>
                  {/if}
                </td>
                <td class="px-4 py-2 text-muted-foreground text-xs">
                  {formatDate(u.created_at)}
                </td>
                <td class="px-4 py-2 text-right">
                  <div class="flex gap-1 justify-end">
                    <input
                      class="w-24 px-2 py-1 border rounded text-xs bg-background"
                      type="password"
                      placeholder="Новый пароль"
                      bind:value={editPassword}
                    />
                    <button
                      on:click={saveEdit}
                      class="px-2 py-1 bg-primary text-primary-foreground rounded text-xs"
                    >
                      <Save class="h-3 w-3 inline" />
                    </button>
                    <button
                      on:click={cancelEdit}
                      class="px-2 py-1 border rounded text-xs"
                    >
                      <X class="h-3 w-3 inline" />
                    </button>
                  </div>
                </td>
              </tr>
            {:else}
              <!-- ── Обычная строка ── -->
              <tr class="border-t hover:bg-secondary/50">
                <td class="px-4 py-3">
                  <span class="font-medium">{u.username}</span>
                  {#if u.id === 'user-01'}
                    <span class="text-xs text-purple-600 ml-1" title="Первичный администратор. Роль защищена от изменения.">основной</span>
                  {/if}
                  {#if u.username === currentUsername()}
                    <span class="text-xs text-muted-foreground ml-2">(вы)</span>
                  {/if}
                </td>
                <td class="px-4 py-3">
                  <span class="px-2 py-0.5 rounded text-xs font-medium {roleBadge(u.role)}">
                    {u.role}
                  </span>
                </td>
                <td class="px-4 py-3 text-xs text-muted-foreground">
                  {formatDate(u.created_at)}
                </td>
                <td class="px-4 py-3 text-right">
                  <button
                    on:click={() => startEdit(u)}
                    class="px-2 py-1 text-xs text-primary hover:underline mr-1"
                  >
                    Изменить
                  </button>
                  {#if u.id !== 'user-01'}
                    <button
                      on:click={() => confirmDelete(u)}
                      class="px-2 py-1 text-xs text-destructive hover:underline"
                    >
                      <Trash2 class="h-3 w-3 inline" />
                    </button>
                  {/if}
                </td>
              </tr>
            {/if}
          {/each}
        </tbody>
      </table>
    </div>
  {/if}

  <!-- ── Модальное окно удаления ────────────────────────────────── -->

  {#if deleteTarget}
    <div
      class="fixed inset-0 bg-black/50 flex items-center justify-center z-50"
      on:click={cancelDelete}
      on:keydown={(e) => { if (e.key === 'Escape') cancelDelete(); }}
      role="dialog"
    >
      <div class="bg-card border rounded-lg p-6 w-full max-w-md shadow-lg" on:click|stopPropagation>
        <h3 class="text-lg font-semibold mb-2">
          {deleteIsLastAdmin ? 'Невозможно удалить' : 'Удалить пользователя?'}
        </h3>

        {#if deleteIsLastAdmin}
          <p class="text-sm text-muted-foreground mb-4">
            <strong>{deleteUsername}</strong> — последний администратор.
            Сначала назначьте другого пользователя администратором.
          </p>
          <div class="flex justify-end">
            <button on:click={cancelDelete} class="px-4 py-2 border rounded-md text-sm">
              Понятно
            </button>
          </div>
        {:else}
          <p class="text-sm text-muted-foreground mb-4">
            Вы уверены, что хотите удалить пользователя
            <strong>{deleteUsername}</strong>?
            Это действие нельзя отменить.
          </p>
          <div class="flex gap-2 justify-end">
            <button on:click={cancelDelete} class="px-4 py-2 border rounded-md text-sm">
              Отмена
            </button>
            <button
              on:click={executeDelete}
              class="px-4 py-2 bg-destructive text-destructive-foreground rounded-md text-sm font-medium hover:opacity-90"
            >
              Удалить
            </button>
          </div>
        {/if}
      </div>
    </div>
  {/if}
</div>
