/* ===== Подари вторую жизнь — Catalog + Filter (подбор) ===== */
const emptyFilter = () => ({ species:'all', sizes:[], ages:[], sexes:[], colors:[], breed:'' });

function filterMatch(a, f){
  if(f.species!=='all' && a.species!==f.species) return false;
  if(f.sizes.length && !f.sizes.includes(a.size)) return false;
  if(f.ages.length && !f.ages.includes(a.ageGroup)) return false;
  if(f.sexes.length && !f.sexes.includes(a.sex)) return false;
  if(f.colors.length && !f.colors.includes(a.color)) return false;
  if(f.breed && a.breed!==f.breed) return false;
  return true;
}
const toggleIn = (arr, v) => arr.includes(v) ? arr.filter(x=>x!==v) : [...arr, v];

/* ---- reusable filter controls ---- */
function FilterControls({ f, setF }){
  const breeds = useMemo(()=>{
    const set = PF.animals.filter(a=> f.species==='all'||a.species===f.species).map(a=>a.breed);
    return [...new Set(set)].sort();
  },[f.species]);
  const Field = ({label, children}) => (
    <div style={{display:'flex',flexDirection:'column',gap:11}}>
      <div style={{fontFamily:'var(--font-display)',fontWeight:800,fontSize:14.5,color:'var(--ink)'}}>{label}</div>
      {children}
    </div>
  );
  return (
    <div style={{display:'flex',flexDirection:'column',gap:22}}>
      <Field label="Вид">
        <div className="seg" style={{alignSelf:'flex-start'}}>
          <button className={f.species==='all'?'on':''} onClick={()=>setF({...f,species:'all',breed:''})}>Все</button>
          <button className={f.species==='cat'?'on':''} onClick={()=>setF({...f,species:'cat',breed:''})}><Icons.cat/>Кошки</button>
          <button className={f.species==='dog'?'on':''} onClick={()=>setF({...f,species:'dog',breed:''})}><Icons.dog/>Собаки</button>
        </div>
      </Field>
      <Field label="Размер">
        <div className="chips">
          {PF.SIZES.map(s=>(
            <button key={s.id} className={'chip'+(f.sizes.includes(s.id)?' on':'')} onClick={()=>setF({...f,sizes:toggleIn(f.sizes,s.id)})}>
              {s.label}<span style={{opacity:.6,fontWeight:600,fontSize:12}}>{s.hint}</span>
            </button>
          ))}
        </div>
      </Field>
      <Field label="Возраст">
        <div className="chips">
          {PF.AGES.map(s=>(
            <button key={s.id} className={'chip'+(f.ages.includes(s.id)?' on':'')} onClick={()=>setF({...f,ages:toggleIn(f.ages,s.id)})}>
              {s.label}<span style={{opacity:.6,fontWeight:600,fontSize:12}}>{s.hint}</span>
            </button>
          ))}
        </div>
      </Field>
      <Field label="Пол">
        <div className="chips">
          {PF.SEX.map(s=>(
            <button key={s.id} className={'chip'+(f.sexes.includes(s.id)?' on':'')} onClick={()=>setF({...f,sexes:toggleIn(f.sexes,s.id)})}>
              {s.id==='male'?<Icons.male/>:<Icons.female/>}{s.label}
            </button>
          ))}
        </div>
      </Field>
      <Field label="Окрас">
        <div className="chips">
          {PF.COLORS.map(c=>(
            <button key={c.id} className={'chip'+(f.colors.includes(c.id)?' on':'')} onClick={()=>setF({...f,colors:toggleIn(f.colors,c.id)})}>
              <span style={{width:15,height:15,borderRadius:'50%',background:c.hex,border:'1px solid rgba(0,0,0,.15)',display:'inline-block'}}/>{c.label}
            </button>
          ))}
        </div>
      </Field>
      <Field label="Порода">
        <select value={f.breed} onChange={e=>setF({...f,breed:e.target.value})}
          style={{appearance:'none',background:'var(--surface) url(\'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="%235d6b68" stroke-width="2" stroke-linecap="round"><path d="M5 8l5 5 5-5"/></svg>\') no-repeat right 14px center',
          border:'1px solid var(--line)',borderRadius:'var(--radius-sm)',padding:'13px 40px 13px 15px',fontFamily:'var(--font-body)',fontSize:15,fontWeight:600,color:'var(--ink)',cursor:'pointer',width:'100%',maxWidth:340}}>
          <option value="">Любая порода</option>
          {breeds.map(b=><option key={b} value={b}>{b}</option>)}
        </select>
      </Field>
    </div>
  );
}

