'use client';

import { IamSectionCard } from '@/components/iam/IamSectionCard';
import { useApi } from '@/lib/hooks/use-api';
import { iamUser } from '@/lib/api/iam';
import type { IamUser } from '@/lib/api/types/user';

export default function IamUserPage() {
  const { data, loading, error } = useApi(() => iamUser.list({ page: '1', page_size: '20' }));
  const rows = data?.items ?? [];

  return (
    <IamSectionCard title="用户管理" description="对接 GET /api/v1/iam/user/list。">
      {loading ? <p className="text-sm text-neutral-500">加载中…</p> : null}
      {error ? <p className="text-sm text-red-600">{error}</p> : null}
      {!loading && !error ? (
        <div className="overflow-x-auto">
          <table className="w-full min-w-[520px] border-collapse text-sm">
            <thead>
              <tr className="border-b border-neutral-200 text-left text-neutral-600">
                <th className="py-2 pr-2">用户名</th>
                <th className="py-2 pr-2">姓名</th>
                <th className="py-2 pr-2">状态</th>
                <th className="py-2">ID</th>
              </tr>
            </thead>
            <tbody>
              {rows.map((r) => (
                <tr key={r.id} className="border-b border-neutral-100">
                  <td className="py-2 pr-2">{r.user_name ?? '—'}</td>
                  <td className="py-2 pr-2">{r.real_name ?? '—'}</td>
                  <td className="py-2 pr-2">{r.status ?? '—'}</td>
                  <td className="py-2 font-mono text-xs text-neutral-500">{r.id}</td>
                </tr>
              ))}
            </tbody>
          </table>
          {!rows.length ? <p className="mt-2 text-neutral-500">暂无用户</p> : null}
        </div>
      ) : null}
    </IamSectionCard>
  );
}