'use client';

import { useEffect, useState } from 'react';
import { useParams } from 'next/navigation';
import { CardDetail } from '@/components/hr/CardManagement/CardDetail';
import { getCard } from '@/components/hr/CardManagement/actions';
import type { Card } from '@/components/hr/CardManagement/types';

export default function CardDetailPage() {
  const params = useParams();
  const cardId = params.id as string;

  const [card, setCard] = useState<Card | null>(null);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    async function loadCard() {
      setIsLoading(true);
      try {
        const result = await getCard(cardId);
        if (result.success && result.data) {
          setCard(result.data);
        } else {
          setError(result.error || '카드를 찾을 수 없습니다.');
        }
      } catch {
        setError('카드 조회 중 오류가 발생했습니다.');
      } finally {
        setIsLoading(false);
      }
    }
    loadCard();
  }, [cardId]);

  if (error && !isLoading) {
    return (
      <div className="p-6">
        <div className="text-center py-8 text-muted-foreground">{error}</div>
      </div>
    );
  }

  return (
    <CardDetail
      card={card ?? undefined}
      mode="view"
      isLoading={isLoading}
    />
  );
}
