/* Audit Log Panel — admin only — อ่านจาก /api/audit */

const { useState: useStateAudit, useEffect: useEffectAudit } = React;

function AuditLogPanel() {
  const [logs, setLogs]               = useStateAudit([]);
  const [actionFilter, setActionFilter] = useStateAudit('all');
  const [userFilter, setUserFilter]   = useStateAudit('all');
  const [search, setSearch]           = useStateAudit('');

  async function refresh() {
    const data = await loadAuditAsync();
    setLogs(data);
  }

  useEffectAudit(() => { refresh(); }, []);

  function exportLog() {
    const header = 'เวลา,ผู้ใช้,Role,การกระทำ,เป้าหมาย,รายละเอียด\n';
    const rows = logs.map(l => {
      const detailStr = Object.entries(l.details || {})
        .map(([k, v]) => `${k}: ${typeof v === 'object' ? JSON.stringify(v) : v}`)
        .join('; ');
      return [
        fmtAuditTime(l.ts), `"${l.user}"`, l.role,
        ACTION_LABELS[l.action]?.label || l.action,
        `"${l.target || ''}"`, `"${detailStr}"`,
      ].join(',');
    });
    const csv = header + rows.join('\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 = `audit-log-${new Date().toISOString().slice(0,10)}.csv`;
    a.click();
    URL.revokeObjectURL(url);
  }

  const users   = [...new Set(logs.map(l => l.user).filter(Boolean))];
  const actions = [...new Set(logs.map(l => l.action))];

  const filtered = logs
    .filter(l => actionFilter === 'all' || l.action === actionFilter)
    .filter(l => userFilter  === 'all' || l.user  === userFilter)
    .filter(l => {
      if (!search.trim()) return true;
      const s = search.toLowerCase();
      return (l.user || '').toLowerCase().includes(s)
          || (l.target || '').toLowerCase().includes(s)
          || (ACTION_LABELS[l.action]?.label || l.action).toLowerCase().includes(s);
    });

  const todayKey  = new Date().toISOString().slice(0,10);
  const todayCount  = logs.filter(l => l.ts?.slice(0,10) === todayKey).length;
  const loginCount  = logs.filter(l => l.action === 'login').length;
  const editCount   = logs.filter(l => l.action?.includes('_update') || l.action?.includes('_add') || l.action?.includes('_delete')).length;

  return (
    <div className="row-gap">
      <div className="kpi-grid" style={{gridTemplateColumns: 'repeat(4, 1fr)'}}>
        <div className="kpi"><div className="kpi-label">รวมทั้งหมด</div><div className="kpi-value">{logs.length}<span className="kpi-unit">รายการ</span></div></div>
        <div className="kpi"><div className="kpi-label">วันนี้</div><div className="kpi-value">{todayCount}<span className="kpi-unit">รายการ</span></div></div>
        <div className="kpi"><div className="kpi-label">การเข้าสู่ระบบ</div><div className="kpi-value">{loginCount}<span className="kpi-unit">ครั้ง</span></div></div>
        <div className="kpi"><div className="kpi-label">การเปลี่ยนแปลงข้อมูล</div><div className="kpi-value">{editCount}<span className="kpi-unit">รายการ</span></div></div>
      </div>

      <div className="card">
        <div className="card-head">
          <h3 className="card-title">Audit Log</h3>
          <div style={{marginLeft: 'auto'}} className="flex gap-6">
            <button className="btn btn-sm" onClick={refresh}>↻ รีเฟรช</button>
            <button className="btn btn-sm" onClick={exportLog}>{I.download} Export</button>
          </div>
        </div>
        <div className="card-pad" style={{paddingBottom: 12}}>
          <div className="flex gap-8" style={{flexWrap: 'wrap'}}>
            <div className="search" style={{width: 240}}>
              {I.search}
              <input placeholder="ค้นหา ผู้ใช้, เป้าหมาย..." value={search} onChange={e => setSearch(e.target.value)}/>
            </div>
            <select value={actionFilter} onChange={e => setActionFilter(e.target.value)}>
              <option value="all">ทุกการกระทำ</option>
              {actions.map(a => <option key={a} value={a}>{ACTION_LABELS[a]?.label || a}</option>)}
            </select>
            <select value={userFilter} onChange={e => setUserFilter(e.target.value)}>
              <option value="all">ทุกผู้ใช้</option>
              {users.map(u => <option key={u} value={u}>{u}</option>)}
            </select>
            <div style={{flex: 1}}/>
            <span className="text-sm muted">แสดง {filtered.length} / {logs.length} รายการ</span>
          </div>
        </div>
        <table className="tbl">
          <thead>
            <tr>
              <th style={{width: 160}}>เวลา</th>
              <th style={{width: 130}}>ผู้ใช้</th>
              <th style={{width: 150}}>การกระทำ</th>
              <th>เป้าหมาย / รายละเอียด</th>
            </tr>
          </thead>
          <tbody>
            {filtered.map(l => {
              const meta = ACTION_LABELS[l.action] || { label: l.action, color: '#8294a8', icon: '•' };
              const roleColor = l.role === 'admin' ? '#a63232' : l.role === 'staff' ? '#1a78c2' : '#2d9d5b';
              return (
                <tr key={l.id}>
                  <td className="mono text-xs muted">{fmtAuditTime(l.ts)}</td>
                  <td>
                    <div className="fw-500 text-sm">{l.user}</div>
                    <div className="text-xs" style={{color: roleColor}}>{l.role}</div>
                  </td>
                  <td>
                    <span className="pill" style={{background: meta.color + '18', color: meta.color, borderColor: 'transparent'}}>
                      <span style={{marginRight: 4}}>{meta.icon}</span>{meta.label}
                    </span>
                  </td>
                  <td className="text-sm">
                    <div className="fw-500">{l.target}</div>
                    {Object.keys(l.details || {}).length > 0 && (
                      <div className="text-xs muted" style={{marginTop: 2}}>
                        {Object.entries(l.details).map(([k, v]) => (
                          <span key={k} style={{marginRight: 10}}>
                            <span className="mono">{k}:</span> {typeof v === 'object' ? JSON.stringify(v) : String(v)}
                          </span>
                        ))}
                      </div>
                    )}
                  </td>
                </tr>
              );
            })}
            {filtered.length === 0 && <tr><td colSpan="4"><div className="empty">{logs.length === 0 ? 'กำลังโหลด...' : 'ไม่พบรายการ'}</div></td></tr>}
          </tbody>
        </table>
      </div>
    </div>
  );
}

window.AuditLogPanel = AuditLogPanel;