/* ---- Results grid with "показать ещё" ---- */
function ResultsGrid({ list, loading, page=8, onReset }){
  const [shown, setShown] = useState(page);
  useEffect(()=>{ setShown(page); },[list, page]);
  if(loading) return <SkeletonGrid n={8}/>;
  if(!list.length) return (
    <EmptyState icon={Icons.search} title="Ничего не нашлось"
      text="По этим параметрам пока нет подопечных. Попробуйте убрать часть фильтров — возможно, ваш друг ждёт чуть в стороне."
      action={onReset && <button className="btn btn-soft" onClick={onReset}><Icons.refresh/>Сбросить фильтры</button>}/>
  );
  const vis = list.slice(0, shown);
  return (
    <>
      <div className="pet-grid stagger">
        {vis.map((a,i)=><AnimalCard key={a.id} a={a} style={{animationDelay:Math.min(i,8)*40+'ms'}}/>)}
      </div>
      {shown < list.length &&
        <div className="center" style={{marginTop:30}}>
          <button className="btn btn-ghost btn-lg" onClick={()=>setShown(s=>s+page)}>
            Показать ещё <span style={{opacity:.6}}>· осталось {list.length-shown}</span>
          </button>
        </div>}
    </>
  );
}

/* ---- Catalog screen ---- */
function CatalogScreen(){
  const { route } = useNav();
  const [f, setF] = useState(()=> ({...emptyFilter(), species: route.params?.species || 'all'}));
  const [loading, setLoading] = useState(true);
  const [openF, setOpenF] = useState(false);
  useEffect(()=>{ const t=setTimeout(()=>setLoading(false),700); return ()=>clearTimeout(t); },[]);
  const list = useMemo(()=> PF.animals.filter(a=>filterMatch(a,f)), [f]);
  const active = f.sizes.length+f.ages.length+f.sexes.length+f.colors.length+(f.breed?1:0)+(f.species!=='all'?1:0);

  return (
    <div className="page wrap section" style={{paddingTop:32}}>
      <div className="sec-head">
        <div>
          <h2>Все животные</h2>
          <p>{loading?'Загружаем подопечных…':`Найдено ${list.length} ${plural(list.length,'друг','друга','друзей')}, готовых обрести дом`}</p>
        </div>
      </div>
      <div className="catalog-layout" style={{display:'grid',gridTemplateColumns:'278px 1fr',gap:34,alignItems:'start'}}>
        <aside className="filter-aside" style={{position:'sticky',top:'calc(var(--header-h) + 18px)'}}>
          <div style={{background:'var(--surface)',border:'1px solid var(--line)',borderRadius:'var(--radius)',padding:'22px 20px',boxShadow:'var(--shadow-sm)'}}>
            <div className="spread" style={{marginBottom:18}}>
              <span style={{fontFamily:'var(--font-display)',fontWeight:900,fontSize:18}}><Icons.tune style={{width:18,height:18,verticalAlign:-3,marginRight:7,color:'var(--primary)'}}/>Фильтры</span>
              {active>0 && <button onClick={()=>setF(emptyFilter())} style={{background:'none',border:'none',color:'var(--primary-700)',fontFamily:'var(--font-display)',fontWeight:800,fontSize:13.5}}>Сбросить</button>}
            </div>
            <FilterControls f={f} setF={setF}/>
          </div>
        </aside>
        <div>
          <button className="btn btn-ghost filter-toggle" onClick={()=>setOpenF(true)} style={{display:'none',marginBottom:18,width:'100%'}}>
            <Icons.tune/>Фильтры {active>0 && <span className="tag" style={{padding:'2px 9px'}}>{active}</span>}
          </button>
          <ResultsGrid list={list} loading={loading} onReset={()=>setF(emptyFilter())}/>
        </div>
      </div>
      {openF && <FilterSheet f={f} setF={setF} onClose={()=>setOpenF(false)} count={list.length}/>}
    </div>
  );
}

