/* global React */
// ============================================
// Inbox-style views — shared between clerk and director
// ============================================

function DocTable({ docs, onOpen, layout = 'table', onDelete }) {
  if (docs.length === 0) {
    return React.createElement('div', {
      className: 'card', style: { padding: 60, textAlign: 'center', color: 'var(--ink-3)' }
    },
      React.createElement(Icon, { name: 'inbox', size: 36, style: { opacity: 0.4 } }),
      React.createElement('div', { style: { marginTop: 10, fontSize: 14 } }, 'ไม่มีรายการในกลุ่มนี้'),
    );
  }

  if (layout === 'cards') {
    return React.createElement('div', { className: 'doc-cards' },
      docs.map(d => React.createElement('div', { key: d.id, className: 'doc-card', onClick: () => onOpen(d.id) },
        React.createElement('div', { className: 'top' },
          React.createElement('div', { className: 'docnum' }, d.docNumber),
          isUrgent(d.urgency) ? React.createElement(UrgencyPill, { level: d.urgency }) : null,
        ),
        React.createElement('h4', null, d.subject),
        React.createElement('div', { className: 'from' }, d.fromShort),
        React.createElement('div', { style: { display: 'flex', gap: 6, flexWrap: 'wrap', alignItems: 'center' } },
          React.createElement(StatusBadge, { status: d.status, short: true }),
          React.createElement(DueBadge, { dueDate: d.dueDate, status: d.status }),
        ),
        React.createElement('div', { className: 'foot' },
          React.createElement('span', null, 'รับเมื่อ ', formatThaiDate(d.receivedDate)),
          React.createElement('span', { className: 'mono' }, d.refNumber),
        ),
        onDelete ? React.createElement('button', {
          className: 'btn btn--ghost btn--sm',
          title: 'ลบหนังสือ',
          style: { color: 'var(--red)', marginTop: 8 },
          onClick: (e) => { e.stopPropagation(); onDelete(d.id); },
        }, React.createElement(Icon, { name: 'trash', size: 13 }), 'ลบหนังสือ') : null,
      ))
    );
  }

  return React.createElement('div', { className: 'doctable-wrap' },
    React.createElement('table', { className: 'doctable' },
      React.createElement('thead', null,
      React.createElement('tr', null,
        React.createElement('th', null, 'เลขรับ'),
        React.createElement('th', null, 'ความเร่งด่วน'),
        React.createElement('th', null, 'เรื่อง'),
        React.createElement('th', null, 'จาก'),
        React.createElement('th', null, 'เลขที่หนังสือ'),
        React.createElement('th', null, 'วันที่รับ'),
        React.createElement('th', null, 'สถานะ'),
        React.createElement('th'),
      )
    ),
    React.createElement('tbody', null,
      docs.map(d => React.createElement('tr', { key: d.id, onClick: () => onOpen(d.id) },
        React.createElement('td', null,
          React.createElement('span', { className: 'docnum' }, d.docNumber),
        ),
        React.createElement('td', null,
          React.createElement(UrgencyPill, { level: d.urgency }),
        ),
        React.createElement('td', null,
          React.createElement('div', { className: 'subject' }, d.subject),
          React.createElement(DueBadge, { dueDate: d.dueDate, status: d.status }),
        ),
        React.createElement('td', null,
          React.createElement('div', { className: 'from' }, d.fromShort),
        ),
        React.createElement('td', null,
          React.createElement('span', { className: 'mono', style: { fontSize: 12, color: 'var(--ink-2)' } }, d.refNumber),
        ),
        React.createElement('td', null,
          React.createElement('span', { className: 'date' }, formatThaiDate(d.receivedDate)),
        ),
        React.createElement('td', null,
          React.createElement(StatusBadge, { status: d.status, short: true }),
        ),
        React.createElement('td', { style: { width: onDelete ? 70 : 30, whiteSpace: 'nowrap', textAlign: 'right' } },
          onDelete ? React.createElement('button', {
            className: 'btn btn--ghost btn--sm',
            title: 'ลบหนังสือ',
            style: { color: 'var(--red)', marginRight: 4 },
            onClick: (e) => { e.stopPropagation(); onDelete(d.id); },
          }, React.createElement(Icon, { name: 'trash', size: 14 })) : null,
          React.createElement(Icon, { name: 'chevronRight', size: 14, style: { color: 'var(--ink-3)' } }),
        ),
      ))
    )
  )
  );
}

