'use client';

import { useEffect, useRef, useState } from 'react';
import Link from 'next/link';
import { ChevronRight, PawPrint, Heart, ArrowRight } from 'lucide-react';
import Header from '@/components/layout/Header';
import Footer from '@/components/layout/Footer';
import AnimalCard from '@/components/animals/AnimalCard';
import FilterChips, { FILTER_OPTIONS } from '@/components/animals/FilterChips';
import { MOCK_ANIMALS, Animal } from '@/lib/mock-data';

function useCountUp(target: number, duration = 1800) {
  const [count, setCount] = useState(0);
  const [started, setStarted] = useState(false);

  useEffect(() => {
    if (!started) return;
    const start = performance.now();
    const tick = (now: number) => {
      const elapsed = now - start;
      const progress = Math.min(elapsed / duration, 1);
      const eased = 1 - Math.pow(1 - progress, 3);
      setCount(Math.floor(eased * target));
      if (progress < 1) requestAnimationFrame(tick);
    };
    requestAnimationFrame(tick);
  }, [started, target, duration]);

  return { count, setStarted };
}

function AnimatedCounter({ target, label }: { target: number; label: string }) {
  const ref = useRef<HTMLDivElement>(null);
  const { count, setStarted } = useCountUp(target);

  useEffect(() => {
    const observer = new IntersectionObserver(
      ([entry]) => { if (entry.isIntersecting) setStarted(true); },
      { threshold: 0.5 }
    );
    if (ref.current) observer.observe(ref.current);
    return () => observer.disconnect();
  }, [setStarted]);

  return (
    <div ref={ref} style={{ textAlign: 'center' }} role="status" aria-label={`${count} ${label}`}>
      <div
        style={{
          fontFamily: 'var(--font-accent)',
          fontSize: 'clamp(32px, 6vw, 48px)',
          fontWeight: 400,
          color: 'var(--terra)',
          lineHeight: 1,
          letterSpacing: '-0.02em',
        }}
      >
        {count.toLocaleString('pt-PT')}
      </div>
      <div
        style={{
          fontFamily: 'var(--font-accent)',
          fontSize: '11px',
          color: 'var(--soil-faint)',
          marginTop: '6px',
          textTransform: 'uppercase',
          letterSpacing: '0.1em',
        }}
      >
        {label}
      </div>
    </div>
  );
}

function filterAnimals(animals: Animal[], filter: string): Animal[] {
  switch (filter) {
    case 'dog':        return animals.filter(a => a.species === 'DOG');
    case 'cat':        return animals.filter(a => a.species === 'CAT');
    case 'urgent':     return animals.filter(a => a.urgent);
    case 'lisboa':     return animals.filter(a => a.shelter.district.toLowerCase() === 'lisboa');
    case 'porto':      return animals.filter(a => a.shelter.district.toLowerCase() === 'porto');
    case 'braga':      return animals.filter(a => a.shelter.district.toLowerCase() === 'braga');
    case 'sintra':     return animals.filter(a => a.shelter.district.toLowerCase() === 'sintra');
    case 'male':       return animals.filter(a => a.sex === 'MALE');
    case 'female':     return animals.filter(a => a.sex === 'FEMALE');
    case 'sterilized': return animals.filter(a => a.sterilized);
    default:           return animals;
  }
}

