import {Link, useNavigate, useRouteError} from 'react-router';
import {FileQuestion} from 'lucide-react';
import { Typography } from '@/components/ui/typography';

// 매칭되는 라우트가 없을 때(catch-all '*') 떨어지는 404 페이지.
// 라우터 errorElement 로도 재사용 가능하도록 useRouteError 는 있으면 참고만 한다(없어도 동작).
export default function NotFoundPage() {
  const navigate = useNavigate();
  const error = useRouteError() as {status?: number} | undefined;
  const status = error?.status ?? 404;

  return (
    <div className="min-h-screen flex items-center justify-center bg-background px-4">
      <div className="w-full max-w-sm bg-card border border-border rounded-lg shadow-sm p-8 flex flex-col items-center text-center gap-3">
        <div className="h-12 w-12 rounded-full bg-muted flex items-center justify-center">
          <FileQuestion className="h-6 w-6 text-muted-foreground" />
        </div>
        <Typography variant="h3" as="h1">{status} · 페이지를 찾을 수 없음</Typography>
        <Typography variant="muted">
          요청하신 주소의 페이지가 존재하지 않거나, 이동·삭제되었습니다.
          <br />
          주소를 다시 확인해 주세요.
        </Typography>
        <div className="mt-2 flex items-center gap-2">
          <button
            type="button"
            onClick={() => navigate(-1)}
            className="py-2 px-4 border border-border text-foreground font-semibold rounded text-sm hover:bg-muted transition-colors cursor-pointer"
          >
            이전으로
          </button>
          <Link
            to="/products"
            className="py-2 px-4 bg-primary text-primary-foreground font-semibold rounded text-sm hover:bg-primary/95 transition-colors"
          >
            상품관리로 돌아가기
          </Link>
        </div>
      </div>
    </div>
  );
}