/* ===== Подари вторую жизнь — Photo search (AI) ===== */
const DEMOS = [
  { key:'ginger', label:'Рыжий кот', photo:'1513245543132-31f507417b26', profile:{species:'cat',color:'ginger',size:'medium'} },
  { key:'grey',   label:'Серая кошка', photo:'1535268647677-300dbf3d78d1', profile:{species:'cat',color:'grey',size:'medium'} },
  { key:'shep',   label:'Овчарка',   photo:'1587300003388-59208cc962cb', profile:{species:'dog',color:'brown',size:'large'} },
  { key:'pup',    label:'Белый щенок', photo:'1534361960057-19889db9621e', profile:{species:'dog',color:'white',size:'small'} },
];
const COLOR_FAMILY = { ginger:'warm', brown:'warm', white:'light', grey:'cool', black:'dark', tabby:'warm', tricolor:'warm' };

function strHash(s){ let h=0; for(let i=0;i<s.length;i++){ h=(h*31+s.charCodeAt(i))|0; } return Math.abs(h); }
function scoreAnimal(a, q){
  let s = 54;
  if(a.species===q.species) s+=22; else s-=20;
  if(a.color===q.color) s+=15;
  else if(COLOR_FAMILY[a.color]===COLOR_FAMILY[q.color]) s+=6;
  if(a.size===q.size) s+=8; else s+=2;
  s += (strHash(a.id+q.species)%7) - 3;
  return Math.max(38, Math.min(98, Math.round(s)));
}

const SCAN_STEPS = [
  { t:'Загружаем изображение…', p:14 },
  { t:'Определяем вид животного…', p:34 },
  { t:'Анализируем окрас и узор…', p:56 },
  { t:'Оцениваем размер и черты морды…', p:78 },
  { t:'Сравниваем с базой подопечных…', p:96 },
  { t:'Готово!', p:100 },
];

