"use client";

import { useState, useEffect } from "react";
import { useAuth } from "@/lib/auth";
import { Search, Loader2, ChevronLeft, ChevronRight, ShieldCheck } from "lucide-react";

const API = process.env.NEXT_PUBLIC_API_URL ;

export default function AdminUsersPage() {
  const { token } = useAuth();
  const [users, setUsers] = useState<any[]>([]);
  const [pagination, setPagination] = useState({ total: 0, page: 1, totalPages: 1 });
  const [loading, setLoading] = useState(true);
  const [search, setSearch] = useState("");

  const fetchUsers = async (page = 1) => {
    if (!token) return;
    setLoading(true);
    const params = new URLSearchParams({ page: String(page), limit: "20" });
    if (search) params.set("search", search);
    try {
      const res = await fetch(`${API}/api/admin/users?${params}`, { headers: { Authorization: `Bearer ${token}` } });
      const json = await res.json();
      if (json.success) { setUsers(json.data); setPagination(json.pagination); }
    } catch (err) { console.error(err); }
    finally { setLoading(false); }
  };

  useEffect(() => { fetchUsers(); }, [token]);

  return (
    <div className="space-y-6">
      <h1 className="text-xl font-bold text-white">Users</h1>

      <div className="relative max-w-md">
        <Search size={14} className="absolute left-3 top-1/2 -translate-y-1/2 text-muted" />
        <input
          value={search} onChange={(e) => setSearch(e.target.value)}
          onKeyDown={(e) => e.key === "Enter" && fetchUsers()}
          placeholder="Cari username, email, phone..."
          className="w-full bg-dark-surface border border-dark-border rounded-lg pl-9 pr-4 py-2 text-sm text-white placeholder:text-muted focus:outline-none focus:border-red-500/50"
        />
      </div>

      <div className="bg-dark-surface rounded-xl border border-dark-border overflow-hidden">
        <div className="overflow-x-auto">
          <table className="w-full text-left text-xs whitespace-nowrap">
            <thead className="bg-white/[0.02] text-muted border-b border-dark-border">
              <tr>
                <th className="px-4 py-3 font-medium">ID</th>
                <th className="px-4 py-3 font-medium">Username</th>
                <th className="px-4 py-3 font-medium">Email</th>
                <th className="px-4 py-3 font-medium">Phone</th>
                <th className="px-4 py-3 font-medium text-center">Role</th>
                <th className="px-4 py-3 font-medium">XCredits</th>
                <th className="px-4 py-3 font-medium">WA</th>
                <th className="px-4 py-3 font-medium">2FA</th>
                <th className="px-4 py-3 font-medium">Bergabung</th>
              </tr>
            </thead>
            <tbody className="divide-y divide-dark-border">
              {loading ? (
                <tr><td colSpan={9} className="px-4 py-12 text-center text-muted"><Loader2 className="inline animate-spin mr-2" size={16} />Memuat...</td></tr>
              ) : users.length === 0 ? (
                <tr><td colSpan={9} className="px-4 py-12 text-center text-muted">Tidak ada user</td></tr>
              ) : users.map((u) => (
                <tr key={u.id} className="hover:bg-white/[0.02] transition-colors">
                  <td className="px-4 py-3 text-muted">#{u.id}</td>
                  <td className="px-4 py-3 text-white font-medium flex items-center gap-2">
                    {u.avatar ? (
                      // eslint-disable-next-line @next/next/no-img-element
                      <img src={u.avatar} alt="" className="w-6 h-6 rounded-full" referrerPolicy="no-referrer" />
                    ) : (
                      <div className="w-6 h-6 rounded-full bg-white/10 flex items-center justify-center text-[10px] font-bold">{u.username?.[0]?.toUpperCase()}</div>
                    )}
                    {u.username}
                  </td>
                  <td className="px-4 py-3 text-muted">{u.email}</td>
                  <td className="px-4 py-3 text-muted">{u.phone || "-"}</td>
                  <td className="px-4 py-3 text-center">
                    {u.role === "admin" ? (
                      <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded bg-red-500/10 text-red-400 text-[10px] font-bold"><ShieldCheck size={10} />Admin</span>
                    ) : (
                      <span className="text-muted text-[10px]">User</span>
                    )}
                  </td>
                  <td className="px-4 py-3 text-primary font-bold">{(u.xcredits || 0).toLocaleString()}</td>
                  <td className="px-4 py-3">{u.wa_linked ? <span className="text-green-400 text-[10px] font-bold">✓</span> : <span className="text-muted text-[10px]">✗</span>}</td>
                  <td className="px-4 py-3">{u.two_factor_enabled ? <span className="text-green-400 text-[10px] font-bold">ON</span> : <span className="text-muted text-[10px]">OFF</span>}</td>
                  <td className="px-4 py-3 text-muted">{new Date(u.createdAt || u.created_at).toLocaleDateString("id-ID")}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
        {pagination.totalPages > 1 && (
          <div className="flex items-center justify-between px-4 py-3 border-t border-dark-border">
            <p className="text-xs text-muted">Total: {pagination.total}</p>
            <div className="flex items-center gap-2">
              <button onClick={() => fetchUsers(pagination.page - 1)} disabled={pagination.page <= 1} className="p-1.5 rounded bg-white/5 text-muted hover:text-white disabled:opacity-30"><ChevronLeft size={14} /></button>
              <span className="text-xs text-white">{pagination.page} / {pagination.totalPages}</span>
              <button onClick={() => fetchUsers(pagination.page + 1)} disabled={pagination.page >= pagination.totalPages} className="p-1.5 rounded bg-white/5 text-muted hover:text-white disabled:opacity-30"><ChevronRight size={14} /></button>
            </div>
          </div>
        )}
      </div>
    </div>
  );
}