/* ---- Filter (Подбор) screen — centered guided form ---- */
/* ---- Подбор друга — пошаговый квиз ---- */
const QUIZ = [
  { key:'species', title:'Кого вы ищете?', sub:'С кем вам будет уютнее всего', cols:3,
    opts:[
      {id:'cat',  label:'Кошку',  Ico:Icons.cat, hint:'мягкая и независимая'},
      {id:'dog',  label:'Собаку', Ico:Icons.dog, hint:'верный компаньон'},
      {id:'all',  label:'Любого', Ico:Icons.pawHeart, hint:'покажите всех'},
    ]},
  { key:'size', title:'Какого размера друг?', sub:'Подумайте о своём доме и ритме жизни', cols:2,
    opts:[
      {id:'small',  label:'Небольшой', Ico:Icons.pawHeart, sc:0.7, hint:'до 5 кг'},
      {id:'medium', label:'Средний',   Ico:Icons.pawHeart, sc:0.9, hint:'5–15 кг'},
      {id:'large',  label:'Крупный',   Ico:Icons.pawHeart, sc:1.1, hint:'от 15 кг'},
      {id:'any',    label:'Неважно',   Ico:Icons.check, hint:'любой размер'},
    ]},
  { key:'age', title:'Какой возраст ближе?', sub:'У каждого возраста своё очарование', cols:2,
    opts:[
      {id:'baby',   label:'Малыш',     Ico:Icons.cake, hint:'до 1 года'},
      {id:'young',  label:'Молодой',   Ico:Icons.cake, hint:'1–3 года'},
      {id:'adult',  label:'Взрослый',  Ico:Icons.cake, hint:'3–7 лет'},
      {id:'senior', label:'Постарше',  Ico:Icons.heart, hint:'от 7 лет · подарите второй шанс'},
    ]},
  { key:'sex', title:'Пол имеет значение?', sub:'Можно довериться сердцу и выбрать «неважно»', cols:3,
    opts:[
      {id:'male',   label:'Мальчик', Ico:Icons.male},
      {id:'female', label:'Девочка', Ico:Icons.female},
      {id:'any',    label:'Неважно', Ico:Icons.pawHeart},
    ]},
];

function answersToFilter(ans){
  return {
    species: ans.species && ans.species!=='all' ? ans.species : 'all',
    sizes: ans.size && ans.size!=='any' ? [ans.size] : [],
    ages: ans.age && ans.age!=='any' ? [ans.age] : [],
    sexes: ans.sex && ans.sex!=='any' ? [ans.sex] : [],
    colors:[], breed:'',
  };
}

/* гибрид-поиск: разбор свободного описания на фасеты */
function parseDescription(text){
  const s = (text||'').toLowerCase();
  const f = { species:'all', sizes:[], ages:[], sexes:[], colors:[], breed:'' };
  const chips = [];
  const add = (l)=>{ if(!chips.includes(l)) chips.push(l); };
  if(/(кош|кот|кис|котён|котен)/.test(s)){ f.species='cat'; add('Кошка'); }
  else if(/(собак|пёс|пес|щен|псин|пёсик)/.test(s)){ f.species='dog'; add('Собака'); }
  if(/(маленьк|мелк|небольш|компактн|крошк|малютк)/.test(s)){ f.sizes.push('small'); add('Небольшой'); }
  if(/(средн)/.test(s)){ f.sizes.push('medium'); add('Средний'); }
  if(/(больш|крупн|огромн)/.test(s)){ f.sizes.push('large'); add('Крупный'); }
  if(/(котён|котен|щен|младен|новорож|до года|кроха)/.test(s)){ f.ages.push('baby'); add('Малыш'); }
  if(/(молод|подрост|юн)/.test(s)){ f.ages.push('young'); add('Молодой'); }
  if(/(взросл)/.test(s)){ f.ages.push('adult'); add('Взрослый'); }
  if(/(пожил|в возрасте|старш|седой|второй шанс)/.test(s)){ f.ages.push('senior'); add('Постарше'); }
  if(/(мальчик|кобел|самец)/.test(s)){ f.sexes.push('male'); add('Мальчик'); }
  if(/(девочк|кошечк|сучк|самк)/.test(s)){ f.sexes.push('female'); add('Девочка'); }
  [['чёрн|черн','black','Чёрный'],['бел','white','Белый'],['сер|дымч','grey','Серый'],
   ['рыж|оранж|апельсин','ginger','Рыжий'],['коричн|шоколад|бур','brown','Коричневый'],
   ['трёхцв|трехцв|черепах','tricolor','Трёхцветный'],['полос|табби|тигр','tabby','Полосатый']]
    .forEach(([re,id,lab])=>{ if(new RegExp(re).test(s)){ f.colors.push(id); add(lab); } });
  return { filter:f, chips };
}

const DESC_EXAMPLES = ['молодая рыжая кошка','небольшой спокойный пёс','чёрный котёнок','крупная собака-мальчик','пожилой кот'];

