import type { Metadata } from "next"
import Link from "next/link"

import { Button } from "@/components/ui/button"

export const metadata: Metadata = {
  title: "Falha na autenticação da dispositivo",
}

export default async function MachinesAuthErrorPage({
  searchParams,
}: {
  searchParams: Promise<Record<string, string | string[] | undefined>>
}) {
  const params = await searchParams
  const rawReason = params.reason
  const reasonValue = Array.isArray(rawReason) ? rawReason[0] : rawReason
  const reason = (reasonValue ?? "invalid_token").toString()

  const subtitle =
    reason === "invalid_token"
      ? "O token informado é inválido, expirou ou não está mais associado a uma dispositivo ativa."
      : "Não foi possível autenticar esta dispositivo no momento. Tente novamente em instantes."

  return (
    <div className="flex min-h-screen items-center justify-center bg-gradient-to-b from-slate-50 via-slate-50 to-white px-4 py-10">
      <div className="w-full max-w-md rounded-2xl border border-slate-200 bg-white px-6 py-8 text-center shadow-sm">
        <div className="mb-4 inline-flex size-12 items-center justify-center rounded-full border border-slate-200 bg-slate-50">
          <span className="text-lg font-semibold text-neutral-900">R</span>
        </div>
        <h1 className="text-xl font-semibold text-neutral-900">
          Não foi possível autenticar esta dispositivo
        </h1>
        <p className="mt-2 text-sm text-neutral-600">
          {subtitle}
        </p>
        <p className="mt-3 text-xs text-neutral-500">
          Volte ao Raven Desktop, reprovisione a dispositivo com um novo código ou tente novamente mais tarde.
        </p>
        <div className="mt-6 flex flex-col items-center gap-3">
          <Button asChild className="w-full max-w-xs rounded-full bg-neutral-900 text-sm font-semibold text-white hover:bg-neutral-900/90">
            <Link href="/">Voltar para o Raven</Link>
          </Button>
        </div>
      </div>
    </div>
  )
}
