import { AdminLayout } from "./AdminLayout.tsx";

export const AdminUsersPage = ({
  users,
}: {
  users: any[];
}) => {
  return (
    <AdminLayout title="Manage Users" currentPath="/admin/users">
      <div
        id="status-banner"
        style="display: none; margin-bottom: 1rem; padding: 0.75rem 1rem; border-radius: var(--radius-md); font-size: 0.9rem;"
      />

      <div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1.5rem; flex-wrap: wrap; gap: 1rem;">
        <div>
          <h1 style="font-size: 1.75rem; font-weight: 700; margin: 0 0 0.5rem 0; color: var(--text-primary);">
            User Management
          </h1>
          <p style="color: var(--text-secondary); margin: 0; font-size: 0.95rem;">
            Manage identities, activate pending registrations, and inspect role
            grants.
          </p>
        </div>

        {/* Instant Search Bar */}
        <div style="position: relative; min-width: 260px; max-width: 360px; width: 100%;">
          <input
            type="text"
            id="userSearchInput"
            placeholder="Search users by name, handle, status..."
            oninput="filterUsersList()"
            style="width: 100%; padding: 0.55rem 1rem 0.55rem 2.25rem; font-size: 0.875rem;"
          />
          <svg
            width="16"
            height="16"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            style="position: absolute; left: 0.8rem; top: 50%; transform: translateY(-50%); color: var(--text-muted); pointer-events: none;"
          >
            <circle cx="11" cy="11" r="8"></circle>
            <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
          </svg>
        </div>
      </div>

      {/* Desktop Table View (≥ 768px) */}
      <div class="card desktop-only" style="display: none;">
        <div class="table-container">
          <table id="usersTable">
            <thead>
              <tr>
                <th>Identity</th>
                <th>Display Name</th>
                <th>Status</th>
                <th>Actions</th>
              </tr>
            </thead>
            <tbody>
              {users.map((user) => {
                const statusClass = user.account_status === "active"
                  ? "badge-success"
                  : user.account_status === "suspended"
                  ? "badge-danger"
                  : "badge-warning";

                return (
                  <tr
                    key={user.id}
                    class="user-row"
                    data-search={`${user.username} ${
                      user.display_name || ""
                    } ${user.account_status}`.toLowerCase()}
                  >
                    <td>
                      <strong style="color: var(--text-primary); font-family: monospace; font-size: 0.95rem;">
                        @{user.username}
                      </strong>
                    </td>
                    <td style="color: var(--text-secondary);">
                      {user.display_name
                        ? (
                          <span style="font-weight: 600; color: var(--text-primary);">
                            {user.display_name}
                          </span>
                        )
                        : (
                          <span style="color: var(--text-muted); font-style: italic;">
                            (Matches @{user.username})
                          </span>
                        )}
                    </td>
                    <td>
                      <span class={`badge ${statusClass}`}>
                        {user.account_status}
                      </span>
                    </td>
                    <td>
                      <div style="display: flex; gap: 0.5rem; align-items: center;">
                        <a
                          href={`/admin/users/${user.id}`}
                          class="btn-outline"
                          style="padding: 0.35rem 0.75rem; font-size: 0.8rem; min-height: 32px; height: 32px; display: inline-flex; align-items: center; gap: 0.35rem; text-decoration: none; font-weight: 600;"
                        >
                          <svg
                            width="14"
                            height="14"
                            viewBox="0 0 24 24"
                            fill="none"
                            stroke="currentColor"
                            stroke-width="2"
                          >
                            <path d="M12 20h9"></path>
                            <path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z">
                            </path>
                          </svg>
                          <span>Manage</span>
                        </a>
                        {user.account_status === "pending" && (
                          <button
                            type="button"
                            class="btn-primary"
                            style="background: var(--success); border-color: var(--success); padding: 0.35rem 0.75rem; font-size: 0.8rem; min-height: 32px; height: 32px;"
                            onclick={`updateStatus('${user.id}', 'active', '${user.username}')`}
                          >
                            Activate
                          </button>
                        )}
                        {user.account_status === "active" && (
                          <button
                            type="button"
                            class="btn-danger"
                            style="padding: 0.35rem 0.75rem; font-size: 0.8rem; min-height: 32px; height: 32px;"
                            onclick={`updateStatus('${user.id}', 'suspended', '${user.username}')`}
                          >
                            Suspend
                          </button>
                        )}
                        {user.account_status === "suspended" && (
                          <button
                            type="button"
                            class="btn-primary"
                            style="background: var(--success); border-color: var(--success); padding: 0.35rem 0.75rem; font-size: 0.8rem; min-height: 32px; height: 32px;"
                            onclick={`updateStatus('${user.id}', 'active', '${user.username}')`}
                          >
                            Re-Activate
                          </button>
                        )}
                      </div>
                    </td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>
      </div>

      {/* Mobile Card Deck (< 768px) */}
      <div
        id="usersMobileDeck"
        class="mobile-only"
        style="display: flex; flex-direction: column; gap: 1rem;"
      >
        {users.map((user) => {
          const statusClass = user.account_status === "active"
            ? "badge-success"
            : user.account_status === "suspended"
            ? "badge-danger"
            : "badge-warning";

          return (
            <div
              class="card user-card"
              key={user.id}
              data-search={`${user.username} ${
                user.display_name || ""
              } ${user.account_status}`.toLowerCase()}
              style="margin-bottom: 0;"
            >
              <div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 0.75rem;">
                <div style="display: flex; align-items: center; gap: 0.65rem;">
                  <div style="display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: var(--primary-light); color: var(--primary); border-radius: var(--radius-md); font-weight: 700; font-size: 1.1rem;">
                    {(user.display_name || user.username).charAt(0)
                      .toUpperCase()}
                  </div>
                  <div>
                    <h3 style="margin: 0; font-size: 1.05rem; color: var(--text-primary);">
                      {user.display_name || user.username}
                    </h3>
                    <span style="font-size: 0.8rem; color: var(--text-muted); font-family: monospace;">
                      @{user.username}
                    </span>
                  </div>
                </div>

                <span class={`badge ${statusClass}`}>
                  {user.account_status}
                </span>
              </div>

              <div style="display: flex; gap: 0.5rem; margin-top: 1rem;">
                <a
                  href={`/admin/users/${user.id}`}
                  class="btn-outline"
                  style="flex: 1; text-decoration: none; justify-content: center; min-height: 42px; font-size: 0.875rem; font-weight: 600; gap: 0.4rem;"
                >
                  <svg
                    width="15"
                    height="15"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    stroke-width="2"
                  >
                    <path d="M12 20h9"></path>
                    <path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z">
                    </path>
                  </svg>
                  <span>Manage User</span>
                </a>
                {user.account_status === "pending" && (
                  <button
                    type="button"
                    class="btn-primary"
                    style="flex: 1; background: var(--success); border-color: var(--success); justify-content: center; min-height: 42px; font-size: 0.875rem;"
                    onclick={`updateStatus('${user.id}', 'active', '${user.username}')`}
                  >
                    Activate
                  </button>
                )}
                {user.account_status === "active" && (
                  <button
                    type="button"
                    class="btn-danger"
                    style="flex: 1; justify-content: center; min-height: 42px; font-size: 0.875rem;"
                    onclick={`updateStatus('${user.id}', 'suspended', '${user.username}')`}
                  >
                    Suspend
                  </button>
                )}
                {user.account_status === "suspended" && (
                  <button
                    type="button"
                    class="btn-primary"
                    style="flex: 1; background: var(--success); border-color: var(--success); justify-content: center; min-height: 42px; font-size: 0.875rem;"
                    onclick={`updateStatus('${user.id}', 'active', '${user.username}')`}
                  >
                    Re-Activate
                  </button>
                )}
              </div>
            </div>
          );
        })}
      </div>

      <style>
        {`
          @media (min-width: 768px) {
            .desktop-only { display: block !important; }
            .mobile-only { display: none !important; }
          }
          @media (max-width: 767px) {
            .desktop-only { display: none !important; }
            .mobile-only { display: flex !important; }
          }
        `}
      </style>

      <script
        dangerouslySetInnerHTML={{
          __html: `
          function showNotice(msg, isError) {
            const banner = document.getElementById('status-banner');
            banner.textContent = msg;
            banner.style.display = 'block';
            banner.style.background = isError ? 'var(--danger-bg)' : 'var(--success-bg)';
            banner.style.color = isError ? 'var(--danger-text)' : 'var(--success-text)';
            banner.style.border = isError ? '1px solid var(--danger-border)' : '1px solid var(--success-border)';
            setTimeout(() => { banner.style.display = 'none'; }, 5000);
          }

          function filterUsersList() {
            const query = document.getElementById('userSearchInput').value.toLowerCase().trim();
            const rows = document.querySelectorAll('.user-row');
            const cards = document.querySelectorAll('.user-card');

            rows.forEach(r => {
              const text = r.getAttribute('data-search') || '';
              r.style.display = text.includes(query) ? '' : 'none';
            });

            cards.forEach(c => {
              const text = c.getAttribute('data-search') || '';
              c.style.display = text.includes(query) ? '' : 'none';
            });
          }

          async function updateStatus(userId, status, username) {
            if (!confirm('Set user @' + username + ' to ' + status.toUpperCase() + '?')) {
              return;
            }
            try {
              const res = await fetch('/api/admin/users/' + userId + '/status', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ status })
              });
              if (res.ok) {
                showNotice('User status updated to ' + status, false);
                setTimeout(() => window.location.reload(), 600);
              } else {
                const data = await res.json();
                showNotice(data.error || 'Failed to update status', true);
              }
            } catch (err) {
              showNotice('Network error updating status', true);
            }
          }
        `,
        }}
      >
      </script>
    </AdminLayout>
  );
};