import { useEffect, useState } from 'react'
import { Link } from 'react-router-dom'
import { Dog, Plus, Search, Calendar, Hash, ArrowRight } from 'lucide-react'
import axios from 'axios'
import DogForm from '../components/DogForm'
import { ChampionBadge, ChampionBloodlineBadge } from '../components/ChampionBadge'

function DogList() {
  const [dogs, setDogs] = useState([])
  const [filteredDogs, setFilteredDogs] = useState([])
  const [search, setSearch] = useState('')
  const [sexFilter, setSexFilter] = useState('all')
  const [loading, setLoading] = useState(true)
  const [showAddModal, setShowAddModal] = useState(false)

  useEffect(() => { fetchDogs() }, [])
  useEffect(() => { filterDogs() }, [dogs, search, sexFilter])

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

  const filterDogs = () => {
    let filtered = dogs
    if (search) {
      filtered = filtered.filter(dog =>
        dog.name.toLowerCase().includes(search.toLowerCase()) ||
        (dog.registration_number && dog.registration_number.toLowerCase().includes(search.toLowerCase()))
      )
    }
    if (sexFilter !== 'all') {
      filtered = filtered.filter(dog => dog.sex === sexFilter)
    }
    setFilteredDogs(filtered)
  }

  const handleSave = () => { fetchDogs() }

  const calculateAge = (birthDate) => {
    if (!birthDate) return null
    const today = new Date()
    const birth = new Date(birthDate)
    let years = today.getFullYear() - birth.getFullYear()
    let months = today.getMonth() - birth.getMonth()
    if (months < 0) { years--; months += 12 }
    if (years === 0) return `${months}mo`
    if (months === 0) return `${years}y`
    return `${years}y ${months}mo`
  }

  // A dog has champion blood if sire or dam is a champion
  const hasChampionBlood = (dog) =>
    (dog.sire && dog.sire.is_champion) || (dog.dam && dog.dam.is_champion)

  if (loading) {
    return <div className="container loading">Loading dogs...</div>
  }

  return (
    <div className="container" style={{ paddingTop: '2rem', paddingBottom: '3rem' }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '2rem' }}>
        <div>
          <h1 style={{ marginBottom: '0.25rem' }}>Dogs</h1>
          <p style={{ color: 'var(--text-secondary)', fontSize: '0.875rem' }}>
            {filteredDogs.length} {filteredDogs.length === 1 ? 'dog' : 'dogs'}
            {search || sexFilter !== 'all' ? ' matching filters' : ' total'}
          </p>
        </div>
        <button className="btn btn-primary" onClick={() => setShowAddModal(true)}>
          <Plus size={18} />
          Add Dog
        </button>
      </div>

      {/* Search and Filter Bar */}
      <div className="card" style={{ marginBottom: '1.5rem', padding: '1rem' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr auto auto', gap: '1rem', alignItems: 'center' }}>
          <div style={{ position: 'relative' }}>
            <Search size={18} style={{ position: 'absolute', left: '0.875rem', top: '50%', transform: 'translateY(-50%)', color: 'var(--text-muted)' }} />
            <input
              type="text"
              className="input"
              placeholder="Search by name or registration..."
              value={search}
              onChange={(e) => setSearch(e.target.value)}
              style={{ paddingLeft: '2.75rem' }}
            />
          </div>
          <select className="input" value={sexFilter} onChange={(e) => setSexFilter(e.target.value)} style={{ width: '140px' }}>
            <option value="all">All Dogs</option>
            <option value="male">Males ♂</option>
            <option value="female">Females ♀</option>
          </select>
          {(search || sexFilter !== 'all') && (
            <button
              className="btn btn-ghost"
              onClick={() => { setSearch(''); setSexFilter('all') }}
              style={{ padding: '0.625rem 1rem', fontSize: '0.875rem' }}
            >
              Clear
            </button>
          )}
        </div>
      </div>

      {/* Dogs List */}
      {filteredDogs.length === 0 ? (
        <div className="card" style={{ textAlign: 'center', padding: '4rem 2rem' }}>
          <Dog size={64} style={{ color: 'var(--text-muted)', margin: '0 auto 1rem', opacity: 0.5 }} />
          <h3 style={{ marginBottom: '0.5rem' }}>
            {search || sexFilter !== 'all' ? 'No dogs found' : 'No dogs yet'}
          </h3>
          <p style={{ color: 'var(--text-secondary)', marginBottom: '2rem' }}>
            {search || sexFilter !== 'all'
              ? 'Try adjusting your search or filters'
              : 'Add your first dog to get started'}
          </p>
          {!search && sexFilter === 'all' && (
            <button className="btn btn-primary" onClick={() => setShowAddModal(true)}>
              <Plus size={18} />
              Add Your First Dog
            </button>
          )}
        </div>
      ) : (
        <div style={{ display: 'grid', gap: '1rem' }}>
          {filteredDogs.map(dog => (
            <Link
              key={dog.id}
              to={`/dogs/${dog.id}`}
              className="card"
              style={{
                padding: '1rem',
                textDecoration: 'none',
                display: 'flex',
                gap: '1rem',
                alignItems: 'center',
                transition: 'var(--transition)',
                cursor: 'pointer'
              }}
              onMouseEnter={(e) => {
                e.currentTarget.style.borderColor = 'var(--primary)'
                e.currentTarget.style.transform = 'translateY(-2px)'
                e.currentTarget.style.boxShadow = '0 8px 16px rgba(0, 0, 0, 0.3)'
              }}
              onMouseLeave={(e) => {
                e.currentTarget.style.borderColor = 'var(--border)'
                e.currentTarget.style.transform = 'translateY(0)'
                e.currentTarget.style.boxShadow = 'var(--shadow-sm)'
              }}
            >
              {/* Avatar */}
              <div style={{
                width: '80px', height: '80px', flexShrink: 0,
                borderRadius: 'var(--radius)',
                background: 'var(--bg-primary)',
                border: dog.is_champion
                  ? '2px solid var(--champion-gold)'
                  : hasChampionBlood(dog)
                    ? '2px solid var(--bloodline-amber)'
                    : '2px solid var(--border)',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                overflow: 'hidden',
                boxShadow: dog.is_champion
                  ? '0 0 8px var(--champion-glow)'
                  : hasChampionBlood(dog)
                    ? '0 0 8px var(--bloodline-glow)'
                    : 'none'
              }}>
                {dog.photo_urls && dog.photo_urls.length > 0 ? (
                  <img
                    src={dog.photo_urls[0]}
                    alt={dog.name}
                    style={{ width: '100%', height: '100%', objectFit: 'cover' }}
                  />
                ) : (
                  <Dog size={32} style={{ color: 'var(--text-muted)', opacity: 0.5 }} />
                )}
              </div>

              {/* Info */}
              <div style={{ flex: 1, minWidth: 0 }}>
                <h3 style={{
                  fontSize: '1.125rem',
                  marginBottom: '0.25rem',
                  display: 'flex', alignItems: 'center', gap: '0.5rem',
                  flexWrap: 'wrap'
                }}>
                  <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
                    {dog.name}
                  </span>
                  <span style={{ color: dog.sex === 'male' ? 'var(--primary)' : '#ec4899', fontSize: '1rem' }}>
                    {dog.sex === 'male' ? '♂' : '♀'}
                  </span>
                  {dog.is_champion ? <ChampionBadge /> : hasChampionBlood(dog) ? <ChampionBloodlineBadge /> : null}
                </h3>

                <div style={{
                  display: 'flex', flexWrap: 'wrap', gap: '0.75rem',
                  fontSize: '0.8125rem', color: 'var(--text-secondary)', marginBottom: '0.5rem'
                }}>
                  <span>{dog.breed}</span>
                  {dog.birth_date && (
                    <>
                      <span>·</span>
                      <span style={{ display: 'flex', alignItems: 'center', gap: '0.25rem' }}>
                        <Calendar size={12} />
                        {calculateAge(dog.birth_date)}
                      </span>
                    </>
                  )}
                  {dog.color && (
                    <>
                      <span>·</span>
                      <span>{dog.color}</span>
                    </>
                  )}
                </div>

                {dog.registration_number && (
                  <div style={{
                    display: 'inline-flex', alignItems: 'center', gap: '0.25rem',
                    padding: '0.25rem 0.5rem',
                    background: 'var(--bg-primary)',
                    border: '1px solid var(--border)',
                    borderRadius: 'var(--radius-sm)',
                    fontSize: '0.75rem', fontFamily: 'monospace',
                    color: 'var(--text-muted)'
                  }}>
                    <Hash size={10} />
                    {dog.registration_number}
                  </div>
                )}
              </div>

              <div style={{ opacity: 0.5, transition: 'var(--transition)' }}>
                <ArrowRight size={20} color="var(--text-muted)" />
              </div>
            </Link>
          ))}
        </div>
      )}

      {showAddModal && (
        <DogForm
          onClose={() => setShowAddModal(false)}
          onSave={handleSave}
        />
      )}
    </div>
  )
}

export default DogList