import type { Metadata } from "next";
import { prisma } from "@/lib/db";
import { toggleUserStatus } from "@/lib/admin/actions";

export const metadata: Metadata = {
  title: "Üyeler",
};

export default async function AdminUsersPage() {
  const users = await prisma.user.findMany({
    orderBy: { createdAt: "desc" },
    include: { profile: true },
  });

  return (
    <div className="p-8">
      <div className="mb-6 border-b border-border pb-6">
        <h1 className="text-[22px]">Üyeler</h1>
        <p className="mt-0.5 text-[12.5px] text-text-muted">{users.length} kayıtlı üye</p>
      </div>

      <div className="overflow-hidden rounded-2xl border border-border bg-surface">
        <table className="w-full text-left">
          <thead>
            <tr className="border-b border-border text-[11.5px] font-semibold uppercase tracking-wide text-text-muted">
              <th className="px-5 py-3">Üye</th>
              <th className="px-5 py-3">E-posta</th>
              <th className="px-5 py-3">Şehir</th>
              <th className="px-5 py-3">Durum</th>
              <th className="px-5 py-3">E-posta Doğrulama</th>
              <th className="px-5 py-3 text-right">İşlem</th>
            </tr>
          </thead>
          <tbody>
            {users.map((user) => {
              const toggle = toggleUserStatus.bind(null, user.id);
              const isActive = user.status === "ACTIVE";
              return (
                <tr key={user.id} className="border-b border-border text-[13.5px] last:border-0">
                  <td className="px-5 py-3 font-semibold">{user.profile?.fullName ?? "—"}</td>
                  <td className="px-5 py-3 text-text-muted">{user.email}</td>
                  <td className="px-5 py-3 text-text-muted">{user.profile?.city ?? "—"}</td>
                  <td className="px-5 py-3">
                    <span
                      className={`rounded-full px-2.5 py-1 text-[11.5px] font-semibold ${
                        isActive ? "bg-green-100 text-green-700" : "bg-accent/10 text-accent"
                      }`}
                    >
                      {isActive ? "Aktif" : "Askıya Alınmış"}
                    </span>
                  </td>
                  <td className="px-5 py-3 text-text-muted">
                    {user.emailVerifiedAt ? "Doğrulandı" : "Bekliyor"}
                  </td>
                  <td className="px-5 py-3 text-right">
                    {user.role !== "ADMIN" && (
                      <form action={toggle}>
                        <button
                          className={`rounded-lg px-3.5 py-1.5 text-[12px] font-semibold ${
                            isActive ? "bg-accent/10 text-accent" : "bg-green-100 text-green-700"
                          }`}
                        >
                          {isActive ? "Askıya Al" : "Aktif Et"}
                        </button>
                      </form>
                    )}
                  </td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>
    </div>
  );
}