function InboxView({ titleProp, subtitleProp, defaultFilter, availableFilters, layoutDefault, isDirectorView }) {
  const { docs, openDoc, role, deleteDoc, toast } = useStore();
  const [filter, setFilter] = useState(defaultFilter || 'all');
  const [layout, setLayout] = useState(layoutDefault || 'table');
  const [search, setSearch] = useState('');
  const [confirmDel, setConfirmDel] = useState(null); // doc pending delete confirmation
  // only admins get a delete action (used on the admin "หนังสือทั้งหมด" page)
  const onDelete = role === 'admin' ? (id) => setConfirmDel(docs.find(d => d.id === id) || null) : null;
  const doDelete = () => {
    if (!confirmDel) return;
    const n = confirmDel.docNumber;
    deleteDoc(confirmDel.id);
    setConfirmDel(null);
    toast(`ลบหนังสือ ${n} แล้ว`, 'amber');
  };

  const tabs = availableFilters || [
    { key: 'all', label: 'ทั้งหมด', match: () => true },
    { key: 'pending_director', label: 'รอเกษียณ', match: d => d.status === 'pending_director' },
    { key: 'director_signed', label: 'ลงนามแล้ว', match: d => d.status === 'director_signed' },
    { key: 'assigned', label: 'มอบหมายแล้ว', match: d => d.status === 'assigned' || d.status === 'sent_to_teacher' },
    { key: 'archived', label: 'จัดเก็บ', match: d => d.status === 'archived' },
  ];

  const counts = useMemo(() => {
    const c = {};
    tabs.forEach(t => { c[t.key] = docs.filter(t.match).length; });
    return c;
  }, [docs, tabs]);

  const filtered = useMemo(() => {
    const tab = tabs.find(t => t.key === filter) || tabs[0];
    let list = docs.filter(tab.match);
    if (search.trim()) {
      const q = search.trim().toLowerCase();
      list = list.filter(d =>
        d.docNumber.toLowerCase().includes(q) ||
        d.subject.toLowerCase().includes(q) ||
        d.refNumber.toLowerCase().includes(q) ||
        d.fromShort.toLowerCase().includes(q)
      );
    }
    return list.sort((a, b) => new Date(b.receivedDate) - new Date(a.receivedDate));
  }, [docs, filter, search, tabs]);

  const title = titleProp || 'กล่องหนังสือรับ';
  const subtitle = subtitleProp || `รายการหนังสือทั้งหมดในระบบ — แสดง ${filtered.length} จาก ${docs.length} ฉบับ`;

  return React.createElement('div', { className: 'page' },
    React.createElement('div', { className: 'page__head' },
      React.createElement('div', { className: 'page__title' },
        React.createElement('h1', null, title),
        React.createElement('p', null, subtitle),
      ),
    ),

    // Toolbar
    React.createElement('div', { className: 'toolbar' },
      React.createElement('div', { className: 'tabs' },
        tabs.map(t => React.createElement('button', {
          key: t.key,
          className: 'tab',
          'aria-pressed': filter === t.key,
          onClick: () => setFilter(t.key),
        },
          t.label,
          React.createElement('span', { className: 'num' }, counts[t.key]),
        ))
      ),
      React.createElement('div', { className: 'spacer' }),
      React.createElement('div', { className: 'field' },
        React.createElement(Icon, { name: 'search', size: 13 }),
        React.createElement('input', {
          placeholder: 'ค้นหา...',
          value: search,
          onChange: e => setSearch(e.target.value),
        }),
      ),
      React.createElement('div', { className: 'role-switcher', style: { padding: 3 } },
        React.createElement('button', {
          'aria-pressed': layout === 'table',
          onClick: () => setLayout('table'),
          title: 'มุมมองตาราง',
        }, React.createElement(Icon, { name: 'layers', size: 13 })),
        React.createElement('button', {
          'aria-pressed': layout === 'cards',
          onClick: () => setLayout('cards'),
          title: 'มุมมองการ์ด',
        }, React.createElement(Icon, { name: 'inbox', size: 13 })),
      ),
    ),

    React.createElement(DocTable, { docs: filtered, onOpen: (id) => openDoc(id, isDirectorView ? 'sign' : 'detail'), layout, onDelete }),

    confirmDel ? React.createElement('div', {
      style: { position: 'fixed', inset: 0, background: 'rgba(0,0,0,.35)', display: 'grid', placeItems: 'center', zIndex: 1000 },
      onClick: () => setConfirmDel(null),
    },
      React.createElement('div', {
        className: 'card',
        style: { maxWidth: 440, width: '90%', cursor: 'auto' },
        onClick: (e) => e.stopPropagation(),
      },
        React.createElement('div', { className: 'card__head' },
          React.createElement('h3', null, 'ยืนยันการลบหนังสือ'),
        ),
        React.createElement('div', { className: 'card__body' },
          React.createElement('p', { style: { margin: 0, lineHeight: 1.6, fontSize: 14 } },
            'ลบหนังสือเลขรับ ',
            React.createElement('strong', null, confirmDel.docNumber),
            ' — “', (confirmDel.subject || '').slice(0, 50), (confirmDel.subject || '').length > 50 ? '…' : '', '” ?',
          ),
          React.createElement('div', { className: 'hint', style: { marginTop: 10, color: 'var(--red)' } },
            'การลบนี้ถาวร กู้คืนไม่ได้ — ประวัติ ผู้รับมอบหมาย และไฟล์ PDF ของหนังสือนี้จะถูกลบทั้งหมด'),
          React.createElement('div', { style: { display: 'flex', justifyContent: 'flex-end', gap: 8, marginTop: 18 } },
            React.createElement('button', { className: 'btn', onClick: () => setConfirmDel(null) }, 'ยกเลิก'),
            React.createElement('button', {
              className: 'btn btn--primary',
              style: { background: 'var(--red)', borderColor: 'var(--red)' },
              onClick: doDelete,
            }, React.createElement(Icon, { name: 'trash', size: 14 }), 'ลบถาวร'),
          ),
        ),
      )
    ) : null,
  );
}

