<script>
  import { onMount } from 'svelte';
  import { goto } from '$app/navigation';
  import { api } from '$lib/api';
  import { getUser, initializeAuth } from '$lib/stores.svelte';

  let stats = $state({ total_users: 0, total_endpoints: 0, total_messages: 0, active_endpoints: 0 });
  let users = $state([]);
  let endpoints = $state([]);
  let showUserModal = $state(false);
  let editingUser = $state(null);
  let userForm = $state({ email: '', username: '', role: 'user', is_active: true });
  let showEndpointModal = $state(false);
  let editingEndpoint = $state(null);
  let endpointForm = $state({
    name: '',
    endpoint_type: 'openai',
    base_url: '',
    api_key: '',
    model_name: '',
    is_active: true,
    is_default: false
  });
  let activeTab = $state('stats');
  let loading = $state(true);

  let user = $derived(getUser());

  onMount(async () => {
    await initializeAuth();
    if (!user || user.role !== 'admin') {
      goto('/chat');
      return;
    }
    await loadData();
  });

  async function loadData() {
    loading = true;
    try {
      const [statsData, usersData, endpointsData] = await Promise.all([
        api.getAdminStats(),
        api.getUsers(),
        api.getAdminEndpoints()
      ]);
      stats = statsData;
      users = usersData;
      endpoints = endpointsData;
    } catch (e) {
      console.error('Failed to load admin data:', e);
    } finally {
      loading = false;
    }
  }

  function openUserModal(user = null) {
    editingUser = user;
    if (user) {
      userForm = {
        email: user.email,
        username: user.username,
        role: user.role,
        is_active: user.is_active
      };
    } else {
      userForm = { email: '', username: '', role: 'user', is_active: true };
    }
    showUserModal = true;
  }

  async function saveUser() {
    try {
      if (editingUser) {
        await api.updateUser(editingUser.id, userForm);
      }
      showUserModal = false;
      await loadData();
    } catch (e) {
      alert('Failed to save user: ' + e.message);
    }
  }

  async function deleteUser(user) {
    if (!confirm(`Delete user "${user.username}"?`)) return;
    try {
      await api.deleteUser(user.id);
      await loadData();
    } catch (e) {
      alert('Failed to delete user: ' + e.message);
    }
  }

  function openEndpointModal(endpoint = null) {
    editingEndpoint = endpoint;
    if (endpoint) {
      endpointForm = {
        name: endpoint.name,
        endpoint_type: endpoint.endpoint_type,
        base_url: endpoint.base_url,
        api_key: endpoint.api_key || '',
        model_name: endpoint.model_name,
        is_active: endpoint.is_active,
        is_default: endpoint.is_default
      };
    } else {
      endpointForm = {
        name: '',
        endpoint_type: 'openai',
        base_url: '',
        api_key: '',
        model_name: '',
        is_active: true,
        is_default: false
      };
    }
    showEndpointModal = true;
  }

  async function saveEndpoint() {
    try {
      if (editingEndpoint) {
        await api.updateEndpoint(editingEndpoint.id, endpointForm);
      } else {
        await api.createEndpoint(endpointForm);
      }
      showEndpointModal = false;
      await loadData();
    } catch (e) {
      alert('Failed to save endpoint: ' + e.message);
    }
  }

  async function deleteEndpoint(endpoint) {
    if (!confirm(`Delete endpoint "${endpoint.name}"?`)) return;
    try {
      await api.deleteEndpoint(endpoint.id);
      await loadData();
    } catch (e) {
      alert('Failed to delete endpoint: ' + e.message);
    }
  }
</script>

