/* global React */
// ============================================
// Document Drawer — opens for any doc with tabs:
//   detail (read-only), sign (director), assign (director), send (clerk), audit (everyone)
// ============================================

// subtitle for a user row — prefers a group/department, else the role label
function userSubtitle(u) {
  if (!u) return '';
  return u.group || ROLE_LABEL[u.role] || (u.username ? '@' + u.username : '');
}

function DocDrawer() {
  const { docs, drawerDocId, setDrawerDocId, drawerTab, setDrawerTab, role, updateDoc, toast, addNotif } = useStore();
  const doc = docs.find(d => d.id === drawerDocId);
  if (!doc) return null;

  const close = () => setDrawerDocId(null);

  // Determine which tabs to show
  const tabs = [{ key: 'detail', label: 'รายละเอียด', icon: 'fileText' }];
  const hasSignedFile = (doc.files || []).some(f => f.kind === 'signed');
  if (role === 'director') {
    if (doc.status === 'pending_director') {
      tabs.push({ key: 'sign', label: 'ลงนาม + เกษียณ', icon: 'pen' });
    } else if (!hasSignedFile && doc.status !== 'archived') {
      tabs.push({ key: 'sign', label: 'สร้างใบเกษียณ', icon: 'pen' });
    } else {
      tabs.push({ key: 'sign', label: 'ดูฉบับเกษียณ', icon: 'eye' });
    }
  }
  if (role === 'clerk' && ['director_signed', 'assigned', 'sent_to_teacher'].includes(doc.status)) {
    tabs.push({ key: 'send', label: 'ส่งให้ครู', icon: 'send' });
  }
  tabs.push({ key: 'audit', label: 'ประวัติ', icon: 'clock' });

  return React.createElement('div', { className: 'drawer-wrap' },
    React.createElement('div', { className: 'drawer-wrap__scrim', onClick: close }),
    React.createElement('div', { className: 'drawer' },
      // Head
      React.createElement('div', { className: 'drawer__head' },
        React.createElement('span', { className: 'docnum' }, doc.docNumber),
        React.createElement('h2', null, doc.subject),
        React.createElement(StatusBadge, { status: doc.status, short: true }),
        isUrgent(doc.urgency) ? React.createElement(UrgencyPill, { level: doc.urgency }) : null,
        React.createElement('button', { className: 'icon-btn', onClick: close },
          React.createElement(Icon, { name: 'x', size: 18 })
        ),
      ),

      // Tabs
      React.createElement('div', { className: 'drawer__tabs' },
        tabs.map(t => React.createElement('button', {
          key: t.key,
          'aria-selected': drawerTab === t.key,
          onClick: () => setDrawerTab(t.key),
        },
          React.createElement(Icon, { name: t.icon, size: 13, style: { marginRight: 4, verticalAlign: 'middle' } }),
          t.label,
        )),
      ),

      // Body — by tab
      React.createElement('div', { className: 'drawer__body' },
        drawerTab === 'detail' && React.createElement(DocDetailPanel, { doc }),
        drawerTab === 'sign' && React.createElement(DirectorSignPanel, { doc, onClose: close }),
        drawerTab === 'send' && React.createElement(ClerkSendPanel, { doc, onClose: close }),
        drawerTab === 'audit' && React.createElement(AuditPanel, { doc }),
      ),
    )
  );
}

