
import React, { useCallback, useEffect, useRef, useState } from 'react';
import { useTranslation } from 'react-i18next';
import Sidebar from '../../components/Sidebar';
import AssetManagementContent from './AssetManagementContent';
import SoundStudioContent from './SoundStudioContent';
import CompletionContent from './CompletionContent';
import DashboardContent from './DashboardContent';
import BusinessSettingsContent from './BusinessSettingsContent';
import UrlInputContent from './UrlInputContent';
import ADO2ContentsPage from './ADO2ContentsPage';
import MyContentsPage from './MyContentsPage';
import MyInfoContent from './MyInfoContent';
import ContentCalendarContent from './ContentCalendarContent';
import LoadingSection from '../Analysis/LoadingSection';
import AnalysisResultSection from '../Analysis/AnalysisResultSection';
import { ImageItem, CrawlingResponse, UserMeResponse } from '../../types/api';
import { crawlUrl, autocomplete, marketingAnalysis, AutocompleteRequest, getUserMe, getUserCredits, clearTokens } from '../../utils/api';
import { useTutorial } from '../../components/Tutorial/useTutorial';
import { TUTORIAL_KEYS } from '../../components/Tutorial/tutorialSteps';
import TutorialOverlay, { TutorialRestartPopup } from '../../components/Tutorial/TutorialOverlay';

const WIZARD_STEP_KEY = 'castad_wizard_step';
const ACTIVE_ITEM_KEY = 'castad_active_item';
const SONG_TASK_ID_KEY = 'castad_song_task_id';
const IMAGE_TASK_ID_KEY = 'castad_image_task_id';
const ANALYSIS_DATA_KEY = 'castad_analysis_data';
import { saveSearchHistory } from '../../components/SearchHistory/useSearchHistory';

// 다른 컴포넌트에서 사용하는 storage key들 (초기화용)
const SONG_GENERATION_KEY = 'castad_song_generation';
const VIDEO_GENERATION_KEY = 'castad_video_generation';
const VIDEO_COMPLETE_KEY = 'castad_video_complete'; // 완료된 영상 정보

// 모든 프로젝트 관련 localStorage 초기화
const clearAllProjectStorage = () => {
  localStorage.removeItem(WIZARD_STEP_KEY);
  localStorage.removeItem(SONG_TASK_ID_KEY);
  localStorage.removeItem(IMAGE_TASK_ID_KEY);
  localStorage.removeItem(SONG_GENERATION_KEY);
  localStorage.removeItem(VIDEO_GENERATION_KEY);
  localStorage.removeItem(VIDEO_COMPLETE_KEY);
};

interface BusinessInfo {
  customer_name: string;
  region: string;
  detail_region_info: string;
}

interface GenerationFlowProps {
  onHome: () => void;
  initialActiveItem?: string;
  initialImageList?: string[];
  businessInfo?: BusinessInfo;
  initialAnalysisData?: CrawlingResponse | null;
}

// 위저드 단계:
// -2: URL 입력
// -1: 로딩 (분석 중)
// 0: 브랜드 분석 결과
// 1: 에셋 관리 (Asset Management)
// 2: 사운드 스튜디오 (Sound Studio)
// 3: 완료 (Completion)

