import { useEffect, useState } from 'react';
import type { NativeApi } from '@api/native';
import { Button } from '@components/ui/button';
import type { NativeAuditEvent } from '@typings/native';

export function NativeAuditLog({ api, onError }: { api: NativeApi; onError: (value: unknown) => void }) {
  const [items, setItems] = useState<NativeAuditEvent[]>([]);
  const [loading, setLoading] = useState(true);
  const [refresh, setRefresh] = useState(0);
  useEffect(() => {
    const controller = new AbortController(); setLoading(true);
    void api.audit(controller.signal).then(result => {
      if (!controller.signal.aborted) setItems(result.items);
    }).catch(value => { if (!controller.signal.aborted) onError(value); })
      .finally(() => { if (!controller.signal.aborted) setLoading(false); });
    return () => controller.abort();
  }, [api, refresh, onError]);

  return <div className="space-y-4"><div className="flex items-center justify-between"><p className="text-sm text-console-text-secondary">认证、API key 与管理操作的服务端审计记录</p><Button size="sm" variant="outline" disabled={loading} onClick={() => setRefresh(value => value + 1)}>刷新审计</Button></div>
    {loading ? <p role="status">正在读取审计记录…</p> : items.length === 0 ? <p className="text-sm text-console-text-secondary">暂无审计记录</p> : <ol className="space-y-3">{items.map(item => <li key={item.id} className="rounded-md border border-console-border p-4"><div className="flex flex-wrap justify-between gap-2"><strong className="break-all text-sm">{item.event}</strong><time className="text-xs text-console-text-secondary">{new Date(item.created_at).toLocaleString('zh-CN')}</time></div><p className="mt-2 break-all text-xs text-console-text-secondary">操作者：{item.actor || '匿名 / 系统'}{item.profile_id ? ` · Profile：${item.profile_id}` : ''}</p>{item.detail != null && <pre className="mt-2 overflow-auto whitespace-pre-wrap break-all text-xs">{typeof item.detail === 'string' ? item.detail : JSON.stringify(item.detail, null, 2)}</pre>}</li>)}</ol>}
  </div>;
}