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

export default function MilestoneDetailPage() {
  const { id } = useParams()
  const navigate = useNavigate()
  const [milestone, setMilestone] = useState<Milestone | null>(null)
  const [progress, setProgress] = useState<MilestoneProgress | null>(null)
  const [issues, setIssues] = useState<Issue[]>([])

  useEffect(() => {
    api.get<Milestone>(`/milestones/${id}`).then(({ data }) => setMilestone(data))
    api.get<MilestoneProgress>(`/milestones/${id}/progress`).then(({ data }) => setProgress(data)).catch(() => {})
    api.get<Issue[]>(`/milestones/${id}/issues`).then(({ data }) => setIssues(data)).catch(() => {})
  }, [id])

  if (!milestone) return <div className="loading">Loading...</div>

  return (
    <div className="milestone-detail">
      <button className="btn-back" onClick={() => navigate('/milestones')}>← Back to milestones</button>

      <div className="issue-header">
        <h2>🏁 {milestone.title}</h2>
        <div className="issue-meta">
          <span className={`badge status-${milestone.status === 'active' ? 'open' : 'closed'}`}>{milestone.status}</span>
          {milestone.due_date && <span className="text-dim">Due {dayjs(milestone.due_date).format('YYYY-MM-DD')}</span>}
        </div>
      </div>

      {milestone.description && (
        <div className="section">
          <h3>Description</h3>
          <p>{milestone.description}</p>
        </div>
      )}

      {progress && (
        <div className="section">
          <h3>Progress</h3>
          <div className="progress-bar-container">
            <div className="progress-bar" style={{ width: `${progress.progress_percent}%` }}>
              {progress.progress_percent.toFixed(0)}%
            </div>
          </div>
          <p className="text-dim" style={{ marginTop: 8 }}>
            {progress.completed_issues} / {progress.total_issues} issues completed
          </p>
        </div>
      )}

      <div className="section">
        <h3>Issues ({issues.length})</h3>
        <table>
          <thead>
            <tr><th>#</th><th>Title</th><th>Status</th><th>Priority</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>
            ))}
            {issues.length === 0 && <tr><td colSpan={4} className="empty">No linked issues</td></tr>}
          </tbody>
        </table>
      </div>
    </div>
  )
}