'use client';

import { useState } from 'react';
import ContentPreviewStep from '../steps/ContentPreviewStep';
import { useRouter } from 'next/navigation';

/**
 * Content Service 테스트 전용 페이지
 * ContentPreviewStep을 독립적으로 테스트할 수 있습니다.
 */
export default function ContentTestPage() {
  const router = useRouter();
  const [result, setResult] = useState<any>(null);

  // 테스트용 이벤트 데이터
  const testEventId = 'test-event-' + Date.now();
  const testEventTitle = 'Content API 테스트 이벤트';
  const testEventDescription = '콘텐츠 생성 기능을 테스트합니다';

  const handleNext = (imageStyle: string, images: any[]) => {
    console.log('ContentPreview 완료:', { imageStyle, images });
    setResult({ imageStyle, images });
    alert(`콘텐츠 생성 완료!\n스타일: ${imageStyle}\n이미지 수: ${images.length}`);
  };

  const handleSkip = () => {
    console.log('ContentPreview 건너뛰기');
    alert('콘텐츠 생성을 건너뛰었습니다.');
  };

  const handleBack = () => {
    router.push('/events/create');
  };

  return (
    <div>
      <ContentPreviewStep
        eventId={testEventId}
        eventTitle={testEventTitle}
        eventDescription={testEventDescription}
        onNext={handleNext}
        onSkip={handleSkip}
        onBack={handleBack}
      />

      {/* 결과 표시 (디버깅용) */}
      {result && (
        <div style={{
          position: 'fixed',
          bottom: 20,
          right: 20,
          background: 'white',
          border: '2px solid #4CAF50',
          borderRadius: 8,
          padding: 16,
          maxWidth: 400,
          boxShadow: '0 4px 6px rgba(0,0,0,0.1)',
          zIndex: 9999
        }}>
          <h4 style={{ margin: '0 0 10px 0', color: '#4CAF50' }}>✅ 생성 결과</h4>
          <p style={{ margin: '5px 0' }}>
            <strong>스타일:</strong> {result.imageStyle}
          </p>
          <p style={{ margin: '5px 0' }}>
            <strong>이미지 수:</strong> {result.images.length}개
          </p>
          <pre style={{
            background: '#f5f5f5',
            padding: 10,
            borderRadius: 4,
            fontSize: 12,
            overflow: 'auto',
            maxHeight: 200
          }}>
            {JSON.stringify(result, null, 2)}
          </pre>
        </div>
      )}
    </div>
  );
}
