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: ''
  })
  const [dogs, setDogs] = useState([])
  const [loading, setLoading] = useState(false)
  const [error, setError] = useState('')

  useEffect(() => {
    fetchDogs()
    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 || ''
      })
    }
  }, [dog])

  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 (dog) {
        // Update existing dog
        await axios.put(`/api/dogs/${dog.id}`, formData)
      } else {
        // Create new dog
        await axios.post('/api/dogs', formData)
      }
      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 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 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