/* global React */
// ============================================
// Dashboard view — works for both roles with different content
// ============================================

function DashboardView() {
  const { role, docs, openDoc, setActiveView, currentUser } = useStore();

  // first name for a friendly greeting (strip common Thai titles)
  const firstName = (currentUser && currentUser.name)
    ? currentUser.name.replace(/^(เด็กชาย|เด็กหญิง|นางสาว|นาง|นาย|คุณ|อ\.|ผอ\.|ดร\.)\s*/, '').trim().split(/\s+/)[0]
    : '';

  const counts = useMemo(() => {
    const c = { total: docs.length, pending_director: 0, director_signed: 0, assigned: 0, sent_to_teacher: 0, archived: 0, urgent: 0, today: 0 };
    const today = new Date().toDateString();
    docs.forEach(d => {
      c[d.status]++;
      if (isUrgent(d.urgency) && d.status !== 'archived') c.urgent++;
      if (new Date(d.receivedDate).toDateString() === today) c.today++;
    });
    return c;
  }, [docs]);

  // Pick most-relevant docs depending on role
  const focusDocs = useMemo(() => {
    if (role === 'director') return docs.filter(d => d.status === 'pending_director').sort((a, b) => urgencyRank(b.urgency) - urgencyRank(a.urgency));
    return docs.filter(d => d.status !== 'archived').slice(0, 6);
  }, [docs, role]);

  const recentLog = useMemo(() => {
    const all = [];
    docs.forEach(d => d.log.forEach(e => all.push({ ...e, doc: d })));
    return all.sort((a, b) => new Date(b.at) - new Date(a.at)).slice(0, 6);
  }, [docs]);

  const greeting = role === 'director'
    ? (firstName ? `สวัสดีท่าน ผอ.${firstName}` : 'สวัสดีท่าน ผอ.')
    : role === 'clerk'
      ? (firstName ? `สวัสดีคุณ${firstName}` : 'สวัสดีคุณธุรการ')
      : (firstName ? `สวัสดีอาจารย์${firstName}` : 'สวัสดีอาจารย์');
  const subtitle = role === 'director'
    ? `วันนี้มีหนังสือรอท่านเกษียณ ${counts.pending_director} ฉบับ` + (counts.urgent > 0 ? ` (ด่วน ${counts.urgent} ฉบับ)` : '')
    : role === 'clerk'
      ? `มีหนังสือเข้าใหม่วันนี้ ${counts.today} ฉบับ · รอส่งครู ${docs.filter(d => d.status === 'director_signed' || d.status === 'assigned').length} ฉบับ`
      : `มีงานที่ได้รับมอบหมาย ${docs.filter(d => (d.assignedTo || []).length > 0 && d.status !== 'archived').length} รายการ`;

  const today = new Date();
  const dateLine = formatThaiDate(today.toISOString(), { full: true });

  return React.createElement('div', { className: 'page' },
    React.createElement('div', { className: 'page__head' },
      React.createElement('div', { className: 'page__title' },
        React.createElement('h1', null, greeting),
        React.createElement('p', null, subtitle, ' · ', dateLine),
      ),
      role === 'clerk' && React.createElement('button', {
        className: 'btn btn--primary btn--lg',
        onClick: () => setActiveView('intake'),
      },
        React.createElement(Icon, { name: 'plus', size: 16 }),
        'ออกเลขรับใหม่'
      ),
    ),

    // Stat tiles
    React.createElement('div', { className: 'stats-grid' },
      role === 'director' ? React.createElement(React.Fragment, null,
        React.createElement(StatTile, {
          label: 'รอท่านเกษียณ', value: counts.pending_director, sub: counts.urgent > 0 ? `ด่วนมาก ${counts.urgent} ฉบับ` : 'ปกติทั้งหมด', accent: counts.urgent > 0 ? 'amber' : 'accent',
          icon: 'pen',
        }),
        React.createElement(StatTile, {
          label: 'ลงนามแล้ว', value: counts.director_signed, sub: 'รอธุรการดำเนินการต่อ', icon: 'check'
        }),
        React.createElement(StatTile, {
          label: 'มอบหมายครูแล้ว', value: counts.assigned + counts.sent_to_teacher, sub: 'อยู่ระหว่างดำเนินการ', icon: 'users'
        }),
        React.createElement(StatTile, {
          label: 'หนังสือทั้งหมด', value: counts.total, sub: `จัดเก็บแล้ว ${counts.archived} ฉบับ`, icon: 'layers'
        }),
      ) : React.createElement(React.Fragment, null,
        React.createElement(StatTile, {
          label: 'รับเข้าใหม่วันนี้', value: counts.today, sub: 'ตั้งแต่ 00:00 น.', accent: 'accent', icon: 'inbox'
        }),
        React.createElement(StatTile, {
          label: 'รอ ผอ. เกษียณ', value: counts.pending_director, sub: counts.urgent > 0 ? `ด่วน ${counts.urgent}` : 'ปกติทั้งหมด', accent: counts.urgent > 0 ? 'amber' : null, icon: 'clock'
        }),
        React.createElement(StatTile, {
          label: 'รอส่งครู', value: counts.director_signed + counts.assigned, sub: 'ลงนามแล้ว / มอบหมายแล้ว', icon: 'send'
        }),
        React.createElement(StatTile, {
          label: 'จัดเก็บแล้ว', value: counts.archived, sub: 'รวมทั้งปี ' + (new Date().getFullYear() + 543), icon: 'archive'
        }),
      ),
    ),

    // Main grid
    React.createElement('div', { className: 'dashboard-grid' },

      // Focus list
      React.createElement('div', { className: 'card' },
        React.createElement('div', { className: 'card__head' },
          React.createElement('h3', null, role === 'director' ? 'รายการรอท่านเกษียณ' : 'หนังสือที่ต้องดำเนินการ'),
          React.createElement('button', {
            className: 'btn btn--ghost btn--sm',
            onClick: () => setActiveView(role === 'director' ? 'director_pending' : 'inbox'),
          },
            'ดูทั้งหมด',
            React.createElement(Icon, { name: 'arrowRight', size: 13 }),
          ),
        ),
        React.createElement('div', null,
          focusDocs.length === 0
            ? React.createElement('div', { style: { padding: 40, textAlign: 'center', color: 'var(--ink-3)' } }, 'ไม่มีรายการที่ต้องดำเนินการ 🎉')
            : focusDocs.map(d => React.createElement(DocRowMini, { key: d.id, doc: d, onClick: () => openDoc(d.id, role === 'director' && d.status === 'pending_director' ? 'sign' : 'detail') }))
        )
      ),

      // Activity feed
      React.createElement('div', { className: 'card' },
        React.createElement('div', { className: 'card__head' },
          React.createElement('h3', null, 'กิจกรรมล่าสุด'),
        ),
        React.createElement('div', { className: 'card__body', style: { padding: '14px 20px 16px' } },
          React.createElement('div', { className: 'timeline' },
            recentLog.map((e, i) => {
              const user = getUserById(e.by);
              const isDirectorAction = user.role === 'director' || e.by === 'u_director';
              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.split(' ')[0]),
                  React.createElement('span', { className: 'what' },
                    e.to === 'pending_director' ? 'ออกเลขรับ' :
                      e.to === 'director_signed' ? 'ลงนามและเกษียณ' :
                        e.to === 'assigned' ? 'มอบหมายงาน' :
                          e.to === 'sent_to_teacher' ? 'ส่งให้ครู' :
                            e.to === 'archived' ? 'จัดเก็บ' : 'อัปเดต',
                    ' · ',
                    React.createElement('span', { className: 'mono', style: { fontWeight: 700, color: 'var(--ink)' } }, e.doc.docNumber),
                  ),
                ),
                React.createElement('div', { className: 'tl-when' }, relativeThai(e.at)),
              );
            })
          )
        )
      ),
    )
  );
}

