"use client";

import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import {
  Dialog,
  DialogContent,
  DialogTrigger,
  DialogTitle,
} from "@/components/ui/dialog";
import { Form } from "@/components/ui/form";
import { Input } from "@/components/ui/input";
import { useForm } from "react-hook-form";
import toast from "react-hot-toast";
import { useTranslations } from "next-intl";
import { useDispatch, useSelector } from "react-redux";
import { resetStatus } from "@/store/slices/cart-slice";
import { useState } from "react";
import Checkout from "./checkout";

interface CouponFormData {
  coupon: string;
}

export default function OrderSummary({ data }: { data: any }) {
  const t = useTranslations("cart");
  const dispatch = useDispatch();
  const [open, setOpen] = useState(false);
  const form = useForm<CouponFormData>({
    defaultValues: {
      coupon: "",
    },
  });

  const items = data?.data?.items ?? data?.items ?? [];
  const totalsData: any[] = Array.isArray(data?.totalsData) ? data.totalsData : [];
  const hasOutOfStock = items?.some(
    (item: any) => item?.product?.in_stock === false
  );
  const checkoutDisabled = hasOutOfStock;

  const onSubmit = (data: CouponFormData) => {
    if (!data.coupon.trim()) {
      toast.error(t("please-enter-coupon-code"));
      return;
    }

    // Simulate coupon validation
    if (data.coupon.toUpperCase() === "SAVE20") {
      toast.success(t("coupon-applied-success"));
      form.reset();
    } else {
      toast.error(t("invalid-coupon-code"));
    }
  };

  if (!items.length) {
    return (
      <div className="flex flex-col gap-6 col-span-12 lg:col-span-5 xl:col-span-4 bg-white shadow-sm p-6 border border-gray-200 rounded-lg h-fit">
        <h2 className="font-bold text-gray-900 text-xl capitalize">
          {t("order-summary")}
        </h2>
        <div className="py-8 text-center">
          <p className="text-gray-500">{t("cart-empty")}</p>
        </div>
      </div>
    );
  }

  return (
    <div className="flex flex-col gap-6 col-span-12 lg:col-span-5 xl:col-span-4 bg-white shadow-md p-6 border border-gray-200 rounded-lg h-fit">
      <h2 className="font-bold text-gray-900 text-xl">{t("order-summary")}</h2>
      {/* Coupon Form */}
      <Form {...form}>
        <form onSubmit={form.handleSubmit(onSubmit)} className="relative flex items-center gap-2">
          <Input
            placeholder={t("enter-coupon-code")}
            {...form.register("coupon", {
              required: t("coupon-code-required"),
            })}
          />
          <Button
            variant="default"
            type="submit"
            // className="top-0 ltr:right-0 rtl:left-0 absolute bg-black hover:bg-gray-800 px-4 h-full text-white transition-colors transition-opacity"
            disabled={form.watch("coupon") === ""}
          >
            {t("apply")}
          </Button>
        </form>
      </Form>
      {/* Order Details: always from cartdetails totalsData */}
      <div className="space-y-4">
        {totalsData.length > 0
          ? totalsData.map((row: any, index: number) => {
              const isGrandTotal = (row?.title || "").toLowerCase().includes("grand total");
              return (
                <div key={row?.title ?? index}>
                  {isGrandTotal && <hr className="mb-2 border-gray-200" />}
                  <div className="flex justify-between items-center gap-5">
                    <Badge
                      variant={isGrandTotal ? "outline" : "secondary"}
                      className={`text-sm bg-transparent text-gray-color border-gray-200 capitalize ${isGrandTotal ? "font-bold border-none" : "border-none"}`}
                    >
                      {row?.title ? (
                        t.has(row.title.toLowerCase().replace(/ & /g, '-').replace(/ /g, '-') as any)
                          ? t(row.title.toLowerCase().replace(/ & /g, '-').replace(/ /g, '-') as any)
                          : row.title
                      ) : ""}
                    </Badge>
                    <Badge
                      variant="outline"
                      className={`text-sm bg-transparent text-gray-color border-gray-200 bg-gray-50 ${isGrandTotal ? "font-bold" : ""}`}
                    >
                      {row?.formattedValue ?? String(row?.value ?? 0)}
                    </Badge>
                  </div>
                </div>
              );
            })
          : (
            <div className="flex justify-between items-center gap-5">
              <Badge className="bg-transparent border-none font-bold text-gray-color text-sm capitalize">
                {t("total-inclusive-vat")}
              </Badge>
              <Badge variant="outline" className="bg-gray-50 bg-transparent border-gray-200 font-bold text-gray-color text-sm">
                {data?.cartTotal ?? "0.00"}
              </Badge>
            </div>
          )}
      </div>
      {/* Checkout Button */}
      <Dialog
        open={open}
        onOpenChange={(nextOpen) => {
          if (nextOpen && hasOutOfStock) {
            toast.error(t("checkout-disabled-out-of-stock"));
            return;
          }
          setOpen(nextOpen);
        }}
      >
        <DialogTitle className="hidden"></DialogTitle>
        <DialogTrigger asChild>
          <button
            type="button"
            aria-disabled={checkoutDisabled}
            onClick={(e) => {
              if (checkoutDisabled) {
                e.preventDefault();
                e.stopPropagation();
                toast.error(t("checkout-disabled-out-of-stock"));
                return;
              }
              dispatch(resetStatus());
            }}
            className={`w-full bg-black text-white transition-colors py-2 text-base font-semibold rounded-md ${
              checkoutDisabled
                ? "opacity-60 cursor-not-allowed"
                : "hover:bg-gray-800 cursor-pointer"
            }`}
          >
            {t("proceed-to-checkout")}
          </button>
        </DialogTrigger>
        
        <DialogContent>
          <Checkout />
        </DialogContent>
      </Dialog>
    </div>
  );
}