import { useEffect, useState } from 'react'
import { useProjectListStore } from '../stores/projectList'
import { useToastStore } from '../stores/toast'
import ProjectCard from '../components/ProjectCard'
import AssetGallery from '../components/AssetGallery'
import CreateProjectModal from '../components/CreateProjectModal'
import EmptyState from '../components/EmptyState'
import Skeleton from '../components/Skeleton'

export default function HomePage() {
  const { projects, loading, loadProjects, createProject, deleteProject } =
    useProjectListStore()
  const addToast = useToastStore(s => s.addToast)
  const [modalOpen, setModalOpen] = useState(false)

  useEffect(() => {
    loadProjects()
  }, [loadProjects])

  const handleCreate = async (name: string, style: Record<string, string>) => {
    await createProject(name, style)
    addToast({ type: 'success', message: '工程创建成功' })
  }

  const handleDelete = async (projectId: string) => {
    if (!confirm('确定删除该工程？所有任务和素材将被永久删除。')) return
    await deleteProject(projectId)
    addToast({ type: 'success', message: '工程已删除' })
  }

  if (loading) {
    return (
      <div className="container page-enter" style={{ paddingTop: 32 }}>
        <Skeleton variant="card" />
        <div style={{ height: 16 }} />
        <Skeleton variant="card" />
      </div>
    )
  }

  return (
    <div className="container page-enter" style={{ paddingTop: 32, paddingBottom: 32 }}>
      <AssetGallery />

      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 24 }}>
        <h1 style={{ fontSize: 22 }}>我的工程</h1>
        <button className="btn-primary" onClick={() => setModalOpen(true)}>
          新建工程
        </button>
      </div>

      {projects.length === 0 ? (
        <EmptyState
          title="还没有工程"
          description="创建你的第一个工程，开始生成游戏素材"
          action={{ label: '新建工程', onClick: () => setModalOpen(true) }}
        />
      ) : (
        <div
          style={{
            display: 'grid',
            gridTemplateColumns: 'repeat(auto-fill, minmax(260px, 1fr))',
            gap: 16,
          }}
        >
          {projects.map(project => (
            <ProjectCard
              key={project.id}
              project={project}
              onDelete={handleDelete}
            />
          ))}
        </div>
      )}

      <CreateProjectModal
        open={modalOpen}
        onClose={() => setModalOpen(false)}
        onSubmit={handleCreate}
      />
    </div>
  )
}