import {
  CoffeeIcon,
  GhostIcon,
  LayoutDashboardIcon,
} from "lucide-react"

import { Link } from "@/i18n/navigation"
import { NotFoundBackButton } from "@/components/not-found-back-button"
import { Button } from "@/components/ui/button"

export type NotFoundViewProps = {
  eyebrow: string
  title: string
  subtitle: string
  quip: string
  quipAuthor: string
  fact0: string
  fact1: string
  fact2: string
  ctaDashboard: string
  ctaBack: string
  footer: string
}

export function NotFoundView({
  eyebrow,
  title,
  subtitle,
  quip,
  quipAuthor,
  fact0,
  fact1,
  fact2,
  ctaDashboard,
  ctaBack,
  footer,
}: NotFoundViewProps) {
  return (
    <div className="relative flex min-h-svh flex-col items-center justify-center overflow-hidden px-6 py-16">
      <p
        aria-hidden
        className="pointer-events-none absolute inset-0 flex select-none items-center justify-center font-bold text-[clamp(6rem,28vw,16rem)] tracking-tighter text-foreground/4"
      >
        404
      </p>

      <div className="relative z-10 flex max-w-lg flex-col items-center text-center">
        <div className="relative mb-6 flex size-20 items-center justify-center rounded-2xl border border-dashed border-primary/30 bg-primary/5 shadow-sm">
          <GhostIcon className="size-10 text-primary" aria-hidden />
          <CoffeeIcon
            className="absolute -right-1 -bottom-1 size-7 rotate-12 text-amber-600 dark:text-amber-400"
            aria-hidden
          />
        </div>

        <p className="font-mono text-sm font-medium uppercase tracking-widest text-primary">
          {eyebrow}
        </p>
        <h1 className="mt-2 text-3xl font-semibold tracking-tight sm:text-4xl">
          {title}
        </h1>
        <p className="mt-3 text-base leading-relaxed text-muted-foreground">
          {subtitle}
        </p>

        <blockquote className="mt-6 rounded-xl border bg-muted/50 px-4 py-3 text-sm italic text-muted-foreground">
          &ldquo;{quip}&rdquo;
          <footer className="mt-2 text-xs not-italic">— {quipAuthor}</footer>
        </blockquote>

        <ul className="mt-6 space-y-2 text-left text-sm text-muted-foreground">
          <li>{fact0}</li>
          <li>{fact1}</li>
          <li>{fact2}</li>
        </ul>

        <div className="mt-8 flex flex-wrap items-center justify-center gap-3">
          <Button asChild size="lg">
            <Link href="/dashboard">
              <LayoutDashboardIcon className="size-4" />
              {ctaDashboard}
            </Link>
          </Button>
          <NotFoundBackButton label={ctaBack} />
        </div>

        <p className="mt-8 text-xs text-muted-foreground/80">{footer}</p>
      </div>
    </div>
  )
}