function FilterScreen(){
  const { go } = useNav();
  const [mode, setMode] = useState('quiz');     // quiz | text
  const [step, setStep] = useState(0);
  const [ans, setAns] = useState({});
  const [desc, setDesc] = useState('');
  const [phase, setPhase] = useState('quiz');   // quiz | loading | result
  const [resultFilter, setResultFilter] = useState(null);
  const [chips, setChips] = useState([]);
  const total = QUIZ.length;
  const q = QUIZ[step];

  const list = useMemo(()=> resultFilter ? PF.animals.filter(a=>filterMatch(a,resultFilter)) : [], [resultFilter]);

  const toResult = (filter, labelChips)=>{
    setResultFilter(filter); setChips(labelChips);
    setPhase('loading');
    setTimeout(()=>{ setPhase('result'); window.scrollTo({top:0,behavior:'instant'in document.body.style?'instant':'auto'}); }, 950);
  };
  const choose = (optId)=>{
    const nextAns = { ...ans, [q.key]: optId };
    setAns(nextAns);
    setTimeout(()=>{
      if(step < total-1) setStep(step+1);
      else {
        const labels = QUIZ.map(qq=>{ const o=qq.opts.find(x=>x.id===nextAns[qq.key]); return o&&!['all','any'].includes(o.id)?o.label:null; }).filter(Boolean);
        toResult(answersToFilter(nextAns), labels);
      }
    }, 230);
  };
  const submitText = ()=>{ const { filter, chips:c } = parseDescription(desc); toResult(filter, c); };
  const back = ()=> step>0 ? setStep(step-1) : null;
  const restart = ()=>{ setAns({}); setStep(0); setDesc(''); setResultFilter(null); setPhase('quiz'); window.scrollTo(0,0); };

  // RESULT
  if(phase==='result'){
    return (
      <div className="page wrap section" style={{paddingTop:30}}>
        <div className="center" style={{maxWidth:600,margin:'0 auto 26px'}}>
          <span className="eyebrow"><span className="dot"/>Готово · подобрали для вас</span>
          <h2 style={{fontSize:'clamp(26px,4vw,40px)',margin:'14px 0 12px'}}>{list.length>0?'Кажется, это ваши друзья':'Пока никто не подошёл'}</h2>
          {chips.length>0 && <div className="chips" style={{justifyContent:'center'}}>{chips.map((c,i)=><span key={i} className="tag">{c}</span>)}</div>}
          <div style={{marginTop:18}}><button className="btn btn-ghost" onClick={restart}><Icons.refresh/>Начать заново</button></div>
        </div>
        <ResultsGrid list={list} loading={false} onReset={restart}/>
      </div>
    );
  }

  // LOADING
  if(phase==='loading'){
    return (
      <div className="page wrap section" style={{paddingTop:30}}>
        <div className="quiz-card center" style={{maxWidth:560,margin:'0 auto'}}>
          <span className="scan-spin" style={{display:'inline-flex',color:'var(--primary)',marginBottom:16}}><Icons.pawHeart style={{width:46,height:46}}/></span>
          <h2 style={{fontSize:24,marginBottom:8}}>Подбираем друзей…</h2>
          <p className="muted">Сверяем ваши пожелания с теми, кто ждёт дом</p>
        </div>
      </div>
    );
  }

  // QUIZ / TEXT
  const pct = Math.round((step/total)*100);
  return (
    <div className="page wrap section" style={{paddingTop:30,maxWidth:760}}>
      <div className="center" style={{marginBottom:20}}>
        <span className="eyebrow" style={{background:'var(--primary-50)',color:'var(--primary-700)'}}><Icons.tune style={{width:14,height:14}}/>Подбор друга</span>
        <div className="seg" style={{marginTop:16}}>
          <button className={mode==='quiz'?'on':''} onClick={()=>setMode('quiz')}><Icons.tune/>Пройти квиз</button>
          <button className={mode==='text'?'on':''} onClick={()=>setMode('text')}><Icons.search/>Описать словами</button>
        </div>
      </div>

      {mode==='text'
        ? <div className="quiz-card">
            <div style={{textAlign:'center',marginBottom:18}}>
              <h2 style={{fontSize:'clamp(24px,3.4vw,32px)'}}>Опишите друга мечты</h2>
              <p className="muted" style={{fontSize:16,marginTop:8}}>Своими словами — мы поймём вид, размер, возраст, пол и окрас.</p>
            </div>
            <textarea value={desc} onChange={e=>setDesc(e.target.value)} placeholder="Например: молодая рыжая кошка, ласковая и небольшая…"
              style={{width:'100%',minHeight:110,resize:'vertical',padding:'15px 17px',borderRadius:'var(--radius-sm)',border:'1.5px solid var(--line-strong)',fontSize:16,fontFamily:'var(--font-body)',lineHeight:1.5,background:'var(--surface)'}}/>
            <div className="chips" style={{marginTop:14}}>
              {DESC_EXAMPLES.map(ex=><button key={ex} className="chip" onClick={()=>setDesc(ex)}>{ex}</button>)}
            </div>
            <div className="spread" style={{marginTop:22}}>
              <button className="btn btn-soft btn-sm" onClick={()=>go('catalog')}>Показать всех</button>
              <button className="btn btn-primary btn-lg" onClick={submitText} disabled={!desc.trim()} style={{opacity:desc.trim()?1:.45}}><Icons.search/>Найти друга</button>
            </div>
          </div>
        : <div className="quiz-card">
            <div className="quiz-progress"><div style={{width:pct+'%'}}/></div>
            <div style={{textAlign:'center',margin:'24px 0 6px'}}>
              <div className="muted" style={{fontFamily:'var(--font-display)',fontWeight:800,fontSize:13,marginBottom:8}}>Шаг {step+1} из {total}</div>
              <h2 style={{fontSize:'clamp(24px,3.4vw,34px)'}}>{q.title}</h2>
              {q.sub && <p className="muted" style={{fontSize:16,marginTop:8}}>{q.sub}</p>}
            </div>
            <div className="quiz-opts" style={{'--qcols':q.cols}}>
              {q.opts.map(o=>{
                const on = ans[q.key]===o.id;
                return (
                  <button key={o.id} className={'quiz-opt'+(on?' on':'')} onClick={()=>choose(o.id)}>
                    <span className="qo-ico" style={o.sc?{transform:`scale(${o.sc})`}:null}><o.Ico/></span>
                    <span className="qo-label">{o.label}</span>
                    {o.hint && <span className="qo-hint">{o.hint}</span>}
                  </button>
                );
              })}
            </div>
            <div className="spread" style={{marginTop:24}}>
              <button className="btn btn-ghost btn-sm" onClick={back} disabled={step===0} style={{opacity:step===0?.4:1}}><Icons.arrowLeft/>Назад</button>
              <button className="btn btn-soft btn-sm" onClick={()=>go('catalog')}>Показать всех</button>
            </div>
          </div>}
    </div>
  );
}

