/* ===== Подари вторую жизнь — Admin ===== */
function adminReplaceStore(list){ PF.animals.length=0; list.forEach(x=>PF.animals.push(x)); }

function buildAnimal(form){
  const ageMonths = Math.max(1, Number(form.ageMonths)||12);
  const photos = (form.photos && form.photos.length) ? form.photos : [PF.U(form.species==='cat'?'1518791841217-8f162f1e1131':'1543466835-00a7907e9de1',800)];
  const waiting = Math.max(0, Number(form.waiting)||0);
  return {
    id: form.id || ('pet-'+Date.now().toString(36)),
    name: form.name?.trim()||'Без клички', species:form.species, breed:form.breed?.trim()||'Метис',
    color:form.color, size:form.size, sex:form.sex, ageMonths,
    weight: Math.max(0.1, Number(form.weight)||5),
    health: form.health?.trim()||'Привит, обработан от паразитов',
    needs: form.needs?.trim() || null,
    waiting,
    second: waiting >= 12 || PF.ageGroup(ageMonths)==='senior',
    loc: form.loc?.trim()||'Передержка, Москва', contact: form.contact?.trim()||'+7 000 000-00-00',
    desc: form.desc?.trim()||'Описание появится позже.',
    ageText: PF.ageLabel(ageMonths), ageGroup: PF.ageGroup(ageMonths),
    photoUrl: photos[0], photoUrlSm: photos[0], galleryUrls: photos, gallery: photos, photo:null,
  };
}

