import React from "react";

interface TableRow { id: any; cells: any[]; }

interface CommonTableProps {
  headers?: string[];
  rows?: TableRow[];
  loading?: boolean;
  hasMore?: boolean;
  onLoadMore?: () => void;
  isActionButton?: boolean;
  // FIX: isStatus was accepted but never used — now actually renders a Status column
  isStatus?: boolean;
  // FIX: onEdit was missing — the Edit button had no callback wired up
  onEdit?: (row: TableRow) => void;
}

export default function CommonTable({
  headers = [], rows = [], loading = false,
  hasMore = false, onLoadMore = () => {},
  isActionButton = true, isStatus = false, onEdit,
}: CommonTableProps) {
  const extraCols = (isStatus ? 1 : 0) + (isActionButton ? 1 : 0);

  return (
    <div className="card-body pt-0">
      <div className="table-responsive scrollbar">
        <table className="table table-hover">
          <thead>
            <tr>
              {headers.map((h, i) => <th key={i}>{h}</th>)}
              {isStatus     && <th>Status</th>}
              {isActionButton && <th>Actions</th>}
            </tr>
          </thead>
          <tbody>
            {rows.length > 0 ? rows.map((row, ri) => (
              <tr key={row.id ?? ri}>
                {row.cells.map((cell, ci) => <td key={ci}>{cell}</td>)}
                {isStatus && (
                  <td>
                    <span className={`badge ${
                      String(row.cells[row.cells.length - 1]).toLowerCase().includes("active")
                        ? "badge-phoenix badge-phoenix-success"
                        : "badge-phoenix badge-phoenix-secondary"
                    }`}>
                      {row.cells[row.cells.length - 1]}
                    </span>
                  </td>
                )}
                {isActionButton && (
                  <td className="text-end">
                    <div className="dropdown font-sans-serif position-static">
                      <button
                        className="btn btn-link text-600 btn-sm dropdown-toggle btn-reveal"
                        type="button"
                        data-bs-toggle="dropdown"
                        aria-haspopup="true"
                        aria-expanded="false"
                      >
                        <span className="fas fa-ellipsis-h fs-10" />
                      </button>
                      <div className="dropdown-menu dropdown-menu-end border py-0">
                        <div className="py-2">
                          {/* FIX: wired up onEdit — was a dead button with no onClick */}
                          <button className="dropdown-item" type="button" onClick={() => onEdit?.(row)}>
                            Edit
                          </button>
                        </div>
                      </div>
                    </div>
                  </td>
                )}
              </tr>
            )) : !loading && (
              <tr>
                <td colSpan={headers.length + extraCols} className="text-center">No data found.</td>
              </tr>
            )}
            {loading && (
              <tr>
                <td colSpan={headers.length + extraCols} className="text-center">
                  <div className="spinner-border spinner-border-sm" role="status">
                    <span className="visually-hidden">Loading...</span>
                  </div>
                </td>
              </tr>
            )}
          </tbody>
        </table>
      </div>
      {hasMore && (
        <div className="mt-3">
          <button className="btn btn-subtle-primary me-1 mb-1 btn-sm" type="button" disabled={loading} onClick={onLoadMore}>
            {loading ? (
              <><span className="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true" />Loading...</>
            ) : "+ More"}
          </button>
        </div>
      )}
    </div>
  );
}