"use client";

import Link from "next/link";
import Image from "next/image";
import { Button } from "@/components/ui/button";
import { useState } from "react";
import { Spinner } from "@/components/ui/spinner";
import Background from "@/public/background/404.png";
import Profile from "@/public/404-image.jpg";
import { Activity, Home } from "lucide-react";
import { config } from "@/lib/config";

const MESSAGES = [
  "ฟอร์มนี้อาจจะถูก Erika กินไปแล้ว...",
  "หรือว่าฟอร์มนี้โดน Sukuna เล่นไปแล้ว...",
  "ฟอร์มนี้อาจจะหมดอายุหรือโดนลบไปแล้ว...",
  "บางทีคนสร้างอาจจะลืมเปิดฟอร์มนะ...",
  "ฟอร์มหายไปไหนน้า... ลองเช็คลิงก์ดูอีกทีสิ",
];

export default function NotFound() {
  const [goingHome, goHome] = useState(false);
  const [message] = useState(() => MESSAGES[Math.floor(Math.random() * MESSAGES.length)]);
  
  return (
    <div className="relative flex min-h-screen w-full flex-col items-center justify-center gap-2">
      <Image
        src={Background}
        alt="404 Background"
        fill
        priority
        className="z-[-1] object-cover opacity-20 grayscale"
      />
      <div className="border bg-card p-4 pb-12 shadow-lg max-sm:landscape:hidden">
        <Image 
          src={Profile}
          alt="404" 
          width={256} 
          height={256} 
          className="vintage-filter size-64 bg-muted"
        />
      </div>
      <h2 className="text-2xl font-semibold">404 ไม่พบหน้านี้</h2>
        <span>{message}</span>
        <div className="flex gap-2">
          <Link href="/form">
            <Button
              onClick={() => {
                goHome(true);
              }}
              disabled={goingHome}
              variant="destructive"
            >
              {goingHome ? <Spinner /> : <Home />}
              กลับหน้าเลือก
            </Button>
          </Link>
          <Link href={config.site.statusUrl}>
            <Button variant="link" className="text-secondary-foreground">
              <Activity />
              สถานะเว็บไซต์
            </Button>
          </Link>
        </div>
    </div>
  );
}