/* ============================================================
   Home — Главный экран (Цифровой двойник)
   ============================================================ */

function ActionTile({ icon, label, onClick, accent }){
  return (
    <button className="card tap col" onClick={onClick}
      style={{width:"100%",height:"100%",alignItems:"center",gap:11,padding:"18px 8px",borderRadius:22}}>
      <div style={{width:48,height:48,borderRadius:15,display:"flex",alignItems:"center",justifyContent:"center",
        background:accent?"var(--green)":"var(--green-soft)",color:accent?"#fff":"var(--green)"}}>{icon}</div>
      <div style={{fontSize:13.5,fontWeight:600,textAlign:"center",lineHeight:1.18,color:"var(--ink)"}}>{label}</div>
    </button>
  );
}

function CareCard({ title, children, soft, deco, onClick }){
  return (
    <button onClick={onClick} className="tap col"
      style={{position:"relative",overflow:"hidden",textAlign:"left",alignItems:"flex-start",
        background:soft?"var(--green-soft)":"var(--card-gray)",borderRadius:24,padding:"18px 15px 18px",minHeight:184}}>
      <div style={{fontSize:21,fontWeight:700,lineHeight:1.08,color:"var(--ink)",letterSpacing:"-.01em"}}>{title}</div>
      <div style={{marginTop:8,position:"relative",zIndex:2}}>{children}</div>
      {deco && <div style={{position:"absolute",right:-6,bottom:-6,color:"rgba(32,168,58,.16)"}}>{deco}</div>}
    </button>
  );
}

function ServiceRow({ icon, color="var(--green)", bg="var(--green-soft)", title, meta, onClick, last }){
  return (
    <button onClick={onClick} className="tap" style={{display:"flex",alignItems:"center",gap:14,width:"100%",
      textAlign:"left",padding:"14px 4px",borderTop:last?"none":"1px solid var(--line)"}}>
      <div style={{width:46,height:46,borderRadius:14,background:bg,color,display:"flex",alignItems:"center",justifyContent:"center",flex:"none"}}>{icon}</div>
      <div className="col" style={{flex:1,minWidth:0}}>
        <div style={{fontSize:16,fontWeight:700,color:"var(--ink)",lineHeight:1.15}}>{title}</div>
        <div className="muted" style={{fontSize:13.5,fontWeight:500,marginTop:2,lineHeight:1.25}}>{meta}</div>
      </div>
      <Icon.chevR s={18} style={{color:"var(--gray)",flex:"none"}}/>
    </button>
  );
}

