/* ===== Подари вторую жизнь — Animal detail ===== */
function Gallery({ urls, name }){
  const [i, setI] = useState(0);
  const [loaded, setLoaded] = useState(false);
  useEffect(()=>{ setLoaded(false); },[i]);
  const go = (d)=> setI(p=> (p+d+urls.length)%urls.length);
  return (
    <div>
      <div style={{position:'relative',borderRadius:'var(--radius)',overflow:'hidden',aspectRatio:'4/3',background:'var(--bg-warm)',boxShadow:'var(--shadow)'}}>
        {!loaded && <div className="sk" style={{position:'absolute',inset:0}}/>}
        <img key={i} src={urls[i]} alt={name} onLoad={()=>setLoaded(true)}
          style={{width:'100%',height:'100%',objectFit:'cover',opacity:loaded?1:0,transition:'opacity .35s',animation:'fadeUp .4s'}}/>
        {urls.length>1 && <>
          <button className="iconbtn" onClick={()=>go(-1)} style={{position:'absolute',left:14,top:'50%',transform:'translateY(-50%)'}}><Icons.chevL/></button>
          <button className="iconbtn" onClick={()=>go(1)} style={{position:'absolute',right:14,top:'50%',transform:'translateY(-50%)'}}><Icons.chevR/></button>
          <div style={{position:'absolute',bottom:12,left:'50%',transform:'translateX(-50%)',display:'flex',gap:6}}>
            {urls.map((_,k)=><span key={k} onClick={()=>setI(k)} style={{width:k===i?22:8,height:8,borderRadius:99,background:k===i?'#fff':'rgba(255,255,255,.6)',cursor:'pointer',transition:'.2s'}}/>)}
          </div>
        </>}
      </div>
      {urls.length>1 &&
        <div style={{display:'grid',gridTemplateColumns:`repeat(${urls.length},1fr)`,gap:10,marginTop:12}}>
          {urls.map((u,k)=>(
            <button key={k} onClick={()=>setI(k)} style={{padding:0,border:`2.5px solid ${k===i?'var(--primary)':'transparent'}`,borderRadius:14,overflow:'hidden',aspectRatio:'1/1',cursor:'pointer',opacity:k===i?1:.7,transition:'.18s'}}>
              <img src={u} alt="" style={{width:'100%',height:'100%',objectFit:'cover'}}/>
            </button>
          ))}
        </div>}
    </div>
  );
}

function ParamCard({ ico:Ico, label, value, accent }){
  return (
    <div style={{background:'var(--surface)',border:'1px solid var(--line)',borderRadius:'var(--radius-sm)',padding:'13px 15px',display:'flex',alignItems:'center',gap:12}}>
      <span style={{width:38,height:38,borderRadius:11,background:accent?'var(--accent-50)':'var(--primary-50)',color:accent?'var(--accent-600)':'var(--primary)',display:'grid',placeItems:'center',flex:'none'}}><Ico style={{width:20,height:20}}/></span>
      <div style={{minWidth:0}}>
        <div style={{fontSize:12.5,color:'var(--ink-faint)',fontWeight:700}}>{label}</div>
        <div style={{fontFamily:'var(--font-display)',fontWeight:800,fontSize:15,lineHeight:1.2,wordBreak:'break-word'}}>{value}</div>
      </div>
    </div>
  );
}

