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

function LitterList() {
  const [litters, setLitters] = useState([])
  const [loading, setLoading] = useState(true)

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

  const fetchLitters = async () => {
    try {
      const res = await axios.get('/api/litters')
      setLitters(res.data)
      setLoading(false)
    } catch (error) {
      console.error('Error fetching litters:', error)
      setLoading(false)
    }
  }

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

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

      {litters.length === 0 ? (
        <div className="card" style={{ textAlign: 'center', padding: '4rem' }}>
          <Activity size={64} style={{ color: 'var(--text-secondary)', margin: '0 auto 1rem' }} />
          <h2>No litters recorded yet</h2>
          <p style={{ color: 'var(--text-secondary)' }}>Start tracking breeding records</p>
        </div>
      ) : (
        <div style={{ display: 'grid', gap: '1rem' }}>
          {litters.map(litter => (
            <div key={litter.id} className="card">
              <h3>{litter.sire_name} × {litter.dam_name}</h3>
              <p style={{ color: 'var(--text-secondary)', marginTop: '0.5rem' }}>
                Breeding Date: {new Date(litter.breeding_date).toLocaleDateString()}
              </p>
              {litter.whelping_date && (
                <p style={{ color: 'var(--text-secondary)' }}>
                  Whelping Date: {new Date(litter.whelping_date).toLocaleDateString()}
                </p>
              )}
              <p style={{ marginTop: '0.5rem' }}>
                <strong>Puppies:</strong> {litter.puppy_count || litter.puppies?.length || 0}
              </p>
            </div>
          ))}
        </div>
      )}
    </div>
  )
}

export default LitterList