'use client';

import Link from 'next/link';
import { useRouter } from 'next/navigation';
import { SearchX, Home, ArrowLeft } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';

/**
 * Global 404 Not Found Page
 *
 * 트리거:
 * - 존재하지 않는 모든 경로 접근 시
 * - notFound() 함수 호출 시
 *
 * 특징:
 * - 클라이언트 컴포넌트 (router.back() 사용)
 * - 다국어 지원 (next-intl)
 */
export default function NotFoundPage() {
  const router = useRouter();
  return (
    <div className="min-h-screen flex items-center justify-center p-4 bg-gradient-to-br from-background via-background to-muted/20">
      <Card className="w-full max-w-2xl border border-border/20 bg-card/80 backdrop-blur-xl shadow-2xl">
        <CardHeader className="text-center pb-4">
          <div className="flex justify-center mb-6">
            <div className="relative">
              <div className="w-32 h-32 bg-gradient-to-br from-red-500/20 to-orange-500/20 rounded-3xl flex items-center justify-center">
                <SearchX className="w-16 h-16 text-red-500" strokeWidth={1.5} />
              </div>
              <div className="absolute -bottom-2 -right-2 w-16 h-16 bg-gradient-to-br from-orange-400 to-red-500 rounded-2xl flex items-center justify-center shadow-lg transform rotate-12">
                <span className="text-3xl font-black text-white">404</span>
              </div>
            </div>
          </div>
          <CardTitle className="text-3xl md:text-4xl font-black text-foreground mb-3">
            페이지를 찾을 수 없습니다
          </CardTitle>
          <p className="text-muted-foreground text-base md:text-lg">
            요청하신 페이지가 존재하지 않거나 이동되었습니다.
          </p>
        </CardHeader>

        <CardContent className="space-y-6">
          {/* 안내 메시지 */}
          <div className="bg-muted/50 rounded-xl p-6 space-y-3">
            <p className="text-sm text-foreground font-medium">
              다음 사항을 확인해주세요:
            </p>
            <ul className="text-sm text-muted-foreground space-y-1 list-disc list-inside">
              <li>URL 주소가 올바른지 확인</li>
              <li>북마크나 링크가 최신인지 확인</li>
              <li>페이지가 삭제되거나 이동되었을 수 있음</li>
            </ul>
          </div>

          {/* 액션 버튼 */}
          <div className="flex flex-col sm:flex-row gap-3 pt-4">
            <Button
              variant="outline"
              className="flex-1 rounded-xl"
              onClick={() => router.back()}
            >
              <ArrowLeft className="w-4 h-4 mr-2" />
              이전 페이지
            </Button>

            <Button
              asChild
              className="flex-1 rounded-xl bg-gradient-to-r from-primary to-primary/80 hover:from-primary/90 hover:to-primary/70"
            >
              <Link href="/dashboard">
                <Home className="w-4 h-4 mr-2" />
                홈으로 이동
              </Link>
            </Button>
          </div>

          {/* 도움말 */}
          <div className="pt-6 border-t border-border/20 text-center">
            <p className="text-xs text-muted-foreground">
              문제가 계속되면{' '}
              <Link href="/dashboard" className="text-primary hover:underline font-medium">
                대시보드
              </Link>
              로 돌아가거나 관리자에게 문의하세요.
            </p>
          </div>
        </CardContent>
      </Card>
    </div>
  );
}