const GenerationFlow: React.FC<GenerationFlowProps> = ({
  onHome,
  initialActiveItem = '대시보드',
  initialImageList = [],
  businessInfo,
  initialAnalysisData
}) => {
  const { t, i18n } = useTranslation();
  // localStorage에서 저장된 상태 복원
  const savedActiveItem = localStorage.getItem(ACTIVE_ITEM_KEY);
  const savedWizardStep = localStorage.getItem(WIZARD_STEP_KEY);
  const savedSongTaskId = localStorage.getItem(SONG_TASK_ID_KEY);
  const savedImageTaskId = localStorage.getItem(IMAGE_TASK_ID_KEY);
  const savedAnalysisData = localStorage.getItem(ANALYSIS_DATA_KEY);

  // 분석 데이터 파싱
  const parseAnalysisData = (): CrawlingResponse | null => {
    if (initialAnalysisData) return initialAnalysisData;
    if (!savedAnalysisData) return null;
    try {
      return JSON.parse(savedAnalysisData) as CrawlingResponse;
    } catch {
      return null;
    }
  };

  const [activeItem, setActiveItem] = useState(savedActiveItem || initialActiveItem);

  // 초기 위저드 단계 결정
  const getInitialWizardStep = (): number => {
    if (savedWizardStep !== null) {
      const step = parseInt(savedWizardStep, 10);
      // 분석 데이터가 있는데 URL 입력(-2) 또는 로딩(-1) 단계로 저장된 경우:
      // 로그인 후 재진입이므로 에셋 관리(1)부터 시작
      const hasAnalysisData = initialAnalysisData || savedAnalysisData;
      if (hasAnalysisData && step < 1) {
        return 1;
      }
      return step;
    }
    // 저장된 단계 없음: 분석 데이터가 있으면 에셋 관리(1), 없으면 URL 입력(-2)
    const hasAnalysisData = initialAnalysisData || savedAnalysisData;
    return hasAnalysisData ? 1 : -2;
  };

  const [wizardStep, setWizardStep] = useState(getInitialWizardStep());
  const [songTaskId, setSongTaskId] = useState<string | null>(savedSongTaskId);
  const [imageTaskId, setImageTaskId] = useState<string | null>(savedImageTaskId);
  const [videoGenerationStatus, setVideoGenerationStatus] = useState<'idle' | 'generating' | 'complete' | 'error'>('idle');
  const [videoGenerationProgress, setVideoGenerationProgress] = useState(0);
  const [analysisData, setAnalysisData] = useState<CrawlingResponse | null>(parseAnalysisData());
  const [analysisError, setAnalysisError] = useState<string | null>(null);
  const [isAnalysisComplete, setIsAnalysisComplete] = useState(false);
  const [userInfo, setUserInfo] = useState<UserMeResponse | null>(null);
  const [credits, setCredits] = useState<number | null>(null);
  const [myInfoInitialTab, setMyInfoInitialTab] = useState<'basic' | 'payment' | 'business' | undefined>(undefined);
  const tutorial = useTutorial();

  const refreshCredits = useCallback(async () => {
    try {
      const { credits } = await getUserCredits();
      setCredits(credits);
    } catch (e) {
      console.error('Failed to refresh credits:', e);
    }
  }, []);

  // 사운드 스튜디오, 영상 완성 진입 시 크레딧 갱신
  useEffect(() => {
    if (wizardStep === 2 || wizardStep === 3) {
      refreshCredits();
    }
  }, [wizardStep]);

  // 로그인 직후 사용자 정보 + 크레딧 조회
  useEffect(() => {
    const fetchUserInfo = async () => {
      try {
        const [data, creditsData] = await Promise.all([getUserMe(), getUserCredits()]);
        setUserInfo(data);
        setCredits(creditsData.credits);
      } catch (error) {
        console.error('Failed to fetch user info:', error);
      }
    };
    fetchUserInfo();
  }, []);

  // 로그아웃 핸들러
  const handleLogout = () => {
    clearTokens();
    localStorage.removeItem('castad_view_mode');
    localStorage.removeItem('castad_analysis_data');
    localStorage.removeItem(WIZARD_STEP_KEY);
    localStorage.removeItem(ACTIVE_ITEM_KEY);
    window.location.href = '/';
  };

  // 현재 비즈니스 정보 (분석 데이터에서 가져오거나 prop에서 가져옴)
  const currentBusinessInfo = analysisData?.processed_info || businessInfo;

  // URL 이미지를 ImageItem 형태로 변환하여 초기화
  const getInitialImageList = (): ImageItem[] => {
    if (analysisData?.image_list && analysisData.image_list.length > 0) {
      return analysisData.image_list.map(url => ({ type: 'url', url }));
    }
    return initialImageList.map(url => ({ type: 'url', url }));
  };

  const [imageList, setImageList] = useState<ImageItem[]>(getInitialImageList());
  const prevAnalysisMIdRef = useRef<number | null | undefined>(analysisData?.m_id);

  // analysisData 변경 시 m_id가 바뀐 경우(새로운 분석)에만 imageList 업데이트
  // m_id가 동일하면 언어 변경 등 기타 업데이트이므로 사용자가 수정한 이미지 목록 유지
  useEffect(() => {
    console.log('[GenerationFlow] analysisData updated, m_id:', analysisData?.m_id);
    if (analysisData?.image_list && analysisData.image_list.length > 0) {
      if (prevAnalysisMIdRef.current !== analysisData.m_id) {
        setImageList(analysisData.image_list.map(url => ({ type: 'url', url })));
      }
    }
    prevAnalysisMIdRef.current = analysisData?.m_id;
  }, [analysisData]);

  const handleRemoveImage = (index: number) => {
    setImageList(prev => {
      const item = prev[index];
      // 파일 이미지인 경우 메모리 해제
      if (item.type === 'file') {
        URL.revokeObjectURL(item.preview);
      }
      return prev.filter((_, i) => i !== index);
    });
  };

  const handleAddImages = (files: File[]) => {
    const newImages: ImageItem[] = files.map(file => ({
      type: 'file',
      file,
      preview: URL.createObjectURL(file),
    }));
    // 새로 업로드된 이미지를 배열 앞에 추가 (최신 이미지가 상단에 표시)
    setImageList(prev => [...newImages, ...prev]);
  };

  // 홈 버튼(로고) 클릭 시 모든 상태 초기화 후 홈으로 이동
  const handleHome = () => {
    clearAllProjectStorage();
    localStorage.removeItem(ANALYSIS_DATA_KEY);
    setWizardStep(-2);
    setSongTaskId(null);
    setImageTaskId(null);
    setAnalysisData(null);
    setImageList([]);
    onHome();
  };

  // 위저드 단계 이동
  const goToWizardStep = (step: number) => {
    setWizardStep(step);
    localStorage.setItem(WIZARD_STEP_KEY, step.toString());
  };

  // 업체명 자동완성으로 분석 시작
  const handleAutocomplete = async (request: AutocompleteRequest) => {
    goToWizardStep(-1); // 로딩 상태로
    setIsAnalysisComplete(false);
    setAnalysisError(null);

    try {
      const data = await autocomplete(request);
      console.log('[Autocomplete] Response m_id:', data.m_id);

      // 기본값 보장
      // if (data.marketing_analysis) {
      //   data.marketing_analysis.tags = data.marketing_analysis.tags || [];
      //   data.marketing_analysis.facilities = data.marketing_analysis.facilities || [];
      //   data.marketing_analysis.report = data.marketing_analysis.report || '';
      // }
      if (data.processed_info) {
        data.processed_info.customer_name = data.processed_info.customer_name || '알 수 없음';
        data.processed_info.region = data.processed_info.region || '';
        data.processed_info.detail_region_info = data.processed_info.detail_region_info || '';
      }
      data.image_list = data.image_list || [];

      setAnalysisData(data);
      localStorage.setItem(ANALYSIS_DATA_KEY, JSON.stringify(data));
      saveSearchHistory({ type: 'name', value: request.title.replace(/<[^>]*>/g, ''), address: request.address, roadAddress: request.roadAddress });
      setIsAnalysisComplete(true);
    } catch (err) {
      console.error('Autocomplete error:', err);
      setAnalysisError(t('app.autocompleteError'));
      goToWizardStep(-2); // URL 입력으로 돌아가기
    }
  };

  // 업체명·주소 수동 입력으로 마케팅 분석 API 호출
  const handleManualInput = async (businessName: string, address: string) => {
    goToWizardStep(-1);
    setIsAnalysisComplete(false);
    setAnalysisError(null);

    try {
      const data = await marketingAnalysis(businessName, address);

      if (data.processed_info) {
        data.processed_info.customer_name = data.processed_info.customer_name || businessName;
        data.processed_info.region = data.processed_info.region || '';
        data.processed_info.detail_region_info = data.processed_info.detail_region_info || '';
      }
      data.image_list = data.image_list || [];

      setAnalysisData(data);
      localStorage.setItem(ANALYSIS_DATA_KEY, JSON.stringify(data));
      saveSearchHistory({ type: 'name', value: businessName, address, roadAddress: address });
      setIsAnalysisComplete(true);
    } catch (err) {
      console.error('Marketing analysis error:', err);
      setAnalysisError(t('app.autocompleteError'));
      goToWizardStep(-2);
    }
  };

  // 테스트용 랜덤 m_id 생성 (99 ~ 300)
  const generateRandomMId = (): number => {
    return Math.floor(Math.random() * (300 - 99 + 1)) + 99;
  };

  // 테스트 데이터로 브랜드 분석 페이지 이동
  const handleTestData = (data: CrawlingResponse) => {
    const tagged = { ...data, m_id: generateRandomMId(), _isTestData: true };
    setAnalysisData(tagged);
    localStorage.setItem(ANALYSIS_DATA_KEY, JSON.stringify(tagged));
    goToWizardStep(0); // 브랜드 분석 결과로
  };

  // 언어 변경 시 테스트 데이터 다시 로드
  useEffect(() => {
    const saved = localStorage.getItem(ANALYSIS_DATA_KEY);
    if (!saved) return;
    try {
      const parsed = JSON.parse(saved);
      if (!parsed._isTestData) return;
      const jsonFile = i18n.language === 'en' ? '/example_analysis_en.json' : '/example_analysis.json';
      fetch(jsonFile)
        .then(res => res.json())
        .then((data: CrawlingResponse) => {
          // 언어 변경 시에는 기존 m_id 유지
          const tagged = { ...data, m_id: parsed.m_id || generateRandomMId(), _isTestData: true };
          setAnalysisData(tagged);
          localStorage.setItem(ANALYSIS_DATA_KEY, JSON.stringify(tagged));
        })
        .catch(err => console.error('Failed to reload test data:', err));
    } catch { /* ignore */ }
  }, [i18n.language]);

  // URL 분석 시작
  const handleStartAnalysis = async (url: string) => {
    if (!url.trim()) return;

    goToWizardStep(-1); // 로딩 상태로
    setIsAnalysisComplete(false);
    setAnalysisError(null);

    try {
      const data = await crawlUrl(url);
      console.log('[Crawl] Response m_id:', data.m_id);

      // 기본값 보장
      // if (data.marketing_analysis) {
      //   data.marketing_analysis.tags = data.marketing_analysis.tags || [];
      //   data.marketing_analysis.facilities = data.marketing_analysis.facilities || [];
      //   data.marketing_analysis.report = data.marketing_analysis.report || '';
      // }
      if (data.processed_info) {
        data.processed_info.customer_name = data.processed_info.customer_name || '알 수 없음';
        data.processed_info.region = data.processed_info.region || '';
        data.processed_info.detail_region_info = data.processed_info.detail_region_info || '';
      }
      data.image_list = data.image_list || [];

      setAnalysisData(data);
      localStorage.setItem(ANALYSIS_DATA_KEY, JSON.stringify(data));
      saveSearchHistory({ type: 'url', value: url });
      setIsAnalysisComplete(true);
    } catch (err) {
      console.error('Crawling failed:', err);
      setAnalysisError(t('app.analysisError'));
      goToWizardStep(-2); // URL 입력으로 돌아가기
    }
  };

  // 브랜드 분석에서 콘텐츠 생성 클릭
  const handleAnalysisGenerate = () => {
    goToWizardStep(1); // 에셋 관리로
  };

  // 브랜드 분석에서 뒤로가기
  const handleAnalysisBack = () => {
    goToWizardStep(-2); // URL 입력으로
  };

  // activeItem 변경 시 localStorage에 저장
  useEffect(() => {
    localStorage.setItem(ACTIVE_ITEM_KEY, activeItem);
  }, [activeItem]);

  // wizardStep 변경 시 튜토리얼 트리거 (사이드바 메뉴 화면에서는 제외)
  const SIDEBAR_ITEMS = ['대시보드', 'ADO2 콘텐츠', '내 정보', '콘텐츠 캘린더'];
  useEffect(() => {
    if (tutorial.isActive) tutorial.skipTutorial();
    if (SIDEBAR_ITEMS.includes(activeItem)) return;
    const timer = setTimeout(() => {
      if (wizardStep === 1 && !tutorial.hasSeen(TUTORIAL_KEYS.ASSET)) {
        tutorial.startTutorial(TUTORIAL_KEYS.ASSET);
      } else if (wizardStep === 2 && !tutorial.hasSeen(TUTORIAL_KEYS.SOUND)) {
        tutorial.startTutorial(TUTORIAL_KEYS.SOUND);
      }
    }, 600);
    return () => clearTimeout(timer);
  }, [wizardStep, activeItem]);

  // activeItem 변경 시 튜토리얼 트리거
  useEffect(() => {
    if (tutorial.isActive) tutorial.skipTutorial();
    if (activeItem === '내 정보' && !tutorial.hasSeen(TUTORIAL_KEYS.MY_INFO)) {
      tutorial.startTutorial(TUTORIAL_KEYS.MY_INFO);
    } else if (activeItem === '내 콘텐츠' && !tutorial.hasSeen(TUTORIAL_KEYS.ADO2_CONTENTS)) {
      tutorial.startTutorial(TUTORIAL_KEYS.ADO2_CONTENTS);
    } else if (activeItem === '대시보드' && !tutorial.hasSeen(TUTORIAL_KEYS.DASHBOARD)) {
      tutorial.startTutorial(TUTORIAL_KEYS.DASHBOARD);
    } else if (activeItem === '콘텐츠 캘린더' && !tutorial.hasSeen(TUTORIAL_KEYS.CONTENT_CALENDAR)) {
      tutorial.startTutorial(TUTORIAL_KEYS.CONTENT_CALENDAR);
    }
  }, [activeItem]);

  // 결제 탭으로 바로 이동하는 핸들러 (크레딧 충전하기 버튼용)
  const handleGoToPayment = () => {
    setMyInfoInitialTab('payment');
    setActiveItem('내 정보');
  };

  // 네비게이션 핸들러 - "새 프로젝트 만들기" 클릭 시 기존 프로젝트 데이터 초기화
  const handleNavigate = (item: string) => {
    setMyInfoInitialTab(undefined);
    if (item === '새 프로젝트 만들기') {
      // 기존 프로젝트 데이터 초기화
      clearAllProjectStorage();
      localStorage.removeItem(ANALYSIS_DATA_KEY);
      // URL 입력 단계로 명시적 저장 (다음 진입 시 올바른 단계 복원)
      localStorage.setItem(WIZARD_STEP_KEY, '-2');
      setWizardStep(-2);
      setSongTaskId(null);
      setImageTaskId(null);
      setAnalysisData(null);
      setImageList([]);
      setVideoGenerationStatus('idle');
      setVideoGenerationProgress(0);
      setAnalysisError(null);
    }
    setActiveItem(item);
    refreshCredits();
  };

  // 새 프로젝트 만들기 - 단계별 컨텐츠 렌더링
  const renderWizardContent = () => {
    switch (wizardStep) {
      case -2:
        // URL 입력 단계
        return (
          <UrlInputContent
            onAnalyze={handleStartAnalysis}
            onAutocomplete={handleAutocomplete}
            onManualInput={handleManualInput}
            onTestData={handleTestData}
            error={analysisError}
          />
        );
      case -1:
        // 로딩 단계
        return (
          <LoadingSection
            isComplete={isAnalysisComplete}
            onComplete={() => goToWizardStep(0)}
          />
        );
      case 0:
        // 브랜드 분석 결과 단계
        if (!analysisData) {
          goToWizardStep(-2);
          return null;
        }
        return (
          <AnalysisResultSection
            onBack={handleAnalysisBack}
            onGenerate={handleAnalysisGenerate}
            data={analysisData}
          />
        );
      case 1:
        return (
          <AssetManagementContent
            onBack={() => goToWizardStep(0)}
            onNext={(taskId: string) => {
              // Clear video generation state to start fresh
              localStorage.removeItem(VIDEO_GENERATION_KEY);
              localStorage.removeItem(VIDEO_COMPLETE_KEY);
              setVideoGenerationStatus('idle');
              setVideoGenerationProgress(0);

              setImageTaskId(taskId);
              localStorage.setItem(IMAGE_TASK_ID_KEY, taskId);
              goToWizardStep(2);
            }}
            imageList={imageList}
            onRemoveImage={handleRemoveImage}
            onAddImages={handleAddImages}
          />
        );
      case 2:
        return (
          <SoundStudioContent
            onBack={() => goToWizardStep(1)}
            onNext={(taskId: string) => {
              setSongTaskId(taskId);
              localStorage.setItem(SONG_TASK_ID_KEY, taskId);
              goToWizardStep(3);
            }}
            businessInfo={currentBusinessInfo}
            imageTaskId={imageTaskId}
            mId={analysisData?.m_id ?? 0}
            videoGenerationStatus={videoGenerationStatus}
            videoGenerationProgress={videoGenerationProgress}
            onGoToPayment={handleGoToPayment}
            onStatusChange={(status: string) => {
              if (status === 'generating_song' && !tutorial.hasSeen(TUTORIAL_KEYS.SOUND_LYRICS)) {
                setTimeout(() => tutorial.startTutorial(TUTORIAL_KEYS.SOUND_LYRICS), 400);
              } else if (status === 'complete' && !tutorial.hasSeen(TUTORIAL_KEYS.SOUND_AUDIO)) {
                setTimeout(() => tutorial.startTutorial(TUTORIAL_KEYS.SOUND_AUDIO), 400);
              }
            }}
          />
        );
      case 3:
        return (
          <CompletionContent
            onBack={() => {
              // 뒤로가기 시 비디오 생성 상태 초기화
              // 새 노래 생성 후 다시 영상 생성할 수 있도록
              localStorage.removeItem(VIDEO_GENERATION_KEY);
              localStorage.removeItem(VIDEO_COMPLETE_KEY);
              setVideoGenerationStatus('idle');
              setVideoGenerationProgress(0);
              goToWizardStep(2);
            }}
            songTaskId={songTaskId}
            onVideoStatusChange={setVideoGenerationStatus}
            onVideoProgressChange={setVideoGenerationProgress}
            onGoToCalendar={() => handleNavigate('콘텐츠 캘린더')}
          />
        );
      default:
        return null;
    }
  };

  const renderContent = () => {
    switch (activeItem) {
      case '대시보드':
        return <DashboardContent onNavigate={handleNavigate} />;
      case '비즈니스 설정':
        return <BusinessSettingsContent />;
      case 'ADO2 콘텐츠':
        return <ADO2ContentsPage />;
      case '내 콘텐츠':
        return (
          <MyContentsPage
            onBack={() => setActiveItem('새 프로젝트 만들기')}
            onNavigate={handleNavigate}
          />
        );
      case '콘텐츠 캘린더':
        return <ContentCalendarContent onNavigate={handleNavigate} />;
      case '내 정보':
        return <MyInfoContent initialTab={myInfoInitialTab} />;
      case '새 프로젝트 만들기':
        // 브랜드 분석(0)과 로딩(-1)은 전체 화면으로 표시
        if (wizardStep === 0 || wizardStep === -1) {
          return renderWizardContent();
        }
        return (
          <div className="wizard-page-container">
            {renderWizardContent()}
          </div>
        );
      default:
        return (
          <div className="flex-1 flex items-center justify-center text-gray-500 font-light">
            {t('app.pageComingSoon', { page: activeItem })}
          </div>
        );
    }
  };

  // 로딩 화면에서만 Sidebar 숨김
  const showSidebar = wizardStep !== -1;

  // 브랜드 분석(0)일 때는 전체 페이지 스크롤
  const isBrandAnalysis = activeItem === '새 프로젝트 만들기' && wizardStep === 0;
  // 스크롤이 필요한 페이지: 대시보드, 비즈니스 설정, 브랜드 분석(0), ADO2 콘텐츠, 내 정보
  const needsScroll = activeItem === '대시보드' || activeItem === '비즈니스 설정' || activeItem === 'ADO2 콘텐츠' || activeItem === '내 콘텐츠' || activeItem === '내 정보' || activeItem === '콘텐츠 캘린더' || isBrandAnalysis;

  // 현재 화면에 맞는 튜토리얼 키 반환 (없으면 null)
  const getCurrentTutorialKey = (): string | null => {
    if (activeItem === '내 정보') return TUTORIAL_KEYS.MY_INFO;
    if (activeItem === '내 콘텐츠') return TUTORIAL_KEYS.ADO2_CONTENTS;
    if (activeItem === '대시보드') return TUTORIAL_KEYS.DASHBOARD;
    if (activeItem === '콘텐츠 캘린더') return TUTORIAL_KEYS.CONTENT_CALENDAR;
    if (activeItem === '새 프로젝트 만들기') {
      if (wizardStep === 1) return TUTORIAL_KEYS.ASSET;
      if (wizardStep === 2) return TUTORIAL_KEYS.SOUND;
    }
    return null;
  };

  const tutorialUI = (
    <>
      {getCurrentTutorialKey() && (
        <button
          className={`tutorial-toggle-fab ${tutorial.isEnabled ? 'active' : ''}`}
          onClick={() => tutorial.toggleTutorial(getCurrentTutorialKey())}
          title={tutorial.isEnabled ? t('sidebar.tutorialOff') : t('sidebar.tutorialOn')}
        >
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
            <circle cx="12" cy="12" r="10"/>
            <path d="M12 8v4l3 3"/>
          </svg>
          <span>{t('sidebar.tutorial')}</span>
          <span className={`tutorial-toggle-badge ${tutorial.isEnabled ? 'on' : 'off'}`}>
            {tutorial.isEnabled ? 'ON' : 'OFF'}
          </span>
        </button>
      )}
      {tutorial.isActive && (
        <TutorialOverlay
          hints={tutorial.hints}
          currentIndex={tutorial.currentHintIndex}
          onNext={tutorial.nextHint}
          onPrev={tutorial.prevHint}
          onSkip={tutorial.skipTutorial}
          groupProgress={tutorial.groupProgress}
        />
      )}
      {tutorial.isRestartPopupVisible && (
        <TutorialRestartPopup
          onConfirm={tutorial.confirmRestart}
          onCancel={tutorial.cancelRestart}
        />
      )}
    </>
  );

  // 브랜드 분석일 때는 전체 화면 스크롤
  if (isBrandAnalysis) {
    return (
      <div className="analysis-page-wrapper">
        {showSidebar && (
          <Sidebar activeItem={activeItem} onNavigate={handleNavigate} onHome={handleHome} userInfo={userInfo} onLogout={handleLogout} credits={credits} tutorialAvailable={!!getCurrentTutorialKey()} tutorialEnabled={tutorial.isEnabled} onToggleTutorial={() => tutorial.toggleTutorial(getCurrentTutorialKey())} />
        )}
        <main className="analysis-page-main">
          {renderContent()}
        </main>
        {tutorialUI}
      </div>
    );
  }

  return (
    <div className={`flex w-full bg-[#002224] text-white ${needsScroll ? 'min-h-[100dvh]' : 'h-[100dvh] overflow-hidden'}`}>
      {showSidebar && (
        <Sidebar activeItem={activeItem} onNavigate={handleNavigate} onHome={handleHome} userInfo={userInfo} onLogout={handleLogout} credits={credits} tutorialAvailable={!!getCurrentTutorialKey()} tutorialEnabled={tutorial.isEnabled} onToggleTutorial={() => tutorial.toggleTutorial(getCurrentTutorialKey())} />
      )}
      {tutorialUI}
      <div className={`flex-1 relative pl-0 md:pl-0 ${needsScroll ? 'overflow-auto' : 'h-full overflow-hidden'}`}>
        {renderContent()}
      </div>
    </div>
  );
};

export default GenerationFlow;
