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, convertTimestampToTime } from "@/helper";
import Pagination from "@/app/component/Pagination";
import Link from "next/link";

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

  return (
    <div className="!mt-[32px]">
      <div className="hidden md:block w-full">
        <CustomTable tableHead={tableHead} centerTable={centerTable}>
          {user.turns.done.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}>
                  {idx + 1}
                </TextLoading>
              </TableCell>
              <TableCell
                className="!text-start !pr-[18px] !text-nowrap"
                align="right"
              >
                <TextLoading width={30} height={18} loading={loading}>
                  {row.id}
                </TextLoading>
              </TableCell>
              <TableCell
                className="!pr-[18px] !text-nowrap"
                component="th"
                scope="row"
              >
                <TextLoading width={120} height={18} loading={loading}>
                  {row.appointment_details?.doctor_name || "--"}
                </TextLoading>
              </TableCell>
              <TableCell
                className="!text-start !pr-[18px] !text-nowrap"
                align="right"
              >
                <TextLoading width={80} height={18} loading={loading}>
                  {convertTimestampToJalali(row.appointment_details?.start_time)}
                </TextLoading>
              </TableCell>
              <TableCell
                className="!text-center !pr-[18px] !text-nowrap"
                align="right"
              >
                <TextLoading width={50} height={18} loading={loading}>
                  {convertTimestampToTime(row.appointment_details?.start_time)}
                </TextLoading>
              </TableCell>
              <TableCell
                className="!text-center !pr-[18px] !text-nowrap"
                align="right"
              >
                <TextLoading width={50} height={18} loading={loading}>
                  {row.amount ? row.amount.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
                      ${row.status === "received"
                          ? "bg-[#E8FADD] text-[#75E22E]"
                          : row.status === "pending"
                            ? "bg-[#FFF3DD] text-[#FDBA35]"
                            : "bg-[#FFE3E2] text-[#FF5450]"
                        }
                    `}
                      variant="text"
                    >
                      {row.status === "received"
                        ? "پرداخت شده"
                        : row.status === "pending"
                          ? "در انتظار"
                          : "لغو شده"}
                    </div>
                  </Link>
                </CustomLoading>
              </TableCell>
            </TableRow>
          ))}
        </CustomTable>
      </div>
      <ul className="flex md:hidden flex-col gap-y-[24px]">
        {user.turns.done.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;