/* ---- Mobile filter sheet ---- */
function FilterSheet({ f, setF, onClose, count }){
  return (
    <div onClick={onClose} style={{position:'fixed',inset:0,zIndex:90,background:'rgba(20,30,28,.45)',backdropFilter:'blur(3px)',display:'flex',alignItems:'flex-end'}}>
      <div onClick={e=>e.stopPropagation()} className="page" style={{background:'var(--bg)',width:'100%',maxHeight:'88vh',borderRadius:'26px 26px 0 0',overflow:'auto',padding:'8px 20px 24px'}}>
        <div style={{position:'sticky',top:0,background:'var(--bg)',paddingTop:12,paddingBottom:12,zIndex:2}}>
          <div style={{width:42,height:5,borderRadius:99,background:'var(--line-strong)',margin:'0 auto 14px'}}/>
          <div className="spread"><span style={{fontFamily:'var(--font-display)',fontWeight:900,fontSize:20}}>Фильтры</span>
            <button className="iconbtn" onClick={onClose}><Icons.x/></button></div>
        </div>
        <FilterControls f={f} setF={setF}/>
        <div style={{position:'sticky',bottom:0,background:'var(--bg)',paddingTop:14,paddingBottom:4,marginTop:18,display:'flex',gap:12}}>
          <button className="btn btn-soft" onClick={()=>setF(emptyFilter())}><Icons.refresh/></button>
          <button className="btn btn-primary" style={{flex:1}} onClick={onClose}>Показать {count}</button>
        </div>
      </div>
    </div>
  );
}

function plural(n,one,few,many){
  const m10=n%10, m100=n%100;
  if(m10===1&&m100!==11) return one;
  if(m10>=2&&m10<=4&&!(m100>=12&&m100<=14)) return few;
  return many;
}

Object.assign(window, { CatalogScreen, FilterScreen, FilterControls, ResultsGrid, filterMatch, emptyFilter, plural });