function AdminScreen(){
  const { go } = useNav();
  const [authed, setAuthed] = useState(()=> sessionStorage.getItem('pf_admin')==='1');
  const [pass, setPass] = useState(''); const [err, setErr] = useState(false);
  const [, force] = useState(0);
  const [view, setView] = useState('list'); // list | form
  const [editing, setEditing] = useState(null);
  const [toast, setToast] = useState(null);
  const list = PF.animals;

  const login = (e)=>{ e.preventDefault(); if(pass===PF.ADMIN_PASS){ sessionStorage.setItem('pf_admin','1'); setAuthed(true);} else { setErr(true);} };
  const logout = ()=>{ sessionStorage.removeItem('pf_admin'); setAuthed(false); setPass(''); };
  const notify = (m)=>{ setToast(m); setTimeout(()=>setToast(null),2400); };

  const onSave = (form)=>{
    const built = buildAnimal(form);
    if(form.id){ const i=list.findIndex(x=>x.id===form.id); if(i>=0) list[i]=built; notify('Изменения сохранены'); }
    else { list.unshift(built); notify('Питомец добавлен'); }
    setView('list'); setEditing(null); force(n=>n+1);
  };
  const onDelete = (id)=>{
    const i=list.findIndex(x=>x.id===id); if(i>=0) list.splice(i,1);
    notify('Питомец удалён'); force(n=>n+1);
  };

  if(!authed){
    return (
      <div className="page wrap section" style={{maxWidth:430,paddingTop:60}}>
        <div style={{background:'var(--surface)',border:'1px solid var(--line)',borderRadius:'var(--radius)',padding:'34px 30px',boxShadow:'var(--shadow)',textAlign:'center'}}>
          <div style={{width:72,height:72,borderRadius:20,background:'var(--primary-50)',color:'var(--primary)',display:'grid',placeItems:'center',margin:'0 auto 18px'}}><Icons.lock style={{width:34,height:34}}/></div>
          <h2 style={{fontSize:25}}>Вход для кураторов</h2>
          <p className="muted" style={{margin:'8px 0 22px',fontSize:15}}>Раздел доступен по паролю. Подсказка для демо — <b style={{color:'var(--primary-700)'}}>lapka</b></p>
          <form onSubmit={login}>
            <input type="password" value={pass} autoFocus placeholder="Пароль"
              onChange={e=>{setPass(e.target.value);setErr(false);}}
              style={{width:'100%',padding:'14px 16px',borderRadius:'var(--radius-sm)',border:`1.5px solid ${err?'#e0a0a0':'var(--line-strong)'}`,fontSize:16,fontFamily:'var(--font-body)',textAlign:'center',marginBottom:err?8:18}}/>
            {err && <div style={{color:'#c0392b',fontSize:13.5,fontWeight:600,marginBottom:14}}>Неверный пароль, попробуйте ещё раз</div>}
            <button className="btn btn-primary btn-block btn-lg" type="submit"><Icons.lock style={{width:18,height:18}}/>Войти</button>
          </form>
          <button className="btn btn-ghost btn-sm btn-block" style={{marginTop:10}} onClick={()=>go('home')}>На главную</button>
        </div>
      </div>
    );
  }

  if(view==='form') return <AdminForm initial={editing} onSave={onSave} onCancel={()=>{setView('list');setEditing(null);}} toast={toast}/>;

  return (
    <div className="page wrap section" style={{paddingTop:26}}>
      <div className="spread" style={{flexWrap:'wrap',gap:14,marginBottom:24}}>
        <div>
          <span className="tag gray"><Icons.shield style={{width:14,height:14}}/>Админ-панель</span>
          <h2 style={{fontSize:30,marginTop:10}}>Управление животными</h2>
          <p className="muted">{list.length} {plural(list.length,'питомец','питомца','питомцев')} в базе</p>
        </div>
        <div className="row" style={{gap:10}}>
          <button className="btn btn-ghost" onClick={logout}>Выйти</button>
          <button className="btn btn-primary" onClick={()=>{setEditing(null);setView('form');}}><Icons.plus/>Добавить</button>
        </div>
      </div>

      <div style={{display:'flex',flexDirection:'column',gap:10}}>
        {list.map(a=>(
          <div key={a.id} style={{background:'var(--surface)',border:'1px solid var(--line)',borderRadius:'var(--radius-sm)',padding:'12px 14px',display:'flex',gap:14,alignItems:'center',boxShadow:'var(--shadow-sm)'}}>
            <div style={{width:60,height:60,borderRadius:12,overflow:'hidden',flex:'none',background:'var(--bg-warm)'}}><img src={a.photoUrlSm} alt="" style={{width:'100%',height:'100%',objectFit:'cover'}}/></div>
            <div style={{flex:1,minWidth:0}}>
              <div style={{fontFamily:'var(--font-display)',fontWeight:900,fontSize:17}}>{a.name} <SexMark sex={a.sex}/></div>
              <div className="muted" style={{fontSize:13.5,fontWeight:600,whiteSpace:'nowrap',overflow:'hidden',textOverflow:'ellipsis'}}>{PF.speciesOne(a.species)} · {a.breed} · {a.ageText} · {PF.sizeLabel(a.size)}</div>
              <div style={{fontSize:12.5,color:'var(--ink-faint)',marginTop:2,whiteSpace:'nowrap',overflow:'hidden',textOverflow:'ellipsis'}}><Icons.pin style={{width:12,height:12,verticalAlign:-2}}/> {a.loc}</div>
            </div>
            <div className="row" style={{gap:8,flex:'none'}}>
              <button className="iconbtn" title="Открыть" onClick={()=>go('detail',{id:a.id,from:'admin'})}><Icons.search/></button>
              <button className="iconbtn" title="Редактировать" onClick={()=>{setEditing(a);setView('form');}}><Icons.edit/></button>
              <button className="iconbtn" title="Удалить" onClick={()=>{ if(confirm(`Удалить «${a.name}» из базы?`)) onDelete(a.id); }} style={{color:'#c0392b'}}><Icons.trash/></button>
            </div>
          </div>
        ))}
      </div>
      {toast && <Toast msg={toast}/>}
    </div>
  );
}

