/* eslint-disable @typescript-eslint/no-explicit-any */
// /* eslint-disable @typescript-eslint/no-explicit-any */
// import React from "react";
// import styles from "./data-table.module.scss";

// export type Action<T> = {
//   label: string;
//   onClick: (row: T) => void;
//   variant?: "view" | "update" | "delete" | "custom";
// };

// export type Column<T> = {
//   header: string;
//   accessor: keyof T | ((row: T) => React.ReactNode);
// };

// export interface DataTableProps<T> {
//   data: T[];
//   columns: Column<T>[];
//   actions?: Action<T>[];
// };

// const DataTable = <T extends { status?: "Active" | "Inactive" }>({
//   data,
//   columns,
//   actions,
// }: DataTableProps<T>) => {
//   return (
//     <div className={styles.wrapper}>
//       <table>
//         <thead>
//           <tr>
//             {columns.map((col, i) => (
//               <th key={i}>{col.header}</th>
//             ))}
//             {actions && actions.length > 0 && <th>Actions</th>}
//           </tr>
//         </thead>

//         <tbody>
//           {data.length === 0 ? (
//             <tr>
//               <td
//                 colSpan={columns.length + (actions?.length ? 1 : 0)}
//                 className={styles.empty}
//               >
//                 No data found.
//               </td>
//             </tr>
//           ) : (
//             data.map((row, i) => (
//               <tr key={i}>
//                 {columns.map((col, j) => {
//                   // Get value and coerce to any to satisfy TypeScript
//                   const rawValue: any =
//                     typeof col.accessor === "function"
//                       ? col.accessor(row)
//                       : row[col.accessor];

//                   // Status column with dot
//                   if (col.header.toLowerCase() === "status") {
//                     const isActive = rawValue === "Active";
//                     return (
//                       <td key={j}>
//                         <span
//                           className={`${styles.status} ${
//                             isActive
//                               ? styles["status--success"]
//                               : styles["status--failed"]
//                           }`}
//                         >
//                           <span className={styles.dot}></span>
//                           {isActive ? "Active" : "Inactive"}
//                         </span>
//                       </td>
//                     );
//                   }

//                   // Render anything else
//                   return <td key={j}>{rawValue != null ? rawValue : ""}</td>;
//                 })}

//                 {actions && actions.length > 0 && (
//                   <td className={styles.actions}>
//                     {actions.map((action, k) => (
//                       <button
//                         key={k}
//                         onClick={() => action.onClick(row)}
//                         className={`${styles.actionButton} ${
//                           styles[action.variant ?? "custom"]
//                         }`}
//                       >
//                         {action.label}
//                       </button>
//                     ))}
//                   </td>
//                 )}
//               </tr>
//             ))
//           )}
//         </tbody>
//       </table>
//     </div>
//   );
// };

// export default DataTable;



import React from "react";
import styles from "./data-table.module.scss";

export type Action<T> = {
  label: string;
  onClick: (row: T) => void;
  variant?: "view" | "update" | "delete" | "custom";
};

export type Column<T> = {
  header: string;
  accessor: keyof T | ((row: T) => React.ReactNode);
};

export interface DataTableProps<T> {
  data: T[];
  columns: Column<T>[];
  actions?: Action<T>[];
}

const DataTable = <T,>({ data, columns, actions }: DataTableProps<T>) => {

  // ✅ Added date formatter ONLY
  const formatFullDate = (dateString: string) => {
    const date = new Date(dateString);

    if (isNaN(date.getTime())) return dateString;

    const dayName = date.toLocaleDateString("en-US", { weekday: "long" });
    const month = date.toLocaleDateString("en-US", { month: "long" });
    const day = date.getDate();
    const year = date.getFullYear();

    const getOrdinal = (n: number) => {
      if (n > 3 && n < 21) return "th";
      switch (n % 10) {
        case 1: return "st";
        case 2: return "nd";
        case 3: return "rd";
        default: return "th";
      }
    };

    return `${dayName} ${month} ${day}${getOrdinal(day)}, ${year}`;
  };

  return (
    <div className={styles.wrapper}>
      <table>
        <thead>
          <tr>
            {columns.map((col, i) => (
              <th key={i}>{col.header}</th>
            ))}
            {actions && actions.length > 0 && <th>Actions</th>}
          </tr>
        </thead>

        <tbody>
          {data.length === 0 ? (
            <tr>
              <td
                colSpan={columns.length + (actions?.length ? 1 : 0)}
                className={styles.empty}
              >
                No data found.
              </td>
            </tr>
          ) : (
            data.map((row, i) => (
              <tr key={i}>
                {columns.map((col, j) => {
                  let rawValue =
                    typeof col.accessor === "function"
                      ? col.accessor(row)
                      : (row as any)[col.accessor];

                  // ✅ ONLY CHANGE: format date if it's a valid date string
                  if (typeof rawValue === "string" && !isNaN(Date.parse(rawValue))) {
                    rawValue = formatFullDate(rawValue);
                  }

                  // Render status as premium pill
                  const statusValues = ["completed", "upcoming", "missed", "rescheduled"];
                  if (typeof rawValue === "string" && statusValues.includes(rawValue)) {
                    const formatted = rawValue.charAt(0).toUpperCase() + rawValue.slice(1);
                    return (
                      <td key={j}>
                        <span className={`${styles.status} ${styles[`status--${rawValue}`]}`}>
                          <span className={styles.dot}></span>
                          {formatted}
                        </span>
                      </td>
                    );
                  }

                  return <td key={j}>{rawValue ?? ""}</td>;
                })}

                {actions && actions.length > 0 && (
                  <td className={styles.actions}>
                    {actions.map((action, k) => (
                      <button
                        key={k}
                        onClick={() => action.onClick(row)}
                        className={`${styles.actionButton} ${styles[action.variant ?? "custom"]}`}
                      >
                        {action.label}
                      </button>
                    ))}
                  </td>
                )}
              </tr>
            ))
          )}
        </tbody>
      </table>
    </div>
  );
};

export default DataTable;