function HomeScreen({ go }){
  const [share,setShare]=React.useState(false);
  return (
    <div className="screen screen--grad screen-enter">
      <StatusBar/>
      <AppBar onBack={()=>go("ownerAuth")}
        right={<button className="iconbtn" style={{background:"var(--green-soft)",color:"var(--green)"}} onClick={()=>go("onboard3")}><Icon.pen/></button>}/>

      {/* identity — photo left, name + meta to the right */}
      <div className="row" style={{alignItems:"center",gap:16,padding:"6px 22px 0"}}>
        <image-slot id="pet-avatar" placeholder="фото" src="pet-photo.jpg"
          style={{width:96,height:96,borderRadius:26,border:"3px solid var(--green)",flex:"none",boxShadow:"var(--shadow-soft)"}}
          shape="rounded" radius="23"></image-slot>
        <div className="col" style={{minWidth:0}}>
          <div style={{fontSize:27,fontWeight:800,letterSpacing:"-.01em",lineHeight:1.05}}>Лилу</div>
          <div style={{color:"var(--green-text)",fontWeight:700,fontSize:14,marginTop:3}}>Цифровой двойник</div>
          <div className="muted" style={{fontSize:13,fontWeight:500,marginTop:5,lineHeight:1.3}}>Корги · 3 года<br/>верифицирован по Сбер ID</div>
        </div>
      </div>

      {/* quick actions — 2 rows of 3, no horizontal scroll */}
      <div style={{display:"grid",gridTemplateColumns:"repeat(3,1fr)",gap:12,padding:"20px 16px 0"}}>
        <ActionTile icon={<Icon.qr/>} label="Поделиться профилем" onClick={()=>setShare(true)}/>
        <ActionTile icon={<Icon.passport/>} label="Паспорт здоровья" onClick={()=>go("passport")}/>
        <ActionTile icon={<Icon.scan/>} label="Документ AI" onClick={()=>go("passport2")}/>
        <ActionTile icon={<Icon.shieldStar/>} label="Запись к врачу" onClick={()=>go("doctors")}/>
        <ActionTile icon={<Icon.sparkle/>} label="AI-ассистент" onClick={()=>go("ai")}/>
        <ActionTile icon={<Icon.chat/>} label="Чат" onClick={()=>go("chat")}/>
      </div>

      {/* health & care */}
      <div className="card" style={{margin:"18px 16px 26px",borderRadius:32,padding:"24px 18px 20px"}}>
        <div className="col" style={{flexDirection:"row",alignItems:"center",justifyContent:"space-between",marginBottom:18}}>
          <div className="h1" style={{fontSize:25,margin:0,whiteSpace:"nowrap"}}>Здоровье и уход</div>
          <div className="iconbtn" style={{background:"var(--card-gray)",width:36,height:36}}><Icon.chevR s={18}/></div>
        </div>
        <div className="grid2">
          <CareCard title="Календарь здоровья" soft onClick={()=>go("calendar")}
            deco={<Icon.syringe s={92}/>}>
            <div style={{color:"var(--gray)",fontSize:15,fontWeight:500}}>Вакцинация</div>
            <div style={{color:"var(--ink)",fontSize:15,fontWeight:600,marginTop:2}}>12 июня · 14:00</div>
            <div style={{marginTop:30}}><Tag variant="outline" style={{padding:"6px 10px",fontSize:12.5,gap:4}}><Icon.clock s={13}/> через 5 дней</Tag></div>
          </CareCard>

          <CareCard title="Дневник наблюдений" onClick={()=>go("diary")}
            deco={<Icon.paw s={84}/>}>
            <div style={{color:"var(--gray)",fontSize:14,fontWeight:500,lineHeight:1.3}}>Наблюдения хозяина за питомцем</div>
            <div style={{display:"flex",flexWrap:"wrap",gap:6,marginTop:12}}>
              <Tag style={{padding:"6px 11px",fontSize:13}}>сон</Tag><Tag style={{padding:"6px 11px",fontSize:13}}>стул</Tag><Tag style={{padding:"6px 11px",fontSize:13}}>аппетит</Tag><Tag style={{padding:"6px 11px",fontSize:13}}>вес</Tag>
            </div>
          </CareCard>

          <CareCard title="ДМС, страховка, антиклещ" soft onClick={()=>go("insurance")}
            deco={<Icon.umbrella s={84}/>}>
            <div style={{color:"var(--gray)",fontSize:14,fontWeight:500,lineHeight:1.35}}>Полисы и подписки на защиту</div>
            <div style={{marginTop:24}}><Tag style={{padding:"6px 11px",fontSize:13}}><Icon.checkC s={14}/> ДМС активен</Tag></div>
          </CareCard>

          <CareCard title="Прочие услуги" soft onClick={()=>go("services")}
            deco={<Icon.grid s={82}/>}>
            <div style={{color:"var(--gray)",fontSize:14,fontWeight:500,lineHeight:1.35}}>Груминг, передержка, дрессировка и доставка корма</div>
          </CareCard>

          <CareCard title="Справочник по питомцу" onClick={()=>go("reference")}
            deco={<Icon.book s={84}/>}>
            <div style={{color:"var(--gray)",fontSize:14,fontWeight:500,lineHeight:1.35}}>Порода, уход, питание и частые болезни</div>
            <div style={{marginTop:24}}><Tag variant="outline" style={{padding:"6px 10px",fontSize:12.5}}><Icon.paw s={13}/> Корги</Tag></div>
          </CareCard>
        </div>
      </div>
      <div style={{height:8}}/>
      <div className="homebar"/>

      <ShareSheet open={share} onClose={()=>setShare(false)}/>
    </div>
  );
}
window.HomeScreen = HomeScreen;