import { useEffect } from 'react'
import { useNavigate, useParams } from 'react-router-dom'
import { useProjectStore } from '../stores/project'
import { useTaskStore } from '../stores/task'
import { useGenerationStore } from '../stores/generation'
import { useToastStore } from '../stores/toast'
import { extractTags } from '../api/prompt'
import { mergeStyles } from '../utils/style'
import type { GenerateRequest } from '../api/types'
import ProjectConfigPanel from '../components/ProjectConfigPanel'
import GenerateForm from '../components/GenerateForm'
import ProgressBar from '../components/ProgressBar'
import TaskListPanel from '../components/TaskListPanel'

export default function ProjectDetailPage() {
  const { projectId = '' } = useParams()
  const navigate = useNavigate()
  const addToast = useToastStore(s => s.addToast)

  const { style: projectStyle } = useProjectStore()
  const taskStore = useTaskStore()
  const {
    status,
    stage,
    progress,
    taskId,
    statusText,
    retryCount,
    rejectReason,
    submit,
    reset: resetGeneration,
  } = useGenerationStore()

  // 重置生成状态（切换工程时）
  useEffect(() => {
    resetGeneration()
    taskStore.reset()
  }, [projectId]) // eslint-disable-line react-hooks/exhaustive-deps

  // 失败时 toast
  useEffect(() => {
    if (status === 'failed') {
      const errText = useGenerationStore.getState().error || '未知错误'
      addToast({ type: 'error', message: `素材生成失败：${errText}` })
    }
  }, [status, addToast])

  const handleSubmit = async (finalPrompt: string) => {
    const { taskStyle, params, enableAI, optimizedPrompt } = taskStore
    const mergedStyle = mergeStyles(projectStyle, taskStyle)
    const tags = extractTags(mergedStyle)

    const req: GenerateRequest = {
      projectId,
      prompt: enableAI && optimizedPrompt ? optimizedPrompt : finalPrompt,
      assetType: taskStore.assetType,
      tags,
      projectStyle,
      taskStyle,
      resolution: params.resolution,
      directions: params.frames?.directions,
      framesPerDir: params.frames?.framesPerDirection,
      format: params.format,
    }

    await submit(req)
  }

  const handleViewResult = () => {
    if (taskId) navigate(`/projects/${projectId}/tasks/${taskId}`)
  }

  const handleReset = () => {
    resetGeneration()
    taskStore.reset()
  }

  return (
    <div
      style={{
        display: 'grid',
        gridTemplateColumns: '260px 1fr 320px',
        height: 'calc(100vh - 56px)',
        overflow: 'hidden',
      }}
    >
      {/* 左栏：工程配置 */}
      <aside
        style={{
          borderRight: '1px solid var(--border)',
          overflow: 'hidden',
          display: 'flex',
          flexDirection: 'column',
        }}
      >
        <ProjectConfigPanel />
      </aside>

      {/* 中间：生成表单 + 进度 */}
      <main
        className="page-enter"
        style={{ overflow: 'auto', padding: '24px 32px' }}
      >
        <div style={{ display: 'flex', flexDirection: 'column', gap: 32, maxWidth: 720 }}>
          {/* 上半：生成表单 */}
          <section>
            <h2 style={{ fontSize: 18, marginBottom: 20 }}>新建生成</h2>
            <GenerateForm onSubmit={handleSubmit} submitting={status === 'submitting'} />
          </section>

          {/* 下半：当前任务进度 */}
          {status !== 'idle' && (
            <section className="card">
              <h2 style={{ fontSize: 16, marginBottom: 16 }}>生成进度</h2>
              <ProgressBar
                stage={stage}
                progress={progress}
                status={status}
                retryCount={retryCount}
                rejectReason={rejectReason}
              />

              {status === 'running' && (
                <p style={{ textAlign: 'center', color: 'var(--text-secondary)', marginTop: 12 }}>
                  {statusText || '管线执行中，请稍候...'}
                </p>
              )}

              {status === 'completed' && (
                <div style={{ textAlign: 'center', marginTop: 16 }}>
                  <p style={{ color: 'var(--success)', marginBottom: 12 }}>
                    生成完成
                  </p>
                  <div style={{ display: 'flex', gap: 12, justifyContent: 'center' }}>
                    <button className="btn-primary" onClick={handleViewResult}>
                      查看结果
                    </button>
                    <button className="btn-secondary" onClick={handleReset}>
                      继续生成
                    </button>
                  </div>
                </div>
              )}

              {status === 'failed' && (
                <div style={{ textAlign: 'center', marginTop: 16 }}>
                  <p style={{ color: 'var(--error)', marginBottom: 12 }}>
                    {useGenerationStore.getState().error || '生成失败'}
                  </p>
                  <button className="btn-primary" onClick={handleReset}>
                    重新开始
                  </button>
                </div>
              )}
            </section>
          )}
        </div>
      </main>

      {/* 右栏：任务列表 */}
      <aside
        style={{
          borderLeft: '1px solid var(--border)',
          overflow: 'hidden',
          display: 'flex',
          flexDirection: 'column',
        }}
      >
        <TaskListPanel />
      </aside>
    </div>
  )
}