/* ============================================================
   Паспорт здоровья — overview + AI document analysis
   ============================================================ */

function StatTile({ icon, label, value }){
  return (
    <div style={{display:"flex",alignItems:"center",gap:10,background:"var(--card-gray)",borderRadius:18,padding:"13px 12px",minWidth:0}}>
      <span style={{color:"var(--green)",flex:"none"}}>{icon}</span>
      <div className="col" style={{minWidth:0}}>
        <div style={{fontSize:14,fontWeight:600,color:"var(--ink)",lineHeight:1.15}}>{label}</div>
        <div style={{fontSize:13.5,fontWeight:600,color:"var(--green-text)",marginTop:1}}>{value}</div>
      </div>
    </div>
  );
}

function MiniChip({ icon, children, wrap }){
  return (
    <div style={{display:"flex",alignItems:"center",gap:7,background:"var(--card-gray)",borderRadius:14,padding:"9px 13px",fontSize:14,fontWeight:600,color:"var(--ink)",whiteSpace:wrap?"normal":"nowrap",lineHeight:1.2}}>
      <span style={{color:"var(--green)",flex:"none"}}>{icon}</span>{children}
    </div>
  );
}

function PassportScreen({ go }){
  return (
    <div className="screen screen--plain screen-enter">
      <StatusBar/>
      <AppBar onBack={()=>go("home")} right={<button className="iconbtn"><Icon.share/></button>}/>
      <div style={{padding:"0 22px"}}>
        <div className="h1">Паспорт здоровья</div>
        <div className="sub">Вся история питомца в одном месте</div>
        <div style={{marginTop:14}}>
          <span className="tag tag--outline" style={{padding:"9px 15px",fontSize:15}}>
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="9" stroke="#E0E5E0" strokeWidth="3"/><path d="M12 3a9 9 0 0 1 7.5 14" stroke="var(--green)" strokeWidth="3" strokeLinecap="round"/></svg>
            Заполнен на 76%
          </span>
        </div>
      </div>

      <div style={{padding:"18px 16px 0",display:"flex",flexDirection:"column",gap:16}}>
        {/* identity card */}
        <div className="card" style={{padding:18}}>
          <div style={{display:"flex",gap:16,alignItems:"center"}}>
            <image-slot id="pet-avatar" placeholder="фото" shape="circle" src="pet-photo.jpg"
              style={{width:84,height:84,borderRadius:"50%",flex:"none"}}></image-slot>
            <div className="col">
              <div style={{fontSize:26,fontWeight:800,letterSpacing:"-.01em"}}>Лилу</div>
              <div className="muted" style={{fontSize:15,fontWeight:500}}>Корги · 3 года</div>
            </div>
          </div>
          <div className="grid2" style={{gap:10,marginTop:14}}>
            <MiniChip icon={<Icon.scale s={17}/>}>28 кг</MiniChip>
            <MiniChip icon={<Icon.ruler s={17}/>}>55 см</MiniChip>
            <MiniChip icon={<Icon.scissors s={17}/>}>кастрирован</MiniChip>
            <MiniChip icon={<Icon.bowl s={17}/>} wrap>питание: сухой корм</MiniChip>
            <MiniChip icon={<Icon.chip s={17}/>}>чип есть</MiniChip>
            <MiniChip icon={<Icon.shield s={17}/>} wrap>владелец верифицирован</MiniChip>
          </div>
        </div>

        {/* current state */}
        <div className="card" style={{padding:18}}>
          <div style={{fontSize:18,fontWeight:700,marginBottom:14}}>Состояние сейчас</div>
          <div className="grid2" style={{gap:10}}>
            <StatTile icon={<Icon.syringe s={20}/>} label="Вакцинации" value="актуальны"/>
            <StatTile icon={<Icon.bug s={20}/>} label="Блохи / клещи" value="до 18 мая"/>
            <StatTile icon={<Icon.cross s={20}/>} label="Хроники" value="аллергия"/>
            <StatTile icon={<Icon.calendar s={20}/>} label="Следующий контроль" value="июнь"/>
          </div>
        </div>

        {/* doctor-visit history (moved out of the owner's diary) */}
        <div className="card" style={{padding:18}}>
          <div style={{display:"flex",alignItems:"center",justifyContent:"space-between",marginBottom:6}}>
            <div style={{fontSize:18,fontWeight:700}}>История приёмов</div>
            <Icon.stetho s={20} style={{color:"var(--green)"}}/>
          </div>
          <div className="muted" style={{fontSize:13.5,fontWeight:500,marginBottom:8,lineHeight:1.3}}>Приёмы, процедуры и заключения врачей</div>
          {[
            {icon:<Icon.stetho s={20}/>,bg:"#EAF0FB",color:"#2A6FDB",t:"Приём у дерматолога",m:"Зуд, покраснение лап · ВетПлюс",d:"12 мая"},
            {icon:<Icon.bug s={20}/>,bg:"var(--green-soft)",color:"var(--green)",t:"Обработка от клещей",m:"Бравекто, 20–40 кг",d:"3 мая"},
            {icon:<Icon.scissors s={20}/>,bg:"#EFEAFB",color:"#7A5BD9",t:"Кастрация",m:"Плановая операция",d:"02.2024"},
            {icon:<Icon.syringe s={20}/>,bg:"var(--green-soft)",color:"var(--green)",t:"Вакцинация",m:"Комплексная · ДокВет",d:"21 апр"},
          ].map((v,i,a)=>(
            <button key={i} onClick={()=>go("passport2")} className="tap" style={{display:"flex",alignItems:"center",gap:12,width:"100%",textAlign:"left",padding:"12px 0",borderTop:"1px solid var(--line)"}}>
              <div style={{width:44,height:44,borderRadius:13,background:v.bg,color:v.color,display:"flex",alignItems:"center",justifyContent:"center",flex:"none"}}>{v.icon}</div>
              <div className="col" style={{flex:1,minWidth:0}}>
                <div style={{fontSize:15.5,fontWeight:700,lineHeight:1.15}}>{v.t}</div>
                <div className="muted" style={{fontSize:13,fontWeight:500,marginTop:2}}>{v.m}</div>
              </div>
              <span style={{fontSize:13,fontWeight:600,color:"var(--gray)",flex:"none"}}>{v.d}</span>
            </button>
          ))}
          <button className="btn btn--ghost btn--sm" style={{marginTop:14,gap:8,background:"var(--card-gray)",boxShadow:"none",color:"var(--gray)"}} onClick={()=>go("passport2")}>Открыть полную историю <Icon.chevR s={16}/></button>
        </div>

        {/* lab-test history */}
        <div className="card" style={{padding:18}}>
          <div style={{display:"flex",alignItems:"center",justifyContent:"space-between",marginBottom:6}}>
            <div style={{fontSize:18,fontWeight:700}}>История анализов</div>
            <Icon.drop s={20} style={{color:"var(--green)"}}/>
          </div>
          <div className="muted" style={{fontSize:13.5,fontWeight:500,marginBottom:8,lineHeight:1.3}}>Лабораторные исследования и результаты</div>
          {[
            {icon:<Icon.drop s={20}/>,bg:"#EAF0FB",color:"#2A6FDB",t:"Биохимия крови",m:"Показатели в норме · Инвитро",d:"10 мая"},
            {icon:<Icon.drop s={20}/>,bg:"var(--warn-soft)",color:"var(--warn)",t:"Аллергопанель",m:"Реакция: курица, говядина",d:"08 мая"},
            {icon:<Icon.doc s={20}/>,bg:"#EFEAFB",color:"#7A5BD9",t:"Соскоб кожи",m:"Грибки и клещи не обнаружены",d:"12 апр"},
            {icon:<Icon.drop s={20}/>,bg:"var(--green-soft)",color:"var(--green)",t:"Общий анализ крови",m:"Без отклонений · ДокВет",d:"21 апр"},
          ].map((v,i)=>(
            <button key={i} onClick={()=>go("passport2")} className="tap" style={{display:"flex",alignItems:"center",gap:12,width:"100%",textAlign:"left",padding:"12px 0",borderTop:"1px solid var(--line)"}}>
              <div style={{width:44,height:44,borderRadius:13,background:v.bg,color:v.color,display:"flex",alignItems:"center",justifyContent:"center",flex:"none"}}>{v.icon}</div>
              <div className="col" style={{flex:1,minWidth:0}}>
                <div style={{fontSize:15.5,fontWeight:700,lineHeight:1.15}}>{v.t}</div>
                <div className="muted" style={{fontSize:13,fontWeight:500,marginTop:2}}>{v.m}</div>
              </div>
              <span style={{fontSize:13,fontWeight:600,color:"var(--gray)",flex:"none"}}>{v.d}</span>
            </button>
          ))}
          <button className="btn btn--ghost btn--sm" style={{marginTop:14,gap:8,background:"var(--card-gray)",boxShadow:"none",color:"var(--gray)"}} onClick={()=>go("passport2")}>Открыть все анализы <Icon.chevR s={16}/></button>
        </div>

        {/* AI document analyser */}
        <div className="card" style={{padding:22,border:"1.5px solid var(--green)",background:"var(--ai-soft)",boxShadow:"none"}}>
          <div style={{display:"flex",gap:16}}>
            <div style={{width:64,height:64,borderRadius:16,background:"#fff",border:"2px solid var(--green)",display:"flex",alignItems:"center",justifyContent:"center",flex:"none",position:"relative",color:"var(--green)"}}>
              <span style={{fontWeight:800,fontSize:18}}>AI</span>
              <Icon.scan s={64} style={{position:"absolute",inset:0,opacity:.0}}/>
            </div>
            <div className="col">
              <div style={{fontSize:20,fontWeight:700}}>Разобрать документ AI</div>
              <div className="muted" style={{fontSize:14,marginTop:4,lineHeight:1.35}}>Загрузите справку, анализ или заключение — паспорт обновится автоматически</div>
            </div>
          </div>
          <div style={{marginTop:18}}>
            <button className="btn btn--sm" style={{gap:8}} onClick={()=>go("passport2")}><Icon.sparkle s={17}/> Разобрать документ AI</button>
            <div className="row" style={{marginTop:10,alignItems:"stretch"}}>
              <button className="btn btn--ghost btn--sm" style={{flex:1,gap:7}} onClick={()=>go("passport2")}><Icon.camera s={17} style={{color:"var(--green)"}}/> Фото</button>
              <button className="btn btn--ghost btn--sm" style={{flex:1,gap:7}} onClick={()=>go("passport2")}><Icon.clip s={17} style={{color:"var(--green)"}}/> Файл</button>
            </div>
          </div>
        </div>
      </div>
      <div style={{height:24}}/>
      <div className="homebar"/>
    </div>
  );
}
window.PassportScreen = PassportScreen;

