/* ============================================================
   HelpView.jsx — คู่มือการใช้งานระบบ (ปรับเนื้อหาตามบทบาทผู้ใช้)
   ============================================================ */

function HelpSection({id, icon, title, defaultOpen, children}){
  const [open, setOpen] = React.useState(!!defaultOpen);
  return (
    <div className="card" style={{marginBottom:12,overflow:'hidden'}}>
      <button onClick={()=>setOpen(o=>!o)}
        style={{
          width:'100%',padding:'14px 16px',background:open?'var(--brand-50)':'#fff',
          border:'none',borderBottom:open?'1px solid var(--line)':'none',cursor:'pointer',
          display:'flex',alignItems:'center',gap:12,textAlign:'left',
          fontFamily:'Kanit',fontSize:15.5,fontWeight:600,color:'var(--brand-900)'
        }}>
        <span style={{
          width:32,height:32,borderRadius:8,background:'var(--brand-600)',color:'#fff',
          display:'flex',alignItems:'center',justifyContent:'center',flex:'none'
        }}><Icon name={icon} size={17}/></span>
        <span style={{flex:1}}>{title}</span>
        <Icon name={open?'chevronDown':'chevronRight'} size={16} style={{color:'var(--ink-3)'}}/>
      </button>
      {open && <div style={{padding:'16px 18px',fontSize:14,lineHeight:1.7,color:'var(--ink-1)'}}>{children}</div>}
    </div>
  );
}

function HelpStep({n, children}){
  return (
    <div style={{display:'flex',gap:10,marginBottom:8}}>
      <span style={{
        flex:'none',width:24,height:24,borderRadius:'50%',background:'var(--brand-600)',
        color:'#fff',fontSize:13,fontWeight:600,display:'flex',alignItems:'center',justifyContent:'center',
        fontFamily:'Prompt'
      }}>{n}</span>
      <div style={{flex:1}}>{children}</div>
    </div>
  );
}

function HelpTip({type='info', children}){
  const colors = {
    info:  {bg:'#eef4ff', border:'#c4d4f0', txt:'#1f4ba0', icon:'info'},
    warn:  {bg:'#fff8e6', border:'#e1b54e', txt:'#a85b08', icon:'info'},
    danger:{bg:'#fdecec', border:'#f5b5b5', txt:'#b5403a', icon:'xCircle'},
    ok:    {bg:'#e8f7ee', border:'#a8dcb8', txt:'#0f7b3a', icon:'checkCircle'},
  };
  const c = colors[type] || colors.info;
  return (
    <div style={{
      display:'flex',gap:10,padding:'10px 12px',marginTop:8,marginBottom:8,
      background:c.bg,border:`1px solid ${c.border}`,color:c.txt,borderRadius:8,fontSize:13.5
    }}>
      <Icon name={c.icon} size={16} style={{flex:'none',marginTop:1}}/>
      <div style={{flex:1}}>{children}</div>
    </div>
  );
}

