import React from 'react';
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';

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) => void;
  error: string | null;
  /** 썰박스 생성 요청 접수 시. 폴링 소유는 GenerationFlow */
  onSsulJobStarted: (taskId: number, scenario: Scen) => void;
  /** 크레딧 부족 시 충전 화면으로 */
  onGoToPayment: () => void;
}

/**
 * 대시보드 진입 화면.
 *
 * 탭바는 로고와 하위 폼 **사이에 형제로** 얹고 하위 폼만 교체한다.
 */
const UrlInputContent: React.FC<UrlInputContentProps> = ({
  pipeline,
  onPipelineChange,
  onAnalyze,
  onAutocomplete,
  onManualInput,
  error,
  onSsulJobStarted,
  onGoToPayment,
}) => {
  return (
    <div className="url-input-container">
      <div className="url-input-content">
        <div className="url-input-logo">
          <img src="/assets/images/ADO2_with Slogan_white.svg" alt="ADO2" />
        </div>

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

        {pipeline === 'ado2' ? (
          <SearchInputForm
            onAnalyze={onAnalyze}
            onAutocomplete={onAutocomplete}
            onManualInput={onManualInput}
            error={error}
          />
        ) : (
          <SsulCreateForm onSubmitted={onSsulJobStarted} onNeedCredit={onGoToPayment} />
        )}
      </div>
    </div>
  );
};

export default UrlInputContent;