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 { romaniaCounties } from "@/lib/counties"
import { DeleteUserButton } from "@/components/admin/DeleteUserButton"

export default async function AdminUserDetailPage({ params }: { params: { id: string } }) {
  const session = await auth()
  if (!session?.user || session.user.role !== "ADMIN") redirect("/")

  const { id } = await params

  const user = await db.user.findUnique({
    where: { id },
    include: {
      entries: {
        orderBy: { createdAt: "desc" },
        select: { id: true, title: true, status: true, createdAt: true },
      },
    },
  })

  if (!user) {
    return (
      <main className="container" style={{ padding: "3rem 1rem", textAlign: "center", minHeight: "100vh" }}>
        <h1>Utilizatorul nu a fost găsit</h1>
        <Link href="/admin/users" style={{ color: "var(--primary)", marginTop: "1rem", display: "inline-block" }}>← Înapoi</Link>
      </main>
    )
  }

  const updateUser = async (formData: FormData) => {
    "use server"
    const name = formData.get("name") as string
    const studentClass = formData.get("class") as string
    const role = formData.get("role") as "STUDENT" | "ADMIN"

    await db.user.update({
      where: { id },
      data: { name, class: studentClass, role },
    })
    revalidatePath("/admin/users")
    revalidatePath(`/admin/users/${id}`)
    redirect("/admin/users")
  }

  const deleteUser = async () => {
    "use server"
    try {
      await db.user.delete({ where: { id } })
      revalidatePath("/admin/users")
      return { success: true }
    } catch (e) {
      console.error("Delete user error:", e)
      return { success: false, error: "Eroare la ștergerea utilizatorului din baza de date." }
    }
  }

  const isSelf = session.user.id === id

  const statusColor = (status: string) => {
    if (status === "APPROVED")  return { bg: "rgba(16,185,129,0.1)", color: "var(--success)" }
    if (status === "REJECTED")  return { bg: "rgba(239,68,68,0.1)", color: "var(--danger)" }
    if (status === "SUBMITTED") return { bg: "rgba(245,158,11,0.1)", color: "var(--warning)" }
    return { bg: "rgba(100,116,139,0.1)", color: "var(--text-muted)" }
  }

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

  return (
    <main className="container" style={{ padding: "3rem 1rem", minHeight: "100vh", maxWidth: "750px" }}>
      {/* Breadcrumb */}
      <div style={{ marginBottom: "2rem", display: "flex", alignItems: "center", gap: "0.75rem", flexWrap: "wrap" }}>
        <Link href="/admin" style={{ color: "var(--text-muted)", textDecoration: "none" }}>Dashboard Admin</Link>
        <span style={{ color: "var(--text-muted)" }}>/</span>
        <Link href="/admin/users" style={{ color: "var(--text-muted)", textDecoration: "none" }}>Utilizatori</Link>
        <span style={{ color: "var(--text-muted)" }}>/</span>
        <span style={{ fontWeight: 600 }}>{user.name || user.email}</span>
      </div>

      <div style={{ display: "grid", gap: "1.5rem" }}>
        {/* Edit Form */}
        <div style={{ background: "var(--surface-color)", borderRadius: "var(--radius-lg)", border: "1px solid var(--border-color)", padding: "2rem" }}>
          <h2 style={{ fontSize: "1.15rem", fontWeight: 600, marginBottom: "1.5rem" }}>✏️ Editează informații utilizator</h2>
          <form action={updateUser}>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "1rem", marginBottom: "1rem" }}>
              <div>
                <label style={{ display: "block", fontSize: "0.85rem", color: "var(--text-muted)", marginBottom: "0.35rem" }}>Nume complet</label>
                <input name="name" defaultValue={user.name || ""} style={inputStyle} />
              </div>
              <div>
                <label style={{ display: "block", fontSize: "0.85rem", color: "var(--text-muted)", marginBottom: "0.35rem" }}>Clasă</label>
                <select name="class" defaultValue={user.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>
            <div style={{ marginBottom: "1.5rem" }}>
              <label style={{ display: "block", fontSize: "0.85rem", color: "var(--text-muted)", marginBottom: "0.35rem" }}>Rol</label>
              <select name="role" defaultValue={user.role} style={inputStyle} disabled={isSelf}>
                <option value="STUDENT">Elev (STUDENT)</option>
                <option value="ADMIN">Administrator (ADMIN)</option>
              </select>
              {isSelf && <p style={{ fontSize: "0.8rem", color: "var(--text-muted)", marginTop: "0.35rem" }}>Nu îți poți schimba propriul rol.</p>}
            </div>
            <div style={{ display: "flex", gap: "1rem" }}>
              <button
                type="submit"
                style={{
                  padding: "0.75rem 1.5rem",
                  background: "var(--primary)",
                  color: "white",
                  border: "none",
                  borderRadius: "var(--radius-md)",
                  fontWeight: 600,
                  cursor: "pointer",
                }}
              >
                Salvează modificările
              </button>
              <Link href="/admin/users" style={{
                padding: "0.75rem 1.5rem",
                background: "var(--surface-hover)",
                color: "var(--text-main)",
                border: "1px solid var(--border-color)",
                borderRadius: "var(--radius-md)",
                fontWeight: 500,
              }}>
                Anulează
              </Link>
            </div>
          </form>
        </div>

        {/* User Entries */}
        {user.entries.length > 0 && (
          <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.1rem", fontWeight: 600 }}>📋 Intrările utilizatorului ({user.entries.length})</h2>
            </div>
            <table style={{ width: "100%", borderCollapse: "collapse" }}>
              <tbody>
                {user.entries.map((entry) => {
                  const sc = statusColor(entry.status)
                  return (
                    <tr key={entry.id} style={{ borderBottom: "1px solid var(--border-color)" }}>
                      <td style={{ padding: "0.85rem 1.25rem", fontWeight: 500 }}>{entry.title}</td>
                      <td style={{ padding: "0.85rem 1.25rem" }}>
                        <span style={{ padding: "0.2rem 0.6rem", borderRadius: "999px", fontSize: "0.78rem", fontWeight: 600, background: sc.bg, color: sc.color }}>
                          {entry.status}
                        </span>
                      </td>
                      <td style={{ padding: "0.85rem 1.25rem", color: "var(--text-muted)", fontSize: "0.85rem" }}>
                        {new Date(entry.createdAt).toLocaleDateString("ro-RO")}
                      </td>
                      <td style={{ padding: "0.85rem 1.25rem", textAlign: "right" }}>
                        <Link
                          href={`/admin/entry/${entry.id}`}
                          style={{ color: "var(--primary)", fontSize: "0.85rem", fontWeight: 500 }}
                        >
                          Vizualizare
                        </Link>
                      </td>
                    </tr>
                  )
                })}
              </tbody>
            </table>
          </div>
        )}

        {/* Danger Zone */}
        {!isSelf && (
          <div style={{
            background: "rgba(239,68,68,0.05)",
            borderRadius: "var(--radius-lg)",
            border: "1px solid var(--danger)",
            padding: "1.5rem 2rem",
          }}>
            <h2 style={{ fontSize: "1.05rem", fontWeight: 600, color: "var(--danger)", marginBottom: "0.5rem" }}>⚠️ Zonă periculoasă</h2>
            <p style={{ color: "var(--text-muted)", fontSize: "0.9rem", marginBottom: "1rem" }}>
              Ștergerea unui utilizator va șterge <strong>toate intrările și fotografiile</strong> sale. Această acțiune este ireversibilă.
            </p>
            <DeleteUserButton
              userName={user.name || ""}
              userEmail={user.email || ""}
              onDelete={deleteUser}
            />
          </div>
        )}
      </div>
    </main>
  )
}