/* ---------- Passport 2: Что удалось найти ---------- */
function Bullet({ label, value }){
  return (
    <div style={{display:"flex",alignItems:"flex-start",gap:12,padding:"7px 0"}}>
      <span style={{width:9,height:9,borderRadius:"50%",background:"var(--green)",flex:"none",marginTop:8}}/>
      <span style={{fontSize:15,fontWeight:700,color:"var(--ink)",width:98,flex:"none"}}>{label}</span>
      <span style={{fontSize:15,color:"var(--gray)",fontWeight:500,flex:1,minWidth:0}}>{value}</span>
    </div>
  );
}

function TLRow({ icon, date, text, last }){
  return (
    <div style={{display:"flex",gap:14,position:"relative",paddingBottom:last?0:20}}>
      <div style={{display:"flex",flexDirection:"column",alignItems:"center"}}>
        <div style={{width:40,height:40,borderRadius:13,background:"var(--green)",color:"#fff",display:"flex",alignItems:"center",justifyContent:"center",flex:"none"}}>{icon}</div>
        {!last && <div style={{width:2,flex:1,background:"var(--green-soft)",marginTop:4}}/>}
      </div>
      <div style={{display:"flex",gap:16,paddingTop:9}}>
        <span style={{fontSize:15,fontWeight:700,width:54,flex:"none"}}>{date}</span>
        <span style={{fontSize:15,color:"var(--gray)",fontWeight:500}}>{text}</span>
      </div>
    </div>
  );
}

