"use client";

import Container from "@/components/elements/Container";
import PageTitle from "@/components/settings/PageTitle";
import UserDetails from "@/components/settings/UserDetails";
import LocalePageShell from "@/components/i18n/LocalePageShell";
import UserInfo from "@/components/main/UserInfo";
import useAxios from "@/hooks/useAxios";
import { useEffect, useState } from "react";
import { useTranslation } from "react-i18next";

type BookingBuyer = {
  _id: string;
  first_name?: string;
  last_name?: string;
  user_name?: string;
  profile_image?: string;
  user_level?: string;
  is_verified?: string;
  verify_badge?: string;
};

type ReceivedBooking = {
  _id: string;
  buyer: BookingBuyer;
  serviceTitle: string;
  servicePrice: number;
  date: string;
  startTime: string;
  endTime: string;
  status: "pending_payment" | "confirmed" | "cancelled";
  createdAt: string;
};

function BookingReservationsPage() {
  const { t } = useTranslation("common");
  const { request } = useAxios();
  const [bookings, setBookings] = useState<ReceivedBooking[] | null>(null);

  useEffect(() => {
    request<{ bookings: ReceivedBooking[] }>(
      "GET",
      "/bookings/reservations?role=provider"
    ).then((res) => setBookings(res?.bookings || []));
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  const statusColor = (status: ReceivedBooking["status"]) =>
    status === "confirmed"
      ? "#008D0E"
      : status === "cancelled"
        ? "#BA4141"
        : "#BFAF19";

  const statusLabel = (status: ReceivedBooking["status"]) =>
    status === "confirmed"
      ? t("booking.statusConfirmed")
      : status === "cancelled"
        ? t("booking.statusCancelled")
        : t("booking.statusPendingPayment");

  return (
    <LocalePageShell>
      <Container>
        <PageTitle>{t("booking.bookingsListTitle")}</PageTitle>
        <div className="text-xs md:text-sm">
          <UserDetails />

          <div className="mt-8 flex flex-col gap-4">
            {bookings === null ? (
              <p className="py-10 text-center text-gray-500">
                {t("common.loading")}
              </p>
            ) : bookings.length === 0 ? (
              <p className="py-10 text-center text-gray-500">
                {t("booking.bookingsListEmpty")}
              </p>
            ) : (
              bookings.map((booking) => (
                <div
                  key={booking._id}
                  className="mb-4 block w-full rounded-3xl border border-border-primary-light p-4 font-semibold"
                >
                  <div className="flex w-full items-center justify-between max-[350px]:flex-col max-sm:gap-5">
                    <UserInfo
                      profile_image={booking.buyer?.profile_image}
                      user_level={booking.buyer?.user_level}
                      first_name={booking.buyer?.first_name}
                      last_name={booking.buyer?.last_name}
                      user_name={booking.buyer?.user_name}
                      is_verified={booking.buyer?.verify_badge}
                      userId={booking.buyer?._id}
                    />
                    <div
                      className="flex flex-col items-end max-sm:items-center max-sm:text-[11px]"
                      style={{ color: statusColor(booking.status) }}
                    >
                      <span>{statusLabel(booking.status)}</span>
                    </div>
                  </div>
                  <div className="mt-3 flex flex-col gap-1 border-t border-neutral-200 pt-3 text-neutral-600 dark:border-neutral-700 dark:text-neutral-300">
                    <div className="flex justify-between">
                      <span>{booking.serviceTitle}</span>
                      <span>
                        {Number(booking.servicePrice).toLocaleString()}{" "}
                        {t("settings.toman")}
                      </span>
                    </div>
                    <div className="flex justify-between">
                      <span>{new Date(booking.date).toISOString().slice(0, 10)}</span>
                      <span>
                        {booking.startTime} - {booking.endTime}
                      </span>
                    </div>
                  </div>
                </div>
              ))
            )}
          </div>
        </div>
      </Container>
    </LocalePageShell>
  );
}

export default BookingReservationsPage;
