breedr/client/src/components/LitterForm.jsx

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

function LitterForm({ litter, prefill, onClose, onSave }) {
  const [formData, setFormData] = useState({
    sire_id: '',
    dam_id: '',
    breeding_date: '',
    whelping_date: '',
    puppy_count: 0,
    notes: ''
  })
  const [dogs, setDogs] = useState([])
  const [loading, setLoading] = useState(false)
  const [error, setError] = useState('')

  useEffect(() => {
    fetchDogs()
    if (litter) {
      setFormData({
        sire_id: litter.sire_id || '',
        dam_id: litter.dam_id || '',
        breeding_date: litter.breeding_date || '',
        whelping_date: litter.whelping_date || '',
        puppy_count: litter.puppy_count || 0,
        notes: litter.notes || ''
      })
    } else if (prefill) {
      // Pre-populate from BreedingCalendar "Record Litter" flow
      setFormData(prev => ({
        ...prev,
        dam_id: prefill.dam_id ? String(prefill.dam_id) : '',
        breeding_date: prefill.breeding_date || '',
        whelping_date: prefill.whelping_date || '',
      }))
    }
  }, [litter, prefill])

  const fetchDogs = async () => {
    try {
      const res = await axios.get('/api/dogs')
      setDogs(res.data)
    } catch (error) {
      console.error('Error fetching dogs:', error)
    }
  }

  const handleChange = (e) => {
    const { name, value } = e.target
    setFormData(prev => ({ ...prev, [name]: value }))
  }

  const handleSubmit = async (e) => {
    e.preventDefault()
    setError('')
    setLoading(true)

    try {
      if (litter) {
        await axios.put(`/api/litters/${litter.id}`, formData)
      } else {
        await axios.post('/api/litters', formData)
      }
      onSave()
      onClose()
    } catch (error) {
      setError(error.response?.data?.error || 'Failed to save litter')
      setLoading(false)
    }
  }

  const males = dogs.filter(d => d.sex === 'male')
  const females = dogs.filter(d => d.sex === 'female')

  return (
    <div className="modal-overlay" onClick={onClose}>
      <div className="modal-content" onClick={(e) => e.stopPropagation()}>
        <div className="modal-header">
          <h2>{litter ? 'Edit Litter' : prefill ? `Record Litter — ${prefill.dam_name || 'Dam pre-selected'}` : 'Create New Litter'}</h2>
          <button className="btn-icon" onClick={onClose}>
            <X size={24} />
          </button>
        </div>

        <form onSubmit={handleSubmit} className="modal-body">
          {error && <div className="error">{error}</div>}

          {prefill && !litter && (
            <div style={{
              background: 'rgba(16,185,129,0.08)',
              border: '1px solid rgba(16,185,129,0.3)',
              borderRadius: 'var(--radius-sm)',
              padding: '0.6rem 0.875rem',
              marginBottom: '1rem',
              fontSize: '0.85rem',
              color: 'var(--success)'
            }}>
              🐾 Pre-filled from heat cycle — select a sire to complete the litter record.
            </div>
          )}

          <div className="form-grid">
            <div className="form-group">
              <label className="label">Sire (Father) *</label>
              <select
                name="sire_id"
                className="input"
                value={formData.sire_id}
                onChange={handleChange}
                required
                disabled={!!litter}
              >
                <option value="">Select Sire</option>
                {males.map(d => (
                  <option key={d.id} value={d.id}>{d.name} {d.registration_number ? `(${d.registration_number})` : ''}</option>
                ))}
              </select>
            </div>

            <div className="form-group">
              <label className="label">Dam (Mother) *</label>
              <select
                name="dam_id"
                className="input"
                value={formData.dam_id}
                onChange={handleChange}
                required
                disabled={!!litter}
              >
                <option value="">Select Dam</option>
                {females.map(d => (
                  <option key={d.id} value={d.id}>{d.name} {d.registration_number ? `(${d.registration_number})` : ''}</option>
                ))}
              </select>
              {prefill?.dam_name && !litter && (
                <p style={{ fontSize: '0.78rem', color: 'var(--success)', marginTop: '0.25rem' }}>
                  ✓ Pre-selected: {prefill.dam_name}
                </p>
              )}
            </div>

            <div className="form-group">
              <label className="label">Breeding Date *</label>
              <input
                type="date"
                name="breeding_date"
                className="input"
                value={formData.breeding_date}
                onChange={handleChange}
                required
              />
            </div>

            <div className="form-group">
              <label className="label">Whelping Date</label>
              <input
                type="date"
                name="whelping_date"
                className="input"
                value={formData.whelping_date}
                onChange={handleChange}
              />
            </div>

            <div className="form-group">
              <label className="label">Expected Puppy Count</label>
              <input
                type="number"
                name="puppy_count"
                className="input"
                value={formData.puppy_count}
                onChange={handleChange}
                min="0"
              />
            </div>
          </div>

          <div className="form-group" style={{ marginTop: '1rem' }}>
            <label className="label">Notes</label>
            <textarea
              name="notes"
              className="input"
              rows="4"
              value={formData.notes}
              onChange={handleChange}
              placeholder="Enter any notes about this breeding/litter..."
            />
          </div>

          <div className="modal-footer">
            <button type="button" className="btn btn-secondary" onClick={onClose} disabled={loading}>
              Cancel
            </button>
            <button type="submit" className="btn btn-primary" disabled={loading}>
              {loading ? 'Saving...' : litter ? 'Update Litter' : 'Create Litter'}
            </button>
          </div>
        </form>
      </div>
    </div>
  )
}

export default LitterForm