/* ============================================================
   Календарь здоровья · Дневник наблюдений
   ============================================================ */

/* ---------- Календарь ---------- */
function IconTile({ icon, bg="var(--green-soft)", color="var(--green)", size=56 }){
  return <div style={{width:size,height:size,borderRadius:16,background:bg,color,display:"flex",alignItems:"center",justifyContent:"center",flex:"none"}}>{icon}</div>;
}

function CalEventRow({ icon, bg, color, title, meta, status, statusVar }){
  return (
    <div style={{display:"flex",alignItems:"center",gap:10,padding:"12px 0"}}>
      <IconTile icon={icon} bg={bg} color={color} size={46}/>
      <div className="col" style={{flex:1,minWidth:0}}>
        <div style={{fontSize:16,fontWeight:700}}>{title}</div>
        <div className="muted" style={{fontSize:14,fontWeight:500,marginTop:1}}>{meta}</div>
      </div>
      {status && <Tag variant={statusVar} style={{flex:"none",fontSize:12,padding:"5px 9px"}}>{status}</Tag>}
      <Icon.chevR s={18} style={{color:"var(--gray)",flex:"none"}}/>
    </div>
  );
}

function CalendarScreen({ go }){
  const weeks=[
    [["26",1],["27",1],["28",1],["29",1],["30",1],["31",1],["1",1]],
    [["2"],["3"],["4"],["5",0,"g"],["6"],["7"],["8"]],
    [["9"],["10"],["11"],["12",0,"sel"],["13"],["14"],["15"]],
    [["16"],["17"],["18",0,"b"],["19"],["20"],["21"],["22"]],
    [["23"],["24"],["25",0,"g"],["26"],["27"],["28"],["29"]],
    [["30"],["1",1],["2",1],["3",1],["4",1],["5",1],["6",1]],
  ];
  const dot={g:"var(--green)",b:"#2A6FDB"};
  return (
    <div className="screen screen--grad screen-enter">
      <StatusBar/>
      <AppBar onBack={()=>go("home")}/>
      <div style={{padding:"0 22px",position:"relative"}}>
        <div style={{display:"flex",alignItems:"flex-start",justifyContent:"space-between"}}>
          <div>
            <div className="h1">Календарь<br/>здоровья</div>
            <div className="sub" style={{marginTop:6,whiteSpace:"nowrap"}}>Лилу · Корги · 3 года</div>
          </div>
          <div style={{position:"relative"}}>
            <button className="iconbtn" style={{background:"#fff",boxShadow:"var(--shadow-soft)",width:48,height:48,color:"var(--green)"}}><Icon.calSync s={24}/></button>
            <div style={{position:"absolute",right:0,top:54,display:"flex",gap:8,background:"#fff",borderRadius:18,padding:10,boxShadow:"var(--shadow-card)"}}>
              <div style={{width:46,height:46,borderRadius:12,background:"#fff",border:"1px solid var(--line)",overflow:"hidden",fontSize:9,fontWeight:700}}>
                <div style={{background:"#F06455",color:"#fff",fontSize:8,textAlign:"center",padding:"2px 0"}}>WED</div>
                <div style={{textAlign:"center",fontSize:18,fontWeight:800,lineHeight:"24px",color:"#111"}}>12</div>
              </div>
              <div style={{width:46,height:46,borderRadius:12,background:"#fff",border:"1px solid var(--line)",display:"flex",alignItems:"center",justifyContent:"center",fontSize:20,fontWeight:800,color:"#2A6FDB"}}>31</div>
            </div>
          </div>
        </div>
      </div>

      <div style={{padding:"18px 18px 0",display:"flex",flexDirection:"column",gap:14}}>
        <div className="card" style={{display:"flex",gap:16,alignItems:"center"}}>
          <IconTile icon={<Icon.syringe s={28}/>}/>
          <div className="col" style={{minWidth:0}}>
            <div style={{color:"var(--green-text)",fontWeight:700,fontSize:15}}>Ближайшее событие</div>
            <div style={{fontSize:22,fontWeight:700,margin:"2px 0"}}>Вакцинация</div>
            <div style={{display:"flex",alignItems:"center",gap:6,color:"var(--green-text)",fontWeight:700,fontSize:15,whiteSpace:"nowrap"}}><Icon.clock s={16}/> через 5 дней</div>
            <div className="muted" style={{fontSize:14,fontWeight:500,marginTop:3}}>12 июня · 14:00 · ВетПлюс</div>
          </div>
        </div>

        <div className="card" style={{display:"flex",gap:16}}>
          <IconTile icon={<Icon.chat s={26}/>}/>
          <div className="col" style={{flex:1}}>
            <div style={{fontSize:18,fontWeight:700}}>AI-ассистент</div>
            <div className="muted" style={{fontSize:15,fontWeight:500,marginTop:4,lineHeight:1.35}}>В июне запланированы вакцинация и контроль у дерматолога. Пока всё идёт по плану.</div>
          </div>
        </div>

        <div className="card" style={{padding:"20px 18px"}}>
          <div style={{display:"flex",alignItems:"center",justifyContent:"space-between",marginBottom:14}}>
            <button className="iconbtn" style={{width:34,height:34}}><Icon.chevL s={20}/></button>
            <div style={{fontSize:19,fontWeight:700,whiteSpace:"nowrap"}}>Июнь 2025</div>
            <button className="iconbtn" style={{width:34,height:34}}><Icon.chevR s={20}/></button>
          </div>
          <div style={{display:"grid",gridTemplateColumns:"repeat(7,1fr)",textAlign:"center",color:"var(--gray)",fontSize:13,fontWeight:600,marginBottom:6}}>
            {["Пн","Вт","Ср","Чт","Пт","Сб","Вс"].map(d=><div key={d}>{d}</div>)}
          </div>
          {weeks.map((wk,wi)=>(
            <div key={wi} style={{display:"grid",gridTemplateColumns:"repeat(7,1fr)",textAlign:"center"}}>
              {wk.map(([d,muted,mark],di)=>(
                <div key={di} style={{padding:"7px 0",position:"relative"}}>
                  <div style={{width:34,height:34,lineHeight:"34px",margin:"0 auto",borderRadius:"50%",fontSize:16,fontWeight:600,
                    background:mark==="sel"?"var(--green)":"transparent",color:mark==="sel"?"#fff":muted?"#C7CCD3":"var(--ink)"}}>{d}</div>
                  {mark && mark!=="sel" && <span style={{position:"absolute",bottom:3,left:"50%",transform:"translateX(-50%)",width:6,height:6,borderRadius:"50%",background:dot[mark]}}/>}
                  {mark==="sel" && <span style={{position:"absolute",top:1,left:"50%",transform:"translateX(-50%)",width:6,height:6,borderRadius:"50%",background:"var(--green)"}}/>}
                </div>
              ))}
            </div>
          ))}
        </div>

        <div className="card" style={{padding:"6px 14px"}}>
          <CalEventRow icon={<Icon.syringe s={22}/>} bg="var(--green-soft)" color="var(--green)" title="Вакцинация" meta="12 июня · 14:00 · ВетПлюс" status="запланировано" statusVar={undefined}/>
          <div style={{borderTop:"1px solid var(--line)"}}/>
          <CalEventRow icon={<Icon.stetho s={22}/>} bg="#EAF0FB" color="#2A6FDB" title="Приём у дерматолога" meta="18 июня · 11:30 · ВетПлюс"/>
          <div style={{borderTop:"1px solid var(--line)"}}/>
          <CalEventRow icon={<Icon.bug s={22}/>} bg="var(--green-soft)" color="var(--green)" title="Обработка от клещей" meta="25 июня" status="регулярно"/>
        </div>
      </div>
      <div style={{height:16}}/>
      <div className="dock"><button className="btn" onClick={()=>go("calendar")}><Icon.plusC s={22}/> Добавить событие</button></div>
      <div className="homebar"/>
    </div>
  );
}
window.CalendarScreen = CalendarScreen;

