sam-react-prod/src/app/[locale]/(protected)/settings/popup-management/[id]/page.tsx

'use client';

import { useRouter, useParams } from 'next/navigation';
import { useState, useEffect } from 'react';
import { PopupDetail } from '@/components/settings/PopupManagement';
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
} from '@/components/ui/alert-dialog';
import { MOCK_POPUPS, type Popup } from '@/components/settings/PopupManagement/types';

export default function PopupDetailPage() {
  const router = useRouter();
  const params = useParams();
  const [popup, setPopup] = useState<Popup | null>(null);
  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);

  useEffect(() => {
    // TODO: API 연동
    const id = params.id as string;
    const found = MOCK_POPUPS.find((p) => p.id === id);
    setPopup(found || null);
  }, [params.id]);

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

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

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

  if (!popup) {
    return (
      <div className="flex items-center justify-center min-h-[400px]">
        <div className="text-center">
          <div className="inline-block h-8 w-8 animate-spin rounded-full border-4 border-solid border-primary border-r-transparent mb-4"></div>
          <p className="text-muted-foreground">로딩 중...</p>
        </div>
      </div>
    );
  }

  return (
    <>
      <PopupDetail
        popup={popup}
        onEdit={handleEdit}
        onDelete={handleDelete}
      />

      <AlertDialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>팝업 삭제</AlertDialogTitle>
            <AlertDialogDescription>
              &quot;{popup.title}&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>
    </>
  );
}