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

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

  const roleBadge = (role: string) => {
    const map: Record<string, string> = {
      'Super Admin': "badge-phoenix-danger",
      Developer: "badge-phoenix-warning",
      Admin: "badge-phoenix-info",
      Guest: "badge-phoenix-success",
      User: "badge-phoenix-primary",
    };
    return map[role] || "badge-phoenix-secondary";
  };

  return (
    <>
      <CommonError message={message} type={messageType} />

      {/*
        FIX: type="text" not type="search".
        The native browser ✕ clear button on type="search" removes a DOM node
        React still owns → "Failed to execute 'removeChild' on 'Node'" crash.
        type="text" gives identical UX without the browser-native clear button.
      */}
      <input
        className="form-control form-control-sm shadow-none search mb-3"
        type="text"
        autoComplete="off"
        placeholder="Search..."
        style={{ maxWidth: 220 }}
        value={search}
        onChange={(e) => setSearch(e.target.value)}
      />

      <div className="card-body pt-0">
        <div className="table-responsive scrollbar mx-n1 px-1">
          <table className="table table-sm fs-12 leads-table">
            <thead>
              <tr >
                {[
                  "ID",
                  "User",
                  "Organization",
                  "Project",
                  "Role",
                  "Status",
                ].map((h) => (
                  <th
                    key={h}
                    className="align-middle ps-0 pe-5 text-uppercase text-nowrap"
                  >
                    <b className="text-theme">{h}</b>
                  </th>
                ))}
              </tr>
            </thead>
            <tbody>
              {rows.length > 0 ? (
                rows.map((item) => (
                  <tr key={item.id}>
                    <td className="align-middle">
                      <span className="fw-semibold">{item.id}</span>
                    </td>
                    <td className="align-middle">
                      <div className="d-flex align-items-center">
                        <div className="avatar avatar-m me-3">
                          {item.user_image ? (
                            <img
                              className="rounded-circle"
                              src={`${process.env.NEXT_PUBLIC_API_BASE_URL}static${item.user_image}`}
                              alt={item.user_email}
                              style={{
                                width: 32,
                                height: 32,
                                objectFit: "cover",
                              }}
                            />
                          ) : (
                            <div
                              className="rounded-circle bg-primary bg-opacity-10 d-flex align-items-center justify-content-center text-primary fw-semibold"
                              style={{ width: 32, height: 32, fontSize: 12 }}
                            >
                              {item.user_email?.charAt(0).toUpperCase() || "U"}
                            </div>
                          )}
                        </div>
                        <div>
                          <div className="text-body-highlight fw-semibold">
                            <b className="text-theme">{item.user_email || "N/A"}</b>
                          </div>
                          {item.user_name && (
                            <div className="text-body-tertiary fs-10">
                              {item.user_name}
                            </div>
                          )}
                        </div>
                      </div>
                    </td>
                    <td className="align-middle">
                      <span className="badge badge-phoenix badge-phoenix-info fs-12px">
                        {item.user_org || "N/A"}
                      </span>
                    </td>
                    <td className="align-middle">
                      <span className="fw-semibold">
                        {item.user_project || "N/A"}
                      </span>
                    </td>
                    <td className="align-middle ">
                      <span
                        className={`badge fs-12px badge-phoenix ${roleBadge(item.user_role)}`}
                      >
                        {item.user_role}
                      </span>
                    </td>
                    <td className="align-middle">
                      <div
                        className="form-check form-switch"
                        style={{ padding: 0 }}
                      >
                        <input
                          className="form-check-input ms-0"
                          type="checkbox"
                          style={{ cursor: "pointer" }}
                          checked={item.is_active}
                          onChange={() => handleToggle(item.id)}
                        />
                      </div>
                    </td>
                  </tr>
                ))
              ) : (
                <tr>
                  <td
                    colSpan={6}
                    className="text-center py-4 text-body-tertiary"
                  >
                    No data found.
                  </td>
                </tr>
              )}
              {loading && (
                <tr>
                  <td colSpan={6} className="text-center py-3">
                    <span className="spinner-border spinner-border-sm" />
                  </td>
                </tr>
              )}
            </tbody>
          </table>
        </div>
        {hasMore && (
          <button
            className="btn btn-outline-green mb-2 me-1"
            onClick={handleLoadMore}
            disabled={loading}
          >
            {loading ? (
              <>
                <span className="spinner-border spinner-border-sm me-2" />
                Loading...
              </>
            ) : (
              "+ More"
            )}
          </button>
        )}
      </div>
    </>
  );
}