'use client';

import { useRouter, useParams } from 'next/navigation';
import { useState, useEffect } from 'react';
import { BoardDetail } from '@/components/board/BoardManagement/BoardDetail';
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
} from '@/components/ui/alert-dialog';
import { ContentLoadingSpinner } from '@/components/ui/loading-spinner';
import type { Board } from '@/components/board/BoardManagement/types';

// TODO: 실제 API에서 데이터 가져오기
const mockBoard: Board = {
  id: '1',
  target: 'all',
  boardName: '공지사항',
  status: 'active',
  authorId: 'u1',
  authorName: '홍길동',
  createdAt: '2025-09-09T12:20:00Z',
  updatedAt: '2025-09-09T12:20:00Z',
};

export default function BoardDetailPage() {
  const router = useRouter();
  const params = useParams();
  const [board, setBoard] = useState<Board | null>(null);
  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);

  useEffect(() => {
    // TODO: API 연동
    // const id = params.id;
    setBoard(mockBoard);
  }, [params.id]);

  const handleEdit = () => {
    router.push(`/ko/board/board-management/${params.id}/edit`);
  };

  const handleDelete = () => {
    setDeleteDialogOpen(true);
  };

  const confirmDelete = () => {
    // TODO: API 연동
    console.log('Delete board:', params.id);
    router.push('/ko/board/board-management');
  };

  if (!board) {
    return <ContentLoadingSpinner text="게시판 정보를 불러오는 중..." />;
  }

  return (
    <>
      <BoardDetail
        board={board}
        onEdit={handleEdit}
        onDelete={handleDelete}
      />

      <AlertDialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>게시판 삭제</AlertDialogTitle>
            <AlertDialogDescription>
              &quot;{board.boardName}&quot; 게시판을 삭제하시겠습니까?
              <br />
              <span className="text-destructive">
                삭제된 게시판 정보는 복구할 수 없습니다.
              </span>
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel>취소</AlertDialogCancel>
            <AlertDialogAction
              onClick={confirmDelete}
              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
            >
              삭제
            </AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>
    </>
  );
}
