/* ============================================================
   NotifCenter.jsx — ศูนย์การแจ้งเตือน (Web Push / Browser Notification)
   ============================================================ */

function notifMeta(n){
  const t = n.type;
  if(t==='confirm')        return {title:'รับทราบการสอนแทนแล้ว', icon:'checkCircle', tone:'green'};
  if(t==='reject')         return {title:'ครูสอนแทนปฏิเสธ', icon:'xCircle', tone:'red'};
  if(t==='approval')       return {title:'ขออนุญาตการลา (รอพิจารณา)', icon:'shield', tone:'brand'};
  if(t==='approval_result')return {title:'ผลการพิจารณาการลา', icon:'checkCircle', tone:'green'};
  if(t==='chair_request')  return {title:'ขอให้ประธานจัดครูสอนแทน', icon:'shield', tone:'chair'};
  if(t==='chair_arranged') return {title:'ประธานจัดครูสอนแทนให้แล้ว', icon:'checkCircle', tone:'green'};
  return {title:'ขอเปลี่ยนคาบสอน — โปรดกดรับทราบ', icon:'bell', tone:'amber'};
}

function NotifCenter({account, notifications, enabled, permission, onEnable, onTest, onClose, onOpenLink}){
  const mine = notifications.filter(n => n.toTeacherId === account.id).slice().reverse();
  const denied = permission==='denied';

  return (
    <div className="notif-overlay" onClick={onClose}>
      <div className="notif-dock" onClick={e=>e.stopPropagation()}>
        <div className="notif-hd">
          <span className="nh-ic"><Icon name="bell" size={18}/></span>
          <div className="nh-t">
            <b>การแจ้งเตือน</b>
            <span>{account.name} · {account.sub}</span>
          </div>
          <button className="nh-x" onClick={onClose} aria-label="ปิด"><Icon name="x" size={18}/></button>
        </div>

        {/* แถบสถานะการแจ้งเตือน */}
        {!enabled ? (
          <div className="push-setup">
            <span className="ps-ic"><Icon name="bell" size={26}/></span>
            <div className="ps-t">เปิดการแจ้งเตือน</div>
            <div className="ps-d">
              {denied
                ? 'เบราว์เซอร์ปิดการแจ้งเตือนแบบ pop-up ของเว็บไซต์นี้ไว้ — แต่คุณยังเปิด “การแจ้งเตือนในระบบ” ได้ (เห็นรายการ + ตัวเลขแจ้งเตือนที่กระดิ่ง) หากต้องการ pop-up เด้งหน้าจอ ให้เปิดสิทธิ์การแจ้งเตือนในการตั้งค่าเบราว์เซอร์'
                : 'เปิดเพื่อรับการแจ้งเตือนเมื่อมีครูขอให้สอนแทน — แสดงในระบบทันที และเด้งแบบ pop-up ผ่านเบราว์เซอร์ (Web Push) เมื่ออนุญาต'}
            </div>
            <button className="ps-btn" onClick={onEnable}><Icon name="bell" size={15}/> เปิดการแจ้งเตือน</button>
          </div>
        ) : (
          <div className="push-on">
            <span className="po-dot"/>
            <span>{permission==='granted' ? 'เปิดแจ้งเตือนแล้ว · เด้ง pop-up ผ่านเบราว์เซอร์' : 'เปิดแจ้งเตือนในระบบแล้ว · (pop-up เบราว์เซอร์ปิดอยู่)'}</span>
            <button className="po-test" onClick={onTest}><Icon name="send" size={13}/> ทดสอบ</button>
          </div>
        )}

        <div className="notif-list">
          {mine.length===0 && (
            <div className="notif-empty">
              <Icon name="bell" size={34} sw={1.4}/>
              <div style={{marginTop:10,fontWeight:600}}>ยังไม่มีการแจ้งเตือน</div>
              <div style={{fontSize:12,marginTop:4,opacity:.85}}>เมื่อมีการขอเปลี่ยนคาบสอน<br/>การแจ้งเตือนจะแสดงที่นี่</div>
            </div>
          )}
          {mine.map(n=>{
            const m = notifMeta(n);
            return (
              <div className={`notif-item tone-${m.tone}`} key={n.id}>
                <span className="ni-ic"><Icon name={m.icon} size={16}/></span>
                <div className="ni-body">
                  <div className="ni-top"><b>{m.title}</b><span className="num">{n.time}</span></div>
                  <div className="ni-text">{n.text}</div>
                  {n.type==='request' && n.assignmentId && (
                    <button className="ni-act" onClick={()=>onOpenLink(n)}><Icon name="checkCircle" size={14}/> เปิดระบบเพื่อกดรับทราบ</button>
                  )}
                  {n.type==='approval' && (
                    <button className="ni-act" onClick={()=>onOpenLink(n)}><Icon name="shield" size={14}/> เปิดระบบเพื่อพิจารณา</button>
                  )}
                  {n.type==='chair_request' && (
                    <button className="ni-act" onClick={()=>onOpenLink(n)}><Icon name="shield" size={14}/> เปิดระบบเพื่อจัดครูสอนแทน</button>
                  )}
                </div>
              </div>
            );
          })}
        </div>

        <div className="notif-foot">
          <Icon name="info" size={13}/> การแจ้งเตือนผ่านเบราว์เซอร์ (Web Push) · ไม่ต้องติดตั้งแอปเพิ่ม
        </div>
      </div>
    </div>
  );
}

window.NotifCenter = NotifCenter;