/* ===== Подари вторую жизнь — shared components ===== */
const { useState, useEffect, useRef, useContext, createContext, useMemo, useCallback } = React;
const PF = window.PF;

const NavCtx = createContext({ route:{name:'home'}, go:()=>{}, favs:[], toggleFav:()=>{} });
const useNav = () => useContext(NavCtx);

/* ---- Brand / logo ---- */
function Brand({ onClick, light, slogan }) {
  return (
    <div className="brand" onClick={onClick} style={light?{color:'#fff'}:null}>
      <span className="mark" style={{
        width:40,height:40,borderRadius:14,display:'grid',placeItems:'center',flex:'none',
        background:'var(--primary)',color:'#fff',boxShadow:'0 6px 14px color-mix(in srgb,var(--primary) 40%,transparent)'
      }}>
        <Icons.pawHeart style={{width:24,height:24}}/>
      </span>
      <span className="brand-lock">
        <span className="brand-name">Подари вторую&nbsp;<b style={light?{color:'#5fd6c8'}:null}>жизнь</b></span>
        {slogan && <span className="brand-slogan">{PF.SLOGAN}</span>}
      </span>
    </div>
  );
}

const SpeciesIcon = ({ species, ...p }) => species==='cat' ? <Icons.cat {...p}/> : <Icons.dog {...p}/>;

/* count-up number (для «подкручивающихся» процентов) */
function CountUp({ to, dur=850 }){
  const [v,setV] = useState(0);
  useEffect(()=>{
    let raf, start, done=false;
    const tick=(t)=>{ if(!start) start=t; const p=Math.min(1,(t-start)/dur); const e=1-Math.pow(1-p,3); setV(Math.round(to*e)); if(p<1) raf=requestAnimationFrame(tick); else { done=true; setV(to); } };
    raf=requestAnimationFrame(tick);
    const fb=setTimeout(()=>{ if(!done) setV(to); }, dur+500);   // гарантия финального значения
    return ()=>{ cancelAnimationFrame(raf); clearTimeout(fb); };
  },[to,dur]);
  return v;
}
const SexMark = ({ sex }) => (
  <span className={sex==='male'?'sx sx-m':'sx sx-f'} title={PF.sexLabel(sex)} style={{display:'inline-flex'}}>
    {sex==='male' ? <Icons.male style={{width:'1em',height:'1em'}}/> : <Icons.female style={{width:'1em',height:'1em'}}/>}
  </span>
);

/* ---- Animal card ---- */
function AnimalCard({ a, match, wait, style }) {
  const { go, favs, toggleFav } = useNav();
  const [loaded, setLoaded] = useState(false);
  const [err, setErr] = useState(false);
  const on = favs.includes(a.id);
  const hi = match != null && match >= 90;
  return (
    <article className="pet-card" style={style} onClick={()=>go('detail',{id:a.id})}>
      <div className="photo">
        {!loaded && !err && <div className="sk" style={{position:'absolute',inset:0}}/>}
        {err
          ? <div style={{position:'absolute',inset:0,display:'grid',placeItems:'center',color:'var(--ink-faint)'}}><SpeciesIcon species={a.species} style={{width:48,height:48,opacity:.4}}/></div>
          : <img src={a.photoUrlSm} alt={a.name} loading="lazy"
                 onLoad={()=>setLoaded(true)} onError={()=>setErr(true)}
                 style={{opacity:loaded?1:0,transition:'opacity .4s'}}/>}
        {match!=null && <span className={'match'+(hi?' hi':'')}><Icons.sparkle style={{width:13,height:13}}/><CountUp to={match}/>%</span>}
        {wait && match==null && <span className="wait-badge"><Icons.clock/>{PF.waitLabel(a.waiting)}</span>}
        <button className={'fav'+(on?' on':'')} title="В избранное"
                onClick={(e)=>{e.stopPropagation();toggleFav(a.id);}}>
          <Icons.heart fill={on?'currentColor':'none'}/>
        </button>
        <span className="species-tag"><SpeciesIcon species={a.species} style={{width:14,height:14}}/>{PF.speciesOne(a.species)}</span>
      </div>
      <div className="body">
        <div className="name">{a.name} <SexMark sex={a.sex}/></div>
        <div className="meta">
          <span className="mi"><Icons.cake/>{a.ageText}</span>
          <span className="mi"><Icons.ruler/>{PF.sizeLabel(a.size)}</span>
          <span className="mi"><span style={{width:11,height:11,borderRadius:'50%',background:colorBg(a.color),display:'inline-block',border:'1px solid rgba(0,0,0,.12)'}}/>{PF.colorLabel(a.color)}</span>
        </div>
        <div className="loc"><Icons.pin/>{a.loc.split(',')[0]}</div>
      </div>
    </article>
  );
}
function colorBg(id){ const c=PF.COLORS.find(x=>x.id===id); return c?c.hex:'#ccc'; }