function PassportDocScreen({ go }){
  return (
    <div className="screen screen--plain screen-enter">
      <StatusBar/>
      <AppBar onBack={()=>go("passport")} title="Паспорт здоровья"/>
      <div style={{padding:"12px 18px 0",display:"flex",flexDirection:"column",gap:16}}>
        <div className="card" style={{padding:22}}>
          <div style={{fontSize:22,fontWeight:700,marginBottom:14}}>Что удалось найти</div>
          <div style={{background:"var(--card-gray)",borderRadius:16,padding:"14px 16px"}}>
            <div style={{display:"flex",alignItems:"center",gap:10,marginBottom:10}}>
              <Icon.doc s={18} style={{color:"var(--gray)"}}/>
              <span style={{fontSize:15,fontWeight:600,flex:1}}>Заключение дерматолога · 12.05.2026</span>
              <span style={{fontSize:12,fontWeight:600,color:"var(--green-text)"}}>распознано AI</span>
            </div>
            <Bullet label="Симптом:" value="зуд"/>
            <Bullet label="Диагноз:" value="пищевая аллергия"/>
            <Bullet label="Назначение:" value="элиминационная диета"/>
            <Bullet label="Врач:" value="Мария Соколова"/>
          </div>
          <div className="row" style={{marginTop:16,alignItems:"stretch"}}>
            <button className="btn btn--sm" style={{flex:1,gap:8}}><Icon.check s={18}/> Подтвердить</button>
            <button className="btn btn--ghost btn--sm" style={{flex:1,gap:8,lineHeight:1.05}}><Icon.doc s={17} style={{color:"var(--ink)"}}/> Открыть оригинал</button>
          </div>
          <button className="btn btn--ghost btn--sm" style={{marginTop:12,gap:8,background:"var(--card-gray)",boxShadow:"none",color:"var(--gray)"}}>Показать сырой текст <Icon.chevD s={16}/></button>
        </div>

        <div className="card" style={{padding:22}}>
          <div style={{fontSize:22,fontWeight:700,marginBottom:18}}>История питомца</div>
          <TLRow icon={<Icon.doc s={20}/>} date="12 мая" text="добавлено заключение"/>
          <TLRow icon={<Icon.bug s={20}/>} date="03 мая" text="обработка от клещей"/>
          <TLRow icon={<Icon.syringe s={20}/>} date="21 апр" text="вакцинация" last/>
          <button className="btn btn--ghost btn--sm" style={{marginTop:16,gap:8,background:"var(--card-gray)",boxShadow:"none",color:"var(--gray)"}}>Показать всю историю <Icon.chevD s={16}/></button>
        </div>
      </div>
      <div style={{height:24}}/>
      <div className="homebar"/>
    </div>
  );
}
window.PassportDocScreen = PassportDocScreen;