function DetailScreen(){
  const { route, go, favs, toggleFav } = useNav();
  const a = PF.byId(route.params?.id);
  const [adopt, setAdopt] = useState(false);
  const [adoptDone, setAdoptDone] = useState(false);
  useEffect(()=>{ setAdopt(false); setAdoptDone(false); window.scrollTo(0,0); },[route.params?.id]);
  if(!a) return <div className="wrap section"><EmptyState title="Питомец не найден" text="Возможно, он уже обрёл дом 🏡" action={<button className="btn btn-primary" onClick={()=>go('catalog')}>Ко всем животным</button>}/></div>;
  const on = favs.includes(a.id);
  const similar = PF.animals.filter(x=>x.id!==a.id && x.species===a.species).slice(0,4);
  const colorObj = PF.COLORS.find(c=>c.id===a.color);

  return (
    <div className="page wrap section" style={{paddingTop:22}}>
      <button onClick={()=>go(route.params?.from||'catalog')} className="btn btn-ghost btn-sm" style={{marginBottom:20}}><Icons.arrowLeft/>Назад</button>
      <div className="detail-grid" style={{display:'grid',gridTemplateColumns:'1.05fr .95fr',gap:'clamp(24px,4vw,48px)',alignItems:'start'}}>
        <div style={{position:'sticky',top:'calc(var(--header-h) + 16px)'}}><Gallery urls={a.galleryUrls} name={a.name}/></div>
        <div>
          <div className="spread" style={{alignItems:'flex-start'}}>
            <div>
              <div className="row" style={{gap:8}}>
                <span className="tag gray"><SpeciesIcon species={a.species} style={{width:14,height:14}}/>{PF.speciesOne(a.species)}</span>
                <span className="tag accent">{a.breed}</span>
              </div>
              <h1 style={{fontSize:'clamp(34px,5vw,52px)',margin:'14px 0 6px',display:'flex',alignItems:'center',gap:12}}>{a.name}
                <span style={{fontSize:'.55em'}}><SexMark sex={a.sex}/></span>
              </h1>
              <div className="muted" style={{fontSize:16,fontWeight:600}}>{PF.sexLabel(a.sex)} · {a.ageText}</div>
            </div>
            <button className={'fav'+(on?' on':'')} onClick={()=>toggleFav(a.id)} style={{position:'static',width:48,height:48,flex:'none'}}>
              <Icons.heart fill={on?'currentColor':'none'} style={{width:24,height:24}}/>
            </button>
          </div>

          <div style={{display:'grid',gridTemplateColumns:'1fr 1fr 1fr',gap:10,margin:'24px 0'}} className="param-grid">
            <ParamCard ico={Icons.cake} label="Возраст" value={a.ageText}/>
            <ParamCard ico={Icons.ruler} label="Размер" value={PF.sizeLabel(a.size)}/>
            <ParamCard ico={Icons.shield} label="Вес" value={PF.weightLabel(a.weight)}/>
            <ParamCard ico={()=> <span style={{width:18,height:18,borderRadius:'50%',background:colorObj?colorObj.hex:'#ccc',display:'inline-block',border:'1px solid rgba(0,0,0,.15)'}}/>} label="Окрас" value={PF.colorLabel(a.color)}/>
            <ParamCard ico={a.sex==='male'?Icons.male:Icons.female} label="Пол" value={PF.sexLabel(a.sex)} accent/>
            <ParamCard ico={a.species==='cat'?Icons.cat:Icons.dog} label="Порода" value={a.breed}/>
          </div>

          <h3 style={{fontSize:19,marginBottom:10}}>О характере</h3>
          <p style={{color:'var(--ink-soft)',fontSize:16.5,lineHeight:1.65,textWrap:'pretty'}}>{a.desc}</p>

          <div style={{display:'flex',flexDirection:'column',gap:10,margin:'22px 0'}}>
            <div style={{background:'var(--surface)',border:'1px solid var(--line)',borderRadius:'var(--radius-sm)',padding:'14px 16px',display:'flex',gap:12,alignItems:'flex-start'}}>
              <span style={{color:'var(--primary)',flex:'none',marginTop:1}}><Icons.shield style={{width:20,height:20}}/></span>
              <div><div style={{fontFamily:'var(--font-display)',fontWeight:800,fontSize:13,color:'var(--primary-700)'}}>Здоровье</div>
                <div style={{fontWeight:600,marginTop:2,color:'var(--ink-soft)'}}>{a.health}</div></div>
            </div>
            {a.needs &&
              <div style={{background:'var(--accent-50)',borderRadius:'var(--radius-sm)',padding:'14px 16px',display:'flex',gap:12,alignItems:'flex-start'}}>
                <span style={{color:'var(--accent-600)',flex:'none',marginTop:1}}><Icons.info style={{width:20,height:20}}/></span>
                <div><div style={{fontFamily:'var(--font-display)',fontWeight:800,fontSize:13,color:'var(--accent-600)'}}>Особые потребности</div>
                  <div style={{fontWeight:600,marginTop:2,color:'var(--ink-soft)'}}>{a.needs}</div></div>
              </div>}
          </div>

          <div style={{background:'var(--primary-50)',borderRadius:'var(--radius-sm)',padding:'16px 18px',margin:'24px 0',display:'flex',gap:13,alignItems:'flex-start'}}>
            <span style={{color:'var(--primary)',flex:'none',marginTop:1}}><Icons.pin style={{width:22,height:22}}/></span>
            <div>
              <div style={{fontFamily:'var(--font-display)',fontWeight:800,fontSize:13,color:'var(--primary-700)'}}>Где находится</div>
              <div style={{fontWeight:600,marginTop:2}}>{a.loc}</div>
            </div>
          </div>

          <div style={{background:'var(--surface)',border:'1px solid var(--line)',borderRadius:'var(--radius)',padding:'20px',boxShadow:'var(--shadow-sm)'}}>
            {!adoptDone
              ? <div className="spread" style={{flexWrap:'wrap',gap:16}}>
                  <div style={{maxWidth:'26em'}}>
                    <div style={{fontFamily:'var(--font-display)',fontWeight:900,fontSize:18}}>Хотите забрать {a.sex==='male'?'его':'её'} домой?</div>
                    <p className="muted" style={{fontSize:14.5,marginTop:4}}>Оставьте заявку — пройдём короткую анкету, согласие на обработку данных и договор. После модерации куратор свяжется с вами.</p>
                    <div className="adopt-steps">
                      {['Анкета','Согласие','Чек-лист','Договор'].map((s,i)=>(<span key={i}><b>{i+1}</b>{s}</span>))}
                    </div>
                  </div>
                  <button className="btn btn-primary btn-lg" onClick={()=>setAdopt(true)}><Icons.heartHand/>Оставить заявку</button>
                </div>
              : <div className="page">
                  <div className="row" style={{gap:11,marginBottom:12}}>
                    <span style={{width:46,height:46,borderRadius:13,background:'var(--primary-50)',color:'var(--primary)',display:'grid',placeItems:'center',flex:'none'}}><Icons.checkCircle style={{width:24,height:24}}/></span>
                    <div><div style={{fontFamily:'var(--font-display)',fontWeight:900,fontSize:17}}>Заявка отправлена куратору</div>
                      <div className="muted" style={{fontSize:13.5}}>На модерации — обычно отвечаем в течение дня</div></div>
                  </div>
                  <div style={{background:'var(--surface-2)',border:'1px solid var(--line)',borderRadius:'var(--radius-sm)',padding:'14px 16px'}}>
                    <div style={{fontFamily:'var(--font-display)',fontWeight:800,fontSize:12.5,color:'var(--primary-700)',marginBottom:6}}>Контакт куратора</div>
                    <div className="spread" style={{flexWrap:'wrap',gap:10}}>
                      <div className="row" style={{gap:10}}><span style={{color:'var(--accent-600)'}}><Icons.phone style={{width:20,height:20}}/></span><span style={{fontFamily:'var(--font-display)',fontWeight:800,fontSize:16}}>{a.contact}</span></div>
                      <span className="tag"><Icons.shield style={{width:14,height:14}}/>Проверенный куратор</span>
                    </div>
                  </div>
                </div>}
          </div>
        </div>
      </div>

      {similar.length>0 &&
        <div style={{marginTop:'clamp(44px,6vw,72px)'}}>
          <div className="sec-head"><div><h2 style={{fontSize:26}}>Похожие друзья</h2></div>
            <a className="link hide-mobile" onClick={()=>go('catalog',{species:a.species})}>Все {a.species==='cat'?'кошки':'собаки'}<Icons.arrowRight/></a></div>
          <div className="pet-grid">{similar.map(s=><AnimalCard key={s.id} a={s}/>)}</div>
        </div>}

      {adopt && <AdoptFlow a={a} onClose={()=>setAdopt(false)} onDone={()=>{ setAdopt(false); setAdoptDone(true); }}/>}
    </div>
  );
}
window.DetailScreen = DetailScreen;