import React from 'react';
import { useTranslation } from 'react-i18next';
import { AutocompleteRequest } from '../../utils/api';
import SearchInputForm, { SearchType } from '../../components/SearchInputForm';
import PipelineTabs, { Pipeline } from '../../components/PipelineTabs';
import SsulCreateForm from '../Ssulbox/SsulCreateForm';
import { Scen } from '../Ssulbox/ssulData';
import PosterCreateForm from '../Poster/PosterCreateForm';
import StylingContent from '../Poster/StylingContent';

interface UrlInputContentProps {
  /** 현재 선택된 파이프라인. 소유자는 GenerationFlow (분기·리셋 때문) */
  pipeline: Pipeline;
  onPipelineChange: (pipeline: Pipeline) => void;
  onAnalyze: (value: string, type?: SearchType) => void;
  onAutocomplete?: (data: AutocompleteRequest) => void;
  onManualInput?: (businessName: string, address: string, category: string, officialSiteUrl?: string) => void;
  error: string | null;
  /** 썰박스 생성 요청 접수 시. 폴링 소유는 GenerationFlow */
  onSsulJobStarted: (taskId: number, scenario: Scen) => void;
  /** 포스터 영상(F1) 생성 요청 접수 시. 폴링 소유는 GenerationFlow */
  onPosterJobStarted: (jobId: string) => void;
  /** 크레딧 부족 시 충전 화면으로 */
  onGoToPayment: () => void;
}

/**
 * 대시보드 진입 화면.
 *
 * 탭바는 로고와 하위 폼 **사이에 형제로** 얹고 하위 폼만 교체한다.
 */
const UrlInputContent: React.FC<UrlInputContentProps> = ({
  pipeline,
  onPipelineChange,
  onAnalyze,
  onAutocomplete,
  onManualInput,
  error,
  onSsulJobStarted,
  onPosterJobStarted,
  onGoToPayment,
}) => {
  const { t } = useTranslation();

  // 스타일링은 한 화면짜리 도구라 진입 폼보다 넓은 판이 필요하다 (generation-flow.css 참조)
  const wide = pipeline === 'styling';

  const renderForm = () => {
    switch (pipeline) {
      case 'ado2':
        return (
          <SearchInputForm
            onAnalyze={onAnalyze}
            onAutocomplete={onAutocomplete}
            onManualInput={onManualInput}
            error={error}
          />
        );
      case 'ssul':
        return <SsulCreateForm onSubmitted={onSsulJobStarted} onNeedCredit={onGoToPayment} />;
      case 'poster':
        return <PosterCreateForm onSubmitted={onPosterJobStarted} />;
      case 'styling':
        // 스타일링은 위저드가 아니라 도구다 — 진입 화면 안에서 처음부터 끝까지 끝난다
        return <StylingContent />;
      default:
        return null;
    }
  };

  return (
    <div className="url-input-container">
      <div className={`url-input-content${wide ? ' url-input-content--wide' : ''}`}>
        <div className="url-input-logo">
          <img src="/assets/images/ADO2_with Slogan_white.svg" alt="ADO2" />
        </div>

        <PipelineTabs value={pipeline} onChange={onPipelineChange} />

        {/* 고른 기능이 무엇을 해주는지 한 줄. 탭 라벨(2~6자)만으로는 네 기능의 차이가
            전달되지 않아 처음 온 사람이 아무거나 눌러본다. STEP 1 위에 둔다. */}
        <p className="pipeline-desc">{t(`pipelineTabs.desc.${pipeline}`)}</p>

        {renderForm()}
      </div>
    </div>
  );
};

export default UrlInputContent;