/* ============================================================
   LineLinkModal.jsx — จำลองการเชื่อมบัญชี LINE (LINE Login + LIFF)
   ขั้นตอน: แอดเพื่อน → ยินยอม LINE → ยืนยันบัญชีแอป → ผูกสำเร็จ
   ============================================================ */

function QRBox(){
  // ลายคล้าย QR (สำหรับสาธิต)
  const cells = [];
  const seed = [1,1,1,0,1,0,1, 1,0,1,1,0,1,1, 1,1,0,0,1,1,0, 0,1,1,0,1,0,1, 1,0,0,1,1,1,0, 0,1,1,1,0,0,1, 1,0,1,0,1,1,1];
  for(let i=0;i<49;i++){ if(seed[i]) cells.push(i); }
  return (
    <svg width="118" height="118" viewBox="0 0 70 70" style={{display:'block'}}>
      <rect width="70" height="70" fill="#fff"/>
      {cells.map(i=>{ const x=(i%7)*10, y=Math.floor(i/7)*10; return <rect key={i} x={x} y={y} width="10" height="10" fill="#06351c"/>; })}
      {/* finder squares */}
      {[[0,0],[50,0],[0,50]].map(([x,y],i)=>(
        <g key={'f'+i}><rect x={x} y={y} width="20" height="20" fill="#fff"/><rect x={x} y={y} width="20" height="20" fill="none" stroke="#06C755" strokeWidth="4"/><rect x={x+7} y={y+7} width="6" height="6" fill="#06C755"/></g>
      ))}
    </svg>
  );
}

function LineLinkModal({me, onLink, onClose}){
  const [step, setStep] = React.useState(1);
  const [lineName, setLineName] = React.useState(me.short);
  const [pwd, setPwd] = React.useState('');

  return (
    <div className="modal-bg" onClick={onClose}>
      <div className="modal" onClick={e=>e.stopPropagation()} style={{maxWidth:430}}>
        <div className="ll-hd">
          <span className="ll-logo"><Icon name="swap" size={18}/></span>
          <div><b>เชื่อมบัญชี LINE</b><span>ระบบจัดสอนแทน ร.ร.หนองตาคงฯ</span></div>
          <button className="ll-x" onClick={onClose}>✕</button>
        </div>

        <div className="ll-steps">
          {[1,2,3].map(n=>(
            <React.Fragment key={n}>
              <span className={`ll-dot ${step>=n?'on':''} ${step>n?'done':''}`}>{step>n?'✓':n}</span>
              {n<3 && <span className={`ll-bar ${step>n?'on':''}`}/>}
            </React.Fragment>
          ))}
        </div>

        <div className="modal-bd">
          {/* STEP 1 — add friend */}
          {step===1 && (
            <div className="ll-center">
              <div className="ll-title">ขั้นที่ 1 · เพิ่มเพื่อน LINE OA ของโรงเรียน</div>
              <div className="ll-qr"><QRBox/></div>
              <div className="ll-oa-name"><span className="ll-oa-badge"><Icon name="check" size={12}/></span>ระบบจัดสอนแทน ร.ร.หนองตาคงพิทยาคาร</div>
              <p className="ll-desc">เปิดแอป LINE แล้วสแกน QR นี้เพื่อเพิ่มบัญชีทางการของโรงเรียนเป็นเพื่อน (ทำครั้งเดียว)</p>
            </div>
          )}

          {/* STEP 2 — LINE consent */}
          {step===2 && (
            <div className="ll-consent">
              <div className="ll-consent-card">
                <div className="ll-consent-top">
                  <span className="ll-logo lg"><Icon name="swap" size={22}/></span>
                  <div className="ll-consent-name">ระบบจัดสอนแทน ร.ร.หนองตาคงฯ</div>
                  <div className="ll-consent-sub">ต้องการเข้าถึงข้อมูลของคุณ</div>
                </div>
                <div className="ll-perms">
                  <div className="ll-perm"><Icon name="user" size={15}/> ชื่อโปรไฟล์ และรูปโปรไฟล์</div>
                  <div className="ll-perm"><Icon name="bell" size={15}/> ส่งข้อความแจ้งเตือนถึงคุณ</div>
                </div>
                <div className="field mb0" style={{marginTop:4}}>
                  <label style={{fontSize:12}}>ชื่อที่แสดงใน LINE ของคุณ</label>
                  <input className="inp" value={lineName} onChange={e=>setLineName(e.target.value)} placeholder="ชื่อ LINE ของคุณ"/>
                </div>
              </div>
              <p className="ll-desc" style={{marginTop:12}}>นี่คือหน้าจอ “ยินยอม” ของ LINE — เมื่อกดอนุญาต LINE จะส่งรหัสผู้ใช้ (userId) ให้ระบบเพื่อใช้ส่งแจ้งเตือน</p>
            </div>
          )}

          {/* STEP 3 — confirm app account */}
          {step===3 && (
            <div>
              <div className="ll-title" style={{textAlign:'center',marginBottom:14}}>ขั้นที่ 3 · ยืนยันบัญชีในระบบ</div>
              <div className="ll-bind">
                <div className="ll-bind-side">
                  <span className="ll-logo"><Icon name="swap" size={16}/></span>
                  <div className="ll-bind-nm">{lineName}</div>
                  <div className="ll-bind-sub">บัญชี LINE</div>
                </div>
                <Icon name="swap" size={20} style={{color:'var(--brand-500)',flex:'none'}}/>
                <div className="ll-bind-side">
                  <Avatar t={me} size="md"/>
                  <div className="ll-bind-nm">{fullTitle(me)}</div>
                  <div className="ll-bind-sub num">{me.username}</div>
                </div>
              </div>
              <div className="field" style={{marginTop:16,marginBottom:0}}>
                <label>ยืนยันรหัสผ่านบัญชีในระบบ (ครั้งเดียว)</label>
                <input className="inp" type="password" value={pwd} onChange={e=>setPwd(e.target.value)} placeholder="รหัสผ่านของบัญชี" autoFocus/>
                <div className="hint">เพื่อยืนยันว่า LINE นี้เป็นของเจ้าของบัญชี {me.username} จริง</div>
              </div>
            </div>
          )}
        </div>

        <div className="modal-ft">
          {step>1 && <Btn variant="ghost" onClick={()=>setStep(step-1)} style={{marginRight:'auto'}}>ย้อนกลับ</Btn>}
          {step===1 && <Btn variant="green" icon="check" onClick={()=>setStep(2)}>เพิ่มเพื่อนแล้ว ถัดไป</Btn>}
          {step===2 && <Btn variant="green" icon="checkCircle" onClick={()=>setStep(3)}>อนุญาต</Btn>}
          {step===3 && <Btn variant="primary" icon="check" disabled={!pwd} onClick={()=>onLink(me.id, lineName.trim()||me.short, pwd)}>เชื่อมบัญชี</Btn>}
        </div>
      </div>
    </div>
  );
}

window.LineLinkModal = LineLinkModal;