import { useState, useEffect } from 'react'
import { useNavigate } from 'react-router-dom'
import api from '@/services/api'
import type { Milestone, Project } from '@/types'
import dayjs from 'dayjs'

export default function MilestonesPage() {
  const [milestones, setMilestones] = useState<Milestone[]>([])
  const [projects, setProjects] = useState<Project[]>([])
  const [projectFilter, setProjectFilter] = useState('')
  const [showCreate, setShowCreate] = useState(false)
  const [form, setForm] = useState({ title: '', description: '', project_id: 0, due_date: '' })
  const navigate = useNavigate()

  const fetchMilestones = () => {
    const params = projectFilter ? `?project_id=${projectFilter}` : ''
    api.get<Milestone[]>(`/milestones${params}`).then(({ data }) => setMilestones(data))
  }

  useEffect(() => {
    api.get<Project[]>('/projects').then(({ data }) => {
      setProjects(data)
      if (data.length) setForm((f) => ({ ...f, project_id: data[0].id }))
    })
  }, [])

  useEffect(() => { fetchMilestones() }, [projectFilter])

  const createMilestone = async (e: React.FormEvent) => {
    e.preventDefault()
    const payload: Record<string, unknown> = { ...form }
    if (!form.due_date) delete payload.due_date
    await api.post('/milestones', payload)
    setShowCreate(false)
    fetchMilestones()
  }

  return (
    <div className="milestones-page">
      <div className="page-header">
        <h2>🏁 里程碑 ({milestones.length})</h2>
        <button className="btn-primary" onClick={() => setShowCreate(!showCreate)}>
          {showCreate ? '取消' : '+ 新建里程碑'}
        </button>
      </div>

      <div className="filters">
        <select value={projectFilter} onChange={(e) => setProjectFilter(e.target.value)}>
          <option value="">全部项目</option>
          {projects.map((p) => <option key={p.id} value={p.id}>{p.name}</option>)}
        </select>
      </div>

      {showCreate && (
        <form className="inline-form" onSubmit={createMilestone}>
          <input required placeholder="里程碑标题" value={form.title}
            onChange={(e) => setForm({ ...form, title: e.target.value })} />
          <input placeholder="描述（可选）" value={form.description}
            onChange={(e) => setForm({ ...form, description: e.target.value })} />
          <select value={form.project_id} onChange={(e) => setForm({ ...form, project_id: Number(e.target.value) })}>
            {projects.map((p) => <option key={p.id} value={p.id}>{p.name}</option>)}
          </select>
          <input type="date" value={form.due_date}
            onChange={(e) => setForm({ ...form, due_date: e.target.value })} />
          <button type="submit" className="btn-primary">创建</button>
        </form>
      )}

      <div className="milestone-grid">
        {milestones.map((ms) => (
          <div key={ms.id} className="milestone-card" onClick={() => navigate(`/milestones/${ms.id}`)}>
            <div className="milestone-card-header">
              <span className={`badge status-${ms.status === 'active' ? 'open' : 'closed'}`}>{ms.status}</span>
              <h3>{ms.title}</h3>
            </div>
            <p className="project-desc">{ms.description || '暂无描述'}</p>
            <div className="project-meta">
              {ms.due_date && <span>截止 {dayjs(ms.due_date).format('YYYY-MM-DD')}</span>}
              <span>创建于 {dayjs(ms.created_at).format('YYYY-MM-DD')}</span>
            </div>
          </div>
        ))}
        {milestones.length === 0 && <p className="empty">暂无里程碑</p>}
      </div>
    </div>
  )
}