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'
import MilestoneFormModal from '@/components/MilestoneFormModal'

export default function MilestonesPage() {
  const [milestones, setMilestones] = useState<Milestone[]>([])
  const [projects, setProjects] = useState<Project[]>([])
  const [projectFilter, setProjectFilter] = useState('')
  const [showCreate, setShowCreate] = useState(false)
  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))
  }, [])

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

  return (
    <div className="milestones-page">
      <div className="page-header">
        <h2>🏁 Milestones ({milestones.length})</h2>
        <button className="btn-primary" disabled={!projectFilter} onClick={() => setShowCreate(true)}>
          + New Milestone
        </button>
      </div>

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

      <MilestoneFormModal
        isOpen={showCreate}
        onClose={() => setShowCreate(false)}
        initialProjectId={projectFilter ? Number(projectFilter) : undefined}
        lockProject={Boolean(projectFilter)}
        onSaved={() => fetchMilestones()}
      />

      <div className="milestone-grid">
        {milestones.map((ms) => (
          <div key={ms.id} className="milestone-card" onClick={() => navigate(`/milestones/${ms.milestone_code || ms.id}`)}>
            <div className="milestone-card-header">
              <span className={`badge status-${ms.status}`}>{ms.status}</span>
              <h3>{ms.title}</h3>{ms.milestone_code && <span className="badge" style={{ marginLeft: 8, fontSize: '0.75em' }}>{ms.milestone_code}</span>}
            </div>
            <p className="project-desc">{ms.description || 'No description'}</p>
            <div className="project-meta">
              {ms.planned_release_date && <span>Release: {dayjs(ms.planned_release_date).format('YYYY-MM-DD')}</span>}
              {ms.due_date && <span>Due: {dayjs(ms.due_date).format('YYYY-MM-DD')}</span>}
              <span>Created {dayjs(ms.created_at).format('YYYY-MM-DD')}</span>
            </div>
          </div>
        ))}
        {milestones.length === 0 && <p className="empty">No milestones</p>}
      </div>
    </div>
  )
}