"use client";
import useSWR from "swr";

const fetcher = (url: string) => fetch(url).then((r) => r.json());

export default function AdminLogsPage() {
  const { data: audits } = useSWR<{ logs: any[] }>("/api/admin/audit-logs?limit=100", fetcher);
  const { data: reports } = useSWR<{ reports: any[] }>("/api/admin/reports", fetcher);
  const { data: views } = useSWR<{ views: any[] }>("/api/admin/views", fetcher);
  return (
    <div>
      <h1>감사/신고/열람 로그</h1>
      <h2>감사 로그</h2>
      <Table rows={(audits?.logs ?? []).map((x) => ({ a: x.createdAt, b: x.action, c: x.targetType, d: x.targetId }))} headers={["시각", "행위", "대상", "ID"]} />
      <h2>신고</h2>
      <Table rows={(reports?.reports ?? []).map((x) => ({ a: x.createdAt, b: x.targetType, c: x.reason, d: x.status }))} headers={["시각", "대상", "사유", "상태"]} />
      <h2>열람 로그</h2>
      <Table rows={(views?.views ?? []).map((x) => ({ a: x.createdAt, b: x.postId, c: x.userId, d: x.ip }))} headers={["시각", "postId", "userId", "ip"]} />
    </div>
  );
}

function Table({ headers, rows }: { headers: string[]; rows: { a: any; b: any; c: any; d: any }[] }) {
  return (
    <table style={{ width: "100%", borderCollapse: "collapse", marginBottom: 16 }}>
      <thead>
        <tr>
          {headers.map((h) => (
            <th key={h} style={{ textAlign: "left", borderBottom: "1px solid #eee" }}>{h}</th>
          ))}
        </tr>
      </thead>
      <tbody>
        {rows.map((r, i) => (
          <tr key={i}>
            <td>{String(r.a)}</td>
            <td>{String(r.b)}</td>
            <td>{String(r.c)}</td>
            <td>{String(r.d)}</td>
          </tr>
        ))}
      </tbody>
    </table>
  );
}


