'use client';

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

// TODO: 실제 API에서 데이터 가져오기
const mockCard: Card = {
  id: '1',
  cardCompany: 'shinhan',
  cardNumber: '1234-1234-1234-1234',
  cardName: '법인카드1',
  expiryDate: '0327',
  pinPrefix: '12',
  status: 'active',
  user: {
    id: 'u1',
    departmentId: 'd1',
    departmentName: '부서명',
    employeeId: 'e1',
    employeeName: '홍길동',
    positionId: 'p1',
    positionName: '팀장',
  },
  createdAt: '2024-01-01T00:00:00Z',
  updatedAt: '2024-01-01T00:00:00Z',
};

export default function CardDetailPage() {
  const router = useRouter();
  const params = useParams();
  const [card, setCard] = useState<Card | null>(null);
  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);

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

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

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

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

  if (!card) {
    return <ContentLoadingSpinner text="카드 정보를 불러오는 중..." />;
  }

  return (
    <>
      <CardDetail
        card={card}
        onEdit={handleEdit}
        onDelete={handleDelete}
      />

      <AlertDialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>카드 삭제</AlertDialogTitle>
            <AlertDialogDescription>
              &quot;{card.cardName}&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>
    </>
  );
}
