"use client";

import React from "react";
import InfoBox from "../InfoBox";
import { OrderHistory } from "@/modules/products/order-history";
import Image from "next/image";
import useCurrentLanguage from "@/hooks/useCurrentLanguage";
import UserForm from "../user-form/user-form";
import { Check, MapPin } from "lucide-react";
import { images } from "@/lib/images";
import TranslateClient from "@/components/ui/localization/TranslateClient";
import Price from "../price/price";
import { InvoiceSummary } from "../invoice-summary/invoice-summary";
import { cn } from "@/lib/utils";
interface InvoiceInfoProps {
  data: OrderHistory;
}

const InvoiceInfo: React.FC<InvoiceInfoProps> = ({ data }) => {
  const { lang } = useCurrentLanguage();

  return (
    <div className="container mt-10 pb-16 grid grid-cols-1 md:grid-cols-12 gap-7 place-items-start">
      <InfoBox className="md:col-span-7 mb-0 w-full" title="your_cart">
        <div className="flex flex-col gap-8">
          {data.cart_items.map((item) => (
            <div
              key={item?.id}
              className="p-5 border rounded-2xl flex flex-col sm:flex-row gap-5"
            >
              <Image
                src={item.image.original_url}
                alt={item.title[lang]}
                width={500}
                height={500}
                className="rounded-xl w-full sm:w-[158px] h-[144px] object-cover "
              />
              <div className="flex-1">
                <h2 className="font-bold text-xl mb-4">{item.title[lang]}</h2>
                <p className="text-slate-300 text-[17px] mb-4 line-clamp-3">
                  {item.description[lang]}
                </p>
                <div className="flex justify-between items-center gap-3 flex-wrap">
                  <p className="bg-slate-100/80 rounded-xl py-1 px-4 text-center">
                    <span className="text-sm">
                      <TranslateClient text="count" />:{" "}
                    </span>
                    <span className="font-semibold text-mainBlue">
                      {item.count}
                    </span>
                  </p>
                  <Price
                    className="text-mainBlue text-[17px] font-bold"
                    priceBeforeDiscount={item.price}
                    priceAfterDiscount={item.priceAfterDiscount}
                  />
                </div>
              </div>
            </div>
          ))}
        </div>
      </InfoBox>
      <div className="md:col-span-5 w-full">
        <InfoBox title="your_info" className="mb-7">
          <UserForm user={data.user_details} summary />
        </InfoBox>
        <InfoBox title="order_summary" className="mb-7">
          <InvoiceSummary summary={data.order_summary} isSummaryView />
        </InfoBox>
        <InfoBox title="Notes">
          <p className="border rounded min-h-16 p-5">
            {data.notes ? (
              data.notes
            ) : (
              <TranslateClient text="No notes added." />
            )}
          </p>
        </InfoBox>
        <InfoBox title="payment_method">
          <div className="mx-auto my-5 rounded-xl border border-mainBlue py-2 px-3 max-w-[250px] flex items-center gap-7">
            <div className="w-7 h-7 rounded-full bg-mainBlue flex items-center justify-center">
              <Check className="w-4 h-4 text-white" />
            </div>
            <div className="flex items-center gap-3">
              <div className="border-2 px-4 py-2 rounded">
                <Image
                  width={50}
                  height={50}
                  className="object-cover w-5"
                  src={images.invoice}
                  alt="payment method"
                />
              </div>
              <p className="font-bold">
                <TranslateClient text="invoice" />
              </p>
            </div>
          </div>
        </InfoBox>
        <InfoBox title="Address">
          <div className="border border-mainBlue rounded p-5">
            <div
              className={cn(
                "flex items-center justify-between gap-4 flex-wrap mb-2",
                {
                  "flex-row-reverse": lang === "ar",
                }
              )}
            >
              <div className="w-7 h-7 rounded-full bg-mainBlue flex items-center justify-center">
                <Check className="w-4 h-4 text-white" />
              </div>
              <div
                className={cn("flex items-center gap-2", {
                  "flex-row-reverse": lang === "ar",
                })}
              >
                <p className="font-bold">
                  {data.user_details.Delivery_information.address}
                </p>
                <div className="bg-slate-100 rounded-full w-8 h-8 flex items-center justify-center">
                  <MapPin className="w-4 h-4 text-mainBlue" />
                </div>
              </div>
            </div>
            <div
              className={cn("flex items-end flex-col gap-3", {
                "items-start": lang === "ar",
              })}
            >
              <p className="text-black">
                {data.user_details.Delivery_information.city.title[lang]}
              </p>
              <p className="text-slate-600">
                {data.user_details.Delivery_information.destination.title[lang]}
              </p>
            </div>
          </div>
        </InfoBox>
      </div>
    </div>
  );
};

export default InvoiceInfo;