function PhotoSearchScreen(){
  const [phase, setPhase] = useState('idle'); // idle | ready | scanning | results | error
  const [src, setSrc] = useState(null);
  const [profile, setProfile] = useState(null);
  const [drag, setDrag] = useState(false);
  const [progress, setProgress] = useState(0);
  const [stepIdx, setStepIdx] = useState(0);
  const [showFeat, setShowFeat] = useState(0);
  const fileRef = useRef(null);
  const topRef = useRef(null);

  const pickDemo = (d)=>{ setSrc(PF.U(d.photo,800)); setProfile(d.profile); setPhase('ready'); };

  const onFile = (file)=>{
    if(!file){ return; }
    if(!file.type.startsWith('image/')){ setPhase('error'); return; }
    const r = new FileReader();
    r.onload = e=>{ setSrc(e.target.result); setProfile(DEMOS[strHash(file.name||'x')%DEMOS.length].profile); setPhase('ready'); };
    r.onerror = ()=> setPhase('error');
    r.readAsDataURL(file);
  };

  const startScan = ()=>{
    setPhase('scanning'); setProgress(0); setStepIdx(0); setShowFeat(0);
    let i=0;
    const featT = [500,1050,1600,2150].map((d,k)=> setTimeout(()=>setShowFeat(k+1), d));
    const tick = ()=>{
      setStepIdx(i); setProgress(SCAN_STEPS[i].p);
      i++;
      if(i<SCAN_STEPS.length){ setTimeout(tick, i===1?500:560); }
      else { setTimeout(()=>setPhase('results'), 450); }
    };
    setTimeout(tick, 350);
    return ()=> featT.forEach(clearTimeout);
  };

  const reset = ()=>{ setPhase('idle'); setSrc(null); setProfile(null); setProgress(0); };

  const results = useMemo(()=>{
    if(!profile) return [];
    return PF.animals.map(a=>({a, m:scoreAnimal(a,profile)})).sort((x,y)=>y.m-x.m);
  },[profile]);

  const featLabels = profile ? [
    { ico:Icons.cat, txt: profile.species==='cat'?'Кошка':'Собака' },
    { ico:Icons.image, txt: PF.colorLabel(profile.color) },
    { ico:Icons.ruler, txt: PF.sizeLabel(profile.size) },
  ] : [];

  return (
    <div className="page wrap section" style={{paddingTop:32}} ref={topRef}>
      <div className="center" style={{marginBottom:30,maxWidth:640,marginInline:'auto'}}>
        <span className="eyebrow"><span className="dot"/>Умный поиск по фотографии</span>
        <h2 style={{fontSize:'clamp(28px,4vw,42px)',margin:'16px 0 10px'}}>Найдём похожего на фото</h2>
        <p className="muted" style={{fontSize:17}}>Загрузите снимок питомца — например, того, кого вы ищете, — и мы подберём максимально похожих животных из базы по окрасу, размеру и чертам.</p>
      </div>

      {/* IDLE — upload */}
      {phase==='idle' &&
        <div className="page" style={{maxWidth:680,margin:'0 auto'}}>
          <label
            onDragOver={e=>{e.preventDefault();setDrag(true);}}
            onDragLeave={()=>setDrag(false)}
            onDrop={e=>{e.preventDefault();setDrag(false);onFile(e.dataTransfer.files[0]);}}
            style={{
              display:'block',cursor:'pointer',textAlign:'center',
              border:`2.5px dashed ${drag?'var(--primary)':'var(--line-strong)'}`,
              background: drag?'var(--primary-50)':'var(--surface)',
              borderRadius:'calc(var(--radius) + 4px)',padding:'clamp(34px,6vw,64px) 28px',
              transition:'.18s'
            }}>
            <input ref={fileRef} type="file" accept="image/*" hidden onChange={e=>onFile(e.target.files[0])}/>
            <div style={{width:84,height:84,borderRadius:26,background:'var(--primary-50)',color:'var(--primary)',display:'grid',placeItems:'center',margin:'0 auto 18px',transform:drag?'scale(1.06)':'none',transition:'.18s'}}>
              <Icons.upload style={{width:40,height:40}}/>
            </div>
            <div style={{fontFamily:'var(--font-display)',fontWeight:900,fontSize:21,marginBottom:6}}>{drag?'Отпустите фото здесь':'Перетащите фото сюда'}</div>
            <p className="muted" style={{marginBottom:20}}>или нажмите, чтобы выбрать файл · JPG, PNG до 10 МБ</p>
            <span className="btn btn-primary"><Icons.camera/>Выбрать фото</span>
          </label>

          <div style={{display:'flex',alignItems:'center',gap:14,margin:'30px 0 18px',color:'var(--ink-faint)'}}>
            <span style={{flex:1,height:1,background:'var(--line)'}}/>
            <span style={{fontWeight:700,fontSize:13.5}}>или попробуйте на примере</span>
            <span style={{flex:1,height:1,background:'var(--line)'}}/>
          </div>
          <div style={{display:'grid',gridTemplateColumns:'repeat(4,1fr)',gap:12}}>
            {DEMOS.map(d=>(
              <button key={d.key} onClick={()=>pickDemo(d)} style={{padding:0,border:'1px solid var(--line)',borderRadius:'var(--radius-sm)',overflow:'hidden',background:'var(--surface)',cursor:'pointer',boxShadow:'var(--shadow-sm)',position:'relative'}}>
                <div style={{aspectRatio:'1/1',overflow:'hidden'}}><img src={PF.U(d.photo,300)} alt={d.label} style={{width:'100%',height:'100%',objectFit:'cover'}}/></div>
                <div style={{padding:'8px 6px',fontFamily:'var(--font-display)',fontWeight:800,fontSize:12.5}}>{d.label}</div>
              </button>
            ))}
          </div>
        </div>}

      {/* ERROR */}
      {phase==='error' &&
        <div style={{maxWidth:560,margin:'0 auto'}}>
          <EmptyState icon={Icons.image} title="Не удалось загрузить фото"
            text="Кажется, это не изображение или файл повреждён. Поддерживаются JPG и PNG. Попробуйте другой снимок."
            action={<button className="btn btn-primary" onClick={reset}><Icons.upload/>Выбрать другое фото</button>}/>
        </div>}

      {/* READY + SCANNING */}
      {(phase==='ready'||phase==='scanning') &&
        <div className="page" style={{maxWidth:520,margin:'0 auto',textAlign:'center'}}>
          <div style={{position:'relative',borderRadius:'calc(var(--radius) + 4px)',overflow:'hidden',boxShadow:'var(--shadow-lg)',border:'5px solid #fff',aspectRatio:'4/3',background:'var(--bg-warm)'}}>
            <img src={src} alt="ваше фото" style={{width:'100%',height:'100%',objectFit:'cover'}}/>
            {phase==='scanning' && <ScanOverlay showFeat={showFeat}/>}
            {/* scan frame brackets */}
            {phase==='scanning' && <ScanBrackets/>}
          </div>

          {phase==='ready' &&
            <div style={{marginTop:22,display:'flex',gap:12,justifyContent:'center',flexWrap:'wrap'}}>
              <button className="btn btn-ghost" onClick={reset}><Icons.refresh/>Другое фото</button>
              <button className="btn btn-primary btn-lg" onClick={startScan}><Icons.sparkle/>Найти похожего</button>
            </div>}

          {phase==='scanning' &&
            <div style={{marginTop:24}}>
              <div style={{height:8,background:'var(--bg-warm)',borderRadius:99,overflow:'hidden'}}>
                <div style={{height:'100%',width:progress+'%',background:'linear-gradient(90deg,var(--primary),var(--accent))',borderRadius:99,transition:'width .5s cubic-bezier(.4,0,.2,1)'}}/>
              </div>
              <div className="row" style={{justifyContent:'center',gap:9,marginTop:14,color:'var(--primary-700)',fontFamily:'var(--font-display)',fontWeight:800}}>
                <span className="scan-spin" style={{display:'inline-flex'}}><Icons.scan style={{width:18,height:18}}/></span>
                {SCAN_STEPS[stepIdx].t}
              </div>
            </div>}
        </div>}

      {/* RESULTS */}
      {phase==='results' &&
        <div className="page">
          <div style={{background:'var(--surface)',border:'1px solid var(--line)',borderRadius:'var(--radius)',padding:'18px 20px',display:'flex',gap:18,alignItems:'center',boxShadow:'var(--shadow-sm)',maxWidth:760,margin:'0 auto 30px',flexWrap:'wrap'}}>
            <div style={{width:64,height:64,borderRadius:16,overflow:'hidden',flex:'none',border:'2px solid var(--primary-100)'}}>
              <img src={src} alt="" style={{width:'100%',height:'100%',objectFit:'cover'}}/>
            </div>
            <div style={{flex:'1 1 220px',textAlign:'left'}}>
              <div style={{fontFamily:'var(--font-display)',fontWeight:900,fontSize:17,marginBottom:8}}><Icons.checkCircle style={{width:18,height:18,verticalAlign:-4,color:'var(--primary)',marginRight:6}}/>Распознали на вашем фото</div>
              <div className="chips">
                {featLabels.map((f,i)=><span key={i} className="tag"><f.ico style={{width:14,height:14}}/>{f.txt}</span>)}
              </div>
            </div>
            <button className="btn btn-ghost btn-sm" onClick={reset}><Icons.refresh/>Новый поиск</button>
          </div>
          <div className="sec-head"><div><h2 style={{fontSize:26}}>Похожие подопечные</h2><p>Отсортированы по совпадению с вашим фото</p></div></div>
          <div className="pet-grid stagger">
            {results.map(({a,m},i)=><AnimalCard key={a.id} a={a} match={m} style={{animationDelay:Math.min(i,8)*45+'ms'}}/>)}
          </div>
        </div>}
    </div>
  );
}

