"use client";

import { useEffect, useState } from "react";
import Link from "next/link";
import { useRouter } from "next/navigation";
import { Home, ArrowLeft, Search } from "lucide-react";

export default function NotFound() {
  const [mounted, setMounted] = useState(false);
  const [input, setInput] = useState("");
  const router = useRouter();

  useEffect(() => {
    setMounted(true);
  }, []);

  // In tests, avoid next/dynamic loadable timing and render a stable fallback
  if (process.env.NODE_ENV === "test") {
    return (
      <div>
        Oops! The page you&apos;re looking for doesn&apos;t exist.
      </div>
    );
  }

  if (!mounted) {
    return (
      <div className="min-h-screen flex items-center justify-center bg-[#faf8f3]">
        <div className="text-center">
          <div className="text-[#795548]">Loading...</div>
        </div>
      </div>
    );
  }

  const handleCommand = (cmd: string) => {
    const command = cmd.toLowerCase().trim();
    if (command === 'home' || command === 'cd ~' || command === 'cd /') {
      router.push('/');
    } else if (command === 'back' || command === 'cd ..') {
      router.back();
    } else if (command === 'search') {
      router.push('/projects');
    }
  };

  return (
    <div className="min-h-screen flex items-center justify-center bg-[#faf8f3] p-4">
      <div className="w-full max-w-2xl">
        {/* Terminal-style 404 */}
        <div className="bg-[#3e2723] rounded-2xl shadow-2xl overflow-hidden border border-[#5d4037]">
          {/* Terminal Header */}
          <div className="bg-[#5d4037] px-4 py-3 flex items-center gap-2 border-b border-[#795548]">
            <div className="flex gap-2">
              <div className="w-3 h-3 rounded-full bg-[#d84315]"></div>
              <div className="w-3 h-3 rounded-full bg-[#bcaaa4]"></div>
              <div className="w-3 h-3 rounded-full bg-[#a1887f]"></div>
            </div>
            <div className="ml-4 text-[#faf8f3] text-sm font-mono">
              terminal@portfolio ~ 404
            </div>
          </div>

          {/* Terminal Body */}
          <div className="p-6 md:p-8 font-mono text-sm md:text-base">
            <div className="mb-6">
              <div className="text-[#bcaaa4] mb-2">$ cd {mounted ? window.location.pathname : '/unknown'}</div>
              <div className="text-[#d84315] mb-4">
                <span className="mr-2">✗</span>
                Error: ENOENT: no such file or directory
              </div>
              <div className="text-[#a1887f] mb-6">
                <pre className="whitespace-pre-wrap">
{`
  ██╗  ██╗ ██████╗ ██╗  ██╗
  ██║  ██║██╔═████╗██║  ██║
  ███████║██║██╔██║███████║
  ╚════██║████╔╝██║╚════██║
       ██║╚██████╔╝     ██║
       ╚═╝ ╚═════╝      ╚═╝
`}
                </pre>
              </div>
              
              <div className="text-[#faf8f3] mb-6">
                <p className="mb-3">The page you&apos;re looking for seems to have wandered off.</p>
                <p className="text-[#bcaaa4]">Perhaps it never existed, or maybe it&apos;s on a coffee break.</p>
              </div>

              <div className="mb-6 text-[#a1887f]">
                <div className="mb-2">Available commands:</div>
                <div className="pl-4 space-y-1 text-sm">
                  <div>→ <span className="text-[#faf8f3]">home</span> - Return to homepage</div>
                  <div>→ <span className="text-[#faf8f3]">back</span> - Go back to previous page</div>
                  <div>→ <span className="text-[#faf8f3]">search</span> - Search the website</div>
                </div>
              </div>
            </div>

            {/* Interactive Command Line */}
            <div className="flex items-center gap-2 border-t border-[#5d4037] pt-4">
              <span className="text-[#a1887f]">$</span>
              <input
                type="text"
                value={input}
                onChange={(e) => setInput(e.target.value)}
                onKeyDown={(e) => {
                  if (e.key === 'Enter') {
                    handleCommand(input);
                    setInput('');
                  }
                }}
                placeholder="Type a command..."
                className="flex-1 bg-transparent text-[#faf8f3] outline-none placeholder:text-[#795548] font-mono"
                autoFocus
              />
            </div>
          </div>
        </div>

        {/* Quick Action Buttons */}
        <div className="mt-6 grid grid-cols-1 md:grid-cols-3 gap-4">
          <Link
            href="/"
            className="flex items-center justify-center gap-2 bg-[#fffcf5] hover:bg-[#faf8f3] border border-[#d7ccc8] rounded-xl px-6 py-4 transition-all hover:shadow-md group"
          >
            <Home className="w-5 h-5 text-[#5d4037] group-hover:text-[#3e2723]" />
            <span className="text-[#3e2723] font-medium">Home</span>
          </Link>
          
          <button
            onClick={() => router.back()}
            className="flex items-center justify-center gap-2 bg-[#fffcf5] hover:bg-[#faf8f3] border border-[#d7ccc8] rounded-xl px-6 py-4 transition-all hover:shadow-md group"
          >
            <ArrowLeft className="w-5 h-5 text-[#5d4037] group-hover:text-[#3e2723]" />
            <span className="text-[#3e2723] font-medium">Go Back</span>
          </button>
          
          <Link
            href="/projects"
            className="flex items-center justify-center gap-2 bg-[#fffcf5] hover:bg-[#faf8f3] border border-[#d7ccc8] rounded-xl px-6 py-4 transition-all hover:shadow-md group"
          >
            <Search className="w-5 h-5 text-[#5d4037] group-hover:text-[#3e2723]" />
            <span className="text-[#3e2723] font-medium">Explore Projects</span>
          </Link>
        </div>
      </div>
    </div>
  );
}