import { auth } from "@/lib/auth"
import { db } from "@/lib/db"
import { redirect } from "next/navigation"
import { revalidatePath } from "next/cache"
import Link from "next/link"
import { BulkUserActions } from "@/components/admin/BulkUserActions"
import { SuperAdminActions } from "@/components/admin/SuperAdminActions"
import { NotificationToggle } from "@/components/admin/NotificationToggle"
import { getAllCommissions } from "@/lib/commissions"
import { getCommissionDisplayNameSync } from "@/lib/commissions-client"
import { setUserRoleAction } from "@/app/admin/actions"
import { userCounties } from "@/lib/userCounties"
import bcrypt from "bcryptjs"

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

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

  const students = users.filter((u) => u.role === "STUDENT")
  const testers = users.filter((u) => u.role === "TESTER")
  const admins = users.filter((u) => u.role === "ADMIN")
  const evaluators = users.filter((u) => u.role === "EVALUATOR")

  const createUser = async (formData: FormData) => {
    "use server"
    try {
      const sess = await auth()
      if (!sess?.user || sess.user.role !== "ADMIN") {
        console.error("[createUser] Unauthorized")
        throw new Error("Unauthorized")
      }

      const name = (formData.get("name") as string || "").trim()
      const email = (formData.get("email") as string || "").trim().toLowerCase()
      const password = formData.get("password") as string || ""
      const studentClass = formData.get("class") as string || ""
      const county = formData.get("county") as string || ""
      const role = (formData.get("role") as string || "STUDENT") as "STUDENT" | "EVALUATOR" | "TESTER" | "ADMIN"

      console.log("[createUser] Received:", { name, email, passwordLength: password.length, studentClass, county, role })

      if (!name || !email || !password) {
        console.error("[createUser] Validation failed: missing name/email/password", { name: !!name, email: !!email, password: !!password })
        return
      }
      if (password.length < 6) {
        console.error("[createUser] Validation failed: password too short", password.length)
        return
      }

      // Check uniqueness (including soft-deleted users!)
      const existing = await db.user.findFirst({ where: { email } })
      if (existing) {
        console.error("[createUser] Email already exists:", email, "deletedAt:", existing.deletedAt)
        return
      }

      const hashedPassword = await bcrypt.hash(password, 12)
      console.log("[createUser] Password hashed OK")

      const newUser = await db.user.create({
        data: {
          name,
          email,
          password: hashedPassword,
          class: studentClass || null,
          county: county || null,
          role,
        },
      })

      console.log("[createUser] ✅ User created:", newUser.id, newUser.email)
      revalidatePath("/admin/users")
    } catch (err) {
      console.error("[createUser] ❌ Error:", err)
      throw err
    }
  }

  // Pre-build commission display map for sync use in render
  const allCommissions = await getAllCommissions()
  const commDisplayMap: Record<string, string> = {}
  for (const c of allCommissions) {
    commDisplayMap[c.code.toUpperCase()] = c.displayName
  }

  const inputStyle = {
    padding: "0.5rem 0.75rem",
    borderRadius: "var(--radius-sm)",
    border: "1px solid var(--border-color)",
    background: "var(--surface-hover)",
    color: "var(--text-main)",
    fontSize: "0.85rem",
    width: "100%",
    boxSizing: "border-box" as const,
  }

  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(--warning)" }}>
          <div style={{ fontSize: "0.85rem", color: "var(--text-muted)", marginBottom: "0.25rem" }}>Total Testeri</div>
          <div style={{ fontSize: "2rem", fontWeight: 700 }}>{testers.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(--border-color)" }}>
          <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 style={{ background: "var(--surface-color)", padding: "1.25rem", borderRadius: "var(--radius-lg)", border: "1px solid var(--border-color)", borderLeft: "4px solid #8b5cf6" }}>
          <div style={{ fontSize: "0.85rem", color: "var(--text-muted)", marginBottom: "0.25rem" }}>Evaluatori</div>
          <div style={{ fontSize: "2rem", fontWeight: 700 }}>{evaluators.length}</div>
        </div>
      </div>

      {/* ═══ Create New User ═══ */}
      <div style={{ background: "var(--surface-color)", borderRadius: "var(--radius-lg)", border: "1px solid var(--border-color)", overflow: "hidden", marginBottom: "2rem" }}>
        <details>
          <summary style={{
            padding: "1.25rem 1.5rem", cursor: "pointer", fontWeight: 600,
            fontSize: "1.05rem", display: "flex", alignItems: "center", gap: "0.5rem",
          }}>
            ➕ Adaugă cont nou
          </summary>
          <form action={createUser} style={{ padding: "0 1.5rem 1.5rem", display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: "1rem" }}>
            <div>
              <label style={{ display: "block", fontSize: "0.78rem", color: "var(--text-muted)", marginBottom: "0.25rem" }}>Nume complet *</label>
              <input name="name" required placeholder="Ion Popescu" style={inputStyle} />
            </div>
            <div>
              <label style={{ display: "block", fontSize: "0.78rem", color: "var(--text-muted)", marginBottom: "0.25rem" }}>Adresă E-mail *</label>
              <input name="email" type="email" required placeholder="ion@example.com" style={inputStyle} />
            </div>
            <div>
              <label style={{ display: "block", fontSize: "0.78rem", color: "var(--text-muted)", marginBottom: "0.25rem" }}>Parolă *</label>
              <input name="password" type="text" required minLength={6} placeholder="min. 6 caractere" style={inputStyle} />
            </div>
            <div>
              <label style={{ display: "block", fontSize: "0.78rem", color: "var(--text-muted)", marginBottom: "0.25rem" }}>Clasă</label>
              <select name="class" style={inputStyle}>
                <option value="">—</option>
                <option value="9">Clasa a IX-a</option>
                <option value="10">Clasa a X-a</option>
                <option value="11">Clasa a XI-a</option>
                <option value="12">Clasa a XII-a</option>
              </select>
            </div>
            <div>
              <label style={{ display: "block", fontSize: "0.78rem", color: "var(--text-muted)", marginBottom: "0.25rem" }}>Județ</label>
              <select name="county" style={inputStyle}>
                <option value="">— Selectați județul —</option>
                {userCounties.map(c => (
                  <option key={c} value={c}>{c}</option>
                ))}
              </select>
            </div>
            <div>
              <label style={{ display: "block", fontSize: "0.78rem", color: "var(--text-muted)", marginBottom: "0.25rem" }}>Rol</label>
              <select name="role" style={inputStyle}>
                <option value="STUDENT">Elev (STUDENT)</option>
                <option value="EVALUATOR">Evaluator (EVALUATOR)</option>
                <option value="TESTER">Tester (TESTER)</option>
                <option value="ADMIN">Administrator (ADMIN)</option>
              </select>
            </div>
            <div style={{ gridColumn: "1 / -1" }}>
              <button type="submit" style={{
                padding: "0.65rem 1.5rem", background: "var(--primary)", color: "white",
                border: "none", borderRadius: "var(--radius-md)", fontWeight: 600,
                cursor: "pointer", fontSize: "0.9rem",
              }}>
                Creează cont
              </button>
            </div>
          </form>
        </details>
      </div>

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

      {testers.length > 0 && (
        <BulkUserActions students={testers} title="🧪 Testeri" />
      )}

      {/* Evaluators Table */}
      {evaluators.length > 0 && (
        <div style={{ background: "var(--surface-color)", borderRadius: "var(--radius-lg)", border: "1px solid var(--border-color)", overflow: "hidden", marginBottom: "2rem" }}>
          <div style={{ padding: "1.25rem 1.5rem", borderBottom: "1px solid var(--border-color)" }}>
            <h2 style={{ fontSize: "1.15rem", fontWeight: 600 }}>📋 Evaluatori ({evaluators.length})</h2>
          </div>
          <div style={{ overflowX: "auto" }}>
            <table style={{ width: "100%", borderCollapse: "collapse", textAlign: "left" }}>
              <thead>
                <tr style={{ background: "var(--surface-hover)" }}>
                  {["Comisia", "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>
                {evaluators
                  .sort((a, b) => (a.commission ?? "").localeCompare(b.commission ?? ""))
                  .map((user) => (
                  <tr key={user.id} style={{ borderBottom: "1px solid var(--border-color)" }}>
                    <td style={{ padding: "0.85rem 1.25rem" }}>
                      <span style={{ display: "inline-block", padding: "0.2rem 0.6rem", background: "rgba(139, 92, 246, 0.1)", color: "#8b5cf6", borderRadius: "999px", fontSize: "0.82rem", fontWeight: 600 }}>
                        Comisia {getCommissionDisplayNameSync(user.commission, commDisplayMap)}
                      </span>
                    </td>
                    <td style={{ padding: "0.85rem 1.25rem", fontWeight: 500 }}>{user.name || "—"}</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" }}>
                      <form action={async () => {
                        "use server"
                        await setUserRoleAction(user.id, "STUDENT")
                      }}>
                        <button
                          type="submit"
                          style={{
                            padding: "0.35rem 0.65rem",
                            background: "rgba(239, 68, 68, 0.1)",
                            color: "var(--danger)",
                            borderRadius: "var(--radius-sm)",
                            fontSize: "0.75rem",
                            fontWeight: 600,
                            border: "none",
                            cursor: "pointer",
                            whiteSpace: "nowrap",
                          }}
                        >
                          → Elev
                        </button>
                      </form>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      )}

      {/* 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", "Notificări", "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" }}>
                    <NotificationToggle 
                      userId={user.id} 
                      enabled={user.receiveNotifications} 
                      canEdit={session?.user?.email === "vasile@geo-spatial.org" || session?.user?.id === user.id} 
                    />
                  </td>
                  <td style={{ padding: "0.85rem 1.25rem" }}>
                    <div style={{ display: "flex", gap: "0.5rem" }}>
                      <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,
                          textDecoration: "none"
                        }}
                      >
                        Editează
                      </Link>
                      {session?.user?.email === "vasile@geo-spatial.org" && user.email !== "vasile@geo-spatial.org" && (
                        <SuperAdminActions userId={user.id} userEmail={user.email || ""} />
                      )}
                    </div>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </main>
  )
}