"use client";

import React, { useState, useMemo } from "react";
import dynamic from "next/dynamic";
import styles from "../../modules/commonstyle/dattabale.module.css";
import { Pagination } from "./../../../../components/clients/Pagination";
import { EnterpriseLoader } from "./../../../../components/loader/loader";
import { UserFilters } from "./UserFilters";
import { useUsers } from "@/lib/api/hooks/useUsers";
import { applyUserFilters, paginate, getUserStats } from "@/lib/api/utils/user.utils";
import { UserTableProps } from "@/lib/api/types/user.types";
import UserForm from "./Form/UserForm";
import RoleForm from "./Form/RoleForm";

// ── SSR-safe dynamic import ────────────────────────────
const UserRow = dynamic(
  () => import("./UserRow").then((mod) => mod.UserRow),
  { ssr: false }
);

// ══════════════════════════════════════════════════════
//  UserTable
// ══════════════════════════════════════════════════════
export default function UserTable({ refreshFlag }: UserTableProps) {
  // ── Data via hook ──────────────────────────────────
  const {
    users,
    roles,
    loading,
    error,
    pendingCount,
    refresh,
    handleApprove,
    handleReject,
    handleDelete,
    handleVerify, // ✅ add this
  } = useUsers(refreshFlag);

  // ── Table state ────────────────────────────────────
  const [selectedRows, setSelectedRows] = useState<number[]>([]);
  const [expandedRows, setExpandedRows] = useState<number[]>([]);
  const [currentPage, setCurrentPage] = useState(1);
  const [itemsPerPage, setItemsPerPage] = useState(10);

  // ── Filter state ───────────────────────────────────
  const [searchTerm, setSearchTerm] = useState("");
  const [statusFilter, setStatusFilter] = useState("all");
  const [roleFilter, setRoleFilter] = useState("all");

  // ── Modal state ────────────────────────────────────
  const [isEditOpen, setIsEditOpen] = useState(false);
  const [editingUserId, setEditingUserId] = useState<number | null>(null);
  const [isRoleModalOpen, setIsRoleModalOpen] = useState(false);
  const [managingRoleUserId, setManagingRoleUserId] = useState<number | null>(null);

  // ── Derived data ───────────────────────────────────
  const filteredData = useMemo(
    () => applyUserFilters(users, { searchTerm, statusFilter, roleFilter }),
    [users, searchTerm, statusFilter, roleFilter]
  );

  const paginatedData = useMemo(
    () => paginate(filteredData, currentPage, itemsPerPage),
    [filteredData, currentPage, itemsPerPage]
  );

  const stats = getUserStats(users);

  const managingRoleUser = managingRoleUserId
    ? users.find((u) => u.id === managingRoleUserId) ?? null
    : null;

  // ── Handlers ───────────────────────────────────────
  const handleEdit = (id: number) => {
    setEditingUserId(id);
    setIsEditOpen(true);
  };

  const handleManageRoles = (id: number) => {
    setManagingRoleUserId(id);
    setIsRoleModalOpen(true);
  };

  const clearFilters = () => {
    setSearchTerm("");
    setStatusFilter("all");
    setRoleFilter("all");
    setCurrentPage(1);
  };

  // ── Error ──────────────────────────────────────────
  if (error) {
    return (
      <div className={styles.errorContainer}>
        <div className={styles.errorIcon}>⚠️</div>
        <h3 className={styles.errorTitle}>Error Loading Data</h3>
        <p className={styles.errorMessage}>{error}</p>
        <button className={styles.errorButton} onClick={refresh}>Retry</button>
      </div>
    );
  }

  if (loading) return <EnterpriseLoader />;

  return (
    <div className={styles.container}>

      {/* ── Edit Modal ── */}
      {isEditOpen && (
        <UserForm
          isOpen={isEditOpen}
          userId={editingUserId}
          onClose={() => { setIsEditOpen(false); setEditingUserId(null); }}
          refreshData={refresh}
        />
      )}

      {/* ── Role Modal ── */}
      {isRoleModalOpen && (
        <RoleForm
          isOpen={isRoleModalOpen}
          user={managingRoleUser}
          roles={roles}
          onClose={() => { setIsRoleModalOpen(false); setManagingRoleUserId(null); }}
          refreshData={refresh}
        />
      )}

      {/* ── Filters ── */}
      <UserFilters
        searchTerm={searchTerm}
        setSearchTerm={setSearchTerm}
        statusFilter={statusFilter}
        setStatusFilter={setStatusFilter}
        roleFilter={roleFilter}
        setRoleFilter={setRoleFilter}
        roles={roles}
        clearFilters={clearFilters}
        onRefresh={refresh}
      />

      {/* ── Stats Bar ── */}
      <div className={styles.statsBar}>
        {[
          { label: "Total Users",      value: stats.total     },
          { label: "Active",           value: stats.active    },
          { label: "Pending Approval", value: pendingCount    },
          { label: "Unverified",       value: stats.unverified},
          { label: "Selected",         value: selectedRows.length },
        ].map(({ label, value }) => (
          <div key={label} className={styles.stat}>
            <span className={styles.statLabel}>{label}</span>
            <span className={styles.statValue}>{value}</span>
          </div>
        ))}
      </div>

      {/* ── Table ── */}
      <div className={styles.tableWrapper}>
        <table className={styles.table}>
          <thead>
            <tr>
              <th className={styles.expandCol}></th>
              <th className={styles.checkboxCol}>
                <input
                  type="checkbox"
                  className={styles.checkbox}
                  checked={
                    paginatedData.length > 0 &&
                    paginatedData.every((r) => selectedRows.includes(r.sno))
                  }
                  onChange={(e) =>
                    setSelectedRows(
                      e.target.checked ? paginatedData.map((r) => r.sno) : []
                    )
                  }
                />
              </th>
              {[
                { key: "sno",    label: "S.NO"   },
                { key: "name",   label: "Name"   },
                { key: "email",  label: "Email"  },
                { key: "roles",  label: "Roles"  },
                { key: "status", label: "Status" },
                { key: "joined", label: "Joined" },
              ].map((col) => (
                <th key={col.key} className={styles.th}>{col.label}</th>
              ))}
              <th className={styles.actionsCol}>Actions</th>
            </tr>
          </thead>
          <tbody>
            {paginatedData.length === 0 ? (
              <tr>
                <td colSpan={9} style={{ textAlign: "center", padding: "40px", color: "#6b7280", fontSize: "13px" }}>
                  No users found
                </td>
              </tr>
            ) : (
              paginatedData.map((row) => (
                <UserRow
                  key={row.id}
                  row={row}
                  isExpanded={expandedRows.includes(row.sno)}
                  toggleRowExpand={(sno) =>
                    setExpandedRows((prev) =>
                      prev.includes(sno) ? prev.filter((r) => r !== sno) : [...prev, sno]
                    )
                  }
                  isSelected={selectedRows.includes(row.sno)}
                  handleRowSelect={(sno, checked) =>
                    setSelectedRows((prev) =>
                      checked ? [...prev, sno] : prev.filter((r) => r !== sno)
                    )
                  }
                  onEdit={handleEdit}
                  onDelete={handleDelete}
                  onApprove={handleApprove}
                  onReject={handleReject}
                  onManageRoles={handleManageRoles}
                  onVerify={handleVerify}
                />
              ))
            )}
          </tbody>
        </table>
      </div>

      {/* ── Pagination ── */}
      <Pagination
        currentPage={currentPage}
        setCurrentPage={setCurrentPage}
        totalPages={Math.ceil(filteredData.length / itemsPerPage)}
        startIndex={(currentPage - 1) * itemsPerPage + 1}
        endIndex={Math.min(currentPage * itemsPerPage, filteredData.length)}
        sortedDataLength={filteredData.length}
        itemsPerPage={itemsPerPage}
        setItemsPerPage={(v) => { setCurrentPage(1); setItemsPerPage(v); }}
      />
    </div>
  );
}