import Image from "next/image";

import Button from "@/components/ui/Button";
import { cn } from "@/lib/utils";

interface ReceiptProduct {
  id: string;
  name: string;
  imageSrc: string;
  size?: string;
  color?: string;
  price: string;
}

interface OrderSuccessReceiptProps {
  title?: string;
  description?: string;
  orderId?: string;
  paymentMethod?: string;
  paymentLastDigits?: string;
  shippingTo?: string;
  billingTo?: string;
  products?: ReceiptProduct[];
  subtotal?: string;
  deliveryFee?: string;
  discount?: string;
  total?: string;
  showPrintReceipt?: boolean;
  shopMoreLabel?: string;
  viewOrderLabel?: string;
  onPrintReceipt?: () => void;
  onShopMore?: () => void;
  onViewOrder?: () => void;
  className?: string;
}

const defaultProducts: ReceiptProduct[] = [
  {
    id: "calla-tote",
    name: "Calla Tote Bag - Espresso Brown",
    imageSrc: "/images/tote-gallery-1.png",
    size: "Small",
    color: "Brown",
    price: "LKR 5,000.00",
  },
  {
    id: "satin-heel",
    name: "Satin Teardrop Heel",
    imageSrc: "/images/tote-gallery-3.png",
    size: "41",
    color: "Silver",
    price: "LKR 8,000.00",
  },
];

function SuccessIcon() {
  return (
    <div className="mx-auto flex h-16 w-16 items-center justify-center rounded-full bg-[#00AFC1] text-white">
      <svg className="h-9 w-9" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
        <path d="M10.2 2.6a2.4 2.4 0 0 1 3.6 0l1.05 1.2 1.57-.1a2.4 2.4 0 0 1 2.55 2.55l-.1 1.57 1.2 1.05a2.4 2.4 0 0 1 0 3.6l-1.2 1.05.1 1.57a2.4 2.4 0 0 1-2.55 2.55l-1.57-.1-1.05 1.2a2.4 2.4 0 0 1-3.6 0l-1.05-1.2-1.57.1a2.4 2.4 0 0 1-2.55-2.55l.1-1.57-1.2-1.05a2.4 2.4 0 0 1 0-3.6l1.2-1.05-.1-1.57A2.4 2.4 0 0 1 7.58 3.7l1.57.1 1.05-1.2Zm5.65 7.2a1 1 0 0 0-1.41-1.42l-3.32 3.32-1.56-1.56a1 1 0 1 0-1.41 1.42l2.26 2.26a1 1 0 0 0 1.42 0l4.02-4.02Z" />
      </svg>
    </div>
  );
}

export default function OrderSuccessReceipt({
  title = "Your order is completed!",
  description = "Thank you. Your order has been successfully placed.",
  orderId = "#DSG12345abcd",
  paymentMethod = "VISA",
  paymentLastDigits = "3816",
  shippingTo = "29 Vishaka Private Road,\nColombo, 00500, Sri Lanka",
  billingTo = "29 Vishaka Private Road,\nColombo, 00500, Sri Lanka",
  products = defaultProducts,
  subtotal = "LKR 13,000",
  deliveryFee = "LKR 300",
  discount = "- LKR 600",
  total = "LKR 12,700",
  showPrintReceipt = true,
  shopMoreLabel = "Shop More",
  viewOrderLabel = "View Order",
  onPrintReceipt,
  onShopMore,
  onViewOrder,
  className,
}: OrderSuccessReceiptProps) {
  return (
    <section className={cn("w-full max-w-[520px] text-[#1f2440]", className)}>
      <SuccessIcon />

      <div className="mt-5 text-center">
        <h2 className="text-base font-semibold">{title}</h2>
        <p className="mt-2 text-xs text-gray-500">{description}</p>
      </div>

      <div className="mt-8 rounded-lg border border-gray-200 bg-white p-6">
        <div className="flex items-center justify-between gap-4">
          <h3 className="text-sm font-semibold">Order Details</h3>
          {showPrintReceipt && (
            <Button
              variant="outline"
              onClick={onPrintReceipt}
              className="h-9 rounded-full border-[#00AFC1] px-5 text-xs text-[#00AFC1]"
            >
              Print Receipt
            </Button>
          )}
        </div>

        <div className="mt-5 grid grid-cols-2 gap-6 bg-gray-50 p-4 text-xs">
          <div>
            <p className="text-gray-500">Order ID</p>
            <p className="mt-2 font-semibold text-gray-900">{orderId}</p>
          </div>
          <div className="text-right">
            <p className="text-gray-500">Payment Method</p>
            <p className="mt-2 font-semibold text-gray-900">
              <span className="mr-2 text-[#1434CB]">{paymentMethod}</span>
              **** {paymentLastDigits}
            </p>
          </div>
          <div>
            <p className="text-gray-500">Shipping To</p>
            <p className="mt-2 whitespace-pre-line font-medium text-gray-900">{shippingTo}</p>
          </div>
          <div className="text-right">
            <p className="text-gray-500">Billing To</p>
            <p className="mt-2 whitespace-pre-line font-medium text-gray-900">{billingTo}</p>
          </div>
        </div>

        <div className="mt-6">
          <div className="mb-4 flex items-center justify-between text-xs font-medium">
            <span>Products</span>
            <span>Sub Total</span>
          </div>

          <div className="space-y-5">
            {products.map((product) => (
              <div key={product.id} className="flex items-center gap-4">
                <div className="relative h-14 w-14 shrink-0 overflow-hidden rounded bg-gray-100">
                  <Image src={product.imageSrc} alt={product.name} fill sizes="56px" className="object-cover" />
                </div>
                <div className="min-w-0 flex-1">
                  <h4 className="truncate text-xs font-semibold text-gray-900">{product.name}</h4>
                  <p className="mt-1 text-[11px] text-gray-500">
                    {product.size && <>Size: {product.size}</>}
                    {product.size && product.color && <span> · </span>}
                    {product.color && <>Color: {product.color}</>}
                  </p>
                </div>
                <span className="text-xs font-medium text-gray-900">{product.price}</span>
              </div>
            ))}
          </div>
        </div>

        <div className="mt-6 border-t border-gray-200 pt-5 text-sm">
          <div className="space-y-3">
            <div className="flex justify-between">
              <span>Sub Total</span>
              <span>{subtotal}</span>
            </div>
            <div className="flex justify-between">
              <span>Delivery Fee</span>
              <span>{deliveryFee}</span>
            </div>
            <div className="flex justify-between">
              <span>Discount</span>
              <span className="text-red-500">{discount}</span>
            </div>
          </div>

          <div className="mt-5 border-t border-gray-200 pt-5">
            <div className="flex justify-between text-lg font-semibold">
              <span>Total</span>
              <span>{total}</span>
            </div>
          </div>
        </div>
      </div>

      <div className="mt-6 grid grid-cols-2 gap-5">
        <Button variant="ghost" onClick={onShopMore} className="h-11 rounded-full bg-gray-100 text-xs font-semibold text-gray-700 hover:bg-gray-200">
          {shopMoreLabel}
        </Button>
        <Button variant="teal" onClick={onViewOrder} className="h-11 rounded-full text-xs font-semibold">
          {viewOrderLabel}
        </Button>
      </div>
    </section>
  );
}
