/* ============================================================
   Рейтинг врачей · AI-ассистент · Записаться к врачу
   ============================================================ */

function Stars({ v }){
  return <span style={{display:"inline-flex",alignItems:"center",gap:4,fontSize:15,fontWeight:700}}>
    <svg width="16" height="16" viewBox="0 0 24 24" fill="#F5B82E"><path d="M12 3l2.6 5.6 6 .7-4.5 4.1 1.2 5.9L12 16.6 6.7 19.3l1.2-5.9L3.4 9.3l6-.7z"/></svg>{v}
  </span>;
}

function DoctorCard({ hue, name, spec, focus, clinic, rating, pills, cta, onCta }){
  return (
    <div className="card" style={{padding:18}}>
      <div style={{display:"flex",gap:14}}>
        <DocAvatar size={70} hue={hue}/>
        <div className="col" style={{flex:1,minWidth:0}}>
          <div style={{fontSize:19,fontWeight:700,lineHeight:1.1}}>{name}</div>
          <div style={{color:"var(--green-text)",fontWeight:700,fontSize:15,marginTop:2}}>{spec}</div>
          <div className="muted" style={{fontSize:14,fontWeight:500,marginTop:2}}>{focus}</div>
          <div style={{display:"flex",alignItems:"center",gap:8,marginTop:6}}>
            <span style={{display:"inline-flex",alignItems:"center",gap:5,fontSize:14,fontWeight:600,color:"var(--ink)"}}>
              <Icon.shield s={16} style={{color:"var(--green)"}}/>{clinic}</span>
          </div>
          <div style={{marginTop:5}}><Stars v={rating}/></div>
        </div>
      </div>
      <div style={{display:"flex",flexWrap:"wrap",gap:8,marginTop:12}}>
        {pills.map((p,i)=><Tag key={i} variant={p.solid?undefined:"gray"} style={p.solid?{}:{background:"var(--green-soft)",color:"var(--green-text)"}}>{p.icon}{p.t}</Tag>)}
      </div>
      {cta && <button className="btn btn--sm" style={{marginTop:14,height:48}} onClick={onCta}>{cta}</button>}
    </div>
  );
}
window.DoctorCard = DoctorCard;

/* ---------- Рейтинг врачей ---------- */
function DoctorsScreen({ go }){
  const [tab,setTab]=useState(0);
  const tabs=["Рекомендованные","По проблеме","Рядом","По рейтингу"];
  return (
    <div className="screen screen--plain screen-enter">
      <StatusBar/>
      <AppBar onBack={()=>go("home")}/>
      <div style={{padding:"0 22px"}}>
        <div className="h1">Запись к врачу</div>
        <div className="sub">Подбор проверенных специалистов</div>
        <div style={{display:"flex",alignItems:"center",gap:10,background:"#fff",borderRadius:18,padding:"15px 16px",marginTop:16,boxShadow:"var(--shadow-soft)",color:"var(--gray)"}}>
          <Icon.search s={20}/><span style={{fontSize:16}}>Симптом, врач или клиника</span>
        </div>
        <div style={{display:"flex",gap:9,marginTop:14,overflowX:"auto",paddingBottom:2}}>
          {tabs.map((t,i)=>(
            <button key={i} onClick={()=>setTab(i)} className={"tag"+(i===tab?" tag--solid":" tag--gray")}
              style={{padding:"9px 15px",fontSize:14,flex:"none"}}>{t}</button>
          ))}
        </div>
        <div style={{marginTop:12}}>
          <span className="tag tag--outline" style={{padding:"9px 15px"}}><Icon.paw s={16}/> Для корги и похожих пород</span>
        </div>
      </div>

      <div style={{padding:"16px 18px 0",display:"flex",flexDirection:"column",gap:14}}>
        <DoctorCard hue={20} name="Анна Соколова" spec="Дерматолог" focus="аллергии, зуд, кожа" clinic="ВетПлюс" rating="4.9"
          pills={[{t:"Рекомендовано для корги",icon:<Icon.shield s={14}/>},{t:"37 похожих случаев"}]}/>
        <DoctorCard hue={250} name="Илья Морозов" spec="Гастроэнтеролог" focus="пищеварение, питание" clinic="Белый хвост" rating="4.8"
          pills={[{t:"Похожие породы",icon:<Icon.paw s={14}/>}]}/>
        <DoctorCard hue={20} name="Мария Лебедева" spec="Терапевт" focus="общий приём, профилактика" clinic="ДокВет" rating="4.9"
          pills={[{t:"Высокая оценка владельцев",icon:<Icon.person s={14}/>}]}/>
      </div>
      <div style={{height:16}}/>
      <div className="dock"><button className="btn" onClick={()=>go("booking")}><Icon.personPlus s={20}/> Подобрать врача</button></div>
      <div className="homebar"/>
    </div>
  );
}
window.DoctorsScreen = DoctorsScreen;

