import { useState, useEffect, useMemo } from 'react'
import { useParams, useNavigate } from 'react-router-dom'
import api from '@/services/api'
import type { Task, Comment, Project, ProjectMember, Milestone } from '@/types'
import dayjs from 'dayjs'
import { useAuth } from '@/hooks/useAuth'
import CreateTaskModal from '@/components/CreateTaskModal'

export default function TaskDetailPage() {
  const { id } = useParams()
  const navigate = useNavigate()
  const { user } = useAuth()
  const [task, setTask] = useState<Task | null>(null)
  const [milestone, setMilestone] = useState<Milestone | null>(null)
  const [project, setProject] = useState<Project | null>(null)
  const [members, setMembers] = useState<ProjectMember[]>([])
  const [comments, setComments] = useState<Comment[]>([])
  const [newComment, setNewComment] = useState('')
  const [showEditTask, setShowEditTask] = useState(false)
  const [actionLoading, setActionLoading] = useState<string | null>(null)
  const [actionError, setActionError] = useState<string | null>(null)
  const [showFinishModal, setShowFinishModal] = useState(false)
  const [finishComment, setFinishComment] = useState('')
  const [showCloseModal, setShowCloseModal] = useState(false)
  const [closeReason, setCloseReason] = useState('')

  const refreshTask = async () => {
    const { data } = await api.get<Task>(`/tasks/${id}`)
    setTask(data)
    if (data.project_id) {
      api.get<Project>(`/projects/${data.project_id}`).then(({ data }) => setProject(data)).catch(() => {})
      api.get<ProjectMember[]>(`/projects/${data.project_id}/members`).then(({ data }) => setMembers(data)).catch(() => {})
    }
    if (data.milestone_id) {
      api.get<Milestone>(`/milestones/${data.milestone_id}`).then(({ data }) => setMilestone(data)).catch(() => {})
    }
  }

  useEffect(() => {
    refreshTask().catch(console.error)
    api.get<Comment[]>(`/tasks/${id}/comments`).then(({ data }) => setComments(data))
  }, [id])

  const addComment = async () => {
    if (!newComment.trim() || !task) return
    await api.post('/comments', { content: newComment, task_id: task.id, author_id: 1 })
    setNewComment('')
    const { data } = await api.get<Comment[]>(`/tasks/${id}/comments`)
    setComments(data)
  }

  const doAction = async (actionName: string, newStatus: string, body?: Record<string, any>) => {
    setActionLoading(actionName)
    setActionError(null)
    try {
      await api.post(`/tasks/${id}/transition?new_status=${newStatus}`, body || {})
      await refreshTask()
      // refresh comments too (finish adds one via backend)
      const { data } = await api.get<Comment[]>(`/tasks/${id}/comments`)
      setComments(data)
    } catch (err: any) {
      setActionError(err?.response?.data?.detail || err?.message || 'Action failed')
    } finally {
      setActionLoading(null)
    }
  }

  const handleOpen = () => doAction('open', 'open')
  const handleStart = () => doAction('start', 'undergoing')
  const handleFinishConfirm = async () => {
    if (!finishComment.trim()) return
    await doAction('finish', 'completed', { comment: finishComment })
    setShowFinishModal(false)
    setFinishComment('')
  }
  const handleCloseConfirm = async () => {
    const body: Record<string, any> = {}
    if (closeReason.trim()) {
      body.comment = `[Close reason] ${closeReason}`
    }
    await doAction('close', 'closed', body)
    setShowCloseModal(false)
    setCloseReason('')
  }
  const handleReopen = () => doAction('reopen', 'open')

  const currentMemberRole = useMemo(
    () => members.find((m) => m.user_id === user?.id)?.role,
    [members, user?.id]
  )
  const canEditTask = Boolean(task && project && user && (
    user.is_admin ||
    user.id === project.owner_id ||
    user.id === task.created_by_id ||
    user.id === milestone?.created_by_id ||
    currentMemberRole === 'admin'
  ))

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

  // Determine which action buttons to show based on status (P9.2 / P11.8)
  const isTerminal = task.status === 'completed' || task.status === 'closed'

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

      <div className="task-header">
        <h2>#{task.id} {task.title}</h2>
        <div className="task-meta">
          <span className={`badge status-${task.status}`}>{task.status}</span>
          <span className={`badge priority-${task.priority}`}>{task.priority}</span>
          <span className="badge">{task.task_type}</span>{task.task_subtype && <span className="badge">{task.task_subtype}</span>}
          {task.tags && <span className="tags">{task.tags}</span>}
        </div>
        {canEditTask && !isTerminal && task.status !== 'undergoing' && (
          <button className="btn-transition" style={{ marginTop: 8 }} onClick={() => setShowEditTask(true)}>Edit Task</button>
        )}
      </div>

      <CreateTaskModal
        isOpen={showEditTask}
        onClose={() => setShowEditTask(false)}
        task={task}
        onSaved={(data) => setTask(data)}
      />

      <div className="task-body">
        <div className="section">
          <h3>Description</h3>
          <p>{task.description || 'No description'}</p>
        </div>

        <div className="section">
          <h3>Details</h3>
          <dl>
            <dt>Created</dt><dd>{dayjs(task.created_at).format('YYYY-MM-DD HH:mm')}</dd>
            {task.updated_at && <><dt>Updated</dt><dd>{dayjs(task.updated_at).format('YYYY-MM-DD HH:mm')}</dd></>}
            {project && <><dt>Project</dt><dd>{project.name}</dd></>}
            {milestone && <><dt>Milestone</dt><dd>{milestone.title}</dd></>}
          </dl>
        </div>

        <div className="section">
          <h3>Actions</h3>
          {actionError && <div className="error-message" style={{ color: '#dc2626', marginBottom: 8 }}>{actionError}</div>}
          <div className="actions" style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
            {/* pending: Open + Close */}
            {task.status === 'pending' && (
              <>
                <button className="btn-transition" disabled={!!actionLoading} onClick={handleOpen}>
                  {actionLoading === 'open' ? 'Opening…' : '▶ Open'}
                </button>
                <button className="btn-transition" style={{ background: '#dc2626', color: '#fff' }} disabled={!!actionLoading} onClick={() => setShowCloseModal(true)}>
                  {actionLoading === 'close' ? 'Closing…' : '✕ Close'}
                </button>
              </>
            )}
            {/* open: Start + Close */}
            {task.status === 'open' && (
              <>
                <button className="btn-transition" style={{ background: '#f59e0b', color: '#fff' }} disabled={!!actionLoading} onClick={handleStart}>
                  {actionLoading === 'start' ? 'Starting…' : '⏵ Start'}
                </button>
                <button className="btn-transition" style={{ background: '#dc2626', color: '#fff' }} disabled={!!actionLoading} onClick={() => setShowCloseModal(true)}>
                  {actionLoading === 'close' ? 'Closing…' : '✕ Close'}
                </button>
              </>
            )}
            {/* undergoing: Finish + Close */}
            {task.status === 'undergoing' && (
              <>
                <button className="btn-transition" style={{ background: '#16a34a', color: '#fff' }} disabled={!!actionLoading} onClick={() => setShowFinishModal(true)}>
                  {actionLoading === 'finish' ? 'Finishing…' : '✓ Finish'}
                </button>
                <button className="btn-transition" style={{ background: '#dc2626', color: '#fff' }} disabled={!!actionLoading} onClick={() => setShowCloseModal(true)}>
                  {actionLoading === 'close' ? 'Closing…' : '✕ Close'}
                </button>
              </>
            )}
            {/* completed / closed: Reopen */}
            {(task.status === 'completed' || task.status === 'closed') && (
              <button className="btn-transition" disabled={!!actionLoading} onClick={handleReopen}>
                {actionLoading === 'reopen' ? 'Reopening…' : '↺ Reopen'}
              </button>
            )}
          </div>
        </div>

        {/* Finish modal — requires comment (P9.4) */}
        {showFinishModal && (
          <div className="modal-overlay" style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.4)', display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: 1000 }}>
            <div className="modal-content" style={{ background: '#fff', borderRadius: 8, padding: 24, minWidth: 400, maxWidth: 520 }}>
              <h3>Finish Task</h3>
              <p style={{ fontSize: 14, color: '#666', marginBottom: 12 }}>Please leave a completion comment before finishing.</p>
              <textarea
                value={finishComment}
                onChange={(e) => setFinishComment(e.target.value)}
                placeholder="Describe what was done…"
                rows={4}
                style={{ width: '100%', marginBottom: 12 }}
              />
              <div style={{ display: 'flex', gap: 8, justifyContent: 'flex-end' }}>
                <button className="btn-transition" onClick={() => { setShowFinishModal(false); setFinishComment('') }}>Cancel</button>
                <button
                  className="btn-transition"
                  style={{ background: '#16a34a', color: '#fff' }}
                  disabled={!finishComment.trim() || !!actionLoading}
                  onClick={handleFinishConfirm}
                >
                  {actionLoading === 'finish' ? 'Finishing…' : 'Confirm Finish'}
                </button>
              </div>
            </div>
          </div>
        )}

        {/* Close modal — optional reason */}
        {showCloseModal && (
          <div className="modal-overlay" style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.4)', display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: 1000 }}>
            <div className="modal-content" style={{ background: '#fff', borderRadius: 8, padding: 24, minWidth: 400, maxWidth: 520 }}>
              <h3>Close Task</h3>
              <p style={{ fontSize: 14, color: '#666', marginBottom: 12 }}>This will cancel/abandon the task. Optionally provide a reason.</p>
              <textarea
                value={closeReason}
                onChange={(e) => setCloseReason(e.target.value)}
                placeholder="Reason for closing (optional)…"
                rows={3}
                style={{ width: '100%', marginBottom: 12 }}
              />
              <div style={{ display: 'flex', gap: 8, justifyContent: 'flex-end' }}>
                <button className="btn-transition" onClick={() => { setShowCloseModal(false); setCloseReason('') }}>Cancel</button>
                <button
                  className="btn-transition"
                  style={{ background: '#dc2626', color: '#fff' }}
                  disabled={!!actionLoading}
                  onClick={handleCloseConfirm}
                >
                  {actionLoading === 'close' ? 'Closing…' : 'Confirm Close'}
                </button>
              </div>
            </div>
          </div>
        )}

        <div className="section">
          <h3>Comments ({comments.length})</h3>
          {comments.map((c) => (
            <div className="comment" key={c.id}>
              <div className="comment-meta">User #{c.author_id} · {dayjs(c.created_at).format('MM-DD HH:mm')}</div>
              <p>{c.content}</p>
            </div>
          ))}
          <div className="comment-form">
            <textarea value={newComment} onChange={(e) => setNewComment(e.target.value)} placeholder="Add a comment..." />
            <button onClick={addComment} disabled={!newComment.trim()}>Submit comment</button>
          </div>
        </div>
      </div>
    </div>
  )
}