// screens-doctor.jsx — doctor (vet) role app: dashboard, bookings, availability, profile
(function(){
  const { useState } = React;
  const Icon = window.Icon;
  const { Header, Segmented, Stars, SecureNote } = window;

  // ── status badge using doctor statuses ──
  function DocBadge({ status }){
    const s = window.DATA.doctorStatus[status] || { label:status, cls:'ok' };
    return <span className={'badge '+s.cls}><span className="dot"/>{s.label}</span>;
  }

  // ── toggle switch ──
  function Switch({ on, onChange }){
    return (
      <button onClick={()=>onChange(!on)} aria-label="تبديل"
        style={{width:48, height:28, borderRadius:999, border:'none', cursor:'pointer', padding:0,
          background:on?'var(--green)':'var(--line-2)', position:'relative', transition:'.18s', flex:'0 0 auto'}}>
        <span style={{position:'absolute', top:3, left:on?23:3, width:22, height:22, borderRadius:'50%', background:'#fff', boxShadow:'var(--sh-sm)', transition:'left .18s'}}/>
      </button>
    );
  }

  function DocAvatar({ size=64 }){
    return (
      <div className="ph avatar-ring" style={{width:size, height:size, borderRadius:'50%', padding:0, flex:'0 0 auto'}}>
        <div className="ph" style={{width:size, height:size, borderRadius:'50%'}}><span className="ph-label">صورة<br/>الطبيب</span></div>
      </div>
    );
  }

  function BookingRow({ b, onAccept, onDecline, compact }){
    return (
      <div className="card" style={{padding:14, marginBottom:10}}>
        <div style={{display:'flex', alignItems:'center', gap:12}}>
          <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={b.icon} size={21}/>
          </span>
          <div style={{flex:1, minWidth:0}}>
            <div style={{display:'flex', alignItems:'center', gap:8}}>
              <span className="ar lead" style={{fontSize:14.5}}>{b.service}</span>
              <DocBadge status={b.status}/>
            </div>
            <div className="ar t-mut t-xs" style={{fontWeight:600, marginTop:3}}>{b.horse} · {b.owner}</div>
          </div>
          <div style={{textAlign:'left'}}>
            <div className="ar lead" style={{fontSize:13.5, color:'var(--green)'}}>{b.time}</div>
            <div className="ar t-mut t-xs" style={{fontWeight:600, marginTop:2}}>{b.date}</div>
          </div>
        </div>
        {!compact && (
          <div style={{display:'flex', alignItems:'center', gap:6, marginTop:10, color:'var(--muted)'}}>
            <Icon name="pin" size={14} sw={1.7}/><span className="ar t-xs" style={{fontWeight:600}}>{b.place}</span>
          </div>
        )}
        {b.status==='pending' && onAccept && (
          <div style={{display:'flex', gap:8, marginTop:12}}>
            <button className="btn btn-primary ar" onClick={()=>onAccept(b.id)} style={{padding:'11px', fontSize:13.5}}><Icon name="check" size={17} color="#fff"/> قبول</button>
            <button className="btn btn-line ar" onClick={()=>onDecline(b.id)} style={{padding:'11px', fontSize:13.5, color:'var(--bad-fg)', borderColor:'var(--line-2)'}}>رفض</button>
          </div>
        )}
      </div>
    );
  }

  /* ───────────────────────── DASHBOARD ───────────────────────── */
  function DocHome({ avail, setAvail, bookings, today }){
    const P = window.DATA.doctorProfile;
    const pending = bookings.filter(b=>b.status==='pending').length;
    const stats = [ ['مواعيد اليوم', today.length, 'calendar'], ['قيد الانتظار', pending, 'clock'], ['التقييم', P.rating, 'star'] ];
    return (
      <div className="scroll pad-tab scr-anim">
        {/* greeting */}
        <div style={{padding:'56px 18px 10px', display:'flex', alignItems:'center', gap:12}}>
          <div style={{flex:1, lineHeight:1.35}}>
            <div className="ar t-mut" style={{fontSize:12.5, fontWeight:700}}>السبت، 10 مايو</div>
            <div className="ar lead" style={{fontSize:20, color:'var(--ink)', marginTop:1}}>مرحباً، {P.name} 👨‍⚕️</div>
          </div>
          <button className="hdr-btn" aria-label="الإشعارات" style={{position:'relative'}}>
            <Icon name="bell" size={20}/>
            <span style={{position:'absolute', top:9, left:11, width:7, height:7, borderRadius:'50%', background:'var(--gold)', border:'1.5px solid var(--surface)'}}/>
          </button>
        </div>

        {/* availability master toggle */}
        <div style={{padding:'4px 16px 0'}}>
          <div className="card card-pad" style={{display:'flex', alignItems:'center', gap:14}}>
            <span style={{width:46, height:46, borderRadius:14, flex:'0 0 auto', display:'flex', alignItems:'center', justifyContent:'center',
              background:avail?'var(--ok-bg)':'var(--surface-2)', color:avail?'var(--ok-fg)':'var(--faint)'}}>
              <Icon name={avail?'check':'clock'} size={22}/>
            </span>
            <div style={{flex:1}}>
              <div className="ar lead" style={{fontSize:15.5}}>{avail?'متاح للحجوزات':'غير متاح حالياً'}</div>
              <div className="ar t-mut t-xs" style={{fontWeight:600, marginTop:2}}>{avail?'يمكن للعملاء حجز المواعيد معك' : 'لن تظهر للعملاء للحجز'}</div>
            </div>
            <Switch on={avail} onChange={setAvail}/>
          </div>
        </div>

        {/* stats */}
        <div style={{padding:'16px 16px 4px'}}>
          <div className="card" style={{display:'flex', textAlign:'center', overflow:'hidden'}}>
            {stats.map((s,i)=>(
              <div key={i} style={{flex:1, padding:'15px 4px', borderInlineStart:i?'1px solid var(--line)':'none'}}>
                <span style={{color:'var(--green)', display:'inline-flex'}}><Icon name={s[2]} size={18}/></span>
                <div className="lead" style={{fontSize:19, color:'var(--ink)', marginTop:5, fontFamily:"'Rubik',sans-serif"}}>{s[1]}</div>
                <div className="ar t-mut t-xs" style={{fontWeight:600, marginTop:2}}>{s[0]}</div>
              </div>
            ))}
          </div>
        </div>

        {/* today's appointments */}
        <div style={{padding:'20px 16px 0'}}>
          <h3 className="ar lead" style={{margin:'0 0 12px', fontSize:16}}>مواعيد اليوم</h3>
          {today.length ? today.map(b=>(<BookingRow key={b.id} b={b} compact/>))
            : <div className="ar t-mut" style={{textAlign:'center', padding:'30px 0', fontWeight:600}}>لا توجد مواعيد اليوم</div>}
        </div>
      </div>
    );
  }

  /* ───────────────────────── BOOKINGS ───────────────────────── */
  const FILTERS = [
    { id:'all',       label:'الكل' },
    { id:'confirmed', label:'مؤكد' },
    { id:'pending',   label:'قيد الانتظار' },
    { id:'completed', label:'مكتمل' },
  ];
  function DocBookings({ bookings, onAccept, onDecline }){
    const [filter,setFilter] = useState('all');
    const list = bookings.filter(b=> filter==='all' ? true : b.status===filter);
    return (
      <div className="scroll pad-tab scr-anim">
        <Header title="المواعيد"
          right={<button className="hdr-btn" aria-label="تقويم"><Icon name="calendar" size={19}/></button>} />
        <div style={{padding:'2px 16px 14px'}}>
          <Segmented items={FILTERS} value={filter} onChange={setFilter}/>
        </div>
        <div style={{padding:'0 16px'}}>
          {list.length ? list.map(b=>(<BookingRow key={b.id} b={b} onAccept={onAccept} onDecline={onDecline}/>))
            : <div className="ar t-mut" style={{textAlign:'center', padding:'48px 0', fontWeight:600}}>لا توجد مواعيد في هذه الحالة</div>}
        </div>
      </div>
    );
  }

  /* ───────────────────────── AVAILABILITY ───────────────────────── */
  function DocAvailability({ avail, setAvail, schedule, toggleSlot }){
    const totalOn = schedule.reduce((s,d)=> s + d.slots.filter(x=>x.on).length, 0);
    return (
      <div className="scroll pad-tab scr-anim">
        <Header title="التوفّر" />
        <div style={{padding:'2px 16px 0'}}>
          {/* master toggle */}
          <div className="card card-pad" style={{display:'flex', alignItems:'center', gap:14, marginBottom:16}}>
            <div style={{flex:1}}>
              <div className="ar lead" style={{fontSize:15.5}}>استقبال الحجوزات</div>
              <div className="ar t-mut t-xs" style={{fontWeight:600, marginTop:2}}>{totalOn} موعد متاح هذا الأسبوع</div>
            </div>
            <Switch on={avail} onChange={setAvail}/>
          </div>

          <div className="ar t-mut t-sm" style={{fontWeight:600, marginBottom:12, opacity:avail?1:.5}}>اضغط على الوقت لإتاحته أو إيقافه</div>

          {/* per-day slots */}
          <div style={{opacity:avail?1:.45, pointerEvents:avail?'auto':'none', transition:'.2s'}}>
            {schedule.map((d,di)=>(
              <div className="card card-pad" key={di} style={{marginBottom:12}}>
                <div style={{display:'flex', alignItems:'center', justifyContent:'space-between', marginBottom:12}}>
                  <span className="ar lead" style={{fontSize:15}}>{d.day}</span>
                  <span className="ar t-mut t-xs" style={{fontWeight:600}}>{d.date} · {d.slots.filter(x=>x.on).length}/{d.slots.length} متاح</span>
                </div>
                <div style={{display:'grid', gridTemplateColumns:'1fr 1fr 1fr', gap:10}}>
                  {d.slots.map((s,si)=>(
                    <button key={si} onClick={()=>toggleSlot(di,si)} className="tap num"
                      style={{border:s.on?'1.5px solid var(--green)':'1.5px solid var(--line-2)', cursor:'pointer', borderRadius:13, padding:'11px 4px',
                        fontWeight:600, fontSize:13, background:s.on?'var(--green-tint)':'var(--surface-2)',
                        color:s.on?'var(--green-700)':'var(--faint)', textDecoration:s.on?'none':'line-through'}}>
                      {s.t}
                    </button>
                  ))}
                </div>
              </div>
            ))}
          </div>

          <SecureNote text="يتم تحديث توفّرك مباشرة للعملاء." />
        </div>
      </div>
    );
  }

  /* ───────────────────────── PROFILE ───────────────────────── */
  function DocProfile(){
    const P = window.DATA.doctorProfile;
    const rows = [
      { icon:'building', k:'العيادة',   v:P.clinic },
      { icon:'phone',    k:'الهاتف',    v:P.phone, num:true },
      { icon:'doc',      k:'البريد',    v:P.email },
      { icon:'shield',   k:'الترخيص',   v:P.license, num:true },
      { icon:'pin',      k:'الموقع',    v:P.city },
    ];
    return (
      <div className="scroll pad-tab scr-anim">
        <Header title="حسابي"
          right={<button className="hdr-btn" aria-label="تعديل"><Icon name="edit" size={17}/></button>} />
        <div style={{padding:'2px 16px 0'}}>
          {/* profile head */}
          <div className="card card-pad" style={{display:'flex', alignItems:'center', gap:14, marginBottom:14}}>
            <DocAvatar size={66}/>
            <div style={{flex:1}}>
              <div className="ar lead" style={{fontSize:17}}>{P.name}</div>
              <div className="ar t-mut t-sm" style={{fontWeight:600, marginTop:2}}>{P.spec} · {P.exp}</div>
              <div style={{marginTop:8}}><Stars value={P.rating}/> <span className="ar t-mut t-xs" style={{fontWeight:600}}>({P.reviews} تقييم)</span></div>
            </div>
          </div>

          {/* info */}
          <div className="card" style={{overflow:'hidden', marginBottom:14}}>
            {rows.map((r,i)=>(
              <div key={i} style={{display:'flex', alignItems:'center', gap:12, padding:'14px 16px', borderTop:i?'1px solid var(--line)':'none'}}>
                <span style={{width:34, height:34, borderRadius:10, background:'var(--green-tint)', color:'var(--green)', display:'flex', alignItems:'center', justifyContent:'center', flex:'0 0 auto'}}>
                  <Icon name={r.icon} size={18} sw={1.8}/>
                </span>
                <span className="ar t-mut t-sm" style={{fontWeight:700, flex:1}}>{r.k}</span>
                <span className={(r.num?'num':'ar lead')} style={{fontSize:13.5, color:'var(--ink)', fontWeight:700}}>{r.v}</span>
              </div>
            ))}
          </div>

          <button className="btn ar" style={{background:'var(--surface)', color:'var(--bad-fg)', boxShadow:'var(--sh-sm)'}}>تسجيل الخروج</button>
          <SecureNote text="الإصدار 2.0 · تطبيق خيل للأطباء" />
        </div>
      </div>
    );
  }

  /* ───────────────────────── DOCTOR TAB BAR + APP ───────────────────────── */
  const DOC_TABS = [
    { id:'home',    label:'الرئيسية', icon:'home' },
    { id:'book',    label:'المواعيد', icon:'calendar' },
    { id:'avail',   label:'التوفّر',  icon:'clock' },
    { id:'profile', label:'حسابي',    icon:'user' },
  ];
  function DocTabBar({ active, onTab, pending }){
    return (
      <div className="tabbar">
        <div className="tabbar-inner">
          {DOC_TABS.map(t=>(
            <button key={t.id} className={'tab '+(active===t.id?'on':'')} onClick={()=>onTab(t.id)}>
              <span className="ic">
                <Icon name={t.icon} size={23} sw={active===t.id?2.1:1.8}/>
                {t.id==='book' && pending>0 && <span className="tab-badge num">{pending}</span>}
              </span>
              <span>{t.label}</span>
            </button>
          ))}
        </div>
      </div>
    );
  }

  function DoctorApp(){
    const D = window.DATA;
    const [tab,setTab] = useState('home');
    const [avail,setAvail] = useState(true);
    const [bookings,setBookings] = useState(()=> D.doctorBookings.map(b=>({...b})));
    const [schedule,setSchedule] = useState(()=> D.doctorAvailability.map(d=>({...d, slots:d.slots.map(s=>({...s}))})));

    const setStatus = (id,status)=> setBookings(bs=> bs.map(b=> b.id===id?{...b,status}:b));
    const onAccept = (id)=> setStatus(id,'confirmed');
    const onDecline = (id)=> setStatus(id,'cancelled');
    const toggleSlot = (di,si)=> setSchedule(sc=> sc.map((d,i)=> i!==di ? d : {...d, slots:d.slots.map((s,j)=> j!==si?s:{...s,on:!s.on})}));

    const today = bookings.filter(b=> b.date==='اليوم' && b.status!=='cancelled');
    const pending = bookings.filter(b=>b.status==='pending').length;

    const screens = {
      home:    <DocHome avail={avail} setAvail={setAvail} bookings={bookings} today={today}/>,
      book:    <DocBookings bookings={bookings} onAccept={onAccept} onDecline={onDecline}/>,
      avail:   <DocAvailability avail={avail} setAvail={setAvail} schedule={schedule} toggleSlot={toggleSlot}/>,
      profile: <DocProfile/>,
    };

    return (
      <div className="app">
        {React.cloneElement(screens[tab], { key: tab })}
        <DocTabBar active={tab} onTab={setTab} pending={pending}/>
      </div>
    );
  }

  window.DoctorApp = DoctorApp;
})();