<div class="admin-page">
  <h1>Admin Panel</h1>

  <div class="tabs">
    <button
      class="tab"
      class:active={activeTab === 'stats'}
      onclick={() => activeTab = 'stats'}
    >
      Dashboard
    </button>
    <button
      class="tab"
      class:active={activeTab === 'users'}
      onclick={() => activeTab = 'users'}
    >
      Users
    </button>
    <button
      class="tab"
      class:active={activeTab === 'endpoints'}
      onclick={() => activeTab = 'endpoints'}
    >
      AI Endpoints
    </button>
  </div>

  {#if loading}
    <div class="loading">
      <div class="spinner"></div>
    </div>
  {:else}
    {#if activeTab === 'stats'}
      <div class="stats-grid">
        <div class="stat-card">
          <div class="stat-value">{stats.total_users}</div>
          <div class="stat-label">Total Users</div>
        </div>
        <div class="stat-card">
          <div class="stat-value">{stats.total_endpoints}</div>
          <div class="stat-label">AI Endpoints</div>
        </div>
        <div class="stat-card">
          <div class="stat-value">{stats.active_endpoints}</div>
          <div class="stat-label">Active Endpoints</div>
        </div>
        <div class="stat-card">
          <div class="stat-value">{stats.total_messages}</div>
          <div class="stat-label">Total Messages</div>
        </div>
      </div>
    {/if}

    {#if activeTab === 'users'}
      <div class="section-header">
        <h2>Users</h2>
      </div>
      <div class="table-container">
        <table class="data-table">
          <thead>
            <tr>
              <th>ID</th>
              <th>Username</th>
              <th>Email</th>
              <th>Role</th>
              <th>Status</th>
              <th>Created</th>
              <th>Actions</th>
            </tr>
          </thead>
          <tbody>
            {#each users as userRow}
              <tr>
                <td>{userRow.id}</td>
                <td>{userRow.username}</td>
                <td>{userRow.email}</td>
                <td>
                  <span class="badge" class:admin={userRow.role === 'admin'}>
                    {userRow.role}
                  </span>
                </td>
                <td>
                  <span class="status" class:active={userRow.is_active}>
                    {userRow.is_active ? 'Active' : 'Inactive'}
                  </span>
                </td>
                <td>{new Date(userRow.created_at).toLocaleDateString()}</td>
                <td>
                  <div class="actions">
                    <button class="btn btn-secondary btn-sm" onclick={() => openUserModal(userRow)}>
                      Edit
                    </button>
                    {#if userRow.role !== 'admin'}
                      <button class="btn btn-danger btn-sm" onclick={() => deleteUser(userRow)}>
                        Delete
                      </button>
                    {/if}
                  </div>
                </td>
              </tr>
            {/each}
          </tbody>
        </table>
      </div>
    {/if}

    {#if activeTab === 'endpoints'}
      <div class="section-header">
        <h2>AI Endpoints</h2>
        <button class="btn btn-primary" onclick={() => openEndpointModal()}>
          + Add Endpoint
        </button>
      </div>
      <div class="endpoints-grid">
        {#each endpoints as endpoint}
          <div class="endpoint-card">
            <div class="endpoint-header">
              <h3>{endpoint.name}</h3>
              <div class="endpoint-badges">
                {#if endpoint.is_default}
                  <span class="badge default">Default</span>
                {/if}
                {#if endpoint.is_active}
                  <span class="badge active">Active</span>
                {:else}
                  <span class="badge inactive">Inactive</span>
                {/if}
              </div>
            </div>
            <div class="endpoint-details">
              <p><strong>Type:</strong> {endpoint.endpoint_type}</p>
              <p><strong>Model:</strong> {endpoint.model_name}</p>
              <p><strong>URL:</strong> {endpoint.base_url}</p>
            </div>
            <div class="endpoint-actions">
              <button class="btn btn-secondary btn-sm" onclick={() => openEndpointModal(endpoint)}>
                Edit
              </button>
              <button class="btn btn-danger btn-sm" onclick={() => deleteEndpoint(endpoint)}>
                Delete
              </button>
            </div>
          </div>
        {:else}
          <p class="no-data">No endpoints configured. Add one to get started.</p>
        {/each}
      </div>
    {/if}
  {/if}
</div>

{#if showUserModal}
  <div class="modal-overlay" onclick={() => showUserModal = false}>
    <div class="modal" onclick={(e) => e.stopPropagation()}>
      <h3>{editingUser ? 'Edit User' : 'New User'}</h3>
      <form onsubmit={(e) => { e.preventDefault(); saveUser(); }}>
        <div class="form-group">
          <label class="label">Email</label>
          <input type="email" class="input" bind:value={userForm.email} required />
        </div>
        <div class="form-group">
          <label class="label">Username</label>
          <input type="text" class="input" bind:value={userForm.username} required />
        </div>
        <div class="form-group">
          <label class="label">Role</label>
          <select class="input" bind:value={userForm.role}>
            <option value="user">User</option>
            <option value="admin">Admin</option>
          </select>
        </div>
        <div class="form-group">
          <label class="checkbox-label">
            <input type="checkbox" bind:checked={userForm.is_active} />
            Active
          </label>
        </div>
        <div class="modal-actions">
          <button type="button" class="btn btn-secondary" onclick={() => showUserModal = false}>
            Cancel
          </button>
          <button type="submit" class="btn btn-primary">Save</button>
        </div>
      </form>
    </div>
  </div>
{/if}

{#if showEndpointModal}
  <div class="modal-overlay" onclick={() => showEndpointModal = false}>
    <div class="modal" onclick={(e) => e.stopPropagation()}>
      <h3>{editingEndpoint ? 'Edit Endpoint' : 'Add AI Endpoint'}</h3>
      <form onsubmit={(e) => { e.preventDefault(); saveEndpoint(); }}>
        <div class="form-group">
          <label class="label">Name</label>
          <input type="text" class="input" bind:value={endpointForm.name} placeholder="My OpenAI Endpoint" required />
        </div>
        <div class="form-group">
          <label class="label">Type</label>
          <select class="input" bind:value={endpointForm.endpoint_type}>
            <option value="openai">OpenAI Compatible</option>
            <option value="ollama">Ollama</option>
          </select>
        </div>
        <div class="form-group">
          <label class="label">Base URL</label>
          <input
            type="text"
            class="input"
            bind:value={endpointForm.base_url}
            placeholder="https://api.openai.com/v1"
            required
          />
        </div>
        <div class="form-group">
          <label class="label">API Key (optional for Ollama)</label>
          <input
            type="password"
            class="input"
            bind:value={endpointForm.api_key}
            placeholder="sk-..."
          />
        </div>
        <div class="form-group">
          <label class="label">Model Name</label>
          <input
            type="text"
            class="input"
            bind:value={endpointForm.model_name}
            placeholder="gpt-3.5-turbo or llama2"
            required
          />
        </div>
        <div class="form-row">
          <label class="checkbox-label">
            <input type="checkbox" bind:checked={endpointForm.is_active} />
            Active
          </label>
          <label class="checkbox-label">
            <input type="checkbox" bind:checked={endpointForm.is_default} />
            Default
          </label>
        </div>
        <div class="modal-actions">
          <button type="button" class="btn btn-secondary" onclick={() => showEndpointModal = false}>
            Cancel
          </button>
          <button type="submit" class="btn btn-primary">Save</button>
        </div>
      </form>
    </div>
  </div>
{/if}

<style>
  .admin-page {
    max-width: 1200px;
    margin: 0 auto;
  }

  h1 {
    margin-bottom: 1.5rem;
  }

  .tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
  }

  .tab {
    padding: 0.75rem 1.5rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s;
  }

  .tab:hover {
    background: var(--surface-hover);
    color: var(--text);
  }

  .tab.active {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
  }

  .loading {
    display: flex;
    justify-content: center;
    padding: 3rem;
  }

  .spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--border);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
  }

  @keyframes spin {
    to { transform: rotate(360deg); }
  }

  .stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
  }

  .stat-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 0.75rem;
    padding: 1.5rem;
    text-align: center;
  }

  .stat-value {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--primary);
  }

  .stat-label {
    color: var(--text-muted);
    font-size: 0.875rem;
    margin-top: 0.5rem;
  }

  .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
  }

  .section-header h2 {
    font-size: 1.25rem;
  }

  .table-container {
    overflow-x: auto;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 0.75rem;
  }

  .data-table {
    width: 100%;
    border-collapse: collapse;
  }

  .data-table th,
  .data-table td {
    padding: 0.75rem 1rem;
    text-align: left;
    border-bottom: 1px solid var(--border);
  }

  .data-table th {
    background: var(--background);
    font-weight: 600;
    color: var(--text-muted);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }

  .data-table tr:last-child td {
    border-bottom: none;
  }

  .badge {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    font-weight: 500;
    background: var(--surface-hover);
    color: var(--text-muted);
  }

  .badge.admin {
    background: var(--primary);
    color: white;
  }

  .badge.active {
    background: var(--success);
    color: white;
  }

  .badge.inactive {
    background: var(--danger);
    color: white;
  }

  .badge.default {
    background: var(--warning);
    color: black;
  }

  .status {
    font-size: 0.75rem;
    color: var(--text-muted);
  }

  .status.active {
    color: var(--success);
  }

  .actions {
    display: flex;
    gap: 0.5rem;
  }

  .endpoints-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1rem;
  }

  .endpoint-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 0.75rem;
    padding: 1.25rem;
  }

  .endpoint-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1rem;
  }

  .endpoint-header h3 {
    font-size: 1rem;
    margin: 0;
  }

  .endpoint-badges {
    display: flex;
    gap: 0.25rem;
  }

  .endpoint-details {
    font-size: 0.875rem;
    color: var(--text-muted);
    margin-bottom: 1rem;
  }

  .endpoint-details p {
    margin-bottom: 0.25rem;
  }

  .endpoint-actions {
    display: flex;
    gap: 0.5rem;
  }

  .no-data {
    color: var(--text-muted);
    font-style: italic;
    grid-column: 1 / -1;
  }

  .modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
  }

  .modal {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 0.75rem;
    padding: 1.5rem;
    width: 100%;
    max-width: 500px;
    max-height: 90vh;
    overflow-y: auto;
  }

  .modal h3 {
    margin-bottom: 1rem;
  }

  .form-row {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
  }

  .checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-size: 0.875rem;
  }

  .checkbox-label input {
    accent-color: var(--primary);
  }

  .modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 1rem;
  }
</style>
