import CustomTable from "@/app/component/CustomTable";
import { TableCell, TableRow } from "@mui/material";
import Image from "next/image";
import Card from "./Card";
import TextLoading from "@/app/component/loading/Text";
import CustomLoading from "@/app/component/loading/Custom";
import CircularLoading from "@/app/component/loading/Circular";
import { convertTimestampToJalali } from "@/helper";
import Pagination from "@/app/component/Pagination";
import Link from "next/link";

const PAYMENT_STATUS = {
  success: { label: "پرداخت شده", cls: "bg-[#E8FADD] text-[#75E22E]" },
  pending: { label: "در انتظار", cls: "bg-[#FFF3DD] text-[#FDBA35]" },
  failed: { label: "ناموفق", cls: "bg-[#FFE3E2] text-[#FF5450]" },
  cancelled: { label: "لغو شده", cls: "bg-[#FFE3E2] text-[#FF5450]" },
  refunded: { label: "بازگشت وجه", cls: "bg-[#EFEFEF] text-[#616161]" },
};

const TYPE_LABELS = {
  appointment: "نوبت",
  subscription: "اشتراک",
  sms_wallet: "کیف پول پیامک",
};

function List({ payments, loading, page, totalPages, onPageChange }) {
  const rows = Array.isArray(payments) ? payments : [];
  const tableHead = ["ردیف", "شناسه پرداخت", "نوع", "تاریخ", "مبلغ (تومان)", "وضعیت"];
  const centerTable = [0, 4, 5];

  if (!loading && rows.length === 0) {
    return (
      <p className="text-[#7E7E7E] text-[14px] md:text-[16px] font-medium text-center py-[56px]">
        تراکنشی ثبت نشده است.
      </p>
    );
  }

  return (
    <div className="!mt-[32px]">
      <div className="hidden md:block w-full">
        <CustomTable tableHead={tableHead} centerTable={centerTable}>
          {rows.map((row, idx) => (
            <TableRow
              key={idx}
              className="!border-0 !border-b !border-[#DBDBDB]"
            >
              <TableCell className="!pr-[18px] !text-nowrap" align="center">
                <TextLoading width={15} height={18} loading={loading}>
                  {(page - 1) * 10 + idx + 1}
                </TextLoading>
              </TableCell>
              <TableCell
                className="!text-start !pr-[18px] !text-nowrap"
                align="right"
              >
                <TextLoading width={120} height={18} loading={loading}>
                  {row.order_id || "--"}
                </TextLoading>
              </TableCell>
              <TableCell
                className="!pr-[18px] !text-nowrap"
                component="th"
                scope="row"
              >
                <TextLoading width={80} height={18} loading={loading}>
                  {TYPE_LABELS[row.type] || row.type || "--"}
                </TextLoading>
              </TableCell>
              <TableCell
                className="!text-start !pr-[18px] !text-nowrap"
                align="right"
              >
                <TextLoading width={80} height={18} loading={loading}>
                  {convertTimestampToJalali(row.created_at)}
                </TextLoading>
              </TableCell>
              <TableCell
                className="!text-center !pr-[18px] !text-nowrap"
                align="right"
              >
                <TextLoading width={50} height={18} loading={loading}>
                  {row.amount_rials ? Math.round(row.amount_rials / 10).toLocaleString("fa-IR") : "--"}
                </TextLoading>
              </TableCell>
              <TableCell className="!pr-[18px] !text-nowrap" align="right">
                <CustomLoading width={80} height={22} loading={loading}>
                  <Link href={`/payment/${row.uuid}`}>
                    <div
                      className={`w-[124px] py-[4px] px-[4px] rounded-[4px] text-center text-[16px] font-medium select-none cursor-pointer ${(PAYMENT_STATUS[row.status] || PAYMENT_STATUS.failed).cls}`}
                    >
                      {(PAYMENT_STATUS[row.status] || { label: row.status }).label}
                    </div>
                  </Link>
                </CustomLoading>
              </TableCell>
            </TableRow>
          ))}
        </CustomTable>
      </div>
      <ul className="flex md:hidden flex-col gap-y-[24px]">
        {rows.map((row, idx) => (
          <Card key={idx} data={row} loading={loading} />
        ))}
      </ul>
      {totalPages > 1 && (
        <div className="flex justify-center mt-[32px] w-full">
          <Pagination
            page={page}
            totalPages={totalPages}
            onPageChange={onPageChange}
          />
        </div>
      )}
    </div>
  );
}

export default List;