"use client";

import { useEffect, useState } from "react";
import Link from "next/link";

interface AdminUser {
  id: string;
  email: string;
  name: string;
  slackUserId: string | null;
  role: string;
  isActive: boolean;
  createdAt: string;
  lastActiveAt: string | null;
  sessionCount: number;
  secretCount: number;
  hasClaudeConnected: boolean;
}

export default function AdminUsersPage() {
  const [users, setUsers] = useState<AdminUser[]>([]);
  const [loading, setLoading] = useState(true);
  const [tab, setTab] = useState<"users" | "sessions">("users");

  async function loadUsers() {
    const res = await fetch("/api/admin/users");
    if (res.ok) setUsers(await res.json());
    setLoading(false);
  }

  useEffect(() => { loadUsers(); }, []);

  async function toggleRole(userId: string, currentRole: string) {
    const newRole = currentRole === "ADMIN" ? "USER" : "ADMIN";
    if (!confirm(`Change role to ${newRole}?`)) return;
    await fetch(`/api/admin/users/${userId}`, {
      method: "PATCH",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ role: newRole }),
    });
    await loadUsers();
  }

  async function toggleActive(userId: string, currentlyActive: boolean) {
    const action = currentlyActive ? "deactivate" : "activate";
    if (!confirm(`${action.charAt(0).toUpperCase() + action.slice(1)} this user?`)) return;
    await fetch(`/api/admin/users/${userId}`, {
      method: "PATCH",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ isActive: !currentlyActive }),
    });
    await loadUsers();
  }

  if (loading) return <div><p className="text-muted">Loading...</p></div>;

  return (
    <div>
      <div className="flex gap-4 mb-6">
        <h1 style={{ cursor: "pointer", opacity: tab === "users" ? 1 : 0.5 }} onClick={() => setTab("users")}>
          Users
        </h1>
        <h1 style={{ cursor: "pointer", opacity: tab === "sessions" ? 1 : 0.5 }} onClick={() => setTab("sessions")}>
          <Link href="/admin/sessions" style={{ color: "inherit" }}>All Sessions</Link>
        </h1>
      </div>

      {users.length === 0 ? (
        <p className="text-muted">No users yet.</p>
      ) : (
        users.map((u) => (
          <div key={u.id} className="card mb-4">
            <div className="flex justify-between items-center mb-4">
              <div>
                <strong>{u.name}</strong>
                <span className="text-muted text-sm" style={{ marginLeft: "0.75rem" }}>{u.email}</span>
              </div>
              <div className="flex gap-2 items-center">
                <span className={`badge ${u.role === "ADMIN" ? "badge-warning" : "badge-muted"}`}>{u.role}</span>
                <span className={`badge ${u.isActive ? "badge-success" : "badge-danger"}`}>
                  {u.isActive ? "Active" : "Inactive"}
                </span>
              </div>
            </div>
            <div className="flex gap-4 text-sm text-muted mb-4">
              <span>Slack: {u.slackUserId || "Not set"}</span>
              <span>{u.sessionCount} sessions</span>
              <span>{u.secretCount} secrets</span>
              <span>Claude: {u.hasClaudeConnected ? "Connected" : "Not connected"}</span>
            </div>
            <div className="flex gap-2">
              <button className="btn" onClick={() => toggleRole(u.id, u.role)}>
                {u.role === "ADMIN" ? "Demote to User" : "Promote to Admin"}
              </button>
              <button className="btn" onClick={() => toggleActive(u.id, u.isActive)}>
                {u.isActive ? "Deactivate" : "Activate"}
              </button>
            </div>
          </div>
        ))
      )}
    </div>
  );
}