Add edit and photo upload to DogDetail

client/src/pages/DogDetail.jsx

@@ -1,12 +1,16 @@
-import { useEffect, useState } from 'react'
+import { useEffect, useState, useRef } from 'react'
 import { useParams, Link } from 'react-router-dom'
-import { Dog, GitBranch, Edit, Trash2 } from 'lucide-react'
+import { Dog, GitBranch, Edit, Upload, Trash2 } from 'lucide-react'
 import axios from 'axios'
+import DogForm from '../components/DogForm'
 
 function DogDetail() {
   const { id } = useParams()
   const [dog, setDog] = useState(null)
   const [loading, setLoading] = useState(true)
+  const [showEditModal, setShowEditModal] = useState(false)
+  const [uploading, setUploading] = useState(false)
+  const fileInputRef = useRef(null)
 
   useEffect(() => {
     fetchDog()
@@ -23,6 +27,40 @@ function DogDetail() {
     }
   }
 
+  const handlePhotoUpload = async (e) => {
+    const file = e.target.files[0]
+    if (!file) return
+
+    setUploading(true)
+    const formData = new FormData()
+    formData.append('photo', file)
+
+    try {
+      await axios.post(`/api/dogs/${id}/photos`, formData, {
+        headers: { 'Content-Type': 'multipart/form-data' }
+      })
+      fetchDog()
+    } catch (error) {
+      console.error('Error uploading photo:', error)
+      alert('Failed to upload photo')
+    } finally {
+      setUploading(false)
+      if (fileInputRef.current) fileInputRef.current.value = ''
+    }
+  }
+
+  const handleDeletePhoto = async (photoIndex) => {
+    if (!confirm('Delete this photo?')) return
+
+    try {
+      await axios.delete(`/api/dogs/${id}/photos/${photoIndex}`)
+      fetchDog()
+    } catch (error) {
+      console.error('Error deleting photo:', error)
+      alert('Failed to delete photo')
+    }
+  }
+
   if (loading) {
     return <div className="container loading">Loading...</div>
   }
@@ -40,7 +78,7 @@ function DogDetail() {
             <GitBranch size={20} />
             View Pedigree
           </Link>
-          <button className="btn btn-secondary">
+          <button className="btn btn-secondary" onClick={() => setShowEditModal(true)}>
             <Edit size={20} />
             Edit
           </button>
@@ -81,11 +119,46 @@ function DogDetail() {
         </div>
 
         <div className="card">
-          <h2 style={{ marginBottom: '1rem' }}>Photos</h2>
+          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '1rem' }}>
+            <h2>Photos</h2>
+            <button 
+              className="btn btn-primary" 
+              onClick={() => fileInputRef.current?.click()}
+              disabled={uploading}
+            >
+              <Upload size={18} />
+              {uploading ? 'Uploading...' : 'Upload'}
+            </button>
+            <input 
+              ref={fileInputRef}
+              type="file" 
+              accept="image/*" 
+              onChange={handlePhotoUpload} 
+              style={{ display: 'none' }}
+            />
+          </div>
           {dog.photo_urls && dog.photo_urls.length > 0 ? (
             <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(150px, 1fr))', gap: '0.5rem' }}>
               {dog.photo_urls.map((url, index) => (
-                <img key={index} src={url} alt={`${dog.name} ${index + 1}`} style={{ width: '100%', aspectRatio: '1', objectFit: 'cover', borderRadius: '0.375rem' }} />
+                <div key={index} style={{ position: 'relative' }}>
+                  <img 
+                    src={url} 
+                    alt={`${dog.name} ${index + 1}`} 
+                    style={{ width: '100%', aspectRatio: '1', objectFit: 'cover', borderRadius: '0.375rem' }} 
+                  />
+                  <button
+                    className="btn-icon"
+                    onClick={() => handleDeletePhoto(index)}
+                    style={{ 
+                      position: 'absolute', 
+                      top: '0.25rem', 
+                      right: '0.25rem', 
+                      background: 'rgba(255,255,255,0.9)'
+                    }}
+                  >
+                    <Trash2 size={16} color="var(--danger)" />
+                  </button>
+                </div>
               ))}
             </div>
           ) : (
@@ -138,6 +211,17 @@ function DogDetail() {
           </div>
         </div>
       )}
+
+      {showEditModal && (
+        <DogForm
+          dog={dog}
+          onClose={() => setShowEditModal(false)}
+          onSave={() => {
+            fetchDog()
+            setShowEditModal(false)
+          }}
+        />
+      )}
     </div>
   )
 }