import { useEffect, useState } from 'react'
import { Link, useParams } from 'react-router-dom'
import { useProjectStore } from '../stores/project'
import { useAuthStore } from '../stores/auth'
import { getTasks } from '../api/project'
import type { Task } from '../api/types'
import StyleSelector from '../components/StyleSelector'

const STATUS_LABELS: Record<string, { label: string; color: string }> = {
  pending: { label: '等待中', color: 'var(--text-muted)' },
  running: { label: '运行中', color: 'var(--warning)' },
  completed: { label: '已完成', color: 'var(--success)' },
  failed: { label: '失败', color: 'var(--error)' },
}

export default function ProjectPage() {
  const { projectId = 'proj-default' } = useParams()
  const { user, logout } = useAuthStore()
  const {
    name,
    style,
    loading,
    loadProject,
    loadStyle,
    updateStyle,
    saveStyle,
  } = useProjectStore()
  const [tasks, setTasks] = useState<Task[]>([])
  const [saving, setSaving] = useState(false)

  useEffect(() => {
    loadProject(projectId)
    loadStyle(projectId)
    getTasks(projectId).then(setTasks)
  }, [projectId, loadProject, loadStyle])

  const handleSave = async () => {
    setSaving(true)
    try {
      await saveStyle()
    } finally {
      setSaving(false)
    }
  }

  return (
    <div className="container" style={{ paddingTop: 24, paddingBottom: 40 }}>
      {/* 顶栏 */}
      <div
        style={{
          display: 'flex',
          justifyContent: 'space-between',
          alignItems: 'center',
          marginBottom: 32,
        }}
      >
        <h1 style={{ fontSize: 24 }}>{loading ? '加载中...' : name}</h1>
        <div style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
          <span style={{ fontSize: 13, color: 'var(--text-secondary)' }}>
            {user?.username}
          </span>
          <button className="btn-secondary" onClick={logout} style={{ padding: '6px 16px', fontSize: 13 }}>
            退出
          </button>
        </div>
      </div>

      {/* 工程风格 */}
      <section className="card" style={{ marginBottom: 24 }}>
        <div
          style={{
            display: 'flex',
            justifyContent: 'space-between',
            alignItems: 'center',
            marginBottom: 20,
          }}
        >
          <h2 style={{ fontSize: 18 }}>工程风格</h2>
          <button
            className="btn-primary"
            onClick={handleSave}
            disabled={saving}
            style={{ padding: '8px 20px', fontSize: 13 }}
          >
            {saving ? '保存中...' : '保存风格'}
          </button>
        </div>
        <StyleSelector value={style} onChange={updateStyle} />
      </section>

      {/* 任务列表 */}
      <section className="card">
        <div
          style={{
            display: 'flex',
            justifyContent: 'space-between',
            alignItems: 'center',
            marginBottom: 20,
          }}
        >
          <h2 style={{ fontSize: 18 }}>历史任务</h2>
          <Link
            to={`/projects/${projectId}/generate`}
            className="btn-primary"
            style={{
              padding: '8px 20px',
              fontSize: 13,
              borderRadius: 'var(--radius)',
              display: 'inline-block',
            }}
          >
            新建生成
          </Link>
        </div>

        {tasks.length === 0 ? (
          <p style={{ color: 'var(--text-muted)', textAlign: 'center', padding: 32 }}>
            暂无任务
          </p>
        ) : (
          <table style={{ width: '100%', borderCollapse: 'collapse' }}>
            <thead>
              <tr style={{ borderBottom: '1px solid var(--border)' }}>
                <th style={thStyle}>提示词</th>
                <th style={thStyle}>类型</th>
                <th style={thStyle}>状态</th>
                <th style={thStyle}>创建时间</th>
                <th style={thStyle}>操作</th>
              </tr>
            </thead>
            <tbody>
              {tasks.map(task => {
                const statusInfo = STATUS_LABELS[task.status] ?? STATUS_LABELS.pending
                return (
                  <tr key={task.id} style={{ borderBottom: '1px solid var(--border)' }}>
                    <td style={tdStyle}>{task.prompt}</td>
                    <td style={tdStyle}>{task.assetType}</td>
                    <td style={{ ...tdStyle, color: statusInfo.color }}>{statusInfo.label}</td>
                    <td style={tdStyle}>
                      {new Date(task.createdAt).toLocaleString('zh-CN')}
                    </td>
                    <td style={tdStyle}>
                      {task.status === 'completed' && (
                        <Link
                          to={`/projects/${projectId}/tasks/${task.id}`}
                          style={{ fontSize: 13 }}
                        >
                          查看结果
                        </Link>
                      )}
                    </td>
                  </tr>
                )
              })}
            </tbody>
          </table>
        )}
      </section>
    </div>
  )
}

const thStyle: React.CSSProperties = {
  textAlign: 'left',
  padding: '10px 12px',
  fontSize: 13,
  color: 'var(--text-secondary)',
  fontWeight: 600,
}

const tdStyle: React.CSSProperties = {
  padding: '10px 12px',
  fontSize: 13,
}