// screens-health.jsx — horse health record (الملف الصحي)
(function(){
  const { useState } = React;
  const Icon = window.Icon;
  const { Header, HorseAvatar, SpecRow, Segmented, SecureNote } = window;

  const TABS = [
    { id:'record',   label:'السجل الصحي' },
    { id:'vaccines', label:'التطعيمات' },
    { id:'notes',    label:'الملاحظات' },
  ];

  function ProfileHead(){
    const h = window.DATA.horse;
    return (
      <div className="card card-pad" style={{display:'flex', gap:16, marginBottom:14, alignItems:'center'}}>
        <HorseAvatar size={84}/>
        <div style={{flex:1}}>
          <SpecRow k="الاسم" v={h.name}/>
          <div className="rowline"/>
          <SpecRow k="العمر" v={h.age}/>
          <div className="rowline"/>
          <SpecRow k="الجنس" v={h.sex}/>
        </div>
      </div>
    );
  }

  function RecordTab(){
    const list = window.DATA.health;
    return (
      <div className="card card-pad">
        <div className="tl">
          {list.map((e,i)=>(
            <div className="tl-row" key={i}>
              <div className="tl-node">
                <div className="tl-dot"><Icon name={e.icon} size={20}/></div>
                {i<list.length-1 && <div className="tl-line"/>}
              </div>
              <div className="tl-body">
                <div style={{display:'flex', justifyContent:'space-between', gap:8}}>
                  <span className="ar lead" style={{fontSize:15}}>{e.t}</span>
                  <span className="ar t-mut t-xs" style={{fontWeight:600, whiteSpace:'nowrap'}}>{e.date}</span>
                </div>
                <div className="ar t-mut t-sm" style={{fontWeight:600, margin:'3px 0 5px'}}>{e.d}</div>
                <div style={{display:'flex', alignItems:'center', gap:6, color:'var(--green)'}}>
                  <Icon name="stetho" size={13} sw={1.7}/>
                  <span className="ar t-xs" style={{fontWeight:700}}>{e.by}</span>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    );
  }

  function VaccinesTab(){
    const list = window.DATA.vaccines;
    return (
      <div style={{display:'flex', flexDirection:'column', gap:12}}>
        {list.map((v,i)=>(
          <div className="card card-pad" key={i} style={{display:'flex', alignItems:'center', gap:13}}>
            <span style={{width:46, height:46, borderRadius:14, display:'flex', alignItems:'center', justifyContent:'center',
              background: v.done?'var(--green-tint)':'var(--warn-bg)', color: v.done?'var(--green)':'var(--warn-fg)'}}>
              <Icon name="syringe" size={22}/>
            </span>
            <div style={{flex:1}}>
              <div className="ar lead" style={{fontSize:14.5}}>{v.t}</div>
              <div className="ar t-mut t-xs" style={{fontWeight:600, marginTop:2}}>آخر جرعة: {v.date}</div>
              <div className="ar t-mut t-xs" style={{fontWeight:600, marginTop:1}}>الجرعة القادمة: {v.next}</div>
            </div>
            <span className={'badge '+(v.done?'ok':'warn')}><span className="dot"/>{v.done?'مكتمل':'مستحق'}</span>
          </div>
        ))}
      </div>
    );
  }

  function NotesTab(){
    return (
      <div className="card card-pad">
        <div className="ar lead" style={{fontSize:15, marginBottom:8}}>ملاحظات الطبيب</div>
        <p className="ar t-sm" style={{margin:0, lineHeight:1.8, color:'var(--ink-2)', fontWeight:500}}>
          الحالة العامة للحصان ممتازة. يُنصح بالحفاظ على نظام التغذية الحالي ومتابعة التمارين اليومية.
          يُفضّل إجراء فحص دوري كل ثلاثة أشهر، مع الانتباه لأي تغيّر في الشهية أو الحركة.
        </p>
        <div className="inset" style={{padding:14, marginTop:14, display:'flex', gap:10, alignItems:'flex-start'}}>
          <span style={{color:'var(--gold)', marginTop:1}}><Icon name="leaf" size={18}/></span>
          <div>
            <div className="ar lead" style={{fontSize:13.5}}>توصية التغذية</div>
            <div className="ar t-mut t-sm" style={{fontWeight:600, marginTop:2}}>زيادة علف التوازن بنسبة 10% خلال موسم التدريب.</div>
          </div>
        </div>
      </div>
    );
  }

  function HealthScreen({ back, go }){
    const [tab,setTab] = useState('record');
    return (
      <div className="scroll pad-tab scr-anim">
        <Header title="الملف الصحي" onBack={back}
          right={<button className="hdr-btn" aria-label="تعديل"><Icon name="edit" size={18}/></button>} />
        <div style={{padding:'2px 16px 0'}}>
          <ProfileHead/>

          {/* pedigree entry */}
          <div className="card tap" onClick={()=>go && go('pedigree')} style={{padding:14, display:'flex', alignItems:'center', gap:13, marginBottom:14}}>
            <span style={{width:44, height:44, borderRadius:13, background:'var(--green-tint)', color:'var(--green)', display:'flex', alignItems:'center', justifyContent:'center', flex:'0 0 auto'}}>
              <Icon name="tree" size={22}/>
            </span>
            <div style={{flex:1}}>
              <div className="ar lead" style={{fontSize:14.5}}>النسب وشجرة العائلة</div>
              <div className="ar t-mut t-xs" style={{fontWeight:600, marginTop:2}}>الأب والأم والأجداد · سجل النسب</div>
            </div>
            <span style={{color:'var(--faint)'}}><Icon name="chevron-l" size={20}/></span>
          </div>

          <div style={{marginBottom:14}}>
            <Segmented items={TABS} value={tab} onChange={setTab}/>
          </div>
          {tab==='record' && <RecordTab/>}
          {tab==='vaccines' && <VaccinesTab/>}
          {tab==='notes' && <NotesTab/>}
          <SecureNote text="جميع بيانات السجل الصحي محفوظة وآمنة." />
        </div>
      </div>
    );
  }

  /* ───────────────────────── PEDIGREE / FAMILY TREE ───────────────────────── */
  function HorseNode({ name, sub, badge, accent='var(--green)', big }){
    return (
      <div className="card" style={{padding: big?'16px 14px':'12px 10px', textAlign:'center', borderTop:`3px solid ${accent}`, position:'relative'}}>
        <div style={{width: big?56:42, height: big?56:42, borderRadius:'50%', margin:'0 auto 8px', display:'flex', alignItems:'center', justifyContent:'center',
          background:'var(--green-tint)', color:accent}}>
          <Icon name="horse-tab" size={big?28:21}/>
        </div>
        <div className="ar lead" style={{fontSize: big?17:14, color:'var(--ink)'}}>{name}</div>
        {sub && <div className="ar t-mut t-xs" style={{fontWeight:600, marginTop:2}}>{sub}</div>}
        {badge && <span className="badge ok" style={{marginTop:8, fontSize:10.5, padding:'3px 9px'}}>{badge}</span>}
      </div>
    );
  }

  function Drop({ h=16 }){
    return <div style={{width:2, height:h, background:'var(--line-2)', margin:'0 auto'}}/>;
  }

  function GP({ role, name }){
    return (
      <div className="inset" style={{padding:'9px 11px', display:'flex', alignItems:'center', gap:9}}>
        <span style={{width:8, height:8, borderRadius:'50%', background:'var(--faint)', flex:'0 0 auto'}}/>
        <div style={{flex:1, minWidth:0}}>
          <div className="ar lead" style={{fontSize:12.5, color:'var(--ink)'}}>{name}</div>
          <div className="ar t-mut t-xs" style={{fontWeight:600}}>{role}</div>
        </div>
      </div>
    );
  }

  function ParentCol({ role, accent, data }){
    return (
      <div style={{display:'flex', flexDirection:'column', alignItems:'stretch'}}>
        <div style={{textAlign:'center', marginBottom:7}}>
          <span className="badge" style={{background: accent+'22', color:accent, fontSize:11}}>{role}</span>
        </div>
        <HorseNode name={data.name} sub={data.breed+(data.color?(' · '+data.color):'')} badge={data.titles} accent={accent}/>
        <Drop/>
        <div className="ar t-mut t-xs" style={{textAlign:'center', fontWeight:700, marginBottom:7}}>الأجداد</div>
        <div style={{display:'flex', flexDirection:'column', gap:8}}>
          <GP role="الجد" name={data.sire.name}/>
          <GP role="الجدة" name={data.dam.name}/>
        </div>
      </div>
    );
  }

  function PedigreeScreen({ back }){
    const h = window.DATA.horse;
    const p = h.pedigree || { sire:{name:'—',breed:'',sire:{name:'—'},dam:{name:'—'}}, dam:{name:'—',breed:'',sire:{name:'—'},dam:{name:'—'}} };
    return (
      <div className="scroll pad-tab scr-anim">
        <Header title="شجرة النسب" onBack={back}
          right={<button className="hdr-btn" aria-label="مشاركة"><Icon name="share" size={18}/></button>} />
        <div style={{padding:'2px 16px 0'}}>
          {/* subject */}
          <div style={{maxWidth:240, margin:'0 auto'}}>
            <HorseNode name={h.name} sub={h.breed+' · '+h.color+' · '+h.age} badge={h.reg} accent="var(--green-700)" big/>
          </div>
          <Drop h={14}/>
          <div className="ar t-mut t-xs" style={{textAlign:'center', fontWeight:700, marginBottom:12}}>الوالدان</div>

          {/* parents + grandparents */}
          <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:12}}>
            <ParentCol role="الأب" accent="#2C5C40" data={p.sire}/>
            <ParentCol role="الأم" accent="#B08A45" data={p.dam}/>
          </div>

          {/* registration note */}
          <div className="card card-pad" style={{marginTop:16, display:'flex', alignItems:'center', gap:12}}>
            <span style={{width:40, height:40, borderRadius:12, background:'var(--green-tint)', color:'var(--green)', display:'flex', alignItems:'center', justifyContent:'center', flex:'0 0 auto'}}>
              <Icon name="doc" size={20}/>
            </span>
            <div style={{flex:1}}>
              <div className="ar lead" style={{fontSize:14}}>رقم تسجيل النسب</div>
              <div className="num t-mut t-xs" style={{fontWeight:700, marginTop:2, direction:'ltr', textAlign:'right'}}>{h.reg}</div>
            </div>
            <span className="badge ok"><span className="dot"/>موثّق</span>
          </div>

          <SecureNote text="نسب موثّق من جمعية الخيل العربية." />
        </div>
      </div>
    );
  }

  Object.assign(window, { HealthScreen, PedigreeScreen });
})();