function AdminForm({ initial, onSave, onCancel, toast }){
  const [form, setForm] = useState(()=> initial ? {
    id:initial.id, name:initial.name, species:initial.species, breed:initial.breed, color:initial.color,
    size:initial.size, sex:initial.sex, ageMonths:initial.ageMonths, loc:initial.loc, contact:initial.contact,
    desc:initial.desc, weight:initial.weight, health:initial.health, needs:initial.needs||'', waiting:initial.waiting,
    photos:[...(initial.galleryUrls||[])]
  } : {
    name:'', species:'cat', breed:'', color:'grey', size:'medium', sex:'male', ageMonths:12,
    weight:5, health:'Привит, обработан от паразитов', needs:'', waiting:1,
    loc:'', contact:'', desc:'', photos:[]
  });
  const set = (k,v)=> setForm(f=>({...f,[k]:v}));
  const addPhotos = (files)=>{
    [...files].forEach(file=>{ if(!file.type.startsWith('image/'))return; const r=new FileReader(); r.onload=e=>setForm(f=>({...f,photos:[...f.photos,e.target.result]})); r.readAsDataURL(file); });
  };
  const fieldStyle = {width:'100%',padding:'12px 14px',borderRadius:'var(--radius-sm)',border:'1.5px solid var(--line-strong)',fontSize:15,fontFamily:'var(--font-body)',background:'var(--surface)'};
  const Lbl = ({children}) => <label style={{fontFamily:'var(--font-display)',fontWeight:800,fontSize:13.5,display:'block',marginBottom:7}}>{children}</label>;
  const Seg = ({value,opts,onCh,renderIco}) => (
    <div className="chips">{opts.map(o=>(
      <button key={o.id} type="button" className={'chip'+(value===o.id?' on':'')} onClick={()=>onCh(o.id)}>
        {renderIco&&renderIco(o)}{o.label}
      </button>))}</div>
  );

  return (
    <div className="page wrap section" style={{paddingTop:26,maxWidth:760}}>
      <button className="btn btn-ghost btn-sm" onClick={onCancel} style={{marginBottom:18}}><Icons.arrowLeft/>К списку</button>
      <h2 style={{fontSize:28,marginBottom:6}}>{initial?'Редактировать питомца':'Новый питомец'}</h2>
      <p className="muted" style={{marginBottom:24}}>Заполните карточку — она появится в каталоге сразу после сохранения.</p>

      <div style={{background:'var(--surface)',border:'1px solid var(--line)',borderRadius:'var(--radius)',padding:'clamp(20px,3vw,30px)',boxShadow:'var(--shadow-sm)',display:'flex',flexDirection:'column',gap:22}}>
        {/* photos */}
        <div>
          <Lbl>Фотографии</Lbl>
          <div style={{display:'grid',gridTemplateColumns:'repeat(auto-fill,minmax(96px,1fr))',gap:10}}>
            {form.photos.map((p,i)=>(
              <div key={i} style={{position:'relative',aspectRatio:'1/1',borderRadius:12,overflow:'hidden',border:'1px solid var(--line)'}}>
                <img src={p} alt="" style={{width:'100%',height:'100%',objectFit:'cover'}}/>
                <button type="button" onClick={()=>set('photos',form.photos.filter((_,k)=>k!==i))} style={{position:'absolute',top:5,right:5,width:24,height:24,borderRadius:'50%',background:'rgba(20,30,28,.7)',border:'none',color:'#fff',display:'grid',placeItems:'center',cursor:'pointer'}}><Icons.x style={{width:14,height:14}}/></button>
                {i===0 && <span style={{position:'absolute',bottom:5,left:5,fontSize:10,fontWeight:800,fontFamily:'var(--font-display)',background:'var(--primary)',color:'#fff',padding:'2px 7px',borderRadius:99}}>главное</span>}
              </div>
            ))}
            <label style={{aspectRatio:'1/1',borderRadius:12,border:'2px dashed var(--line-strong)',display:'grid',placeItems:'center',cursor:'pointer',color:'var(--ink-faint)',background:'var(--surface-2)'}}>
              <input type="file" accept="image/*" multiple hidden onChange={e=>addPhotos(e.target.files)}/>
              <span style={{textAlign:'center'}}><Icons.plus style={{width:26,height:26}}/><div style={{fontSize:11,fontWeight:800,marginTop:2}}>добавить</div></span>
            </label>
          </div>
        </div>

        <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:16}} className="form-2col">
          <div><Lbl>Кличка</Lbl><input style={fieldStyle} value={form.name} onChange={e=>set('name',e.target.value)} placeholder="Например, Барсик"/></div>
          <div><Lbl>Порода</Lbl><input style={fieldStyle} value={form.breed} onChange={e=>set('breed',e.target.value)} placeholder="Метис / Британская…"/></div>
        </div>

        <div><Lbl>Вид</Lbl><Seg value={form.species} opts={PF.SPECIES.map(s=>({id:s.id,label:s.one}))} onCh={v=>set('species',v)} renderIco={o=><SpeciesIcon species={o.id} style={{width:16,height:16}}/>}/></div>
        <div><Lbl>Окрас</Lbl><Seg value={form.color} opts={PF.COLORS} onCh={v=>set('color',v)} renderIco={o=><span style={{width:14,height:14,borderRadius:'50%',background:o.hex,border:'1px solid rgba(0,0,0,.15)',display:'inline-block'}}/>}/></div>

        <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:16}} className="form-2col">
          <div><Lbl>Размер</Lbl><Seg value={form.size} opts={PF.SIZES} onCh={v=>set('size',v)}/></div>
          <div><Lbl>Пол</Lbl><Seg value={form.sex} opts={PF.SEX} onCh={v=>set('sex',v)} renderIco={o=>o.id==='male'?<Icons.male style={{width:15,height:15}}/>:<Icons.female style={{width:15,height:15}}/>}/></div>
        </div>

        <div style={{display:'grid',gridTemplateColumns:'1fr 1fr 1fr',gap:16}} className="form-2col">
          <div><Lbl>Возраст (мес.)</Lbl>
            <input type="number" min="1" style={fieldStyle} value={form.ageMonths} onChange={e=>set('ageMonths',e.target.value)}/>
            <div className="muted" style={{fontSize:12.5,marginTop:6}}>≈ {PF.ageLabel(Math.max(1,Number(form.ageMonths)||1))}</div>
          </div>
          <div><Lbl>Вес (кг)</Lbl>
            <input type="number" min="0.1" step="0.1" style={fieldStyle} value={form.weight} onChange={e=>set('weight',e.target.value)}/>
          </div>
          <div><Lbl>В ожидании (мес.)</Lbl>
            <input type="number" min="0" style={fieldStyle} value={form.waiting} onChange={e=>set('waiting',e.target.value)}/>
            <div className="muted" style={{fontSize:12.5,marginTop:6}}>{Number(form.waiting)>=12?'· «Второй шанс»':'·'}</div>
          </div>
        </div>

        <div><Lbl>Здоровье</Lbl><input style={fieldStyle} value={form.health} onChange={e=>set('health',e.target.value)} placeholder="Привит, обработан, стерилизован…"/></div>
        <div><Lbl>Особые потребности <span style={{fontWeight:500,color:'var(--ink-faint)'}}>(если есть)</span></Lbl><input style={fieldStyle} value={form.needs} onChange={e=>set('needs',e.target.value)} placeholder="Диета, без маленьких детей, опытный хозяин…"/></div>

        <div><Lbl>Описание характера</Lbl><textarea style={{...fieldStyle,minHeight:110,resize:'vertical',lineHeight:1.5}} value={form.desc} onChange={e=>set('desc',e.target.value)} placeholder="Расскажите о характере, привычках, истории…"/></div>

        <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:16}} className="form-2col">
          <div><Lbl>Где находится</Lbl><input style={fieldStyle} value={form.loc} onChange={e=>set('loc',e.target.value)} placeholder="Приют / передержка, район"/></div>
          <div><Lbl>Контакт куратора</Lbl><input style={fieldStyle} value={form.contact} onChange={e=>set('contact',e.target.value)} placeholder="Имя · телефон"/></div>
        </div>

        <div className="spread" style={{paddingTop:18,borderTop:'1px solid var(--line)',flexWrap:'wrap',gap:12}}>
          <button className="btn btn-ghost" onClick={onCancel}>Отмена</button>
          <button className="btn btn-primary btn-lg" onClick={()=>onSave(form)} disabled={!form.name.trim()} style={{opacity:form.name.trim()?1:.5}}><Icons.check/>Сохранить</button>
        </div>
      </div>
      {toast && <Toast msg={toast}/>}
    </div>
  );
}

function Toast({ msg }){
  return <div style={{position:'fixed',bottom:'calc(20px + env(safe-area-inset-bottom))',left:'50%',transform:'translateX(-50%)',zIndex:200,background:'#11302d',color:'#fff',padding:'13px 22px',borderRadius:99,fontFamily:'var(--font-display)',fontWeight:800,fontSize:14.5,boxShadow:'var(--shadow-lg)',display:'flex',alignItems:'center',gap:9,animation:'fadeUp .3s'}}><Icons.checkCircle style={{width:18,height:18,color:'#5fd6c8'}}/>{msg}</div>;
}

window.AdminScreen = AdminScreen;