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: '',
    dam_id: '',
    litter_id: ''
  })
  const [dogs, setDogs] = useState([])
  const [litters, setLitters] = useState([])
  const [loading, setLoading] = useState(false)
  const [error, setError] = useState('')
  const [useManualParents, setUseManualParents] = 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 || '',
        dam_id: dog.dam?.id || '',
        litter_id: dog.litter_id || ''
      })
      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)
    }
  }

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

  const handleChange = (e) => {
    const { name, value } = e.target
    setFormData(prev => ({ ...prev, [name]: value }))
    
    // 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 }
      
      // Clear litter_id if using manual parent selection
      if (useManualParents) {
        submitData.litter_id = 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: '#f8fafc', borderRadius: '8px' }}>
            <div style={{ display: 'flex', gap: '1rem', marginBottom: '1rem' }}>
              <label style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', cursor: 'pointer' }}>
                <input
                  type="radio"
                  checked={!useManualParents}
                  onChange={() => setUseManualParents(false)}
                />
                <span>Link to Litter</span>
              </label>
              <label style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', cursor: 'pointer' }}>
                <input
                  type="radio"
                  checked={useManualParents}
                  onChange={() => setUseManualParents(true)}
                />
                <span>Manual Parent Selection</span>
              </label>
            </div>

            {!useManualParents ? (
              <div className="form-group">
                <label className="label">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: '#64748b' }}>
                    Parents will be automatically set from the selected litter
                  </div>
                )}
              </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}
                  >
                    <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