/* ---------- Дневник наблюдений ---------- */
function DiaryRow({ icon, bg, color, title, meta, time, thumb, last }){
  return (
    <div style={{display:"flex",gap:14}}>
      <div style={{display:"flex",flexDirection:"column",alignItems:"center",paddingTop:6}}>
        <span style={{width:13,height:13,borderRadius:"50%",border:"2.5px solid #CBD2D9",background:"#fff",flex:"none"}}/>
        {!last && <div style={{width:2,flex:1,background:"#E4E8EC",marginTop:2}}/>}
      </div>
      <div className="card tap" style={{flex:1,display:"flex",alignItems:"center",gap:13,padding:"13px 14px",marginBottom:14,boxShadow:"var(--shadow-soft)"}}>
        <IconTile icon={icon} bg={bg} color={color} size={44}/>
        <div className="col" style={{flex:1,minWidth:0}}>
          <div style={{fontSize:16,fontWeight:700,lineHeight:1.15}}>{title}</div>
          <div className="muted" style={{fontSize:14,fontWeight:500,marginTop:2}}>{meta}</div>
          <div style={{fontSize:13,color:"var(--gray-2)",fontWeight:500,marginTop:2}}>{time}</div>
        </div>
        {thumb && <div style={{width:52,height:52,borderRadius:12,flex:"none",overflow:"hidden",
          background:"repeating-linear-gradient(45deg,#E7EBEF,#E7EBEF 6px,#DDE2E7 6px,#DDE2E7 12px)",
          display:"flex",alignItems:"center",justifyContent:"center",color:"var(--gray-2)"}}><Icon.camera s={20}/></div>}
        <Icon.chevR s={18} style={{color:"var(--gray)",flex:"none"}}/>
      </div>
    </div>
  );
}

