'use client';

import { useParams } from 'next/navigation';
import { useState, useEffect, useCallback } from 'react';
import { EventDetail } from '@/components/customer-center/EventManagement';
import { transformPostToEvent, type Event } from '@/components/customer-center/EventManagement/types';
import { getPost } from '@/components/customer-center/shared/actions';
import { ServerErrorPage } from '@/components/common/ServerErrorPage';
import { GenericPageSkeleton } from '@/components/ui/skeleton';

export default function EventDetailPage() {
  const params = useParams();
  const eventId = params.id as string;

  const [event, setEvent] = useState<Event | null>(null);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  const fetchEvent = useCallback(async () => {
    setIsLoading(true);
    setError(null);

    const result = await getPost('events', eventId);

    if (result.success && result.data) {
      setEvent(transformPostToEvent(result.data));
    } else {
      setError(result.error || '이벤트를 찾을 수 없습니다.');
    }

    setIsLoading(false);
  }, [eventId]);

  useEffect(() => {
    fetchEvent();
  }, [fetchEvent]);

  if (isLoading) return <GenericPageSkeleton />;

  if (error || !event) {
    return (
      <ServerErrorPage
        title="이벤트를 불러올 수 없습니다"
        message={error || '이벤트를 찾을 수 없습니다.'}
        onRetry={fetchEvent}
        showBackButton={true}
        showHomeButton={true}
      />
    );
  }

  return <EventDetail event={event} />;
}
