import Link from "next/link"
import { notFound } from "next/navigation"
import { ArrowLeft, Mail, User } from "lucide-react"
import { Button } from "@/components/ui/button"
import { BlueTick } from "@/components/ui/blue-tick"
import { createAdminClient } from "@/lib/supabase/admin"
import { AdminUserForm } from "@/components/admin/admin-user-form"

export const dynamic = "force-dynamic"

// Admin guard is handled by the shared app/admin/layout.tsx, so this page
// can focus on fetching + rendering the target user. This page renders
// inside the admin layout, which already includes the top chrome + nav,
// so no need to repeat them here.
export default async function AdminUserDetailPage({
  params,
}: {
  params: Promise<{ id: string }>
}) {
  const { id } = await params

  const admin = createAdminClient()
  const [{ data: authUserRes, error: authErr }, { data: profile }] = await Promise.all([
    admin.auth.admin.getUserById(id),
    admin.from("profiles").select("*").eq("id", id).maybeSingle(),
  ])

  if (authErr || !authUserRes?.user) notFound()
  const target = authUserRes.user

  let loaded = profile
  if (!loaded) {
    const meta = (target.user_metadata ?? {}) as Record<string, unknown>
    const ageRaw = typeof meta.age === "string" ? Number.parseInt(meta.age, 10) : null
    const fallback = {
      id: target.id,
      display_name:
        (meta.display_name as string | undefined) ||
        target.email?.split("@")[0] ||
        "User",
      age: ageRaw && Number.isFinite(ageRaw) ? Math.min(120, Math.max(13, ageRaw)) : 18,
      gender: (meta.gender as string | undefined) || "prefer-not-to-say",
      country: (meta.country as string | undefined) || "Unknown",
      state: (meta.state as string | undefined) || "Unknown",
      bio: null as string | null,
      avatar_url: null as string | null,
      verified: false,
    }
    const { data: inserted } = await admin
      .from("profiles")
      .insert(fallback)
      .select("*")
      .maybeSingle()
    loaded = inserted ?? fallback
  }

  const confirmed = !!target.email_confirmed_at
  const verified = !!(loaded as { verified?: boolean }).verified
  const avatarUrl = (loaded as { avatar_url?: string | null }).avatar_url ?? null

  return (
    <div className="space-y-5">
      <div className="flex items-center">
        <Button asChild variant="ghost" size="sm" className="h-8 gap-1.5 px-2">
          <Link href="/admin/users">
            <ArrowLeft className="h-4 w-4" aria-hidden="true" />
            Back to users
          </Link>
        </Button>
      </div>

      {/* Identity card */}
      <div className="flex flex-wrap items-start gap-4 rounded-2xl border border-border bg-background p-5 shadow-sm">
        {avatarUrl ? (
          // eslint-disable-next-line @next/next/no-img-element
          <img
            src={avatarUrl || "/placeholder.svg"}
            alt=""
            className="h-14 w-14 shrink-0 rounded-full object-cover shadow-sm"
          />
        ) : (
          <span
            aria-hidden="true"
            className="flex h-14 w-14 shrink-0 items-center justify-center rounded-full bg-primary text-base font-semibold text-primary-foreground"
          >
            {(loaded.display_name || target.email || "?").trim().charAt(0).toUpperCase()}
          </span>
        )}
        <div className="min-w-0 flex-1">
          <div className="flex flex-wrap items-center gap-2">
            <h2 className="inline-flex items-center gap-1.5 truncate text-lg font-semibold text-foreground">
              {loaded.display_name || target.email}
              {verified && <BlueTick size={18} title="Verified" />}
            </h2>
            <span
              className={`inline-flex items-center gap-1.5 rounded-full border px-2 py-0.5 text-[11px] font-medium ${
                confirmed
                  ? "border-emerald-200 bg-emerald-50 text-emerald-700 dark:border-emerald-900 dark:bg-emerald-950 dark:text-emerald-300"
                  : "border-amber-200 bg-amber-50 text-amber-700 dark:border-amber-900 dark:bg-amber-950 dark:text-amber-300"
              }`}
            >
              {confirmed ? "Confirmed" : "Pending"}
            </span>
          </div>
          <div className="mt-1 flex flex-wrap items-center gap-x-4 gap-y-1 text-xs text-muted-foreground">
            <span className="inline-flex items-center gap-1">
              <Mail className="h-3 w-3" aria-hidden="true" />
              {target.email}
            </span>
            <span className="inline-flex items-center gap-1">
              <User className="h-3 w-3" aria-hidden="true" />
              Joined {formatDate(target.created_at)}
            </span>
            {target.last_sign_in_at && (
              <span>Last sign in {formatDate(target.last_sign_in_at)}</span>
            )}
          </div>
        </div>
      </div>

      <div className="rounded-2xl border border-border bg-background p-5 shadow-sm md:p-6">
        <AdminUserForm
          userId={target.id}
          email={target.email ?? ""}
          initial={{
            display_name: loaded.display_name,
            age: loaded.age,
            gender: loaded.gender,
            country: loaded.country,
            state: loaded.state,
            bio: loaded.bio ?? null,
          }}
        />
      </div>
    </div>
  )
}

function formatDate(iso: string) {
  try {
    const d = new Date(iso)
    return d.toLocaleString(undefined, {
      year: "numeric",
      month: "short",
      day: "numeric",
      hour: "2-digit",
      minute: "2-digit",
    })
  } catch {
    return iso
  }
}