// ============================================
// Detail panel — left PDF, right metadata
// ============================================
function DocDetailPanel({ doc }) {
  const { currentUser, role, updateDoc, toast } = useStore();
  const myId = currentUser && (currentUser.id || currentUser.userId);
  const isAssignee = !!myId && (doc.assignedTo || []).includes(myId);
  // ผู้รับมอบหมาย (ครู/ธุรการ) กดทำเสร็จได้เมื่อหนังสือยังไม่ถูกจัดเก็บ
  const canComplete = isAssignee && (role === 'teacher' || role === 'clerk')
    && (doc.status === 'assigned' || doc.status === 'sent_to_teacher');
  const completeTask = () => {
    updateDoc(doc.id, { status: 'archived', archivedAt: new Date().toISOString() }, {
      by: myId,
      from: doc.status,
      to: 'archived',
      note: 'ผู้รับมอบหมายดำเนินการเสร็จและจัดเก็บหนังสือ',
    });
    toast('✓ ทำเครื่องหมายว่าดำเนินการเสร็จ และจัดเก็บแล้ว');
  };

  return React.createElement('div', { className: 'drawer-grid' },
    React.createElement('div', { className: 'pdf-area' },
      React.createElement(RealPdfPane, {
        doc,
        kind: (doc.files || []).some(f => f.kind === 'signed') ? 'signed' : 'original',
        showReceivedStamp: true,
        signatureDataUrl: doc.signatureDataUrl,
      }),
    ),
    React.createElement('div', { className: 'side-panel' },
      React.createElement('div', null,
        React.createElement('div', { style: { fontSize: 12, fontWeight: 700, color: 'var(--ink-3)', textTransform: 'uppercase', letterSpacing: '0.06em', marginBottom: 8 } }, 'ความคืบหน้า'),
        React.createElement(Stepper, { status: doc.status }),
      ),

      React.createElement('div', null,
        React.createElement('div', { style: { fontSize: 12, fontWeight: 700, color: 'var(--ink-3)', textTransform: 'uppercase', letterSpacing: '0.06em', marginBottom: 8 } }, 'ข้อมูลหนังสือ'),
        React.createElement('div', { className: 'meta-list' },
          React.createElement('div', { className: 'meta-row' },
            React.createElement('span', { className: 'k' }, 'เลขรับ'),
            React.createElement('span', { className: 'v mono' }, doc.docNumber),
          ),
          React.createElement('div', { className: 'meta-row' },
            React.createElement('span', { className: 'k' }, 'เลขที่ฯ'),
            React.createElement('span', { className: 'v mono' }, doc.refNumber),
          ),
          React.createElement('div', { className: 'meta-row' },
            React.createElement('span', { className: 'k' }, 'วันที่รับ'),
            React.createElement('span', { className: 'v' }, formatThaiDate(doc.receivedDate)),
          ),
          React.createElement('div', { className: 'meta-row' },
            React.createElement('span', { className: 'k' }, 'ลงวันที่'),
            React.createElement('span', { className: 'v' }, formatThaiDate(doc.docDate)),
          ),
          React.createElement('div', { className: 'meta-row' },
            React.createElement('span', { className: 'k' }, 'จาก'),
            React.createElement('span', { className: 'v' }, doc.from),
          ),
          doc.dueDate ? React.createElement('div', { className: 'meta-row' },
            React.createElement('span', { className: 'k' }, 'กำหนดส่ง'),
            React.createElement('span', { className: 'v', style: { display: 'flex', alignItems: 'center', gap: 6, flexWrap: 'wrap' } },
              formatThaiDate(doc.dueDate),
              React.createElement(DueBadge, { dueDate: doc.dueDate, status: doc.status }),
            ),
          ) : null,
        )
      ),

      doc.clerkNote ? React.createElement('div', null,
        React.createElement('div', { className: 'note-card' },
          React.createElement('div', { className: 'label' }, 'บันทึกของธุรการ'),
          doc.clerkNote
        )
      ) : null,

      doc.directorNote ? React.createElement('div', null,
        React.createElement('div', { className: 'note-card director' },
          React.createElement('div', { className: 'label' }, 'เกษียณของ ผอ.'),
          doc.directorNote
        )
      ) : null,

      (doc.assignedTo && doc.assignedTo.length > 0) ? React.createElement('div', null,
        React.createElement('div', { style: { fontSize: 12, fontWeight: 700, color: 'var(--ink-3)', textTransform: 'uppercase', letterSpacing: '0.06em', marginBottom: 8 } }, 'ผู้รับมอบหมาย'),
        React.createElement('div', { style: { display: 'flex', flexDirection: 'column', gap: 6 } },
          doc.assignedTo.map(tid => {
            const t = getUserById(tid);
            return React.createElement('div', {
              key: tid,
              style: { display: 'flex', alignItems: 'center', gap: 8, padding: '6px 8px', background: 'var(--bg-soft)', borderRadius: 8 }
            },
              React.createElement('div', { className: 'avatar', style: { width: 28, height: 28, borderRadius: '50%', background: 'var(--accent)', color: 'white', display: 'grid', placeItems: 'center', fontSize: 11, fontWeight: 700 } }, t.initial),
              React.createElement('div', { style: { lineHeight: 1.2 } },
                React.createElement('div', { style: { fontSize: 12.5, fontWeight: 600 } }, t.name),
                React.createElement('div', { style: { fontSize: 11, color: 'var(--ink-3)' } }, userSubtitle(t)),
              )
            );
          })
        )
      ) : null,

      // ปุ่มสำหรับผู้รับมอบหมาย: ดำเนินการเสร็จ → ส่งจัดเก็บ
      canComplete ? React.createElement('button', {
        className: 'btn btn--primary btn--lg',
        style: { width: '100%', marginTop: 4 },
        onClick: completeTask,
      },
        React.createElement(Icon, { name: 'check', size: 16 }), 'ดำเนินการเสร็จ — ส่งจัดเก็บ'
      ) : null,

      (isAssignee && doc.status === 'archived') ? React.createElement('div', {
        style: { background: 'var(--accent-soft)', padding: 12, borderRadius: 8, fontSize: 12.5, color: 'var(--accent-deep)', display: 'flex', alignItems: 'center', gap: 6 }
      },
        React.createElement(Icon, { name: 'check', size: 14 }), 'งานนี้ดำเนินการเสร็จและจัดเก็บแล้ว'
      ) : null,
    )
  );
}