// Specific filtered inbox variants
function DirectorPendingView() {
  return React.createElement(InboxView, {
    titleProp: 'รอเกษียณหนังสือ',
    subtitleProp: 'หนังสือที่รอท่านพิจารณาลงนามและเกษียณ',
    defaultFilter: 'pending_director',
    availableFilters: [
      { key: 'pending_director', label: 'ทั้งหมด', match: d => d.status === 'pending_director' },
      { key: 'most_urgent', label: 'ด่วนที่สุด', match: d => d.status === 'pending_director' && d.urgency === 'most_urgent' },
      { key: 'urgent', label: 'ด่วนมาก', match: d => d.status === 'pending_director' && d.urgency === 'urgent' },
      { key: 'express', label: 'ด่วน', match: d => d.status === 'pending_director' && d.urgency === 'express' },
      { key: 'normal', label: 'ปกติ', match: d => d.status === 'pending_director' && d.urgency === 'normal' },
    ],
    isDirectorView: true,
  });
}

function DirectorSignedView() {
  return React.createElement(InboxView, {
    titleProp: 'หนังสือที่ลงนามแล้ว',
    subtitleProp: 'หนังสือที่ท่านได้ลงนามและเกษียณแล้ว',
    defaultFilter: 'recent',
    availableFilters: [
      { key: 'recent', label: 'ทั้งหมด', match: d => ['director_signed', 'assigned', 'sent_to_teacher'].includes(d.status) },
      { key: 'director_signed', label: 'รอธุรการ', match: d => d.status === 'director_signed' },
      { key: 'sent_to_teacher', label: 'ส่งครูแล้ว', match: d => d.status === 'sent_to_teacher' },
    ],
    isDirectorView: false,
  });
}

function PendingSendView() {
  return React.createElement(InboxView, {
    titleProp: 'รอส่งให้ครู',
    subtitleProp: 'หนังสือที่ ผอ. ลงนามและเกษียณแล้ว รอธุรการดำเนินการส่งต่อ',
    defaultFilter: 'all',
    availableFilters: [
      { key: 'all', label: 'ทั้งหมด', match: d => d.status === 'director_signed' || d.status === 'assigned' },
      { key: 'director_signed', label: 'ลงนามแล้ว', match: d => d.status === 'director_signed' },
      { key: 'assigned', label: 'มอบหมายแล้ว', match: d => d.status === 'assigned' },
    ],
  });
}

function ArchiveView() {
  return React.createElement(InboxView, {
    titleProp: 'หนังสือที่จัดเก็บแล้ว',
    subtitleProp: 'คลังหนังสือรับที่ดำเนินการเสร็จสิ้นทั้งหมด',
    defaultFilter: 'archived',
    availableFilters: [
      { key: 'archived', label: 'จัดเก็บ', match: d => d.status === 'archived' },
    ],
    layoutDefault: 'cards',
  });
}

function AllDocsView() {
  const { settings } = useStore();
  return React.createElement(InboxView, {
    titleProp: 'หนังสือรับทั้งหมด',
    subtitleProp: `รายการหนังสือรับทั้งหมดในระบบ ปีการศึกษา ${settings.academicYear}`,
  });
}

Object.assign(window, { InboxView, DocTable, DirectorPendingView, DirectorSignedView, PendingSendView, ArchiveView, AllDocsView });