/* ============================================================
   LinePhone.jsx — มือถือจำลองแชท LINE (Official Account ของระบบ)
   ============================================================ */

function LinePhone({account, notifications, linked, lineName, onLink, onClose, onOpenLink}){
  const chatRef = React.useRef(null);
  const mine = notifications.filter(n => n.toTeacherId === account.id);

  React.useEffect(()=>{
    if(chatRef.current) chatRef.current.scrollTop = chatRef.current.scrollHeight;
  }, [mine.length]);

  return (
    <div className="line-overlay" onClick={onClose}>
      <div className="line-dock" onClick={e=>e.stopPropagation()}>
        <div className="line-dock-hd">
          <div className="who">
            กล่องข้อความ LINE ของ
            <b>{account.name} · {account.sub}</b>
          </div>
          <button className="x" onClick={onClose} aria-label="ปิด">✕</button>
        </div>

        <div className="phone">
          <div className="phone-status">
            <span className="num">9:41</span>
            <span style={{display:'flex',gap:6,alignItems:'center'}}>
              <span>●●●●</span><span>5G</span><span>🔋</span>
            </span>
          </div>

          <div className="line-hd">
            <span className="bk">‹</span>
            <div className="oa"><Icon name="swap" size={19}/></div>
            <div className="oa-t">
              <b>ระบบจัดสอนแทน ร.ร.หนองตาคงฯ</b>
              <span>บัญชีทางการ · {linked? `เชื่อมกับ ${lineName}` : 'แจ้งเตือนอัตโนมัติ'}</span>
            </div>
          </div>

          {!linked ? (
            <div className="chat" style={{alignItems:'center',justifyContent:'center'}}>
              <div className="ll-notlinked">
                <span className="nl-ic"><Icon name="swap" size={30}/></span>
                <div className="nl-t">ยังไม่ได้เชื่อมบัญชี LINE</div>
                <div className="nl-d">ระบบยังส่งข้อความแจ้งเตือนหาคุณไม่ได้ จนกว่าจะเชื่อม LINE ของคุณเข้ากับบัญชี {account.username}</div>
                <button className="nl-btn" onClick={onLink}><Icon name="swap" size={15}/> เชื่อมบัญชี LINE ตอนนี้</button>
              </div>
            </div>
          ) : (
          <div className="chat" ref={chatRef}>
            {mine.length===0 && (
              <div className="chat-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.length>0 && <div className="chat-day">วันนี้</div>}

            {mine.map(n => {
              const isConfirm = n.type==='confirm';
              const isReject = n.type==='reject';
              const isApproval = n.type==='approval';
              const isResult = n.type==='approval_result';
              const title = isConfirm?'แจ้งผล: รับทราบแล้ว'
                : isReject?'แจ้งผล: ถูกปฏิเสธ'
                : isApproval?'ขออนุญาตการลา (รอพิจารณา)'
                : isResult?'ผลการพิจารณาการลา'
                : 'ขอเปลี่ยนคาบสอน';
              const icon = isConfirm||isResult?'checkCircle':isReject?'xCircle':isApproval?'shield':'bell';
              return (
              <div className="msg" key={n.id}>
                <div className="ava"><Icon name="swap" size={14}/></div>
                <div>
                  <div className={`bubble ${isConfirm?'confirm':''} ${isReject?'reject':''}`}>
                    <div className="tl">
                      <Icon name={icon} size={13}/>
                      {title}
                    </div>
                    <div style={{whiteSpace:'pre-wrap'}}>{n.text}</div>
                    {n.type==='request' && n.assignmentId && (
                      <button className="lk" onClick={()=>onOpenLink(n)}>
                        <Icon name="checkCircle" size={14}/> เปิดระบบเพื่อกดรับทราบ
                      </button>
                    )}
                    {isApproval && (
                      <button className="lk" onClick={()=>onOpenLink(n)}>
                        <Icon name="shield" size={14}/> เปิดระบบเพื่อพิจารณา
                      </button>
                    )}
                  </div>
                </div>
                <span className="tm num">{n.time}</span>
              </div>
              );
            })}
          </div>
          )}
        </div>
      </div>
    </div>
  );
}

window.LinePhone = LinePhone;