breedr/client/src/components/DogForm.jsx

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

function DogForm({ dog, onClose, onSave }) {
  const [formData, setFormData] = useState({
    name: '',
    registration_number: '',
    breed: '',
    sex: 'male',
    birth_date: '',
    color: '',
    microchip: '',
    notes: '',
    sire_id: null,  // Changed from '' to null
    dam_id: null,   // Changed from '' to null
    litter_id: null  // Changed from '' to null
  })
  const [dogs, setDogs] = useState([])
  const [litters, setLitters] = useState([])
  const [loading, setLoading] = useState(false)
  const [error, setError] = useState('')
  const [useManualParents, setUseManualParents] = useState(true)
  const [littersAvailable, setLittersAvailable] = useState(false)

  useEffect(() => {
    fetchDogs()
    fetchLitters()
    if (dog) {
      setFormData({
        name: dog.name || '',
        registration_number: dog.registration_number || '',
        breed: dog.breed || '',
        sex: dog.sex || 'male',
        birth_date: dog.birth_date || '',
        color: dog.color || '',
        microchip: dog.microchip || '',
        notes: dog.notes || '',
        sire_id: dog.sire?.id || null,  // Ensure null, not ''
        dam_id: dog.dam?.id || null,    // Ensure null, not ''
        litter_id: dog.litter_id || null // Ensure null, not ''
      })
      setUseManualParents(!dog.litter_id)
    }
  }, [dog])

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

  const fetchLitters = async () => {
    try {
      const res = await axios.get('/api/litters')
      const litterData = res.data || []
      setLitters(litterData)
      setLittersAvailable(litterData.length > 0)
      // Only default to manual if no litters exist
      if (litterData.length === 0) {
        setUseManualParents(true)
      }
    } catch (error) {
      console.error('Error fetching litters:', error)
      // If endpoint fails, gracefully fallback to manual mode
      setLitters([])
      setLittersAvailable(false)
      setUseManualParents(true)
    }
  }

  const handleChange = (e) => {
    const { name, value } = e.target
    
    // Convert empty strings to null for ID fields
    let processedValue = value
    if (name === 'sire_id' || name === 'dam_id' || name === 'litter_id') {
      processedValue = value === '' ? null : parseInt(value)
    }
    
    setFormData(prev => ({ ...prev, [name]: processedValue }))
    
    // If litter is selected, auto-populate parents
    if (name === 'litter_id' && value) {
      const selectedLitter = litters.find(l => l.id === parseInt(value))
      if (selectedLitter) {
        setFormData(prev => ({
          ...prev,
          sire_id: selectedLitter.sire_id,
          dam_id: selectedLitter.dam_id,
          breed: prev.breed || selectedLitter.sire_name?.split(' ')[0] || ''
        }))
      }
    }
  }

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

    try {
      const submitData = { 
        ...formData,
        // Ensure null values are sent, not empty strings
        sire_id: formData.sire_id || null,
        dam_id: formData.dam_id || null,
        litter_id: useManualParents ? null : (formData.litter_id || null),
        registration_number: formData.registration_number || null,
        birth_date: formData.birth_date || null,
        color: formData.color || null,
        microchip: formData.microchip || null,
        notes: formData.notes || null
      }
      
      if (dog) {
        // Update existing dog
        await axios.put(`/api/dogs/${dog.id}`, submitData)
      } else {
        // Create new dog
        await axios.post('/api/dogs', submitData)
      }
      onSave()
      onClose()
    } catch (error) {
      setError(error.response?.data?.error || 'Failed to save dog')
      setLoading(false)
    }
  }

  const males = dogs.filter(d => d.sex === 'male' && d.id !== dog?.id)
  const females = dogs.filter(d => d.sex === 'female' && d.id !== dog?.id)

  return (
    <div className="modal-overlay" onClick={onClose}>
      <div className="modal-content" onClick={(e) => e.stopPropagation()}>
        <div className="modal-header">
          <h2>{dog ? 'Edit Dog' : 'Add New Dog'}</h2>
          <button className="btn-icon" onClick={onClose}>
            <X size={24} />
          </button>
        </div>

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

          <div className="form-grid">
            <div className="form-group">
              <label className="label">Name *</label>
              <input
                type="text"
                name="name"
                className="input"
                value={formData.name}
                onChange={handleChange}
                required
              />
            </div>

            <div className="form-group">
              <label className="label">Registration Number</label>
              <input
                type="text"
                name="registration_number"
                className="input"
                value={formData.registration_number}
                onChange={handleChange}
              />
            </div>

            <div className="form-group">
              <label className="label">Breed *</label>
              <input
                type="text"
                name="breed"
                className="input"
                value={formData.breed}
                onChange={handleChange}
                required
              />
            </div>

            <div className="form-group">
              <label className="label">Sex *</label>
              <select
                name="sex"
                className="input"
                value={formData.sex}
                onChange={handleChange}
                required
              >
                <option value="male">Male</option>
                <option value="female">Female</option>
              </select>
            </div>

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

            <div className="form-group">
              <label className="label">Color</label>
              <input
                type="text"
                name="color"
                className="input"
                value={formData.color}
                onChange={handleChange}
              />
            </div>

            <div className="form-group">
              <label className="label">Microchip Number</label>
              <input
                type="text"
                name="microchip"
                className="input"
                value={formData.microchip}
                onChange={handleChange}
              />
            </div>
          </div>

          {/* Litter or Manual Parent Selection */}
          <div style={{ marginTop: '1.5rem', padding: '1rem', background: 'rgba(99, 102, 241, 0.05)', borderRadius: '8px', border: '1px solid rgba(99, 102, 241, 0.2)' }}>
            <label className="label" style={{ marginBottom: '0.75rem', display: 'block', fontWeight: '600' }}>Parent Information</label>
            
            {littersAvailable && (
              <div style={{ display: 'flex', gap: '1.5rem', marginBottom: '1rem', flexWrap: 'wrap' }}>
                <label style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', cursor: 'pointer', fontSize: '0.95rem' }}>
                  <input
                    type="radio"
                    name="parentMode"
                    checked={!useManualParents}
                    onChange={() => setUseManualParents(false)}
                    style={{ width: '16px', height: '16px' }}
                  />
                  <span>Link to Litter</span>
                </label>
                <label style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', cursor: 'pointer', fontSize: '0.95rem' }}>
                  <input
                    type="radio"
                    name="parentMode"
                    checked={useManualParents}
                    onChange={() => setUseManualParents(true)}
                    style={{ width: '16px', height: '16px' }}
                  />
                  <span>Manual Parent Selection</span>
                </label>
              </div>
            )}

            {!useManualParents && littersAvailable ? (
              <div className="form-group" style={{ marginTop: '0.5rem' }}>
                <label className="label">Select Litter</label>
                <select
                  name="litter_id"
                  className="input"
                  value={formData.litter_id || ''}
                  onChange={handleChange}
                >
                  <option value="">No Litter</option>
                  {litters.map(l => (
                    <option key={l.id} value={l.id}>
                      {l.sire_name} x {l.dam_name} - {new Date(l.breeding_date).toLocaleDateString()}
                    </option>
                  ))}
                </select>
                {formData.litter_id && (
                  <div style={{ marginTop: '0.5rem', fontSize: '0.875rem', color: '#6366f1', fontStyle: 'italic' }}>
                    ✓ Parents will be automatically set from the selected litter
                  </div>
                )}
              </div>
            ) : (
              <div className="form-grid" style={{ marginTop: '0.5rem' }}>
                <div className="form-group">
                  <label className="label">Sire (Father)</label>
                  <select
                    name="sire_id"
                    className="input"
                    value={formData.sire_id || ''}
                    onChange={handleChange}
                  >
                    <option value="">Unknown</option>
                    {males.map(d => (
                      <option key={d.id} value={d.id}>{d.name}</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}
                  >
                    <option value="">Unknown</option>
                    {females.map(d => (
                      <option key={d.id} value={d.id}>{d.name}</option>
                    ))}
                  </select>
                </div>
              </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}
            />
          </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...' : dog ? 'Update Dog' : 'Add Dog'}
            </button>
          </div>
        </form>
      </div>
    </div>
  )
}

export default DogForm