// ============================================
// Director sign + endorse panel
// ============================================
function DirectorSignPanel({ doc, onClose }) {
  const { updateDoc, toast, addNotif, sysUsers, currentUser, settings, getDocFileUrl, addDocFile } = useStore();
  // ผู้ที่ ผอ. มอบหมายงานให้ได้: ครู และเจ้าหน้าที่ธุรการ (ไม่รวมผู้ดูแล/ผอ.)
  const teacherList = (sysUsers || [])
    .filter(u => (u.role === 'teacher' || u.role === 'clerk') && u.status !== 'suspended')
    .sort((a, b) => (a.role === b.role ? 0 : a.role === 'clerk' ? -1 : 1));
  const [sig, setSig] = useState(null);
  const [note, setNote] = useState(doc.directorNote || '');
  const [picked, setPicked] = useState(doc.assignedTo || []);
  const [due, setDue] = useState(doc.dueDate ? String(doc.dueDate).slice(0, 10) : '');
  const [step, setStep] = useState(doc.status === 'pending_director' ? 1 : 3); // 1: sign 2: assign 3: done
  const [busy, setBusy] = useState(false);
  const hasSigned = (doc.files || []).some(f => f.kind === 'signed');

  const togglePick = (id) => {
    setPicked(prev => prev.includes(id) ? prev.filter(x => x !== id) : [...prev, id]);
  };

  // เซ็นได้เมื่อยังไม่มีไฟล์ใบเกษียณจริง (ครอบคลุมทั้งฉบับใหม่ และฉบับที่เคยเซ็นก่อนระบบสร้าง PDF ได้)
  const canSign = !hasSigned && doc.status !== 'archived';
  const readOnly = !canSign;
  // ชื่อ ผอ. ที่เซ็นจริง (จาก log) สำหรับโชว์ในกล่องอ่านอย่างเดียว
  const signerEntry = [...(doc.log || [])].reverse().find(e => e.to === 'assigned' || e.to === 'director_signed');
  const signerName = signerEntry ? getUserById(signerEntry.by).name : 'ผู้อำนวยการโรงเรียน';

  const handleSignAndAssign = async () => {
    if (busy) return;
    if (!sig && canSign) { toast('กรุณาวาดลายเซ็นก่อน', 'amber'); return; }
    if (!note.trim() && canSign) { toast('กรุณาบันทึกข้อความเกษียณ', 'amber'); return; }
    if (picked.length === 0 && canSign) { toast('กรุณาเลือกผู้รับมอบหมายอย่างน้อย 1 ท่าน', 'amber'); return; }

    setBusy(true);
    const assignedNames = picked.map(id => getUserById(id).name).filter(Boolean);

    // 1) บันทึกสถานะ + เกษียณ + มอบหมาย (รอให้เขียนฐานข้อมูลเสร็จก่อน)
    try {
      await updateDoc(doc.id, {
        directorNote: note,
        assignedTo: picked,
        signatureDataUrl: sig,
        dueDate: due ? new Date(due).toISOString() : null,
        status: 'assigned',
      }, {
        by: (currentUser && currentUser.id) || 'u_director',
        from: doc.status,
        to: 'assigned',
        note: `ลงนามและมอบหมาย ${picked.length} ท่าน — "${note.slice(0, 60)}${note.length > 60 ? '...' : ''}"`
      });
    } catch (e) { console.error('[kachai] updateDoc(sign)', e); }

    // 2) สร้าง PDF ใบเกษียณจริง แล้วอัปขึ้น Storage เป็น 'signed'
    try {
      const originalUrl = await getDocFileUrl(doc, 'original');
      const file = await generateEndorsedPdf({
        doc,
        originalUrl,
        signatureDataUrl: sig,
        note,
        assignedNames,
        dueDate: due ? new Date(due).toISOString() : null,
        directorName: (currentUser && currentUser.name) || 'ผู้อำนวยการโรงเรียน',
        schoolName: settings && settings.schoolName,
      });
      const up = await addDocFile(doc.id, 'signed', file);
      if (!up.ok) throw new Error(up.error || 'อัปโหลดไม่สำเร็จ');
    } catch (e) {
      console.error('[kachai] generateEndorsedPdf', e);
      toast('เกษียณแล้ว แต่สร้างไฟล์ PDF เกษียณไม่สำเร็จ: ' + (e.message || ''), 'amber');
    }

    addNotif({
      kind: 'director_signed',
      title: `ผอ. เกษียณหนังสือ — เลข ${doc.docNumber}`,
      desc: `มอบหมาย ${picked.length} ท่าน · ${doc.subject.slice(0, 40)}...`,
      docId: doc.id,
    });
    toast(`✓ ลงนามและมอบหมาย ${picked.length} ท่านเรียบร้อยแล้ว`);
    setBusy(false);
    setStep(3);
    setTimeout(onClose, 800);
  };

  const showSig = sig || doc.signatureDataUrl;

  return React.createElement('div', { className: 'drawer-grid' },
    // PDF side — แสดงไฟล์จริง (ใบเกษียณถ้ามีแล้ว ไม่งั้นต้นฉบับ)
    React.createElement('div', { className: 'pdf-area' },
      React.createElement(RealPdfPane, { doc, kind: hasSigned ? 'signed' : 'original', signatureDataUrl: showSig }),
    ),

    // Right: signing controls
    React.createElement('div', { className: 'side-panel' },
      // Clerk's note pinned at top
      doc.clerkNote ? React.createElement('div', { className: 'note-card' },
        React.createElement('div', { className: 'label' }, 'ข้อความจากธุรการ'),
        doc.clerkNote
      ) : null,

      // Step 1: signature pad
      React.createElement('div', null,
        React.createElement('div', { style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 8 } },
          React.createElement('div', { style: { fontSize: 12, fontWeight: 700, color: 'var(--ink-3)', textTransform: 'uppercase', letterSpacing: '0.06em' } }, 'ลายเซ็น ผอ.'),
          canSign ? React.createElement('span', { className: 'badge pending_director' },
            React.createElement('span', { className: 'dot' }), 'รอเซ็น'
          ) : null,
        ),
        canSign
          ? React.createElement(SignaturePad, { onChange: setSig, height: 180 })
          : React.createElement('div', {
            style: { background: 'white', border: '1px solid var(--line)', borderRadius: 'var(--r-md)', padding: 16, textAlign: 'center' }
          },
            doc.signatureDataUrl
              ? React.createElement('img', { src: doc.signatureDataUrl, style: { maxHeight: 80 } })
              : React.createElement('div', { style: { color: 'var(--ink-3)', fontStyle: 'italic', padding: '20px 0' } }, 'ลงนามแล้ว (ลายเซ็นเดิม)'),
            React.createElement('div', { style: { borderTop: '1px solid var(--ink)', marginTop: 10, paddingTop: 4, fontSize: 12 } }, '( ' + signerName + ' )'),
          ),
      ),

      // Step 2: เกษียณ
      React.createElement('div', null,
        React.createElement('div', { style: { fontSize: 12, fontWeight: 700, color: 'var(--ink-3)', textTransform: 'uppercase', letterSpacing: '0.06em', marginBottom: 6 } },
          'บันทึกเกษียณ (director_note)'),
        React.createElement('textarea', {
          className: 'input',
          rows: 3,
          value: note,
          disabled: !canSign,
          onChange: e => setNote(e.target.value),
          placeholder: 'พิมพ์ข้อความเกษียณ…'
        }),
        // Quick templates
        canSign ? React.createElement('div', { style: { display: 'flex', gap: 4, flexWrap: 'wrap', marginTop: 6 } },
          ['ทราบ', 'แจ้งครูทุกท่าน', 'มอบงานวิชาการ', 'มอบงานงบประมาณ', 'มอบงานบุคคล', 'มอบงานบริหารทั่วไป'].map(tmpl =>
            React.createElement('button', {
              key: tmpl,
              type: 'button',
              className: 'btn btn--ghost btn--sm',
              style: { fontSize: 11 },
              onClick: () => setNote(n => n ? `${n} ${tmpl}` : tmpl),
            }, '+ ' + tmpl)
          )
        ) : null,
      ),

      // กำหนดส่ง (due date)
      React.createElement('div', null,
        React.createElement('div', { style: { fontSize: 12, fontWeight: 700, color: 'var(--ink-3)', textTransform: 'uppercase', letterSpacing: '0.06em', marginBottom: 6 } }, 'กำหนดส่ง (ไม่บังคับ)'),
        React.createElement('input', {
          type: 'date',
          className: 'input',
          value: due,
          disabled: !canSign,
          onChange: e => setDue(e.target.value),
        }),
        React.createElement('div', { className: 'hint', style: { marginTop: 4 } }, 'ตั้งวันครบกำหนดให้ผู้รับมอบหมาย — ใช้คำนวณ "ใกล้ครบกำหนด"'),
      ),

      // Step 3: assign
      React.createElement('div', null,
        React.createElement('div', { style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 8 } },
          React.createElement('div', { style: { fontSize: 12, fontWeight: 700, color: 'var(--ink-3)', textTransform: 'uppercase', letterSpacing: '0.06em' } }, 'มอบหมาย'),
          React.createElement('span', { style: { fontSize: 11.5, color: 'var(--ink-3)' } }, `เลือกแล้ว ${picked.length} ท่าน`),
        ),
        React.createElement('div', { className: 'teacher-grid' },
          teacherList.length === 0
            ? React.createElement('div', { style: { fontSize: 12.5, color: 'var(--ink-3)', padding: '8px 2px' } },
                'ยังไม่มีบัญชีครู/ธุรการในระบบ — เพิ่มผู้ใช้ที่เมนูจัดการผู้ใช้งานก่อน')
            : teacherList.map(t => React.createElement('div', {
              key: t.id,
              className: 'teacher-chip',
              'aria-pressed': picked.includes(t.id),
              onClick: canSign ? () => togglePick(t.id) : undefined,
              style: !canSign ? { cursor: 'default', opacity: doc.assignedTo?.includes(t.id) ? 1 : 0.4 } : {},
            },
              React.createElement('div', { className: 'avatar' }, t.initial),
              React.createElement('div', { className: 'info' },
                React.createElement('div', { className: 'n' }, (t.name || '').replace('อ.', '')),
                React.createElement('div', { className: 'r' }, userSubtitle(t)),
              ),
              React.createElement('div', { className: 'check' }, picked.includes(t.id) ? React.createElement(Icon, { name: 'check', size: 12 }) : null),
            ))
        )
      ),

      // Action button
      canSign ? React.createElement('div', { style: { display: 'flex', gap: 8, marginTop: 'auto' } },
        React.createElement('button', { className: 'btn', style: { flex: 1 }, onClick: onClose }, 'ยกเลิก'),
        React.createElement('button', {
          className: 'btn btn--primary',
          style: { flex: 2 },
          onClick: handleSignAndAssign,
          disabled: busy,
        },
          React.createElement(Icon, { name: 'pen', size: 14 }),
          busy ? 'กำลังสร้างใบเกษียณ…' : 'ลงนาม + เกษียณ + ส่งต่อ'
        ),
      ) : React.createElement('div', {
        style: { background: 'var(--accent-soft)', padding: 12, borderRadius: 8, fontSize: 12.5, color: 'var(--accent-deep)' }
      },
        React.createElement(Icon, { name: 'check', size: 14, style: { verticalAlign: 'middle', marginRight: 4 } }),
        'ท่านได้ลงนามและเกษียณหนังสือฉบับนี้แล้ว'
      ),
    )
  );
}

