// หน้ารายละเอียดหลักสูตร — แสดงรายชื่อผู้เข้าอบรม + ปุ่มเพิ่มรายชื่อ
const CourseDetailScreen = ({ courseId, user, onBack, onAddPerson, onEditPerson, onEditCourse, onViewEvals, onDashboard, onOpenSummary, onLogout, refreshKey, onDataChange }) => {
  const [data, setData]   = React.useState(null);   // { course, evals }
  const [loading, setLoading] = React.useState(true);
  const [err, setErr]     = React.useState(null);
  const [deleteTarget, setDeleteTarget] = React.useState(null);
  const { push } = useToast();

  const load = React.useCallback(() => {
    setLoading(true);
    window.TRN_API.getCourse(courseId)
      .then(d => { setData(d); setErr(null); })
      .catch(e => setErr(e.message || "โหลดไม่สำเร็จ"))
      .finally(() => setLoading(false));
  }, [courseId]);

  React.useEffect(() => { load(); }, [load, refreshKey]);

  const handleDelete = async () => {
    if (!deleteTarget) return;
    try {
      await window.TRN_API.deleteEval(deleteTarget.id);
      push("ลบรายชื่อเรียบร้อย", { kind:"success" });
      setData(d => ({ ...d, evals: d.evals.filter(e => e.id !== deleteTarget.id) }));
      onDataChange?.();
    } catch(e) { push(e.message || "ลบไม่สำเร็จ", { kind:"error" }); }
    finally { setDeleteTarget(null); }
  };

  const course = data?.course;
  const evals  = data?.evals || [];

  return (
    <div style={{ minHeight:"100vh", paddingBottom:60 }}>
      <GlowBlob color="rgba(0,212,168,0.2)" x={-60} y={0} size={400} opacity={0.16} />

      {/* Topbar */}
      <div style={{ padding:"12px 26px", display:"flex", alignItems:"center", gap:12, borderBottom:"1px solid var(--border)", backdropFilter:"blur(10px)", position:"sticky", top:0, zIndex:100, background:"var(--bg-1)" }}>
        <a href="https://myempinfo.pages.dev" className="btn btn-ghost btn-icon" title="กลับหน้าหลัก (Landing)"><Icon name="chevron-l" size={16} /></a>
        <div style={{ fontWeight:600, fontSize:14, flex:1, overflow:"hidden", textOverflow:"ellipsis", whiteSpace:"nowrap" }}>
          {course?.course_name || "หลักสูตร"}
        </div>
        <div className="row gap-10">
          <button className="btn btn-ghost btn-sm" onClick={onBack}><Icon name="briefcase" size={14} /> หลักสูตร</button>
          <button className="btn btn-ghost btn-sm" onClick={onViewEvals}><Icon name="users" size={14} /> รายชื่อทั้งหมด</button>
          <button className="btn btn-ghost btn-sm" onClick={onDashboard}><Icon name="chart-bar" size={14} /> Dashboard</button>
          <a href="https://myempinfo.pages.dev" className="btn btn-ghost btn-sm" title="กลับหน้าหลัก (Landing)" style={{ textDecoration:"none" }}>🏠 หน้าหลัก</a>
          <button className="btn btn-ghost btn-sm" title="ตั้งค่าธีม" onClick={() => window.postMessage({ type: '__activate_edit_mode' }, '*')}><Icon name="sliders" size={14} /></button>
          <div className="row gap-8" style={{ padding:"5px 10px", borderRadius:8, background:"var(--surface)", border:"1px solid var(--border)" }}>
            <div style={{ width:26, height:26, borderRadius:"50%", background:"linear-gradient(135deg,#00d4a855,#7c5cff55)", display:"flex", alignItems:"center", justifyContent:"center", fontSize:11, fontWeight:600 }}>
              {user?.email?.[0]?.toUpperCase() || "U"}
            </div>
            <div style={{ fontSize:12, fontWeight:500 }}>{user?.name || user?.email}</div>
            <button className="btn btn-ghost btn-sm" onClick={onLogout} style={{ padding:"3px 6px" }}><Icon name="logout" size={13} /></button>
          </div>
        </div>
      </div>

      {loading ? (
        <div style={{ padding:60, textAlign:"center" }}><LoadingSplash /></div>
      ) : err ? (
        <div style={{ padding:60, textAlign:"center" }}><ErrorSplash message={err} onRetry={load} /></div>
      ) : (
        <div style={{ padding:"22px 26px", maxWidth:1200, margin:"0 auto" }}>
          {/* Course info */}
          <div className="glass" style={{ borderRadius:14, padding:"18px 20px", marginBottom:20 }}>
            <div className="row" style={{ justifyContent:"space-between", alignItems:"flex-start" }}>
              <div style={{ fontWeight:700, fontSize:18 }}>{course.course_name}</div>
              <div className="row gap-8">
                {evals.length > 0 && (
                  <button className="btn btn-primary btn-sm shine" onClick={() => onOpenSummary(course)}><Icon name="trend" size={13} /> สรุปผล</button>
                )}
                {user?.canEdit && (
                  <button className="btn btn-ghost btn-sm" onClick={() => onEditCourse(course)}><Icon name="edit" size={13} /> แก้ไขหลักสูตร</button>
                )}
              </div>
            </div>
            <div style={{ display:"grid", gridTemplateColumns:"repeat(auto-fit, minmax(160px,1fr))", gap:16, marginTop:14 }}>
              {[
                { l:"วันที่อบรม", v:fmtThaiDate(course.course_date) },
                { l:"วันที่ติดตามผล", v:fmtThaiDate(course.follow_up_date) },
                { l:"วิทยากรผู้อบรม", v:course.trainer || "—" },
                { l:"จำนวนผู้เข้าอบรม", v:`${evals.length} คน` },
              ].map(r => (
                <div key={r.l}>
                  <div style={{ fontSize:11, color:"var(--text-muted)", marginBottom:3 }}>{r.l}</div>
                  <div style={{ fontSize:14, fontWeight:500 }}>{r.v}</div>
                </div>
              ))}
            </div>
          </div>

          {/* People table */}
          <div className="row" style={{ justifyContent:"space-between", marginBottom:12 }}>
            <div style={{ fontWeight:600, fontSize:15 }}>รายชื่อผู้เข้ารับการอบรม</div>
            {user?.canEdit && (
              <button className="btn btn-primary btn-sm shine" onClick={() => onAddPerson(course)}><Icon name="user-plus" size={13} /> เพิ่มรายชื่อ</button>
            )}
          </div>

          {evals.length === 0 ? (
            <div className="glass" style={{ borderRadius:14, padding:"50px 0", textAlign:"center" }}>
              <div className="faint" style={{ fontSize:14, marginBottom:14 }}>ยังไม่มีผู้เข้าอบรมในหลักสูตรนี้</div>
              {user?.canEdit && <button className="btn btn-primary shine" onClick={() => onAddPerson(course)}><Icon name="user-plus" size={14} /> เพิ่มรายชื่อแรก</button>}
            </div>
          ) : (
            <div className="glass" style={{ borderRadius:14, overflow:"hidden" }}>
              <table style={{ width:"100%", borderCollapse:"collapse" }}>
                <thead>
                  <tr style={{ borderBottom:"1px solid var(--border)" }}>
                    {["รหัส","ชื่อ-สกุล","ตำแหน่ง","แผนก/ฝ่าย","ประเมินตนเอง","ผู้บังคับบัญชา","สถานะ",""].map(h => (
                      <th key={h} style={{ padding:"10px 12px", fontSize:11, color:"var(--text-muted)", fontWeight:500, textAlign:"left", whiteSpace:"nowrap" }}>{h}</th>
                    ))}
                  </tr>
                </thead>
                <tbody>
                  {evals.map((e, i) => {
                    const sa = selfAvg(e), pa = supAvg(e);
                    return (
                      <tr key={e.id} onClick={() => onEditPerson(course, e.id)}
                        style={{ borderBottom:i<evals.length-1?"1px solid var(--border)":"none", cursor:"pointer" }}
                        onMouseEnter={ev=>ev.currentTarget.style.background="var(--surface)"}
                        onMouseLeave={ev=>ev.currentTarget.style.background=""}>
                        <td style={{ padding:"10px 12px", fontSize:12, color:"var(--text-muted)", whiteSpace:"nowrap" }}>{e.emp_id || "—"}</td>
                        <td style={{ padding:"10px 12px", fontSize:13, fontWeight:500 }}>{e.trainee_name}</td>
                        <td style={{ padding:"10px 12px", fontSize:12, color:"var(--text-muted)" }}>{e.trainee_position || "—"}</td>
                        <td style={{ padding:"10px 12px", fontSize:12, color:"var(--text-muted)" }}>{[e.dept, e.division].filter(Boolean).join(" / ") || "—"}</td>
                        <td style={{ padding:"10px 12px", textAlign:"center" }}>
                          {sa ? <span style={{ fontSize:12, fontWeight:600, color:"var(--teal)" }}>{sa}</span> : <span className="faint" style={{ fontSize:12 }}>—</span>}
                        </td>
                        <td style={{ padding:"10px 12px", textAlign:"center" }}>
                          {pa ? <span style={{ fontSize:12, fontWeight:600, color:"var(--purple)" }}>{pa}</span> : <span className="faint" style={{ fontSize:12 }}>—</span>}
                        </td>
                        <td style={{ padding:"10px 12px" }}><StatusChip status={e.status} /></td>
                        <td style={{ padding:"10px 12px" }}>
                          {user?.canDelete && (
                            <button className="btn btn-ghost btn-sm" style={{ color:"var(--pink)", padding:"3px 7px" }}
                              onClick={ev=>{ ev.stopPropagation(); setDeleteTarget(e); }}><Icon name="trash" size={13} /></button>
                          )}
                        </td>
                      </tr>
                    );
                  })}
                </tbody>
              </table>
            </div>
          )}
        </div>
      )}

      <ConfirmDialog open={!!deleteTarget} title="ลบรายชื่อผู้เข้าอบรม"
        message={`ลบ "${deleteTarget?.trainee_name}" ออกจากหลักสูตรนี้?`}
        onConfirm={handleDelete} onCancel={() => setDeleteTarget(null)} danger />
    </div>
  );
};
window.CourseDetailScreen = CourseDetailScreen;