/* global React, window */
const { useState: useActState, useEffect: useActEffect } = React;

// ---- type metadata: colored tinted circle + inline SVG icon -----------------
const ACT_TYPES = {
  scan:       { label: 'สแกน',     soft: 'var(--mint-soft)',   ink: 'var(--mint-ink)' },
  leave:      { label: 'ลา',        soft: 'var(--violet-soft, #ede9fe)', ink: 'var(--violet-ink, #7c3aed)' },
  expense:    { label: 'เบิกเงิน',  soft: 'var(--yellow-soft)', ink: 'var(--yellow-ink)' },
  correction: { label: 'แก้เวลา',   soft: 'var(--yellow-soft)', ink: 'var(--yellow-ink)' },
  task:       { label: 'งาน',       soft: 'var(--mint-soft)',   ink: 'var(--mint-ink)' },
};

function ActIcon({ type }) {
  const meta = ACT_TYPES[type] || { soft: 'var(--surface-2)', ink: 'var(--ink-4)' };
  const paths = {
    scan: <path d="M4 7V5a1 1 0 0 1 1-1h2M4 13v2a1 1 0 0 0 1 1h2M14 4h2a1 1 0 0 1 1 1v2M14 16h2a1 1 0 0 1 1-1v-2M7 10h6" />,
    leave: <path d="M10 4v12M4 10h12M6 6l8 8" />,
    expense: <path d="M10 4v12M13 6.5C13 5.1 11.7 4 10 4S7 5.1 7 6.5 8.3 9 10 9s3 1.1 3 2.5S11.7 14 10 14s-3-1.1-3-2.5" />,
    correction: <path d="M10 5v5l3 2M10 3a7 7 0 1 0 0 14 7 7 0 0 0 0-14z" />,
    task: <path d="M5 10l3 3 7-7" />,
  };
  return (
    <span style={{ width: 30, height: 30, borderRadius: '50%', background: meta.soft, color: meta.ink,
      display: 'inline-flex', alignItems: 'center', justifyContent: 'center', flex: 'none' }}>
      <svg width="17" height="17" viewBox="0 0 20 20" fill="none" stroke="currentColor"
        strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
        {paths[type] || <circle cx="10" cy="10" r="3" />}
      </svg>
    </span>
  );
}

// ---- circular actor avatar (clickable → profile) ----------------------------
function ActAvatar({ id, size = 34 }) {
  const [err, setErr] = useActState(false);
  const src = (err || !id) ? '/img/avatar-person.svg' : `/faces/${id}.jpg`;
  return <img src={src} alt="" onError={() => setErr(true)}
    onClick={() => id && window.openProfile && window.openProfile(id)}
    title={id ? 'ดูโปรไฟล์' : ''}
    style={{ width: size, height: size, borderRadius: '50%', objectFit: 'cover', flex: 'none',
      cursor: id ? 'pointer' : 'default', border: '1px solid var(--line)' }} />;
}

function actTime(t) {
  if (!t) return '';
  const d = new Date(String(t).replace(' ', 'T'));
  if (Number.isNaN(d.getTime())) return String(t);
  const p = (n) => String(n).padStart(2, '0');
  const now = new Date();
  const sameDay = d.getFullYear() === now.getFullYear() && d.getMonth() === now.getMonth() && d.getDate() === now.getDate();
  const hm = `${p(d.getHours())}:${p(d.getMinutes())}`;
  return sameDay ? hm : `${p(d.getDate())}/${p(d.getMonth() + 1)} ${hm}`;
}

// กิจกรรม / Activity — soft hrzoft vertical timeline of recent system events.
function ActivityPage(props) {
  const role = props && props.role;
  const [events, setEvents] = useActState([]);
  const [loading, setLoading] = useActState(true);
  const [filter, setFilter] = useActState('all');

  useActEffect(() => {
    let alive = true;
    (async () => {
      try {
        const r = await fetch('/api/activity?limit=60', { credentials: 'include' });
        if (!alive) return;
        if (r.ok) {
          const d = await r.json().catch(() => ({}));
          setEvents(Array.isArray(d.events) ? d.events : []);
        } else {
          setEvents([]); // 404 / any error → graceful empty, don't crash
        }
      } catch (e) {
        if (alive) setEvents([]);
      } finally {
        if (alive) setLoading(false);
      }
    })();
    return () => { alive = false; };
  }, []);

  const SEGS = [
    { k: 'all', label: 'ทั้งหมด' },
    { k: 'scan', label: 'สแกน' },
    { k: 'leave', label: 'ลา' },
    { k: 'expense', label: 'เบิกเงิน' },
    { k: 'task', label: 'งาน' },
  ];

  const shown = filter === 'all' ? events : events.filter((e) => {
    if (filter === 'expense') return e.type === 'expense' || e.type === 'correction';
    return e.type === filter;
  });

  return (
    <div data-screen-label="Activity" data-role={role || ''}>
      <div style={{ marginBottom: 18 }}>
        <h1 style={{ fontFamily: 'var(--font-display)', fontSize: 22, fontWeight: 700, margin: 0 }}>กิจกรรม / Activity</h1>
        <div style={{ fontSize: 12.5, color: 'var(--ink-4)', marginTop: 4 }}>บันทึกความเคลื่อนไหวล่าสุดของระบบ</div>
      </div>

      <div className="gv-card">
        <div className="gv-card-h" style={{ flexWrap: 'wrap', gap: 10 }}>
          <b>ไทม์ไลน์กิจกรรม</b>
          <div className="gv-seg">
            {SEGS.map((s) => (
              <button key={s.k} className={filter === s.k ? 'on' : ''} onClick={() => setFilter(s.k)}>{s.label}</button>
            ))}
          </div>
        </div>
        <div className="gv-card-b" style={{ paddingTop: 6 }}>
          {loading ? (
            <div className="gv-empty">— กำลังโหลด —</div>
          ) : shown.length === 0 ? (
            <div className="gv-empty">— ยังไม่มีกิจกรรม —</div>
          ) : shown.map((e, i) => (
            <div key={i} className="gv-row" style={{ gap: 12 }}>
              <ActIcon type={e.type} />
              <ActAvatar id={e.employee_id} />
              <div style={{ minWidth: 0, flex: 1 }}>
                <div style={{ fontSize: 14.5, fontWeight: 600, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
                  {e.actor_name || 'ไม่รู้จัก'}
                </div>
                <div style={{ fontSize: 12.5, color: 'var(--ink-4)', marginTop: 1, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
                  {e.text || ''}
                </div>
              </div>
              <span className="tnum" style={{ fontSize: 12.5, color: 'var(--ink-4)', whiteSpace: 'nowrap' }}>{actTime(e.time)}</span>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

window.ActivityPage = ActivityPage;