// ============================================
// Clerk send-to-teacher panel
// ============================================
function ClerkSendPanel({ doc, onClose }) {
  const { updateDoc, toast, addNotif, currentUser, getDocFileUrl, addDocFile } = useStore();
  const [sentVia, setSentVia] = useState({ email: true, telegram: true, line: false });
  const [extraNote, setExtraNote] = useState('โปรดดำเนินการตามที่ ผอ. เกษียณภายในกำหนดเวลา');
  const [busy, setBusy] = useState(false);
  const hasFinal = (doc.files || []).some(f => f.kind === 'final');
  const alreadySent = doc.status === 'sent_to_teacher' || doc.status === 'archived';

  // สร้างไฟล์ 'final' (ฉบับส่งครู) = สำเนาฉบับเกษียณ (signed)
  const makeFinalFromSigned = async () => {
    const url = await getDocFileUrl(doc, 'signed');
    if (!url) return false;
    const bytes = await fetch(url).then(r => r.arrayBuffer());
    const file = new File([bytes], String(doc.docNumber).replace(/\//g, '-') + '_final.pdf', { type: 'application/pdf' });
    const up = await addDocFile(doc.id, 'final', file);
    return !!(up && up.ok);
  };

  const handleSend = async () => {
    if (busy) return;
    setBusy(true);
    if (!alreadySent) {
      await updateDoc(doc.id, { status: 'sent_to_teacher' }, {
        by: (currentUser && currentUser.id) || 'u_clerk',
        from: doc.status,
        to: 'sent_to_teacher',
        note: `ส่ง PDF ให้ผู้รับมอบหมาย ${doc.assignedTo.length} ท่าน ผ่าน ${Object.entries(sentVia).filter(([_, v]) => v).map(([k]) => k).join(', ')}`,
      });
      addNotif({
        kind: 'assigned',
        title: `มอบหมายงานครู — เลข ${doc.docNumber}`,
        desc: `ส่งถึง ${doc.assignedTo.length} ท่าน`,
        docId: doc.id,
      });
    }
    try {
      if (!hasFinal) {
        const ok = await makeFinalFromSigned();
        if (!ok) toast('ส่งแล้ว แต่สร้างไฟล์ฉบับส่งครูไม่สำเร็จ (ยังไม่มีฉบับเกษียณ?)', 'amber');
      }
    } catch (e) { console.error('[kachai] makeFinal', e); }
    setBusy(false);
    toast(`✓ ส่ง PDF ให้ครู ${doc.assignedTo.length} ท่าน เรียบร้อย`);
    setTimeout(onClose, 800);
  };

  const handleArchive = () => {
    updateDoc(doc.id, { status: 'archived', archivedAt: new Date().toISOString() }, {
      by: 'u_clerk',
      from: doc.status,
      to: 'archived',
      note: 'จัดเก็บหนังสือเข้าระบบ',
    });
    toast('✓ จัดเก็บหนังสือเรียบร้อย');
    setTimeout(onClose, 800);
  };

  const hasSigned = (doc.files || []).some(f => f.kind === 'signed');
  return React.createElement('div', { className: 'drawer-grid' },
    React.createElement('div', { className: 'pdf-area' },
      React.createElement(RealPdfPane, { doc, kind: hasSigned ? 'signed' : 'original', signatureDataUrl: doc.signatureDataUrl }),
    ),

    React.createElement('div', { className: 'side-panel' },
      React.createElement('div', { className: 'note-card director' },
        React.createElement('div', { className: 'label' }, 'เกษียณของ ผอ.'),
        doc.directorNote
      ),

      React.createElement('div', null,
        React.createElement('div', { style: { fontSize: 12, fontWeight: 700, color: 'var(--ink-3)', textTransform: 'uppercase', letterSpacing: '0.06em', marginBottom: 8 } },
          `ผู้รับมอบหมาย (${doc.assignedTo.length})`),
        React.createElement('div', { style: { display: 'flex', flexDirection: 'column', gap: 6 } },
          doc.assignedTo.map(tid => {
            const t = getUserById(tid);
            return React.createElement('div', {
              key: tid,
              style: { display: 'flex', alignItems: 'center', gap: 8, padding: '8px 10px', background: 'var(--bg-soft)', borderRadius: 8 }
            },
              React.createElement('div', { style: { width: 30, height: 30, borderRadius: '50%', background: 'var(--accent)', color: 'white', display: 'grid', placeItems: 'center', fontSize: 11, fontWeight: 700 } }, t.initial),
              React.createElement('div', { style: { flex: 1, lineHeight: 1.2 } },
                React.createElement('div', { style: { fontSize: 13, fontWeight: 600 } }, t.name),
                React.createElement('div', { style: { fontSize: 11, color: 'var(--ink-3)' } }, userSubtitle(t)),
              ),
              React.createElement('span', { className: 'badge sent_to_teacher', style: { fontSize: 10 } },
                doc.status === 'sent_to_teacher' || doc.status === 'archived' ? '✓ ส่งแล้ว' : 'รอส่ง'
              )
            );
          })
        )
      ),

      // Channels
      doc.status !== 'sent_to_teacher' && doc.status !== 'archived' ? React.createElement('div', null,
        React.createElement('div', { style: { fontSize: 12, fontWeight: 700, color: 'var(--ink-3)', textTransform: 'uppercase', letterSpacing: '0.06em', marginBottom: 8 } }, 'ช่องทางการส่ง'),
        React.createElement('div', { style: { display: 'flex', flexDirection: 'column', gap: 6 } },
          [
            { k: 'email', label: 'อีเมล (ของโรงเรียน)', icon: 'send' },
            { k: 'telegram', label: 'แจ้งเตือนผ่าน Telegram Bot', icon: 'telegram' },
            { k: 'line', label: 'LINE OA โรงเรียน', icon: 'send' },
          ].map(c => React.createElement('label', {
            key: c.k,
            style: {
              display: 'flex', alignItems: 'center', gap: 10,
              padding: '8px 12px',
              border: '1px solid var(--line)',
              borderRadius: 8,
              cursor: 'pointer',
              background: sentVia[c.k] ? 'var(--accent-soft)' : 'var(--surface)',
              borderColor: sentVia[c.k] ? 'var(--accent)' : 'var(--line)',
            }
          },
            React.createElement('input', { type: 'checkbox', checked: sentVia[c.k], onChange: e => setSentVia(p => ({ ...p, [c.k]: e.target.checked })) }),
            React.createElement(Icon, { name: c.icon, size: 14 }),
            React.createElement('span', { style: { fontSize: 13 } }, c.label),
          ))
        ),
        React.createElement('textarea', {
          className: 'input', rows: 2,
          value: extraNote,
          onChange: e => setExtraNote(e.target.value),
          placeholder: 'ข้อความเพิ่มเติม...',
          style: { marginTop: 8 },
        }),
      ) : null,

      React.createElement('div', { style: { display: 'flex', gap: 8, marginTop: 'auto' } },
        React.createElement('button', { className: 'btn', style: { flex: 1 }, onClick: onClose }, 'ปิด'),
        !alreadySent
          ? React.createElement('button', { className: 'btn btn--primary', style: { flex: 2 }, onClick: handleSend, disabled: busy },
            React.createElement(Icon, { name: 'send', size: 14 }),
            busy ? 'กำลังส่ง…' : `ส่ง PDF ให้ครู ${doc.assignedTo.length} ท่าน`
          )
          : !hasFinal
            ? React.createElement('button', { className: 'btn btn--primary', style: { flex: 2 }, onClick: handleSend, disabled: busy },
              React.createElement(Icon, { name: 'send', size: 14 }),
              busy ? 'กำลังสร้างไฟล์…' : 'สร้างฉบับส่งครู (ที่ค้าง)'
            )
            : React.createElement('button', { className: 'btn btn--primary', style: { flex: 2 }, onClick: handleArchive },
              React.createElement(Icon, { name: 'archive', size: 14 }),
              'จัดเก็บ (Archive)'
            ),
      ),
    )
  );
}

// ============================================
// Audit trail panel
// ============================================
function AuditPanel({ doc }) {
  const kindLabel = (to) => to === 'pending_director' ? 'ออกเลขรับและส่งให้ ผอ.'
    : to === 'director_signed' ? 'ลงนามและเกษียณหนังสือ'
      : to === 'assigned' ? 'มอบหมายผู้รับผิดชอบ'
        : to === 'sent_to_teacher' ? 'ส่ง PDF ให้ครู'
          : to === 'archived' ? 'จัดเก็บหนังสือ' : 'อัปเดต';

  const exportCsv = () => {
    const esc = (v) => '"' + String(v == null ? '' : v).replace(/"/g, '""') + '"';
    const header = ['ลำดับ', 'วันเวลา', 'ผู้ดำเนินการ', 'การดำเนินการ', 'จากสถานะ', 'เป็นสถานะ', 'หมายเหตุ'];
    const rows = (doc.log || []).map((e, i) => [
      i + 1,
      formatThaiDate(e.at, { withTime: true }),
      getUserById(e.by).name,
      kindLabel(e.to),
      e.from || '',
      e.to || '',
      e.note || '',
    ]);
    const BOM = String.fromCharCode(0xFEFF); // ให้ Excel อ่าน UTF-8 ภาษาไทยถูกต้อง
    const csv = BOM + [header, ...rows].map(r => r.map(esc).join(',')).join('\r\n');
    const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = `ประวัติ_${String(doc.docNumber).replace(/\//g, '-')}.csv`;
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
    setTimeout(() => URL.revokeObjectURL(url), 1000);
  };

  return React.createElement('div', { style: { padding: 24, maxWidth: 720, margin: '0 auto' } },
    React.createElement('div', { style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 18 } },
      React.createElement('div', null,
        React.createElement('h3', { style: { margin: 0, fontSize: 16 } }, 'ประวัติการดำเนินงาน'),
        React.createElement('div', { style: { fontSize: 12, color: 'var(--ink-3)', marginTop: 2 } }, `doc_status_log สำหรับหนังสือเลข ${doc.docNumber}`),
      ),
      React.createElement('button', { className: 'btn btn--ghost btn--sm', onClick: exportCsv },
        React.createElement(Icon, { name: 'download', size: 12 }),
        'ส่งออก CSV'
      ),
    ),

    React.createElement(Stepper, { status: doc.status }),

    React.createElement('div', { className: 'divider' }),

    React.createElement('div', { className: 'timeline' },
      [...doc.log].reverse().map((e, i) => {
        const user = getUserById(e.by);
        const isDirectorAction = user.role === 'director' || e.by === 'u_director';
        const kind = e.to === 'pending_director' ? 'ออกเลขรับและส่งให้ ผอ.'
          : e.to === 'director_signed' ? 'ลงนามและเกษียณหนังสือ'
            : e.to === 'assigned' ? 'มอบหมายผู้รับผิดชอบ'
              : e.to === 'sent_to_teacher' ? 'ส่ง PDF ให้ครู'
                : e.to === 'archived' ? 'จัดเก็บหนังสือ' : 'อัปเดต';
        return React.createElement('div', { key: i, className: 'tl-item' },
          React.createElement('div', { className: `tl-dot ${isDirectorAction ? 'amber' : ''}` }),
          React.createElement('div', { className: 'tl-head' },
            React.createElement('span', { className: 'who' }, user.name),
            React.createElement('span', { className: 'what' }, '— ' + kind),
            React.createElement('span', { className: 'mono', style: { fontSize: 11, color: 'var(--ink-3)' } },
              e.from ? `${e.from} → ${e.to}` : e.to),
          ),
          React.createElement('div', { className: 'tl-when' },
            formatThaiDate(e.at, { withTime: true })
          ),
          e.note ? React.createElement('div', { className: 'tl-note' }, e.note) : null,
        );
      })
    ),

    React.createElement('div', { className: 'divider' }),

    React.createElement('div', { style: { fontSize: 12, fontWeight: 700, color: 'var(--ink-3)', textTransform: 'uppercase', letterSpacing: '0.06em', marginBottom: 8 } }, 'ไฟล์แนบ (doc_files)'),
    React.createElement('div', { style: { display: 'flex', flexDirection: 'column', gap: 6 } },
      [
        { type: 'original', label: 'ต้นฉบับ (สแกน)', statusHas: true },
        { type: 'signed', label: 'หลัง ผอ. ลงนาม', statusHas: !!doc.signatureDataUrl || ['director_signed', 'assigned', 'sent_to_teacher', 'archived'].includes(doc.status) },
        { type: 'final', label: 'ฉบับส่งครู', statusHas: ['sent_to_teacher', 'archived'].includes(doc.status) },
      ].map(f => React.createElement(DocFileRow, { key: f.type, doc, type: f.type, label: f.label, statusHas: f.statusHas })),
      (doc.files || []).filter(f => f.kind === 'attachment').map((f, i) =>
        React.createElement(AttachmentRow, { key: 'att-' + (f.id || i), file: f, index: i })),
    ),
  );
}

// แถวเอกสารแนบเพิ่มเติม (kind = 'attachment') — ดาวน์โหลดไฟล์จริง
function AttachmentRow({ file, index }) {
  const { getStorageUrl } = useStore();
  const [url, setUrl] = useState(null);
  useEffect(() => {
    let alive = true;
    Promise.resolve(getStorageUrl(file)).then(u => { if (alive) setUrl(u); }, () => {});
    return () => { alive = false; };
  }, [file && (file.storagePath || file.url)]);
  const ext = (((file.name || file.storagePath || '').split('.').pop()) || 'FILE').toUpperCase().slice(0, 4);
  const displayName = file.name || `เอกสารแนบ ${index + 1}`;
  return React.createElement('div', {
    style: { display: 'flex', alignItems: 'center', gap: 10, padding: '10px 14px', border: '1px solid var(--line)', borderRadius: 8, background: 'var(--surface)' }
  },
    React.createElement('div', { style: { width: 36, height: 44, borderRadius: 4, background: 'var(--bg-deep)', color: 'var(--ink-2)', display: 'grid', placeItems: 'center', fontWeight: 700, fontSize: 10 } }, ext),
    React.createElement('div', { style: { flex: 1, minWidth: 0 } },
      React.createElement('div', { style: { fontSize: 13, fontWeight: 600, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' } }, displayName),
      React.createElement('div', { style: { fontSize: 11, color: 'var(--ink-3)' } }, 'เอกสารแนบ'),
    ),
    url ? React.createElement('button', {
      className: 'btn btn--ghost btn--sm', title: 'เปิด/ดาวน์โหลด',
      onClick: () => window.open(url, '_blank', 'noopener'),
    }, React.createElement(Icon, { name: 'download', size: 12 })) : null,
  );
}

// One row in the doc_files list — resolves a real download URL when the file
// actually exists in storage; otherwise stays a disabled placeholder.
function DocFileRow({ doc, type, label, statusHas }) {
  const { getDocFileUrl } = useStore();
  const [url, setUrl] = useState(null);
  const hasReal = ((doc.files || []).some(x => x.kind === type));
  const has = hasReal || statusHas;

  useEffect(() => {
    let alive = true;
    if (!hasReal) { setUrl(null); return; }
    Promise.resolve(getDocFileUrl(doc, type)).then(
      u => { if (alive) setUrl(u); }, () => {}
    );
    return () => { alive = false; };
  }, [doc.id, type, hasReal]);

  return React.createElement('div', {
    style: {
      display: 'flex', alignItems: 'center', gap: 10,
      padding: '10px 14px',
      border: '1px solid var(--line)',
      borderRadius: 8,
      background: has ? 'var(--surface)' : 'var(--bg-soft)',
      opacity: has ? 1 : 0.5,
    }
  },
    React.createElement('div', { className: 'ico', style: { width: 36, height: 44, borderRadius: 4, background: 'var(--red-soft)', color: 'var(--red)', display: 'grid', placeItems: 'center', fontWeight: 700, fontSize: 11 } }, 'PDF'),
    React.createElement('div', { style: { flex: 1 } },
      React.createElement('div', { style: { fontSize: 13, fontWeight: 600 } }, `${doc.docNumber}_${type}.pdf`),
      React.createElement('div', { style: { fontSize: 11, color: 'var(--ink-3)' } }, label, ' · ', hasReal ? 'อัปโหลดแล้ว' : (has ? 'ยังเป็นฉบับจำลอง' : 'ยังไม่มี')),
    ),
    url ? React.createElement('button', {
      className: 'btn btn--ghost btn--sm',
      title: 'เปิด/ดาวน์โหลดไฟล์จริง',
      onClick: () => window.open(url, '_blank', 'noopener'),
    }, React.createElement(Icon, { name: 'download', size: 12 })) : null,
  );
}

Object.assign(window, { DocDrawer, DocDetailPanel, DirectorSignPanel, ClerkSendPanel, AuditPanel });