/* ---- Skeleton card ---- */
function SkeletonCard(){
  return (
    <div className="sk-card">
      <div className="sk" style={{aspectRatio:'1/1'}}/>
      <div style={{padding:'14px 15px 16px',display:'flex',flexDirection:'column',gap:9}}>
        <div className="sk" style={{height:18,width:'55%'}}/>
        <div className="sk" style={{height:13,width:'85%'}}/>
        <div className="sk" style={{height:12,width:'45%'}}/>
      </div>
    </div>
  );
}
const SkeletonGrid = ({ n=8 }) => (
  <div className="pet-grid">{Array.from({length:n}).map((_,i)=><SkeletonCard key={i}/>)}</div>
);

/* ---- Empty / error ---- */
function EmptyState({ icon, title, text, action }){
  const I = icon || Icons.search;
  return (
    <div className="empty page">
      <div className="ico"><I/></div>
      <h3>{title}</h3>
      <p>{text}</p>
      {action}
    </div>
  );
}

/* ---- Header (desktop nav) ---- */
function Header(){
  const { route, go } = useNav();
  const is = (n)=> route.name===n ? 'active':'';
  return (
    <header className="header">
      <div className="wrap header-in">
        <Brand onClick={()=>go('home')}/>
        <nav className="nav hide-mobile">
          <a className={is('catalog')} onClick={()=>go('catalog')}>Все животные</a>
          <a className={is('photo')} onClick={()=>go('photo')}>Поиск по фото</a>
          <a className={is('filter')} onClick={()=>go('filter')}>Подбор</a>
          <a className={is('second')} onClick={()=>go('second')}>Второй шанс</a>
          <a className={is('about')} onClick={()=>go('about')}>О проекте</a>
        </nav>
        <div className="header-cta">
          <button className="btn btn-primary btn-sm hide-mobile" onClick={()=>go('photo')}>
            <Icons.camera/>Поиск по фото
          </button>
          <button className="iconbtn hide-desktop" onClick={()=>go('photo')} title="Поиск по фото"><Icons.camera/></button>
        </div>
      </div>
    </header>
  );
}

/* ---- Bottom nav (mobile) ---- */
function BottomNav(){
  const { route, go } = useNav();
  const items = [
    { n:'home', label:'Главная', Ico:Icons.home },
    { n:'photo', label:'По фото', Ico:Icons.camera },
    { n:'filter', label:'Подбор', Ico:Icons.tune },
    { n:'second', label:'Шанс', Ico:Icons.heart },
    { n:'catalog', label:'Каталог', Ico:Icons.grid },
  ];
  return (
    <nav className="botnav">
      {items.map(it=>(
        <button key={it.n} className={route.name===it.n?'active':''} onClick={()=>go(it.n)}>
          <it.Ico/>{it.label}
        </button>
      ))}
    </nav>
  );
}

/* ---- Footer ---- */
function Footer(){
  const { go } = useNav();
  return (
    <footer className="footer">
      <div className="wrap">
        <div className="footer-grid">
          <div className="fcol-brand">
            <Brand light slogan/>
            <p className="fnote" style={{marginTop:16}}>
              Некоммерческий проект, который помогает животным из приютов и передержек обрести дом. Мы не берём плату — просто соединяем сердца.
            </p>
            <div className="row" style={{marginTop:18,gap:8}}>
              <span className="tag" style={{background:'rgba(95,214,200,.15)',color:'#5fd6c8'}}><Icons.shield style={{width:14,height:14}}/>Проверенные кураторы</span>
            </div>
          </div>
          <div>
            <h4>Навигация</h4>
            <a onClick={()=>go('catalog')}>Все животные</a>
            <a onClick={()=>go('photo')}>Поиск по фото</a>
            <a onClick={()=>go('filter')}>Подбор друга</a>
            <a onClick={()=>go('second')}>Второй шанс</a>
            <a onClick={()=>go('about')}>О проекте</a>
          </div>
          <div>
            <h4>Контакты</h4>
            <p>+7 495 120-55-30</p>
            <p>privet@vtoraya-zhizn.ru</p>
            <p>Москва, ежедневно 10–20</p>
            <a onClick={()=>go('admin')} style={{opacity:.7}}>Вход для кураторов</a>
          </div>
        </div>
        <div className="footer-bottom">
          <span>© 2026 Подари вторую жизнь. Сделано с заботой 🐾</span>
          <span>Все животные привиты и обработаны</span>
        </div>
      </div>
    </footer>
  );
}

/* ---- small bits ---- */
const Stat = ({ value, label }) => (
  <div className="s"><b>{value}</b><span>{label}</span></div>
);

Object.assign(window, {
  NavCtx, useNav, Brand, SpeciesIcon, SexMark, AnimalCard, colorBg, CountUp,
  SkeletonCard, SkeletonGrid, EmptyState, Header, BottomNav, Footer, Stat,
});