"use client"

import { useRouter, useSearchParams } from "next/navigation"
import { Suspense } from "react"
import { LoginLogTable } from "./login-log-table"
import { LoginLogFilters } from "./login-log-filters"
import type { LoginLog } from "../types"

interface LoginLogViewProps {
  items: LoginLog[]
  page: number
  pageSize: number
  total: number
  totalPages: number
}

function LoginLogViewInner({
  items,
  page,
  pageSize,
  total,
  totalPages,
}: LoginLogViewProps) {
  const router = useRouter()
  const searchParams = useSearchParams()

  const handlePageChange = (newPage: number) => {
    const params = new URLSearchParams(searchParams.toString())
    if (newPage <= 1) {
      params.delete("page")
    } else {
      params.set("page", String(newPage))
    }
    const query = params.toString()
    router.push(query ? `?${query}` : "?")
  }

  return (
    <div className="space-y-4">
      <LoginLogFilters />
      <LoginLogTable
        items={items}
        page={page}
        pageSize={pageSize}
        total={total}
        totalPages={totalPages}
        onPageChange={handlePageChange}
      />
    </div>
  )
}

export function LoginLogView(props: LoginLogViewProps) {
  return (
    <Suspense fallback={null}>
      <LoginLogViewInner {...props} />
    </Suspense>
  )
}
