import { useEffect, useState } from 'react'
import { Heart } from 'lucide-react'
import axios from 'axios'

function BreedingCalendar() {
  const [heatCycles, setHeatCycles] = useState([])
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    fetchHeatCycles()
  }, [])

  const fetchHeatCycles = async () => {
    try {
      const res = await axios.get('/api/breeding/heat-cycles/active')
      setHeatCycles(res.data)
      setLoading(false)
    } catch (error) {
      console.error('Error fetching heat cycles:', error)
      setLoading(false)
    }
  }

  if (loading) {
    return <div className="container loading">Loading breeding calendar...</div>
  }

  return (
    <div className="container">
      <h1 style={{ marginBottom: '2rem' }}>Breeding Calendar</h1>

      <div className="card" style={{ marginBottom: '2rem' }}>
        <h2>Active Heat Cycles</h2>
        {heatCycles.length === 0 ? (
          <div style={{ textAlign: 'center', padding: '2rem' }}>
            <Heart size={48} style={{ color: 'var(--text-secondary)', margin: '0 auto 1rem' }} />
            <p style={{ color: 'var(--text-secondary)' }}>No active heat cycles</p>
          </div>
        ) : (
          <div style={{ display: 'grid', gap: '1rem', marginTop: '1rem' }}>
            {heatCycles.map(cycle => (
              <div key={cycle.id} className="card" style={{ background: 'var(--bg-secondary)' }}>
                <h3>{cycle.dog_name}</h3>
                <p style={{ color: 'var(--text-secondary)' }}>
                  Started: {new Date(cycle.start_date).toLocaleDateString()}
                </p>
                {cycle.registration_number && (
                  <p style={{ fontSize: '0.875rem', color: 'var(--text-secondary)' }}>
                    Reg: {cycle.registration_number}
                  </p>
                )}
              </div>
            ))}
          </div>
        )}
      </div>

      <div className="card">
        <h2>Whelping Calculator</h2>
        <p style={{ color: 'var(--text-secondary)', marginTop: '0.5rem' }}>Calculate expected whelping dates based on breeding dates</p>
        <p style={{ marginTop: '1rem', fontSize: '0.875rem' }}>Feature coming soon...</p>
      </div>
    </div>
  )
}

export default BreedingCalendar