/* ---------- Записаться к врачу ---------- */
function BookingScreen({ go }){
  return (
    <div className="screen screen--plain screen-enter">
      <StatusBar/>
      <AppBar onBack={()=>go("doctors")}/>
      <div style={{padding:"0 22px"}}>
        <div className="h1">Записаться к врачу</div>
        <div className="sub">Подобрано для Лилу</div>
        <div style={{display:"flex",gap:9,marginTop:14,flexWrap:"wrap"}}>
          <Tag variant="gray" style={{background:"#fff",boxShadow:"var(--shadow-soft)",color:"var(--ink)"}}>Корги</Tag>
          <Tag variant="gray" style={{background:"#fff",boxShadow:"var(--shadow-soft)",color:"var(--ink)"}}>зуд</Tag>
          <Tag variant="gray" style={{background:"#fff",boxShadow:"var(--shadow-soft)",color:"var(--ink)"}}>пищевая аллергия</Tag>
        </div>
        <div style={{display:"flex",alignItems:"center",gap:12,background:"var(--green-soft)",borderRadius:18,padding:"15px 16px",marginTop:14}}>
          <Icon.shieldStar s={24} style={{color:"var(--green)",flex:"none"}}/>
          <span style={{fontSize:15,fontWeight:600,color:"var(--green-text)",lineHeight:1.3}}>Подбор по породе, симптомам и истории питомца</span>
        </div>
      </div>

      <div style={{padding:"16px 18px 0",display:"flex",flexDirection:"column",gap:14}}>
        <DoctorCard hue={20} name="Анна Соколова" spec="Дерматолог" focus="аллергии, зуд, кожа" clinic="ВетПлюс" rating="4.9"
          pills={[{t:"Лучшее совпадение",icon:<Icon.sparkle s={13}/>},{t:"Корги"},{t:"32 похожих случая"}]} cta="Записаться" onCta={()=>go("booking")}/>
        <DoctorCard hue={250} name="Илья Морозов" spec="Гастроэнтеролог" focus="пищеварение, питание" clinic="Белый хвост" rating="4.8"
          pills={[{t:"Корги"},{t:"28 похожих случаев"}]} cta="Записаться" onCta={()=>go("booking")}/>
        <DoctorCard hue={20} name="Мария Лебедева" spec="Терапевт" focus="общий приём, аллергии" clinic="ДокВет" rating="4.9"
          pills={[{t:"Корги"},{t:"24 похожих случая"}]} cta="Записаться" onCta={()=>go("booking")}/>
      </div>
      <div style={{height:24}}/>
      <div className="homebar"/>
    </div>
  );
}
window.BookingScreen = BookingScreen;

/* ---------- AI-ассистент ---------- */
function Bubble({ bot, children }){
  return (
    <div style={{display:"flex",gap:10,justifyContent:bot?"flex-start":"flex-end",alignItems:"flex-end"}}>
      {bot && <Mascot size={40}/>}
      <div style={{maxWidth:"76%",background:bot?"#fff":"var(--green-soft)",color:"var(--ink)",
        borderRadius:bot?"6px 20px 20px 20px":"20px 20px 6px 20px",padding:"14px 16px",fontSize:16,lineHeight:1.4,
        boxShadow:bot?"var(--shadow-soft)":"none",fontWeight:500}}>
        {children}
        {!bot && <Icon.check s={15} style={{color:"var(--green)",display:"block",marginLeft:"auto",marginTop:4}}/>}
      </div>
    </div>
  );
}

function AIScreen({ go }){
  return (
    <div className="screen screen--plain screen-enter" style={{display:"flex",flexDirection:"column",overflow:"hidden"}}>
      <StatusBar/>
      <AppBar onBack={()=>go("home")}/>
      <div style={{padding:"0 22px 4px"}}>
        <div className="h1">AI-ассистент</div>
        <div className="sub">Учитывает историю Лилу</div>
        <div style={{display:"flex",gap:9,marginTop:14,overflowX:"auto",paddingBottom:2}}>
          <span className="tag tag--outline" style={{padding:"9px 14px",flex:"none"}}><Icon.scan s={15}/> На основе паспорта здоровья</span>
          <span className="tag tag--outline" style={{padding:"9px 14px",flex:"none"}}><Icon.paw s={15}/> Корги · 3 года</span>
        </div>
      </div>

      <div style={{flex:1,overflowY:"auto",padding:"18px 18px 6px",display:"flex",flexDirection:"column",gap:14}}>
        <Bubble bot>Привет! Я знаю историю Лилу и могу помочь разобраться с симптомами, документами и профилактикой.</Bubble>
        <Bubble>Лилу чешется уже 3 дня. Это может быть аллергия?</Bubble>
        <Bubble bot>Да, это возможно. В истории есть эпизод пищевой аллергии. Проверьте: зуд после еды, покраснение кожи, новые лакомства.</Bubble>
        <Bubble bot>Если хотите, я могу:<br/>1) подсказать, что наблюдать дома<br/>2) напомнить про обработку<br/>3) подобрать дерматолога</Bubble>
      </div>

      <div style={{padding:"6px 16px 0"}}>
        <div style={{display:"flex",gap:10,overflowX:"auto",paddingBottom:10}}>
          <button className="btn btn--ghost btn--sm" style={{flex:"none",gap:8,padding:"0 14px"}}><Icon.home s={16} style={{color:"var(--green)"}}/> Что делать дома?</button>
          <button className="btn btn--ghost btn--sm" style={{flex:"none",gap:8,padding:"0 14px"}} onClick={()=>go("doctors")}><Icon.personPlus s={16} style={{color:"var(--green)"}}/> Подобрать врача</button>
          <button className="btn btn--ghost btn--sm" style={{flex:"none",gap:8,padding:"0 14px"}} onClick={()=>go("passport")}><Icon.doc s={16} style={{color:"var(--green)"}}/> Открыть паспорт</button>
        </div>
        <div style={{display:"flex",alignItems:"center",gap:10,padding:"0 0 16px"}}>
          <div style={{flex:1,background:"#fff",borderRadius:18,padding:"15px 18px",color:"var(--gray)",fontSize:16,boxShadow:"var(--shadow-soft)"}}>Опишите симптом</div>
          <button className="iconbtn" style={{background:"var(--green)",color:"#fff",width:52,height:52,boxShadow:"0 8px 20px rgba(32,168,58,.3)"}}><Icon.send2 s={22}/></button>
        </div>
      </div>
      <div className="homebar"/>
    </div>
  );
}
window.AIScreen = AIScreen;
