DataTable

'use client'

import { DataTable } from '@caroainc/ui-components/client'
import type { DataTableColumn, FilterItem } from '@caroainc/ui-components/client'

'use client'

import { DataTable } from '@caroainc/ui-components/data-table'
import type { DataTableColumn, FilterItem } from '@caroainc/ui-components/data-table'

DataTable（childrenなし）
├─ columns: DataTableColumn[]（必須）
├─ data: T[]（必須）
├─ filterItems? / customActions?（ツールバー）
├─ rowActions?（各行）
└─ pagination?（フッター）

interface User {
  id: number
  name: string
  email: string
  role: string
  status: string
}

const columns: DataTableColumn<User>[] = [
  { id: 'name', header: '名前', accessorKey: 'name', sortable: true },
  { id: 'email', header: 'メール', accessorKey: 'email' },
  { id: 'role', header: '役割', accessorKey: 'role' },
  {
    id: 'status',
    header: 'ステータス',
    accessorKey: 'status',
    cell: (row) => <Badge variant="success">{row.status}</Badge>,
  },
]

<DataTable columns={columns} data={data} hideSearch />

const columns: DataTableColumn<User>[] = [
  { id: 'name', header: '名前', accessorKey: 'name', sortable: true },
  { id: 'email', header: 'メール', accessorKey: 'email', sortable: true },
  { id: 'role', header: '役割', accessorKey: 'role', sortable: true },
  { id: 'status', header: 'ステータス', accessorKey: 'status' },
]

<DataTable
  columns={columns}
  data={data}
  searchPlaceholder="名前やメールで検索..."
/>

const filterItems: FilterItem<User>[] = [
  {
    id: 'status',
    field: 'status',
    label: 'ステータス',
    type: 'text',
    conditions: [
      { label: '有効', condition: { type: 'equals', value: 'active' } },
      { label: '無効', condition: { type: 'equals', value: 'inactive' } },
      { label: '保留中', condition: { type: 'equals', value: 'pending' } },
    ],
  },
  {
    id: 'role',
    field: 'role',
    label: '役割',
    type: 'text',
    conditions: [
      { label: '管理者', condition: { type: 'equals', value: '管理者' } },
      { label: '編集者', condition: { type: 'equals', value: '編集者' } },
      { label: 'メンバー', condition: { type: 'equals', value: 'メンバー' } },
    ],
  },
]

<DataTable
  columns={columns}
  data={data}
  filterItems={filterItems}
  searchPlaceholder="検索..."
/>

<DataTable
  columns={columns}
  data={paginatedData}
  pagination={{
    page: 1,
    limit: 10,
    total: 100,
    totalPages: 10,
  }}
  onPageChange={(page) => setPage(page)}
/>

const rowActions = (row: User) => (
  <DropdownMenu>
    <DropdownMenuTrigger asChild>
      <Button variant="ghost" size="sm" shape="circle">
        <Icon name="MoreHorizontal" size="sm" />
      </Button>
    </DropdownMenuTrigger>
    <DropdownMenuContent align="end">
      <DropdownMenuItem>
        <Icon name="Eye" size="sm" />
        詳細を見る
      </DropdownMenuItem>
      <DropdownMenuItem>
        <Icon name="Pencil" size="sm" />
        編集
      </DropdownMenuItem>
      <DropdownMenuSeparator />
      <DropdownMenuItem className="text-destructive">
        <Icon name="Trash2" size="sm" />
        削除
      </DropdownMenuItem>
    </DropdownMenuContent>
  </DropdownMenu>
)

<DataTable columns={columns} data={data} rowActions={rowActions} />

const customActions = (
  <Button size="sm">
    <Icon name="Plus" size="sm" />
    新規追加
  </Button>
)

<DataTable
  columns={columns}
  data={data}
  customActions={customActions}
  searchPlaceholder="検索..."
/>

<DataTable
  columns={columns}
  data={[]}
  emptyState={{
    icon: <Icon name="Users" size="xl" className="text-muted-foreground mb-4" />,
    title: 'ユーザーがいません',
    description: '新しいユーザーを追加してください',
    action: (
      <Button>
        <Icon name="Plus" size="sm" />
        ユーザーを追加
      </Button>
    ),
  }}
/>

<DataTable columns={columns} data={[]} loading />

const [selectedKeys, setSelectedKeys] = useState<Set<string>>(new Set())

// 行クリックで選択をトグル（onRowClickを指定しない）
<DataTable
  columns={columns}
  data={data}
  rowKey={(row) => row.id}
  selectedKeys={selectedKeys}
  onSelectionChange={setSelectedKeys}
/>

// 行クリックで遷移、選択はチェックボックスのみで行う
<DataTable
  columns={columns}
  data={data}
  rowKey={(row) => row.id}
  selectedKeys={selectedKeys}
  onSelectionChange={setSelectedKeys}
  onRowClick={(row) => router.push(`/users/${row.id}`)}
/>

const columns: DataTableColumn<User>[] = [
  { id: 'name', header: '名前', accessorKey: 'name', width: 120, minWidth: 80 },
  { id: 'email', header: 'メール', accessorKey: 'email', width: '40%' },
  { id: 'role', header: '役割', accessorKey: 'role', width: 100 },
  {
    id: 'status',
    header: 'ステータス',
    accessorKey: 'status',
    width: 120,
    maxWidth: 160,
    cell: (row) => <Badge variant="success">{row.status}</Badge>,
  },
]

<DataTable columns={columns} data={data} hideSearch />

const [widths, setWidths] = useState<Record<string, number>>({})

const columns: DataTableColumn<User>[] = [
  { id: 'name', header: '名前', accessorKey: 'name', width: 140, minWidth: 80 },
  { id: 'email', header: 'メール', accessorKey: 'email', width: 220, minWidth: 120 },
  { id: 'role', header: '役割', accessorKey: 'role', width: 100, minWidth: 60, maxWidth: 200 },
  { id: 'status', header: 'ステータス', accessorKey: 'status', width: 120 },
]

<DataTable
  columns={columns}
  data={data}
  resizableColumns
  onColumnWidthsChange={setWidths}
/>

const [data, setData] = useState<User[]>([])
const [sort, setSort] = useState<DataTableSortType<'name'>>({ field: 'name', order: 'asc' })

const fetchData = async (search: string, sort: DataTableSortType<'name'>) => {
  const res = await api.getUsers({ search, sortField: sort.field, sortOrder: sort.order })
  setData(res.items)
}

<DataTable
  columns={columns}
  data={data}
  manualFiltering
  manualSorting
  onSearchChange={(search) => fetchData(search, sort)}
  onSortChange={(newSort) => { setSort(newSort); fetchData('', newSort) }}
/>