"use client";

import { Button } from "@/components/ui/button";
import TranslateClient from "@/components/ui/localization/TranslateClient";
import React from "react";
import { OrderSummaryInterface } from "@/modules/products/order-history";
import { cn } from "@/lib/utils";
import { AlertCircle, Check, X } from "lucide-react";

interface InvoiceCardProps {
  message: string;
  status: "confirm" | "reject" | "pending";
  orderId: number;
}

const InvoiceCard: React.FC<InvoiceCardProps> = ({
  message,
  status,
  orderId,
}) => {
  return (
    <div className="container pt-16">
      <h2 className="text-xl font-bold mb-5">
        <TranslateClient text={"invoice"} />
      </h2>

      <div className="w-full relative rounded-[32px] border-2 border-mainBlue py-10 flex flex-col items-center gap-5">
        <div className="w-20 h-20 bg-slate-200/30 flex items-center justify-center rounded-full">
          <div
            className={cn(
              "w-12 h-12 rounded-full flex items-center justify-center text-white",
              {
                "bg-mainLime": status === "confirm",
                "bg-red-500": status === "reject",
                "bg-orange-400": status === "pending",
              }
            )}
          >
            {status === "confirm" ? (
              <Check />
            ) : status === "pending" ? (
              <AlertCircle />
            ) : (
              <X />
            )}
          </div>
        </div>

        <h6 className="md:text-xl text-slate-600 text-center">
          {status === "confirm" ? (
            <TranslateClient text={"payment_success"} />
          ) : status === "pending" ? (
            <TranslateClient text={"payment_pending"} />
          ) : (
            <TranslateClient text={"payment_failed"} />
          )}
        </h6>
        <h2
          className={cn("text-xl md:text-3xl text-center", {
            "mb-24": status !== "reject",
            "mb-0": status === "pending",
          })}
        >
          {message}
        </h2>

        <div
          className={cn(
            "w-full relative flex items-center justify-between border-dashed border-mainBlue px-5 text-slate-500 before:inline-block before:content-[''] before:w-10 before:h-10 before:z-20 before:rounded-full before:absolute before:-left-5 before:-top-5 before:bg-white before:border-2 before:border-mainBlue after:inline-block after:content-[''] after:w-10 after:h-10 after:z-20 after:rounded-full after:absolute after:-right-5 after:bg-white after:border-2 after:border-mainBlue",
            {
              "border-t before:-top-5 after:-top-5 pt-10": status !== "reject",
              "before:-top-[120px] after:-top-[120px]": status === "reject",
            }
          )}
        >
          <div
            className={cn("absolute left-[-22px] w-5 h-10 bg-white z-30", {
              "bottom-[44px]": status !== "reject",
              "bottom-[80px]": status === "reject",
            })}
          />
          <div
            className={cn("absolute right-[-22px] w-5 h-10 bg-white z-30", {
              "bottom-[44px]": status !== "reject",
              "bottom-[80px]": status === "reject",
            })}
          />

          {status !== "reject" && (
            <>
              <p>
                <TranslateClient text={"ref_number"} />
              </p>
              <p>{orderId}</p>
            </>
          )}
        </div>
      </div>

      {status === "reject" && (
        <Button className="bg-mainBlue hover:bg-mainBlue/80 w-full mt-8 rounded-xl text-white mb-16">
          <TranslateClient text={"add_docs"} />
        </Button>
      )}
    </div>
  );
};

export default InvoiceCard;