function StatTile({ label, value, sub, accent, icon }) {
  return React.createElement('div', { className: `stat ${accent === 'amber' ? 'stat--amber' : accent === 'accent' ? 'stat--accent' : ''}` },
    React.createElement('div', { className: 'stat__label' },
      icon ? React.createElement(Icon, { name: icon, size: 13 }) : null,
      label,
    ),
    React.createElement('div', { className: 'stat__value' }, value),
    React.createElement('div', { className: 'stat__sub' }, sub),
  );
}

function DocRowMini({ doc, onClick }) {
  return React.createElement('div', {
    onClick,
    style: {
      display: 'flex',
      alignItems: 'center',
      gap: 12,
      padding: '12px 18px',
      borderBottom: '1px solid var(--line)',
      cursor: 'pointer',
    },
    onMouseEnter: e => e.currentTarget.style.background = 'var(--bg-soft)',
    onMouseLeave: e => e.currentTarget.style.background = 'transparent',
  },
    React.createElement('div', {
      style: {
        fontFamily: 'JetBrains Mono, monospace', fontWeight: 700,
        background: isUrgent(doc.urgency) ? 'var(--amber-soft)' : 'var(--bg-deep)',
        color: isUrgent(doc.urgency) ? 'var(--amber-deep)' : 'var(--ink)',
        padding: '4px 8px', borderRadius: 4, fontSize: 12,
        whiteSpace: 'nowrap',
      }
    }, doc.docNumber),
    React.createElement('div', { style: { flex: 1, minWidth: 0 } },
      React.createElement('div', { style: { fontWeight: 600, fontSize: 13.5, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' } }, doc.subject),
      React.createElement('div', { style: { fontSize: 12, color: 'var(--ink-3)' } }, doc.fromShort, ' · รับเมื่อ ', relativeThai(doc.receivedDate)),
    ),
    isUrgent(doc.urgency) ? React.createElement(UrgencyPill, { level: doc.urgency }) : null,
    React.createElement(StatusBadge, { status: doc.status, short: true }),
    React.createElement(Icon, { name: 'chevronRight', size: 14, style: { color: 'var(--ink-3)' } }),
  );
}

Object.assign(window, { DashboardView, DocRowMini, StatTile });