/*
 * 404 — 페이지를 찾을 수 없음 (소유자 지시 4.4). 라우터 catch-all(`*`).
 * 공개(미인증)·인증 영역 모두 커버 — 셸에 의존하지 않는 전폭 중앙 카드(Nifty 톤).
 * 홈 복귀 버튼은 인증 시 역할별 랜딩, 미인증 시 공개 관문(/)으로 이동한다.
 * 선 SVG 아이콘만 사용(이모지 금지).
 */
import { useNavigate } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import { useAuthStore } from '../../store/authStore';
import { landingPathFor } from '../../lib/roleTrack';
import { Button } from '../../components/ui/Button';
import { IconArrowLeft, IconHome, IconSearch } from '../../components/ui/icons';
import './not-found.css';

export function NotFoundPage() {
  const { t } = useTranslation();
  const navigate = useNavigate();
  const isAuthenticated = useAuthStore((s) => s.isAuthenticated);
  const user = useAuthStore((s) => s.user);
  const workspaces = useAuthStore((s) => s.workspaces);

  const homePath = isAuthenticated ? landingPathFor(user, workspaces) : '/';

  return (
    <div className="kx-nf">
      <div className="kx-nf__card kx-card" role="alert" aria-labelledby="kx-nf-title">
        <div className="kx-nf__icon" aria-hidden="true">
          <IconSearch size={40} />
        </div>
        <p className="kx-nf__code">404</p>
        <h1 id="kx-nf-title" className="kx-nf__title">
          {t('notFound.title')}
        </h1>
        <p className="kx-nf__desc">{t('notFound.desc')}</p>
        <div className="kx-nf__actions">
          <Button variant="primary" leadingIcon={<IconHome size={16} />} onClick={() => navigate(homePath)}>
            {t('notFound.home')}
          </Button>
          <Button variant="secondary" leadingIcon={<IconArrowLeft size={16} />} onClick={() => navigate(-1)}>
            {t('notFound.back')}
          </Button>
        </div>
      </div>
    </div>
  );
}
