"use client";
import CommonError from "@/app/components/CommonError";
import CommonTable from "@/app/components/CommonTable";
import { useRegistrationTable } from "./_hooks";

export default function Table({ refreshTrigger }: { refreshTrigger: number }) {
  const { users, loading, hasMore, search, setSearch, message, messageType, handleLoadMore, handleToggle } =
    useRegistrationTable(refreshTrigger);

  return (
    <>
      <CommonError message={message} type={messageType} />
      <div className="card">
        <div className="card-header border-bottom">
          <div className="d-flex justify-content-between align-items-center">
            <h5 className="mb-0">Users</h5>
            <input
              className="form-control form-control-sm shadow-none search"
              type="search"
              placeholder="Email search..."
              style={{ maxWidth: 200 }}
              value={search}
              onChange={(e) => setSearch(e.target.value)}
            />
          </div>
        </div>
        <CommonTable
          headers={["ID", "Name", "Email", "Contact", "Action"]}
          rows={users.map((u) => ({
            id: u.id,
            cells: [
              u.id,
              `${u.first_name} ${u.last_name}`.trim() || "—",
              u.email,
              u.contact,
              <div className="form-check form-switch" style={{ padding: 0 }}>
                <input
                  className="form-check-input ms-0"
                  type="checkbox"
                  checked={Boolean(u.is_active === true || u.is_active === "true")}
                  onChange={() => handleToggle(u.id)}
                />
              </div>,
            ],
          }))}
          loading={loading}
          hasMore={hasMore}
          onLoadMore={handleLoadMore}
          isActionButton={false}
          isStatus={false}
        />
      </div>
    </>
  );
}