function DiaryScreen({ go }){
  return (
    <div className="screen screen--plain screen-enter">
      <StatusBar/>
      <AppBar onBack={()=>go("home")} right={<button className="iconbtn"><Icon.gear/></button>}/>
      <div style={{padding:"0 22px"}}>
        <div className="h1">Дневник наблюдений</div>
        <div className="sub">Наблюдения хозяина за Лилу</div>
      </div>

      {/* dynamics shortcuts */}
      <div className="row" style={{padding:"16px 18px 0",gap:12}}>
        <button onClick={()=>go("weight")} className="card tap" style={{flex:1,display:"flex",alignItems:"center",gap:12,padding:"15px 14px"}}>
          <div style={{width:44,height:44,borderRadius:13,background:"var(--green-soft)",color:"var(--green)",display:"flex",alignItems:"center",justifyContent:"center",flex:"none"}}><Icon.weight s={23}/></div>
          <div className="col" style={{minWidth:0,textAlign:"left"}}>
            <div style={{fontSize:15.5,fontWeight:700,lineHeight:1.1}}>Динамика веса</div>
            <div className="muted" style={{fontSize:13,fontWeight:600,marginTop:2,color:"var(--green-text)"}}>28 кг · −1,2</div>
          </div>
        </button>
        <button onClick={()=>go("sleep")} className="card tap" style={{flex:1,display:"flex",alignItems:"center",gap:12,padding:"15px 14px"}}>
          <div style={{width:44,height:44,borderRadius:13,background:"#EAF0FB",color:"#2A6FDB",display:"flex",alignItems:"center",justifyContent:"center",flex:"none"}}><Icon.moon s={22}/></div>
          <div className="col" style={{minWidth:0,textAlign:"left"}}>
            <div style={{fontSize:15.5,fontWeight:700,lineHeight:1.1}}>Динамика сна</div>
            <div className="muted" style={{fontSize:13,fontWeight:600,marginTop:2,color:"#2A6FDB"}}>6,5 ч · беспокойный</div>
          </div>
        </button>
      </div>

      <div style={{padding:"14px 18px 0"}}>
        <div className="card" style={{background:"var(--warn-soft)",boxShadow:"none",border:"1.5px solid #FBD9D2",padding:18}}>
          <div style={{display:"flex",alignItems:"center",gap:8,color:"var(--warn)",fontWeight:700,fontSize:16,whiteSpace:"nowrap"}}><Icon.sparkle s={18}/> AI-анализ наблюдений</div>
          <div style={{fontSize:15,color:"var(--ink)",fontWeight:500,marginTop:6,lineHeight:1.4}}>Есть тревожные сигналы: плохой сон и изменения стула. Лучше записаться к врачу, чтобы исключить пищевую реакцию.</div>
          <button className="btn btn--warn" style={{marginTop:14}} onClick={()=>go("booking")}>Записаться к врачу</button>
        </div>
      </div>

      <div style={{padding:"20px 18px 0"}}>
        <DiaryRow icon={<Icon.moon s={22}/>} bg="#EAF0FB" color="#2A6FDB" title="Плохо спал ночью" meta="Беспокойный сон, часто вставал" time="Сегодня, 02:15"/>
        <DiaryRow icon={<Icon.camera s={22}/>} bg="#EAF4ED" color="var(--green)" title="Фото: стул после прогулки" meta="Мягкий стул, слизь" time="Вчера, 17:40" thumb/>
        <DiaryRow icon={<Icon.fork s={22}/>} bg="#FBF3DE" color="#D9A526" title="Снижен аппетит" meta="Ест меньше обычного" time="Вчера, 09:10"/>
        <DiaryRow icon={<Icon.weight s={22}/>} bg="var(--green-soft)" color="var(--green)" title="Взвешивание дома" meta="28,0 кг — норма" time="14 мая, 08:30"/>
        <DiaryRow icon={<Icon.paw s={22}/>} bg="#EFEAFB" color="#7A5BD9" title="Активная прогулка" meta="Бодрый, играл с мячом" time="13 мая, 19:00"/>
        <DiaryRow icon={<Icon.bowl s={22}/>} bg="#FBF3DE" color="#D9A526" title="Сменили корм" meta="Гипоаллергенный сухой" time="10 мая" last/>
      </div>

      <div style={{padding:"4px 16px 0",display:"flex",gap:10,overflowX:"auto"}}>
        <button className="btn btn--ghost btn--sm" style={{flex:"none",gap:7,padding:"0 14px"}}><Icon.plusC s={17} style={{color:"var(--green)"}}/> Симптом</button>
        <button className="btn btn--ghost btn--sm" style={{flex:"none",gap:7,padding:"0 14px"}}><Icon.camera s={17} style={{color:"var(--green)"}}/> Фото</button>
        <button className="btn btn--ghost btn--sm" style={{flex:"none",gap:7,padding:"0 14px"}}><Icon.moon s={17} style={{color:"var(--green)"}}/> Сон</button>
        <button className="btn btn--ghost btn--sm" style={{flex:"none",gap:7,padding:"0 14px"}}><Icon.fork s={17} style={{color:"var(--green)"}}/> Аппетит</button>
        <button className="btn btn--ghost btn--sm" style={{flex:"none",gap:7,padding:"0 14px"}}><Icon.weight s={17} style={{color:"var(--green)"}}/> Вес</button>
      </div>
      <div className="dock"><button className="btn" onClick={()=>go("diary")}><Icon.plusC s={22}/> Добавить наблюдение</button></div>
      <div className="homebar"/>
    </div>
  );
}
window.DiaryScreen = DiaryScreen;