import { auth } from "@/lib/auth"
import { db } from "@/lib/db"
import { redirect } from "next/navigation"
import Link from "next/link"
import { BulkUserActions } from "@/components/admin/BulkUserActions"

export default async function AdminUsersPage() {
  const session = await auth()
  if (!session?.user || session.user.role !== "ADMIN") redirect("/")

  const users = await db.user.findMany({
    orderBy: { createdAt: "desc" },
    include: {
      _count: { select: { entries: true } },
    },
  })

  const students = users.filter((u) => u.role === "STUDENT")
  const admins = users.filter((u) => u.role === "ADMIN")

  return (
    <main className="container" style={{ padding: "3rem 1rem", minHeight: "100vh" }}>
      {/* Navigation */}
      <div style={{ marginBottom: "2rem", display: "flex", alignItems: "center", gap: "1rem" }}>
        <Link href="/admin" style={{ color: "var(--text-muted)", display: "flex", alignItems: "center", gap: "0.25rem", textDecoration: "none" }}>
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
            <path d="m15 18-6-6 6-6" />
          </svg>
          Dashboard Admin
        </Link>
        <span style={{ color: "var(--text-muted)" }}>/</span>
        <span style={{ fontWeight: 600 }}>Gestionare Utilizatori</span>
      </div>

      {/* Stats */}
      <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(200px, 1fr))", gap: "1rem", marginBottom: "2rem" }}>
        <div style={{ background: "var(--surface-color)", padding: "1.25rem", borderRadius: "var(--radius-lg)", border: "1px solid var(--border-color)", borderLeft: "4px solid var(--primary)" }}>
          <div style={{ fontSize: "0.85rem", color: "var(--text-muted)", marginBottom: "0.25rem" }}>Total Elevi</div>
          <div style={{ fontSize: "2rem", fontWeight: 700 }}>{students.length}</div>
        </div>
        <div style={{ background: "var(--surface-color)", padding: "1.25rem", borderRadius: "var(--radius-lg)", border: "1px solid var(--border-color)", borderLeft: "4px solid var(--success)" }}>
          <div style={{ fontSize: "0.85rem", color: "var(--text-muted)", marginBottom: "0.25rem" }}>Administratori</div>
          <div style={{ fontSize: "2rem", fontWeight: 700 }}>{admins.length}</div>
        </div>
        <div style={{ background: "var(--surface-color)", padding: "1.25rem", borderRadius: "var(--radius-lg)", border: "1px solid var(--border-color)", borderLeft: "4px solid var(--warning)" }}>
          <div style={{ fontSize: "0.85rem", color: "var(--text-muted)", marginBottom: "0.25rem" }}>Total Utilizatori</div>
          <div style={{ fontSize: "2rem", fontWeight: 700 }}>{users.length}</div>
        </div>
      </div>

      {/* Students Table - Delegated to Client Component */}
      <BulkUserActions students={students} />

      {/* Admins Table */}
      <div style={{ background: "var(--surface-color)", borderRadius: "var(--radius-lg)", border: "1px solid var(--border-color)", overflow: "hidden" }}>
        <div style={{ padding: "1.25rem 1.5rem", borderBottom: "1px solid var(--border-color)" }}>
          <h2 style={{ fontSize: "1.15rem", fontWeight: 600 }}>🛡 Administratori ({admins.length})</h2>
        </div>
        <div style={{ overflowX: "auto" }}>
          <table style={{ width: "100%", borderCollapse: "collapse", textAlign: "left" }}>
            <thead>
              <tr style={{ background: "var(--surface-hover)" }}>
                {["Nume", "Email", "Înregistrat", "Acțiuni"].map((h) => (
                  <th key={h} style={{ padding: "0.85rem 1.25rem", fontSize: "0.8rem", color: "var(--text-muted)", fontWeight: 600, textTransform: "uppercase" }}>{h}</th>
                ))}
              </tr>
            </thead>
            <tbody>
              {admins.map((user) => (
                <tr key={user.id} style={{ borderBottom: "1px solid var(--border-color)" }}>
                  <td style={{ padding: "0.85rem 1.25rem", fontWeight: 500 }}>
                    {user.name || "—"}
                    {user.id === session.user.id && (
                      <span style={{ marginLeft: "0.5rem", padding: "0.15rem 0.4rem", background: "var(--primary-light)", color: "var(--primary)", borderRadius: "999px", fontSize: "0.72rem" }}>Tu</span>
                    )}
                  </td>
                  <td style={{ padding: "0.85rem 1.25rem", color: "var(--text-muted)", fontSize: "0.9rem" }}>{user.email}</td>
                  <td style={{ padding: "0.85rem 1.25rem", color: "var(--text-muted)", fontSize: "0.85rem" }}>
                    {new Date(user.createdAt).toLocaleDateString("ro-RO")}
                  </td>
                  <td style={{ padding: "0.85rem 1.25rem" }}>
                    <Link
                      href={`/admin/users/${user.id}`}
                      style={{
                        padding: "0.35rem 0.75rem",
                        background: "var(--primary-light)",
                        color: "var(--primary)",
                        borderRadius: "var(--radius-sm)",
                        fontSize: "0.82rem",
                        fontWeight: 600,
                      }}
                    >
                      Editează
                    </Link>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </main>
  )
}