/* eslint-disable @typescript-eslint/no-explicit-any */

import React from "react";
import styles from "./new-data-table.module.scss";
import NoResults from "@/components/dashboard/no-results";

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

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 NewDataTable = <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)}
              >
                <NoResults title="No Data Found" remark="Oops! No results or your queries has no data. Please try again " />
              </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 = [
                    "pending",
                    "assigned",
                    "completed",
                    "rescheduled",
                    "upcoming",
                    "missed",
                    "Partial",
                    "cancelled",
                    "Paid", 
                    "Pending", 
                    "Approved"
                  ];

                  const formatStatus = (value: string) =>
                    value
                      .replace(/_/g, " ")
                      .replace(/\b\w/g, (l) => l.toUpperCase());

                  if (typeof rawValue === "string" && statusValues.includes(rawValue)) {
                    return (
                      <td key={j}>
                        <span className={`${styles.status} ${styles[`status--${rawValue}`]}`}>
                          <span className={styles.dot}></span>
                          {formatStatus(rawValue)}
                        </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 NewDataTable;