function HelpView({role, isApprover, isChair, isAdmin}){
  return (
    <div style={{maxWidth:880,margin:'0 auto'}}>
      <div style={{marginBottom:20}}>
        <h1 style={{fontSize:22,color:'var(--brand-900)',margin:0}}>📖 คู่มือการใช้งานระบบ</h1>
        <div className="tiny" style={{color:'var(--ink-3)',marginTop:4}}>
          คลิกที่หัวข้อเพื่อดูรายละเอียด · ระบบจะปรับเนื้อหาตามบทบาทของท่านอัตโนมัติ
        </div>
      </div>

      {/* ─────────── สำหรับครูทุกคน ─────────── */}
      <HelpSection id="login" icon="shield" title="1. การเข้าสู่ระบบ" defaultOpen={true}>
        <HelpStep n={1}>เปิดเว็บ <code style={{background:'#f3f4f6',padding:'2px 6px',borderRadius:4}}>ntkp-leave.pages.dev</code> ในเบราว์เซอร์ (Chrome / Safari / Edge)</HelpStep>
        <HelpStep n={2}>กรอก <b>ชื่อผู้ใช้</b> (username) ตัวอย่าง <code>kru01</code> หรือชื่อผู้ใช้ที่ฝ่ายธุรการแจ้ง</HelpStep>
        <HelpStep n={3}>กรอก <b>รหัสผ่าน</b> (password) — รหัสเริ่มต้นทุกคนคือ <code>1234</code></HelpStep>
        <HelpStep n={4}>กด <b>"เข้าสู่ระบบ"</b></HelpStep>
        <HelpTip type="warn">
          <b>เปลี่ยนรหัสผ่านทันทีหลัง login ครั้งแรก!</b><br/>
          กดไอคอน ✏️ ดินสอที่มุมขวาบน → กรอกรหัสเก่า → กรอกรหัสใหม่ (อย่างน้อย 6 ตัวอักษร) → ยืนยัน
        </HelpTip>
      </HelpSection>

      <HelpSection id="line" icon="bell" title="2. ผูกบัญชี LINE เพื่อรับการแจ้งเตือน 🔔" defaultOpen={true}>
        <p style={{margin:'0 0 12px',fontWeight:500,color:'var(--brand-800)'}}>
          ระบบส่งแจ้งเตือนผ่าน LINE ทุกครั้งที่มี: คำขอสอนแทน · ผลอนุมัติใบลา · งานจากประธานกลุ่มสาระ
        </p>
        <HelpStep n={1}>เปิดแอป LINE บนมือถือ → เพิ่มเพื่อน → ค้นหาด้วย ID: <code>@910uhhrn</code> หรือสแกน QR Code จากฝ่ายธุรการ</HelpStep>
        <HelpStep n={2}>เปิดแชทกับ OA "ระบบการลา NTKP" → พิมพ์ข้อความตามรูปแบบนี้:</HelpStep>
        <div style={{background:'#f3f4f6',padding:'12px 16px',borderRadius:8,fontFamily:'Sarabun',marginLeft:34,marginBottom:8,fontSize:14}}>
          <b>ผูกบัญชี &lt;username&gt; &lt;password&gt;</b><br/>
          <span style={{color:'var(--ink-3)'}}>เช่น</span> <code>ผูกบัญชี kru01 1234</code>
        </div>
        <HelpStep n={3}>bot จะตอบกลับ <span style={{color:'var(--green)',fontWeight:600}}>"✅ ผูกบัญชีเรียบร้อย"</span> ภายใน 1-2 วินาที</HelpStep>
        <HelpStep n={4}>จากนี้เป็นต้นไป ท่านจะได้รับแจ้งเตือนผ่าน LINE อัตโนมัติ</HelpStep>
        <HelpTip>
          พิมพ์ <code>สถานะ</code> ในช่องแชท → ตรวจสอบว่าผูกบัญชีอยู่หรือไม่<br/>
          พิมพ์ <code>ยกเลิก</code> → หยุดรับการแจ้งเตือน (ผูกใหม่ภายหลังได้)
        </HelpTip>
      </HelpSection>

      <HelpSection id="schedule" icon="clipboard" title="3. ดูตารางสอนของฉัน">
        <HelpStep n={1}>คลิกแท็บ <b>"ภาระงานสอนของฉัน"</b></HelpStep>
        <HelpStep n={2}>ดูตารางสอน 5 วัน × 8 คาบ ของท่าน — แต่ละช่องบอก รหัสวิชา · ชั้น · ห้อง</HelpStep>
        <HelpStep n={3}>คลิกที่ช่องว่างเพื่อ <b>เพิ่ม</b> คาบสอน/ภาระงาน หรือคลิกที่ช่องที่มีข้อมูลเพื่อ <b>แก้ไข/ลบ</b></HelpStep>
        <HelpStep n={4}>เลือก "คาบสอน" (มีรหัสวิชา/ชั้น/ห้อง) หรือ "ภาระงานอื่น" (กิจกรรม โฮมรูม เวร)</HelpStep>
        <HelpTip>
          กิจกรรมที่นับเป็นคาบสอนด้วย: <b>นวัตกรรม · ชุมนุม · แนะแนว · ลูกเสือ-เนตรนารี</b><br/>
          (ระบบจะให้หาครูสอนแทนได้เมื่อท่านลา)
        </HelpTip>
      </HelpSection>

      <HelpSection id="leave" icon="calendar" title="4. การยื่นใบลา / ขอเปลี่ยนคาบสอน">
        <p style={{margin:'0 0 10px',fontWeight:600,color:'var(--brand-800)'}}>ประเภทการลา 5 แบบ</p>
        <ul style={{margin:'0 0 14px 18px',padding:0}}>
          <li><b>ลากิจ</b> — ธุระส่วนตัวจำเป็น</li>
          <li><b>ลาป่วย</b> — เจ็บป่วย/พบแพทย์</li>
          <li><b>ไปราชการ</b> — อบรม/ประชุม/นิเทศ (ต้องระบุสถานที่ + ผู้ร่วมเดินทาง)</li>
          <li><b>ขอเข้าสาย</b> — เข้าทำงานสายในวันนั้น (ระบุเวลาที่จะเข้า)</li>
          <li><b>ขอออกก่อนเวลา</b> — ออกระหว่างวัน (เลือกได้ว่าเป็นเรื่องส่วนตัว หรือปฏิบัติหน้าที่ที่ได้รับมอบหมาย — แบบหลังไม่นับสถิติการลา)</li>
        </ul>

        <p style={{margin:'14px 0 8px',fontWeight:600,color:'var(--brand-800)'}}>ขั้นตอนยื่นใบลา</p>
        <HelpStep n={1}>คลิกแท็บ <b>"แจ้งลา / ขอเปลี่ยนคาบ"</b> → กดปุ่ม <b>"แจ้งลา / ขอเปลี่ยนคาบสอน"</b></HelpStep>
        <HelpStep n={2}>เลือก <b>ประเภทการลา</b> (5 แบบด้านบน)</HelpStep>
        <HelpStep n={3}>เลือก <b>วันที่ลา</b> (ตั้งแต่-ถึง) — ระบบจะดึงคาบสอนในช่วงนั้นมาให้</HelpStep>
        <HelpStep n={4}>กรอก <b>รายละเอียดการลา</b> — เหตุผล · เบอร์โทรติดต่อ · สถานที่ (สำหรับไปราชการ) · เวลา (สำหรับเข้าสาย/ออกก่อน)
          <HelpTip>ข้อมูลตรงนี้จะถูกใส่ในใบลาอัตโนมัติ ไม่ต้องกรอกซ้ำตอนพิมพ์</HelpTip>
        </HelpStep>
        <HelpStep n={5}>สำหรับแต่ละคาบ เลือก 1 ใน 3 ตัวเลือก:
          <ul style={{margin:'6px 0 0 18px'}}>
            <li><b>เลือกครูสอนแทนเอง</b> — เลือกครูที่ว่าง + กำหนดวัน/คาบที่จะมาสอนชดเชย</li>
            <li><b>ให้ประธานกลุ่มสาระจัดให้</b> — มอบหมายให้ประธานช่วยจัดครูแทน</li>
            <li><b>ไม่ต้องจัดสอนแทน</b> — มอบงานนักเรียนล่วงหน้า / นักเรียนสอบ / กิจกรรมโรงเรียน</li>
          </ul>
        </HelpStep>
        <HelpStep n={6}>ตรวจสอบสรุปการแจ้งเตือน → กด <b>"ส่งคำขอ &amp; แจ้งเตือน"</b></HelpStep>

        <p style={{margin:'14px 0 8px',fontWeight:600,color:'var(--brand-800)'}}>ระบบส่งคำขอไปไหนบ้าง</p>
        <div style={{background:'#f3f4f6',padding:12,borderRadius:8,fontSize:13,fontFamily:'monospace',whiteSpace:'pre-wrap',lineHeight:1.6}}>
{`คุณกดส่งใบลา
   ├→ ครูที่ถูกขอให้สอนแทน        🔔 LINE: "ขอให้สอนแทนคาบ X..."
   └→ รองฯ วิชาการ                🔔 LINE: "มีใบลารออนุมัติ..."
        └ เห็นควรอนุญาต
              └→ รองฯ บุคคล        🔔 LINE
                    └ เห็นควรอนุญาต
                          └→ ผู้อำนวยการ  🔔 LINE
                                └ อนุญาต
                                      └→ คุณ   🔔 LINE: "✓ ได้รับการอนุญาต" + ลิงก์ใบลา`}
        </div>
        <HelpTip type="ok">
          เมื่อ ผอ.อนุมัติ คุณจะได้ลิงก์ใบลา → คลิกเปิด → กด <b>Ctrl+P</b> → <b>"บันทึกเป็น PDF"</b> เก็บไว้เป็นหลักฐาน
        </HelpTip>
      </HelpSection>

      <HelpSection id="substitute" icon="inbox" title="5. รับการสอนแทน (เมื่อมีครูขอให้คุณสอนแทน)">
        <HelpStep n={1}>เมื่อมีครูขอให้สอนแทน → ท่านจะได้แจ้งเตือนทาง LINE ทันที</HelpStep>
        <HelpStep n={2}>คลิกแท็บ <b>"รายการสอนแทนของฉัน"</b> (จะมีตัวเลขแสดงจำนวนที่รอ)</HelpStep>
        <HelpStep n={3}>อ่านรายละเอียดให้ครบ: ใครขอ · วัน-เวลา-คาบไหน · ชั้นไหน · วันที่จะมาสอนชดเชย</HelpStep>
        <HelpStep n={4}>เลือก 1 ใน 2 ปุ่ม:
          <ul style={{margin:'6px 0 0 18px'}}>
            <li><span style={{color:'var(--green)',fontWeight:600}}>✓ รับทราบ</span> — ยืนยันว่าจะสอนแทน</li>
            <li><span style={{color:'var(--red)',fontWeight:600}}>✗ ปฏิเสธ</span> — ระบุเหตุผล (ระบบจะแจ้งครูที่ลาให้หาคนใหม่)</li>
          </ul>
        </HelpStep>
      </HelpSection>

      {isChair && (
        <HelpSection id="chair" icon="shield" title="6. สำหรับประธานกลุ่มสาระ">
          <p>เมื่อสมาชิกในกลุ่มสาระลาและขอให้ท่านช่วยจัดครูสอนแทน:</p>
          <HelpStep n={1}>ท่านจะได้แจ้งเตือนทาง LINE + เห็นตัวเลขที่แท็บ <b>"ประธานกลุ่มสาระ"</b></HelpStep>
          <HelpStep n={2}>คลิกแท็บนั้น → ดูคำขอที่รอจัดการ</HelpStep>
          <HelpStep n={3}>สำหรับแต่ละคาบ: เลือกครูที่จะมาสอนแทน + กำหนดวัน/คาบที่จะมาสอนชดเชย</HelpStep>
          <HelpStep n={4}>กดส่ง → ระบบจะแจ้งทั้งครูที่ลา (ว่าจัดให้แล้ว) และครูสอนแทนคนใหม่</HelpStep>
        </HelpSection>
      )}

      {isApprover && (
        <HelpSection id="approver" icon="shield" title="7. สำหรับผู้บริหาร / ผู้อนุมัติการลา">
          <p>ท่านอยู่ในสายการอนุมัติ 3 ขั้น: <b>รองฯ วิชาการ → รองฯ บุคคล → ผู้อำนวยการ</b></p>
          <HelpStep n={1}>เมื่อมีใบลารอท่านพิจารณา → ได้แจ้งเตือน LINE + เห็นตัวเลขที่แท็บ <b>"พิจารณาอนุญาตการลา"</b></HelpStep>
          <HelpStep n={2}>คลิกแท็บนั้น → ดูรายละเอียดใบลา: ครูคนไหน · ลาวันไหน · เหตุผล · ครูสอนแทน · คาบชดเชย</HelpStep>
          <HelpStep n={3}>คลิก <b>"ดูใบลา"</b> เพื่อเปิดดูเอกสารใบลามาตรฐาน (พิมพ์ได้)</HelpStep>
          <HelpStep n={4}>เลือก:
            <ul style={{margin:'6px 0 0 18px'}}>
              <li><span style={{color:'var(--green)',fontWeight:600}}>✓ เห็นควรอนุญาต</span> (สำหรับรองฯ) / <b>✓ อนุญาต</b> (สำหรับ ผอ.) — ส่งต่อขั้นถัดไป</li>
              <li><span style={{color:'var(--red)',fontWeight:600}}>✗ ไม่อนุญาต</span> — ต้องระบุเหตุผล (ครูที่ลาจะได้รับแจ้งทันที)</li>
            </ul>
          </HelpStep>
          <HelpTip>
            หลังท่านเห็นควรอนุญาต → ระบบส่งต่อให้คนถัดไปในสายอัตโนมัติ (รองฯ วิชาการ → รองฯ บุคคล → ผอ.)
          </HelpTip>
        </HelpSection>
      )}

      <HelpSection id="faq" icon="info" title="❓ คำถามที่พบบ่อย">
        <p style={{fontWeight:600,marginBottom:4}}>Q: ลืมรหัสผ่าน ทำยังไง?</p>
        <p style={{marginTop:0,marginBottom:14,paddingLeft:14,color:'var(--ink-2)'}}>A: ติดต่อฝ่ายธุรการ/กลุ่มบริหารงานบุคคล ให้รีเซ็ตรหัสให้ใหม่</p>

        <p style={{fontWeight:600,marginBottom:4}}>Q: ทำไม LINE ไม่แจ้งเตือน?</p>
        <p style={{marginTop:0,marginBottom:14,paddingLeft:14,color:'var(--ink-2)'}}>A: (1) ตรวจว่าผูกบัญชีแล้ว ส่ง <code>สถานะ</code> ใน LINE OA · (2) ตรวจว่าเปิด notification ใน LINE ของมือถือ · (3) แจ้ง admin ตรวจ token</p>

        <p style={{fontWeight:600,marginBottom:4}}>Q: ขอเปลี่ยนกลุ่มสาระทำได้ไหม?</p>
        <p style={{marginTop:0,marginBottom:14,paddingLeft:14,color:'var(--ink-2)'}}>A: ครูแก้เองไม่ได้ ต้องแจ้ง admin → "จัดการผู้ใช้งาน" → แก้ไขข้อมูลครู</p>

        <p style={{fontWeight:600,marginBottom:4}}>Q: ระบบช้า/ค้าง ทำยังไง?</p>
        <p style={{marginTop:0,marginBottom:14,paddingLeft:14,color:'var(--ink-2)'}}>A: รีเฟรชหน้าเว็บ (กด F5 หรือ Ctrl+R) · ถ้ายังไม่หาย ปิด-เปิดเบราว์เซอร์ใหม่</p>

        <p style={{fontWeight:600,marginBottom:4}}>Q: เปิดใช้ในมือถือได้ไหม?</p>
        <p style={{marginTop:0,marginBottom:14,paddingLeft:14,color:'var(--ink-2)'}}>A: ได้! เปิดด้วยเบราว์เซอร์ในมือถือได้เลย หน้าจอจะปรับเป็นมุมมองมือถืออัตโนมัติ</p>

        <p style={{fontWeight:600,marginBottom:4}}>Q: ใบลาเก็บที่ไหน?</p>
        <p style={{marginTop:0,marginBottom:14,paddingLeft:14,color:'var(--ink-2)'}}>A: เก็บในระบบทั้งหมด · admin ดูได้ที่แท็บ "ใบลาทั้งหมด" · พิมพ์เป็น PDF เก็บแยกตามครูได้</p>
      </HelpSection>

      <div style={{textAlign:'center',padding:'24px 0 12px',color:'var(--ink-3)',fontSize:12.5}}>
        ระบบการลา · โรงเรียนหนองตาคงพิทยาคาร · สพม.จันทบุรี ตราด<br/>
        หากพบปัญหาการใช้งาน กรุณาแจ้งกลุ่มบริหารงานบุคคล
      </div>
    </div>
  );
}

window.HelpView = HelpView;