import React from "react"
import type { CoverConfig } from "../../editing-planner/types"
import { useStep6Cover } from "../hooks/useStep6Cover"
import { CoverModeSelector } from "./cover-settings/CoverModeSelector"
import { FrameCoverPicker } from "./cover-settings/FrameCoverPicker"
import { UploadCoverPicker } from "./cover-settings/UploadCoverPicker"

interface Step6CoverSettingsProps {
  coverSettings: CoverConfig
  onCoverSettingsChange: (settings: CoverConfig) => void
  duration: number
}

const Step6CoverSettings: React.FC<Step6CoverSettingsProps> = (props) => {
  const {
    coverSettings,
    formatTime,
    toggleEnabled,
    setMode,
    setFrameTime,
    handleUpload,
    totalDuration,
    COVER_MODE_LABELS,
    COVER_MODE_ICONS,
  } = useStep6Cover(props)

  return (
    <div className="xx-form-section">
      <h3>🖼️ 选择封面</h3>

      <div className="xx-cover-header">
        <span className="xx-cover-header-label">启用自定义封面</span>
        <label className="xx-switch">
          <input
            type="checkbox"
            checked={coverSettings.enabled}
            onChange={(e) => toggleEnabled(e.target.checked)}
          />
          <span className="xx-switch-slider" />
        </label>
      </div>

      {coverSettings.enabled && (
        <>
          <div className="xx-section-title">封面来源</div>
          <CoverModeSelector
            mode={coverSettings.mode}
            onModeChange={setMode}
            modeLabels={COVER_MODE_LABELS}
            modeIcons={COVER_MODE_ICONS}
          />

          {coverSettings.mode === "auto" && (
            <div className="xx-cover-auto">
              <div className="xx-cover-auto-desc">
                AI 将分析视频内容，自动选择最具吸引力的画面作为封面。
              </div>
              <div className="xx-cover-auto-badge">
                <span style={{ fontSize: 24 }}>🤖</span>
                <span>AI 智能选帧</span>
              </div>
            </div>
          )}

          {coverSettings.mode === "frame" && (
            <FrameCoverPicker
              frameTime={coverSettings.frame_time}
              totalDuration={totalDuration}
              formatTime={formatTime}
              onFrameTimeChange={setFrameTime}
            />
          )}

          {coverSettings.mode === "upload" && (
            <UploadCoverPicker uploadUrl={coverSettings.upload_url} onUpload={handleUpload} />
          )}

          <div className="xx-section-title">封面预览</div>
          <div className="xx-cover-preview-box">
            {coverSettings.upload_url ? (
              <img src={coverSettings.upload_url} alt="封面预览" className="xx-cover-preview-img" />
            ) : (
              <div className="xx-cover-preview-placeholder">
                <span style={{ fontSize: 28 }}>🖼️</span>
                <span>
                  {coverSettings.mode === "auto"
                    ? "AI 智能选择"
                    : coverSettings.mode === "frame"
                      ? `帧 ${formatTime(coverSettings.frame_time)}`
                      : "未上传封面"}
                </span>
              </div>
            )}
            <div className="xx-cover-preview-ratio">16:9</div>
          </div>
        </>
      )}
    </div>
  )
}

export default Step6CoverSettings