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

export default function ProjectDetailPage() {
  const { id } = useParams()
  const navigate = useNavigate()
  const [project, setProject] = useState<Project | null>(null)
  const [members, setMembers] = useState<ProjectMember[]>([])
  const [issues, setIssues] = useState<Issue[]>([])
  const [milestones, setMilestones] = useState<Milestone[]>([])
  const [editing, setEditing] = useState(false)
  const [editForm, setEditForm] = useState({ name: '', description: '', repo: '' })

  useEffect(() => {
    api.get<Project>(`/projects/${id}`).then(({ data }) => {
      setProject(data)
      setEditForm({ name: data.name, description: data.description || '', repo: data.repo || '' })
    })
    api.get<ProjectMember[]>(`/projects/${id}/members`).then(({ data }) => setMembers(data))
    api.get<PaginatedResponse<Issue>>(`/issues?project_id=${id}&page_size=10`).then(({ data }) => setIssues(data.items))
    api.get<Milestone[]>(`/milestones?project_id=${id}`).then(({ data }) => setMilestones(data))
  }, [id])

  const updateProject = async (e: React.FormEvent) => {
    e.preventDefault()
    const { data } = await api.patch<Project>(`/projects/${id}`, editForm)
    setProject(data)
    setEditing(false)
  }

  if (!project) return <div className="loading">加载中...</div>

  return (
    <div className="project-detail">
      <button className="btn-back" onClick={() => navigate('/projects')}>← 返回项目列表</button>

      <div className="issue-header">
        {editing ? (
          <form className="inline-form" onSubmit={updateProject}>
            <input value={editForm.name} onChange={(e) => setEditForm({ ...editForm, name: e.target.value })} required />
            <input value={editForm.description} onChange={(e) => setEditForm({ ...editForm, description: e.target.value })} placeholder="描述" />
            <input value={editForm.repo} onChange={(e) => setEditForm({ ...editForm, repo: e.target.value })} placeholder="仓库地址" />
            <button type="submit" className="btn-primary">保存</button>
            <button type="button" className="btn-back" onClick={() => setEditing(false)}>取消</button>
          </form>
        ) : (
          <>
            <h2>📁 {project.name}</h2>
            <p style={{ color: 'var(--text-dim)', marginTop: 4 }}>{project.description || '暂无描述'}</p>
            {project.repo && <p style={{ color: 'var(--text-dim)', marginTop: 4 }}>📦 {project.repo}</p>}
            <button className="btn-transition" style={{ marginTop: 8 }} onClick={() => setEditing(true)}>编辑</button>
          </>
        )}
      </div>

      <div className="section">
        <h3>成员 ({members.length})</h3>
        {members.length > 0 ? (
          <div className="member-list">
            {members.map((m) => (
              <span key={m.id} className="badge">{`用户 #${m.user_id} (${m.role})`}</span>
            ))}
          </div>
        ) : (
          <p className="empty">暂无成员</p>
        )}
      </div>

      <div className="section">
        <h3>里程碑 ({milestones.length})</h3>
        {milestones.map((ms) => (
          <div key={ms.id} className="milestone-item" onClick={() => navigate(`/milestones/${ms.id}`)}>
            <span className={`badge status-${ms.status === 'active' ? 'open' : ms.status === 'closed' ? 'closed' : 'in_progress'}`}>{ms.status}</span>
            <span className="milestone-title">{ms.title}</span>
            {ms.due_date && <span className="text-dim"> · 截止 {dayjs(ms.due_date).format('YYYY-MM-DD')}</span>}
          </div>
        ))}
        {milestones.length === 0 && <p className="empty">暂无里程碑</p>}
      </div>

      <div className="section">
        <div className="page-header">
          <h3>最近 Issues</h3>
          <button className="btn-primary" onClick={() => navigate('/issues/new')}>+ 新建</button>
        </div>
        <table>
          <thead>
            <tr><th>#</th><th>标题</th><th>状态</th><th>优先级</th></tr>
          </thead>
          <tbody>
            {issues.map((i) => (
              <tr key={i.id} className="clickable" onClick={() => navigate(`/issues/${i.id}`)}>
                <td>{i.id}</td>
                <td className="issue-title">{i.title}</td>
                <td><span className={`badge status-${i.status}`}>{i.status}</span></td>
                <td><span className={`badge priority-${i.priority}`}>{i.priority}</span></td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  )
}