import { useState, useEffect } from 'react'
import { useNavigate } from 'react-router-dom'
import api from '@/services/api'
import type { Proposal, Project } from '@/types'
import dayjs from 'dayjs'

export default function ProposalsPage() {
  const [proposals, setProposals] = useState<Proposal[]>([])
  const [projects, setProjects] = useState<Project[]>([])
  const [projectFilter, setProjectFilter] = useState('')
  const [showCreate, setShowCreate] = useState(false)
  const [newTitle, setNewTitle] = useState('')
  const [newDesc, setNewDesc] = useState('')
  const [creating, setCreating] = useState(false)
  const navigate = useNavigate()

  const fetchProposals = () => {
    if (!projectFilter) {
      setProposals([])
      return
    }
    api.get<Proposal[]>(`/projects/${projectFilter}/proposals`).then(({ data }) => setProposals(data))
  }

  useEffect(() => {
    api.get<Project[]>('/projects').then(({ data }) => setProjects(data))
  }, [])

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

  const handleCreate = async () => {
    if (!newTitle.trim() || !projectFilter) return
    setCreating(true)
    try {
      await api.post(`/projects/${projectFilter}/proposals`, {
        title: newTitle.trim(),
        description: newDesc.trim() || null,
      })
      setNewTitle('')
      setNewDesc('')
      setShowCreate(false)
      fetchProposals()
    } finally {
      setCreating(false)
    }
  }

  const statusBadgeClass = (s: string) => {
    if (s === 'open') return 'status-open'
    if (s === 'accepted') return 'status-completed'
    if (s === 'rejected') return 'status-closed'
    return ''
  }

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

      <div className="filters">
        <select value={projectFilter} onChange={(e) => setProjectFilter(e.target.value)}>
          <option value="">Select a project</option>
          {projects.map((p) => <option key={p.id} value={p.project_code || ''}>{p.name}</option>)}
        </select>
      </div>

      {!projectFilter && <p className="empty">Please select a project to view proposals.</p>}

      <div className="milestone-grid">
        {proposals.map((pr) => (
          <div key={pr.id} className="milestone-card" onClick={() => pr.proposal_code && pr.project_code && navigate(`/proposals/${pr.proposal_code}?project_code=${pr.project_code}`)}>
            <div className="milestone-card-header">
              <span className={`badge ${statusBadgeClass(pr.status)}`}>{pr.status}</span>
              {pr.proposal_code && <span className="badge">{pr.proposal_code}</span>}
              <h3>{pr.title}</h3>
            </div>
            <p className="project-desc">{pr.description || 'No description'}</p>
            <div className="project-meta">
              <span>Created {dayjs(pr.created_at).format('YYYY-MM-DD')}</span>
            </div>
          </div>
        ))}
        {projectFilter && proposals.length === 0 && <p className="empty">No proposals</p>}
      </div>

      {showCreate && (
        <div className="modal-overlay" onClick={() => setShowCreate(false)}>
          <div className="modal" onClick={(e) => e.stopPropagation()}>
            <h3>New Proposal</h3>
            <label>Title</label>
            <input value={newTitle} onChange={(e) => setNewTitle(e.target.value)} placeholder="Proposal title" />
            <label>Description</label>
            <textarea value={newDesc} onChange={(e) => setNewDesc(e.target.value)} placeholder="Description (optional)" rows={4} />
            <div style={{ marginTop: 12, display: 'flex', gap: 8 }}>
              <button className="btn-primary" onClick={handleCreate} disabled={creating || !newTitle.trim()}>
                {creating ? 'Creating...' : 'Create'}
              </button>
              <button className="btn-back" onClick={() => setShowCreate(false)}>Cancel</button>
            </div>
          </div>
        </div>
      )}
    </div>
  )
}