function ScanOverlay({ showFeat }){
  const regions = [
    { x:44, y:30, w:32, h:28, label:'морда' },
    { x:38, y:6,  w:46, h:22, label:'уши' },
    { x:26, y:54, w:54, h:30, label:'окрас' },
    { x:20, y:72, w:64, h:24, label:'телосложение' },
  ];
  return (
    <>
      <div style={{position:'absolute',inset:0,background:'linear-gradient(180deg,rgba(13,148,136,.04),rgba(13,148,136,.16))'}}/>
      <div className="scan-line"/>
      {regions.map((r,i)=> i<showFeat &&
        <React.Fragment key={i}>
          <span className="scan-box" style={{left:r.x+'%',top:r.y+'%',width:r.w+'%',height:r.h+'%'}}/>
          <div className="scan-dot" style={{left:(r.x+r.w/2)+'%',top:(r.y+r.h/2)+'%'}}>
            <span className="scan-dot-core"/>
            <span className="scan-dot-label">{r.label}</span>
          </div>
        </React.Fragment>
      )}
    </>
  );
}
const ScanBrackets = () => (
  <>
    {[['0','0','tl'],['0','100%','tr'],['100%','0','bl'],['100%','100%','br']].map((c,i)=>(
      <span key={i} style={{position:'absolute',[c[0]==='0'?'top':'bottom']:14,[c[1]==='0'?'left':'right']:14,width:26,height:26,
        borderTop: c[0]==='0'?'3px solid rgba(255,255,255,.9)':'none', borderBottom:c[0]!=='0'?'3px solid rgba(255,255,255,.9)':'none',
        borderLeft:c[1]==='0'?'3px solid rgba(255,255,255,.9)':'none', borderRight:c[1]!=='0'?'3px solid rgba(255,255,255,.9)':'none',
        borderTopLeftRadius:c[0]==='0'&&c[1]==='0'?8:0,borderTopRightRadius:c[0]==='0'&&c[1]!=='0'?8:0,
        borderBottomLeftRadius:c[0]!=='0'&&c[1]==='0'?8:0,borderBottomRightRadius:c[0]!=='0'&&c[1]!=='0'?8:0}}/>
    ))}
  </>
);

window.PhotoSearchScreen = PhotoSearchScreen;