import { useState, useEffect } from 'react'
import { useParams, useNavigate } from 'react-router-dom'
import api from '@/services/api'
import type { Milestone, MilestoneProgress, MilestoneItems, 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 [items, setItems] = useState<MilestoneItems | null>(null)
  const [activeTab, setActiveTab] = useState<'tasks' | 'supports' | 'meetings'>('tasks')
  const [showCreateTask, setShowCreateTask] = useState(false)
  const [showCreateSupport, setShowCreateSupport] = useState(false)
  const [showCreateMeeting, setShowCreateMeeting] = useState(false)
  const [newTitle, setNewTitle] = useState('')
  const [newDesc, setNewDesc] = useState('')
  const [newEffort, setNewEffort] = useState(5)
  const [newTime, setNewTime] = useState('09:00')

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

  const createItem = async (type: 'tasks' | 'supports' | 'meetings') => {
    if (!newTitle.trim()) return
    const payload: any = {
      title: newTitle,
      description: newDesc || null,
      status: 'open',
      priority: 'medium'
    }
    if (type === 'tasks') {
      payload.estimated_effort = newEffort
      payload.estimated_working_time = newTime
    }
    await api.post(`/milestones/${id}/${type}`, payload)
    setNewTitle('')
    setNewDesc('')
    setShowCreateTask(false)
    setShowCreateSupport(false)
    setShowCreateMeeting(false)
    api.get<MilestoneItems>(`/milestones/${id}/items`).then(({ data }) => setItems(data))
  }

  const isProgressing = milestone?.status === 'progressing'

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

  const tasks = items?.tasks || []
  const supports = items?.supports || []
  const meetings = items?.meetings || []

  const renderTaskRow = (t: any) => (
    <tr key={t.id} className="clickable" onClick={() => navigate(`/issues/${t.id}`)}>
      <td>{t.task_code || t.id}</td>
      <td className="issue-title">{t.title}</td>
      <td><span className={`badge status-${t.task_status || t.status}`}>{t.task_status || t.status}</span></td>
      <td>{t.estimated_effort || '-'}</td>
      <td>{t.estimated_working_time || '-'}</td>
    </tr>
  )

  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 === 'progressing' ? 'in_progress' : milestone.status}`}>{milestone.status}</span>
          {milestone.due_date && <span className="text-dim">Due {dayjs(milestone.due_date).format('YYYY-MM-DD')}</span>}
          {milestone.planned_release_date && <span className="text-dim">Planned Release: {dayjs(milestone.planned_release_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 (Tasks: {progress.completed}/{progress.total})</h3>
          <div className="progress-bar-container">
            <div className="progress-bar" style={{ width: `${progress.progress_pct}%` }}>
              {progress.progress_pct.toFixed(0)}%
            </div>
          </div>
          {progress.time_progress_pct !== null && (
            <>
              <p className="text-dim" style={{ marginTop: 8 }}>Time Progress</p>
              <div className="progress-bar-container">
                <div className="progress-bar" style={{ width: `${progress.time_progress_pct}%`, backgroundColor: 'var(--color-accent)' }}>
                  {progress.time_progress_pct.toFixed(0)}%
                </div>
              </div>
            </>
          )}
        </div>
      )}

      <div className="section">
        <div style={{ display: 'flex', gap: 8, marginBottom: 16 }}>
          {!isProgressing && (
            <>
              <button className="btn-primary" onClick={() => setShowCreateTask(true)}>+ Create Task</button>
              <button className="btn-primary" onClick={() => setShowCreateSupport(true)}>+ Create Support</button>
              <button className="btn-primary" onClick={() => setShowCreateMeeting(true)}>+ Schedule Meeting</button>
            </>
          )}
          {isProgressing && <span className="text-dim">Milestone is in progress - cannot add new items</span>}
        </div>

        {(showCreateTask || showCreateSupport || showCreateMeeting) && (
          <div className="card" style={{ marginBottom: 16 }}>
            <input 
              placeholder="Title" 
              value={newTitle} 
              onChange={(e) => setNewTitle(e.target.value)}
              style={{ marginBottom: 8 }}
            />
            <textarea 
              placeholder="Description (optional)" 
              value={newDesc} 
              onChange={(e) => setNewDesc(e.target.value)}
              style={{ marginBottom: 8, width: '100%' }}
            />
            {showCreateTask && (
              <div style={{ display: 'flex', gap: 8, marginBottom: 8 }}>
                <label>Effort (1-10):
                  <input type="number" min="1" max="10" value={newEffort} onChange={(e) => setNewEffort(Number(e.target.value))} style={{ width: 60 }} />
                </label>
                <label>Est. Time:
                  <input type="time" value={newTime} onChange={(e) => setNewTime(e.target.value)} />
                </label>
              </div>
            )}
            <div style={{ display: 'flex', gap: 8 }}>
              <button className="btn-primary" onClick={() => createItem(activeTab)}>Create</button>
              <button className="btn-back" onClick={() => { setShowCreateTask(false); setShowCreateSupport(false); setShowCreateMeeting(false) }}>Cancel</button>
            </div>
          </div>
        )}

        <div className="tabs">
          <button className={`tab ${activeTab === 'tasks' ? 'active' : ''}`} onClick={() => setActiveTab('tasks')}>
            Tasks ({tasks.length})
          </button>
          <button className={`tab ${activeTab === 'supports' ? 'active' : ''}`} onClick={() => setActiveTab('supports')}>
            Supports ({supports.length})
          </button>
          <button className={`tab ${activeTab === 'meetings' ? 'active' : ''}`} onClick={() => setActiveTab('meetings')}>
            Meetings ({meetings.length})
          </button>
        </div>

        <div className="tab-content">
          {activeTab === 'tasks' && (
            <table>
              <thead><tr><th>Task Code</th><th>Title</th><th>Status</th><th>Effort</th><th>Est. Time</th></tr></thead>
              <tbody>
                {tasks.map(renderTaskRow)}
                {tasks.length === 0 && <tr><td colSpan={5} className="empty">No tasks</td></tr>}
              </tbody>
            </table>
          )}

          {activeTab === 'supports' && (
            <table>
              <thead><tr><th>#</th><th>Title</th><th>Status</th><th>Priority</th></tr></thead>
              <tbody>
                {supports.map((i: any) => (
                  <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>
                ))}
                {supports.length === 0 && <tr><td colSpan={4} className="empty">No support requests</td></tr>}
              </tbody>
            </table>
          )}

          {activeTab === 'meetings' && (
            <table>
              <thead><tr><th>#</th><th>Title</th><th>Status</th><th>Priority</th></tr></thead>
              <tbody>
                {meetings.map((i: any) => (
                  <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>
                ))}
                {meetings.length === 0 && <tr><td colSpan={4} className="empty">No meetings</td></tr>}
              </tbody>
            </table>
          )}
        </div>
      </div>
    </div>
  )
}