export default function HomePage() {
  const [activeFilter, setActiveFilter] = useState('all');
  const [displayed, setDisplayed] = useState<Animal[]>(MOCK_ANIMALS.slice(0, 8));

  useEffect(() => {
    const filtered = filterAnimals(MOCK_ANIMALS, activeFilter);
    setDisplayed(filtered.slice(0, 8));
  }, [activeFilter]);

  return (
    <>
      <Header />

      <main style={{ flex: 1 }}>
        {/* ── Hero ───────────────────────────────────────────────── */}
        <section className="hero" aria-labelledby="hero-heading">
          <div className="hero-grain" aria-hidden="true" />
          <div className="hero-glow" aria-hidden="true" />

          <div className="hero-content container">
            <p className="hero-eyebrow">Portugal · Adopção responsável</p>

            <h1
              id="hero-heading"
              className="hero-title"
            >
              Encontra o teu<br />
              companheiro<br />
              para a <em>vida.</em>
            </h1>

            <p className="hero-sub">
              Mais de 1.200 animais à espera de uma família em canis por todo o país.
            </p>

            <div className="hero-actions">
              <Link
                href="/main/animals"
                className="btn btn-primary"
                id="hero-cta-explore"
                aria-label="Explorar animais disponíveis para adopção"
              >
                <PawPrint size={15} />
                Explorar animais
              </Link>
              <Link
                href="#como-funciona"
                className="btn btn-ghost"
                id="hero-cta-how"
              >
                Como funciona →
              </Link>
            </div>

            {/* Stats */}
            <div
              style={{
                display: 'flex',
                flexWrap: 'wrap',
                gap: 'var(--space-8)',
                paddingTop: 'var(--space-7)',
                borderTop: '1px solid var(--parchment)',
                marginTop: 'var(--space-7)',
                animation: 'heroReveal 600ms 550ms ease both',
              }}
              aria-label="Estatísticas da plataforma"
            >
              <AnimatedCounter target={1247} label="animais à espera" />
              <div style={{ width: '1px', background: 'var(--parchment)', alignSelf: 'stretch' }} aria-hidden="true" />
              <AnimatedCounter target={38}   label="canis parceiros" />
              <div style={{ width: '1px', background: 'var(--parchment)', alignSelf: 'stretch' }} aria-hidden="true" />
              <AnimatedCounter target={892}  label="adopções este ano" />
            </div>
          </div>
        </section>

        {/* ── Animais em Destaque ────────────────────────────────── */}
        <section
          style={{ padding: 'var(--space-9) 0', background: 'var(--cream)' }}
          aria-labelledby="animals-heading"
        >
          <div className="container">
            {/* Cabeçalho da secção */}
            <div
              style={{
                display: 'flex',
                alignItems: 'flex-end',
                justifyContent: 'space-between',
                flexWrap: 'wrap',
                gap: 'var(--space-4)',
                marginBottom: 'var(--space-5)',
              }}
            >
              <div>
                <p
                  style={{
                    fontFamily: 'var(--font-accent)',
                    fontSize: '11px',
                    letterSpacing: '0.14em',
                    textTransform: 'uppercase',
                    color: 'var(--terra)',
                    marginBottom: '10px',
                  }}
                >
                  Disponíveis agora
                </p>
                <h2 id="animals-heading" className="section-title">
                  Animais à espera<br />
                  <em style={{ fontStyle: 'italic', color: 'var(--terra)' }}>de ti.</em>
                </h2>
              </div>
              <Link
                href="/main/animals"
                className="btn btn-ghost"
                style={{ color: 'var(--terra)', display: 'flex', alignItems: 'center', gap: '6px' }}
                aria-label="Ver todos os animais disponíveis"
              >
                Ver todos
                <ArrowRight size={15} />
              </Link>
            </div>

            {/* Filtros */}
            <div style={{ marginBottom: 'var(--space-6)' }}>
              <FilterChips
                options={FILTER_OPTIONS}
                active={activeFilter}
                onChange={setActiveFilter}
              />
            </div>

            {/* Grelha */}
            {displayed.length > 0 ? (
              <div className="animal-grid">
                {displayed.map((animal, index) => (
                  <AnimalCard key={animal.id} animal={animal} index={index} />
                ))}
              </div>
            ) : (
              <div
                style={{
                  textAlign: 'center',
                  padding: 'var(--space-9) var(--space-5)',
                  color: 'var(--soil-mid)',
                }}
              >
                <PawPrint size={40} style={{ margin: '0 auto 16px', opacity: 0.25 }} />
                <p style={{ fontFamily: 'var(--font-body)', fontSize: '18px' }}>
                  Nenhum animal encontrado com esse filtro.
                </p>
                <button
                  onClick={() => setActiveFilter('all')}
                  className="btn btn-secondary"
                  style={{ marginTop: 'var(--space-4)' }}
                >
                  Ver todos
                </button>
              </div>
            )}

            {displayed.length > 0 && (
              <div style={{ textAlign: 'center', marginTop: 'var(--space-7)' }}>
                <Link href="/main/animals" className="btn btn-primary" id="homepage-see-all">
                  Ver todos os animais
                  <ChevronRight size={15} />
                </Link>
              </div>
            )}
          </div>
        </section>

        {/* ── Como Funciona ──────────────────────────────────────── */}
        <section
          id="como-funciona"
          style={{ padding: 'var(--space-9) 0', background: 'var(--linen)' }}
          aria-labelledby="how-heading"
        >
          <div className="container">
            <div style={{ textAlign: 'center', marginBottom: 'var(--space-7)' }}>
              <p style={{ fontFamily: 'var(--font-accent)', fontSize: '11px', letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--terra)', marginBottom: '10px' }}>
                Simples e transparente
              </p>
              <h2 id="how-heading" className="section-title">Como funciona</h2>
            </div>

            <div
              style={{
                display: 'grid',
                gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))',
                gap: 'var(--space-5)',
              }}
            >
              {[
                { step: '01', emoji: '🐾', title: 'Descobre',  desc: 'Navega pelos animais disponíveis e filtra por distrito, espécie ou características.' },
                { step: '02', emoji: '💛', title: 'Liga-te',   desc: 'Lê a ficha completa, vê as fotos e conhece a história do animal.' },
                { step: '03', emoji: '📅', title: 'Reserva',   desc: 'Faz a reserva online e recebe confirmação por email. Simples e seguro.' },
                { step: '04', emoji: '🏡', title: 'Adopta',    desc: 'Vai ao canil na data marcada e leva o teu novo companheiro para casa.' },
              ].map(({ step, emoji, title, desc }) => (
                <div
                  key={step}
                  style={{
                    background: 'var(--cream)',
                    border: '1px solid var(--parchment)',
                    borderRadius: 'var(--radius-lg)',
                    padding: 'var(--space-6)',
                    display: 'flex',
                    flexDirection: 'column',
                    gap: 'var(--space-3)',
                    transition: 'transform 220ms var(--ease-spring), box-shadow 220ms ease',
                  }}
                  onMouseEnter={e => {
                    const el = e.currentTarget as HTMLElement;
                    el.style.transform = 'translateY(-4px)';
                    el.style.boxShadow = 'var(--shadow-warm-md)';
                  }}
                  onMouseLeave={e => {
                    const el = e.currentTarget as HTMLElement;
                    el.style.transform = 'translateY(0)';
                    el.style.boxShadow = 'none';
                  }}
                >
                  <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                    <span style={{ fontSize: '36px', lineHeight: 1 }}>{emoji}</span>
                    <span style={{ fontFamily: 'var(--font-accent)', fontSize: '11px', color: 'var(--soil-faint)', letterSpacing: '0.1em' }}>{step}</span>
                  </div>
                  <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: '20px', fontStyle: 'italic', color: 'var(--soil)' }}>
                    {title}
                  </h3>
                  <p style={{ fontFamily: 'var(--font-body)', fontSize: '15px', lineHeight: 1.65, color: 'var(--soil-mid)' }}>
                    {desc}
                  </p>
                </div>
              ))}
            </div>
          </div>
        </section>

        {/* ── Doações ────────────────────────────────────────────── */}
        <section
          style={{ padding: 'var(--space-9) 0', background: 'var(--cream)' }}
          aria-labelledby="donate-heading"
        >
          <div className="container">
            <div style={{ textAlign: 'center', marginBottom: 'var(--space-7)' }}>
              <p style={{ fontFamily: 'var(--font-accent)', fontSize: '11px', letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--terra)', marginBottom: '10px' }}>
                Também podes ajudar assim
              </p>
              <h2 id="donate-heading" className="section-title" style={{ marginBottom: 'var(--space-3)' }}>
                Os canis precisam de<br />
                <em style={{ fontStyle: 'italic', color: 'var(--terra)' }}>mais</em> do que adopções.
              </h2>
              <p className="section-subtitle" style={{ maxWidth: '520px', margin: '0 auto' }}>
                Doa ração, brinquedos ou apoio financeiro. Tu escolhes como ajudar.
              </p>
            </div>

            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: 'var(--space-5)' }}>
              {[
                { href: '/main/donate?type=monetary', emoji: '💸', label: 'Doação Monetária',  desc: 'Contribui directamente para os cuidados veterinários e alimentação.' },
                { href: '/main/donate?type=food',     emoji: '🥩', label: 'Doação de Ração',   desc: 'Escolhe a quantidade e enviamos ao canil da tua escolha.' },
                { href: '/main/donate?type=toys',     emoji: '🎾', label: 'Brinquedos',        desc: 'Enriquecimento ambiental para animais em espera de adopção.' },
              ].map(({ href, emoji, label, desc }) => (
                <Link
                  key={href}
                  href={href}
                  style={{ textDecoration: 'none' }}
                  aria-label={label}
                >
                  <div
                    style={{
                      background: 'var(--linen)',
                      border: '1px solid var(--parchment)',
                      borderRadius: 'var(--radius-lg)',
                      padding: 'var(--space-6)',
                      display: 'flex',
                      flexDirection: 'column',
                      gap: 'var(--space-4)',
                      height: '100%',
                      boxShadow: 'var(--shadow-warm-sm)',
                      transition: 'transform 250ms var(--ease-spring), box-shadow 250ms ease',
                      cursor: 'pointer',
                    }}
                    onMouseEnter={e => {
                      const el = e.currentTarget as HTMLElement;
                      el.style.transform = 'translateY(-8px)';
                      el.style.boxShadow = 'var(--shadow-warm-lg)';
                    }}
                    onMouseLeave={e => {
                      const el = e.currentTarget as HTMLElement;
                      el.style.transform = 'translateY(0)';
                      el.style.boxShadow = 'var(--shadow-warm-sm)';
                    }}
                  >
                    <div
                      style={{
                        fontSize: '56px',
                        lineHeight: 1,
                        filter: 'drop-shadow(0 8px 12px rgba(35,20,8,0.15))',
                      }}
                    >
                      {emoji}
                    </div>
                    <div>
                      <h3
                        style={{
                          fontFamily: 'var(--font-display)',
                          fontWeight: 700,
                          fontSize: '22px',
                          color: 'var(--soil)',
                          marginBottom: '8px',
                          letterSpacing: '-0.01em',
                        }}
                      >
                        {label}
                      </h3>
                      <p style={{ fontFamily: 'var(--font-body)', fontSize: '15px', color: 'var(--soil-mid)', lineHeight: 1.6 }}>
                        {desc}
                      </p>
                    </div>
                    <div
                      style={{
                        marginTop: 'auto',
                        display: 'flex',
                        alignItems: 'center',
                        gap: '6px',
                        fontFamily: 'var(--font-accent)',
                        fontSize: '11px',
                        letterSpacing: '0.08em',
                        textTransform: 'uppercase',
                        color: 'var(--terra)',
                        fontWeight: 500,
                      }}
                    >
                      Saber mais
                      <ChevronRight size={13} />
                    </div>
                  </div>
                </Link>
              ))}
            </div>
          </div>
        </section>
      </main>

      <Footer />
    </>
  );
}
