'use client';

import { useRouter, useParams } from 'next/navigation';
import { useState, useEffect } from 'react';
import { CardForm } from '@/components/hr/CardManagement/CardForm';
import { ContentLoadingSpinner } from '@/components/ui/loading-spinner';
import type { Card, CardFormData } 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 CardEditPage() {
  const router = useRouter();
  const params = useParams();
  const [card, setCard] = useState<Card | null>(null);

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

  const handleSubmit = (data: CardFormData) => {
    // TODO: API 연동
    console.log('Update card:', params.id, data);
    router.push(`/ko/hr/card-management/${params.id}`);
  };

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

  return (
    <CardForm
      mode="edit"
      card={card}
      onSubmit={handleSubmit}
    />
  );
}
