import { useEffect, useState } from 'react'
import { useParams, useNavigate } from 'react-router-dom'
import { ArrowLeft, Plus, X, ExternalLink, Dog } from 'lucide-react'
import axios from 'axios'
import LitterForm from '../components/LitterForm'

function LitterDetail() {
  const { id } = useParams()
  const navigate = useNavigate()
  const [litter, setLitter] = useState(null)
  const [loading, setLoading] = useState(true)
  const [showEditForm, setShowEditForm] = useState(false)
  const [showAddPuppy, setShowAddPuppy] = useState(false)
  const [allDogs, setAllDogs] = useState([])
  const [selectedPuppyId, setSelectedPuppyId] = useState('')
  const [newPuppy, setNewPuppy] = useState({ name: '', sex: 'male', color: '', dob: '' })
  const [addMode, setAddMode] = useState('existing') // 'existing' | 'new'
  const [error, setError] = useState('')
  const [saving, setSaving] = useState(false)

  useEffect(() => {
    fetchLitter()
    fetchAllDogs()
  }, [id])

  const fetchLitter = async () => {
    try {
      const res = await axios.get(`/api/litters/${id}`)
      setLitter(res.data)
    } catch (err) {
      console.error('Error fetching litter:', err)
    } finally {
      setLoading(false)
    }
  }

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

  const unlinkedDogs = allDogs.filter(d => {
    if (!litter) return false
    const alreadyInLitter = litter.puppies?.some(p => p.id === d.id)
    const isSireOrDam = d.id === litter.sire_id || d.id === litter.dam_id
    return !alreadyInLitter && !isSireOrDam
  })

  const handleLinkPuppy = async () => {
    if (!selectedPuppyId) return
    setSaving(true)
    setError('')
    try {
      await axios.post(`/api/litters/${id}/puppies/${selectedPuppyId}`)
      setSelectedPuppyId('')
      setShowAddPuppy(false)
      fetchLitter()
    } catch (err) {
      setError(err.response?.data?.error || 'Failed to link puppy')
    } finally {
      setSaving(false)
    }
  }

  const handleCreateAndLink = async () => {
    if (!newPuppy.name) {
      setError('Puppy name is required')
      return
    }
    setSaving(true)
    setError('')
    try {
      const dob = newPuppy.dob || litter.whelping_date || litter.breeding_date
      const res = await axios.post('/api/dogs', {
        name: newPuppy.name,
        sex: newPuppy.sex,
        color: newPuppy.color,
        date_of_birth: dob,
        breed: litter.dam_breed || '',
      })
      const createdDog = res.data
      await axios.post(`/api/litters/${id}/puppies/${createdDog.id}`)
      setNewPuppy({ name: '', sex: 'male', color: '', dob: '' })
      setShowAddPuppy(false)
      fetchLitter()
      fetchAllDogs()
    } catch (err) {
      setError(err.response?.data?.error || 'Failed to create puppy')
    } finally {
      setSaving(false)
    }
  }

  const handleUnlinkPuppy = async (puppyId) => {
    if (!window.confirm('Remove this puppy from the litter? The dog record will not be deleted.')) return
    try {
      await axios.delete(`/api/litters/${id}/puppies/${puppyId}`)
      fetchLitter()
    } catch (err) {
      console.error('Error unlinking puppy:', err)
    }
  }

  if (loading) return <div className="container loading">Loading litter...</div>
  if (!litter) return <div className="container"><p>Litter not found.</p></div>

  const puppyCount = litter.puppies?.length ?? 0

  return (
    <div className="container">
      {/* Header */}
      <div style={{ display: 'flex', alignItems: 'center', gap: '1rem', marginBottom: '2rem' }}>
        <button className="btn-icon" onClick={() => navigate('/litters')}>
          <ArrowLeft size={20} />
        </button>
        <div style={{ flex: 1 }}>
          <h1 style={{ margin: 0 }}>🐾 {litter.sire_name} × {litter.dam_name}</h1>
          <p style={{ color: 'var(--text-secondary)', margin: '0.25rem 0 0' }}>
            Bred: {new Date(litter.breeding_date).toLocaleDateString()}
            {litter.whelping_date && ` • Whelped: ${new Date(litter.whelping_date).toLocaleDateString()}`}
          </p>
        </div>
        <button className="btn btn-secondary" onClick={() => setShowEditForm(true)}>
          Edit Litter
        </button>
      </div>

      {/* Stats row */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(140px, 1fr))', gap: '1rem', marginBottom: '2rem' }}>
        <div className="card" style={{ textAlign: 'center', padding: '1rem' }}>
          <div style={{ fontSize: '2rem', fontWeight: 700, color: 'var(--accent)' }}>{puppyCount}</div>
          <div style={{ color: 'var(--text-secondary)', fontSize: '0.85rem' }}>Puppies Linked</div>
        </div>
        <div className="card" style={{ textAlign: 'center', padding: '1rem' }}>
          <div style={{ fontSize: '2rem', fontWeight: 700, color: 'var(--accent)' }}>
            {litter.puppies?.filter(p => p.sex === 'male').length ?? 0}
          </div>
          <div style={{ color: 'var(--text-secondary)', fontSize: '0.85rem' }}>Males</div>
        </div>
        <div className="card" style={{ textAlign: 'center', padding: '1rem' }}>
          <div style={{ fontSize: '2rem', fontWeight: 700, color: 'var(--accent)' }}>
            {litter.puppies?.filter(p => p.sex === 'female').length ?? 0}
          </div>
          <div style={{ color: 'var(--text-secondary)', fontSize: '0.85rem' }}>Females</div>
        </div>
        {litter.puppy_count > 0 && (
          <div className="card" style={{ textAlign: 'center', padding: '1rem' }}>
            <div style={{ fontSize: '2rem', fontWeight: 700 }}>{litter.puppy_count}</div>
            <div style={{ color: 'var(--text-secondary)', fontSize: '0.85rem' }}>Expected</div>
          </div>
        )}
      </div>

      {/* Notes */}
      {litter.notes && (
        <div className="card" style={{ marginBottom: '2rem', padding: '1rem', borderLeft: '3px solid var(--accent)' }}>
          <p style={{ margin: 0, fontStyle: 'italic', color: 'var(--text-secondary)' }}>{litter.notes}</p>
        </div>
      )}

      {/* Puppies section */}
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '1rem' }}>
        <h2 style={{ margin: 0 }}>Puppies</h2>
        <button className="btn btn-primary" onClick={() => { setShowAddPuppy(true); setError('') }}>
          <Plus size={16} style={{ marginRight: '0.4rem' }} />
          Add Puppy
        </button>
      </div>

      {puppyCount === 0 ? (
        <div className="card" style={{ textAlign: 'center', padding: '3rem' }}>
          <Dog size={48} style={{ color: 'var(--text-secondary)', margin: '0 auto 1rem' }} />
          <p style={{ color: 'var(--text-secondary)' }}>No puppies linked yet. Add puppies to this litter.</p>
        </div>
      ) : (
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(220px, 1fr))', gap: '1rem' }}>
          {litter.puppies.map(puppy => (
            <div key={puppy.id} className="card" style={{ position: 'relative' }}>
              <button
                className="btn-icon"
                onClick={() => handleUnlinkPuppy(puppy.id)}
                title="Remove from litter"
                style={{ position: 'absolute', top: '0.75rem', right: '0.75rem', color: '#e53e3e' }}
              >
                <X size={14} />
              </button>
              <div style={{ fontSize: '2.5rem', marginBottom: '0.5rem' }}>
                {puppy.sex === 'male' ? '🐦' : '🐥'}
              </div>
              <div style={{ fontWeight: 600, marginBottom: '0.25rem' }}>{puppy.name}</div>
              <div style={{ fontSize: '0.8rem', color: 'var(--text-secondary)' }}>
                {puppy.sex} {puppy.color && `• ${puppy.color}`}
              </div>
              {puppy.date_of_birth && (
                <div style={{ fontSize: '0.8rem', color: 'var(--text-secondary)' }}>
                  Born: {new Date(puppy.date_of_birth).toLocaleDateString()}
                </div>
              )}
              <button
                className="btn btn-secondary"
                style={{ marginTop: '0.75rem', width: '100%', fontSize: '0.8rem', padding: '0.4rem' }}
                onClick={() => navigate(`/dogs/${puppy.id}`)}
              >
                <ExternalLink size={12} style={{ marginRight: '0.3rem' }} />
                View Profile
              </button>
            </div>
          ))}
        </div>
      )}

      {/* Add Puppy Modal */}
      {showAddPuppy && (
        <div className="modal-overlay" onClick={() => setShowAddPuppy(false)}>
          <div className="modal-content" onClick={e => e.stopPropagation()} style={{ maxWidth: '480px' }}>
            <div className="modal-header">
              <h2>Add Puppy to Litter</h2>
              <button className="btn-icon" onClick={() => setShowAddPuppy(false)}><X size={24} /></button>
            </div>
            <div className="modal-body">
              {error && <div className="error" style={{ marginBottom: '1rem' }}>{error}</div>}

              {/* Mode toggle */}
              <div style={{ display: 'flex', gap: '0.5rem', marginBottom: '1.5rem' }}>
                <button
                  className={`btn ${addMode === 'existing' ? 'btn-primary' : 'btn-secondary'}`}
                  onClick={() => setAddMode('existing')}
                  style={{ flex: 1 }}
                >
                  Link Existing Dog
                </button>
                <button
                  className={`btn ${addMode === 'new' ? 'btn-primary' : 'btn-secondary'}`}
                  onClick={() => setAddMode('new')}
                  style={{ flex: 1 }}
                >
                  Create New Puppy
                </button>
              </div>

              {addMode === 'existing' ? (
                <div className="form-group">
                  <label className="label">Select Dog</label>
                  <select
                    className="input"
                    value={selectedPuppyId}
                    onChange={e => setSelectedPuppyId(e.target.value)}
                  >
                    <option value="">-- Select a dog --</option>
                    {unlinkedDogs.map(d => (
                      <option key={d.id} value={d.id}>
                        {d.name} ({d.sex}{d.date_of_birth ? `, born ${new Date(d.date_of_birth).toLocaleDateString()}` : ''})
                      </option>
                    ))}
                  </select>
                  {unlinkedDogs.length === 0 && (
                    <p style={{ color: 'var(--text-secondary)', fontSize: '0.85rem', marginTop: '0.5rem' }}>
                      No unlinked dogs available. Use "Create New Puppy" instead.
                    </p>
                  )}
                </div>
              ) : (
                <div style={{ display: 'grid', gap: '1rem' }}>
                  <div className="form-group">
                    <label className="label">Puppy Name *</label>
                    <input
                      className="input"
                      value={newPuppy.name}
                      onChange={e => setNewPuppy(p => ({ ...p, name: e.target.value }))}
                      placeholder="e.g. Blue Collar"
                    />
                  </div>
                  <div className="form-grid">
                    <div className="form-group">
                      <label className="label">Sex</label>
                      <select
                        className="input"
                        value={newPuppy.sex}
                        onChange={e => setNewPuppy(p => ({ ...p, sex: e.target.value }))}
                      >
                        <option value="male">Male</option>
                        <option value="female">Female</option>
                      </select>
                    </div>
                    <div className="form-group">
                      <label className="label">Color / Markings</label>
                      <input
                        className="input"
                        value={newPuppy.color}
                        onChange={e => setNewPuppy(p => ({ ...p, color: e.target.value }))}
                        placeholder="e.g. Black & Tan"
                      />
                    </div>
                  </div>
                  <div className="form-group">
                    <label className="label">Date of Birth</label>
                    <input
                      type="date"
                      className="input"
                      value={newPuppy.dob}
                      onChange={e => setNewPuppy(p => ({ ...p, dob: e.target.value }))}
                    />
                    {litter.whelping_date && !newPuppy.dob && (
                      <p style={{ fontSize: '0.8rem', color: 'var(--text-secondary)', marginTop: '0.25rem' }}>
                        Will default to whelping date: {new Date(litter.whelping_date).toLocaleDateString()}
                      </p>
                    )}
                  </div>
                </div>
              )}
            </div>
            <div className="modal-footer">
              <button className="btn btn-secondary" onClick={() => setShowAddPuppy(false)} disabled={saving}>
                Cancel
              </button>
              <button
                className="btn btn-primary"
                disabled={saving || (addMode === 'existing' && !selectedPuppyId)}
                onClick={addMode === 'existing' ? handleLinkPuppy : handleCreateAndLink}
              >
                {saving ? 'Saving...' : addMode === 'existing' ? 'Link Puppy' : 'Create & Link'}
              </button>
            </div>
          </div>
        </div>
      )}

      {/* Edit Litter Modal */}
      {showEditForm && (
        <LitterForm
          litter={litter}
          onClose={() => setShowEditForm(false)}
          onSave={fetchLitter}
        />
      )}
    </div>
  )
}

export default LitterDetail