import Image from "next/image";

import { cn } from "@/lib/utils";

interface InvoiceItem {
  id: string;
  name: string;
  imageSrc: string;
  imageAlt?: string;
  size?: string;
  color?: string;
  quantity?: number;
  price: string;
}

interface OrderInvoicePanelProps {
  logoSrc?: string;
  onClose?: () => void;
  orderId?: string;
  orderTime?: string;
  subtotal?: string;
  deliveryFee?: string;
  discount?: string;
  total?: string;
  shippingName?: string;
  shippingAddress?: string[];
  shippingEmail?: string;
  paymentMethod?: string;
  paymentLastDigits?: string;
  paidDate?: string;
  items?: InvoiceItem[];
  className?: string;
}

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

function InvoiceSection({
  title,
  children,
}: {
  title: string;
  children: React.ReactNode;
}) {
  return (
    <section className="border-t-8 border-[#eef3f4] px-8 py-7 first:border-t-0">
      <h2 className="text-base font-semibold text-[#1f2440]">{title}</h2>
      <div className="mt-5">{children}</div>
    </section>
  );
}

export default function OrderInvoicePanel({
  logoSrc = "/images/Diriya-logo.png",
  onClose,
  orderId = "11093141645882",
  orderTime = "Nov 23, 2025",
  subtotal = "LKR 13,000",
  deliveryFee = "LKR 300",
  discount = "-LKR 600",
  total = "LKR 12,700",
  shippingName = "Ashan Namal",
  shippingAddress = [
    "29 Visakha Private Road, Colombo, 00500, Sri Lanka",
    "Bambalapitiya",
    "Colombo",
    "0786276356 | ashan@gmail.com",
  ],
  shippingEmail,
  paymentMethod = "VISA",
  paymentLastDigits = "3816",
  paidDate = "Paid on Nov 23,2024",
  items = defaultItems,
  className,
}: OrderInvoicePanelProps) {
  return (
    <article className={cn("w-full max-w-[430px] overflow-hidden rounded-b-xl bg-white text-[#1f2440] shadow-sm", className)}>
      <header className="flex items-center justify-between border-b-4 border-[#159BFF] px-6 py-4">
        <Image src={logoSrc} alt="Diriya" width={92} height={36} className="h-auto w-[92px]" />
        <button
          type="button"
          onClick={onClose}
          className="flex h-8 w-8 items-center justify-center text-[#159BFF] transition-colors hover:text-[#0b74c7]"
          aria-label="Close invoice"
        >
          <svg className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.7}>
            <path strokeLinecap="round" strokeLinejoin="round" d="M6 18 18 6M6 6l12 12" />
          </svg>
        </button>
      </header>

      <InvoiceSection title="Summary">
        <dl className="space-y-4 text-sm">
          <div className="flex justify-between gap-4">
            <dt>Order ID:</dt>
            <dd className="text-right text-gray-600">{orderId}</dd>
          </div>
          <div className="flex justify-between gap-4">
            <dt>Order Time:</dt>
            <dd className="text-right text-gray-600">{orderTime}</dd>
          </div>
          <div className="h-px bg-gray-200" />
          <div className="flex justify-between gap-4">
            <dt>Sub Total:</dt>
            <dd>{subtotal}</dd>
          </div>
          <div className="flex justify-between gap-4">
            <dt>Delivery Fee</dt>
            <dd>{deliveryFee}</dd>
          </div>
          <div className="flex justify-between gap-4">
            <dt>Discount</dt>
            <dd className="text-red-500">{discount}</dd>
          </div>
          <div className="flex justify-between gap-4 font-semibold">
            <dt>Total</dt>
            <dd>{total}</dd>
          </div>
        </dl>
      </InvoiceSection>

      <InvoiceSection title="Shipping Address">
        <div className="space-y-2 text-sm leading-6 text-gray-600">
          <p className="text-base font-semibold text-[#1f2440]">{shippingName}</p>
          {shippingAddress.map((line) => (
            <p key={line}>{line}</p>
          ))}
          {shippingEmail && <p>{shippingEmail}</p>}
        </div>
      </InvoiceSection>

      <InvoiceSection title="Payment Method">
        <div className="flex items-center justify-between gap-4">
          <div>
            <p className="text-lg font-bold text-[#1434CB]">
              {paymentMethod} <span className="ml-4 text-sm text-[#1f2440]">**** {paymentLastDigits}</span>
            </p>
            <p className="mt-2 text-sm text-gray-500">{paidDate}</p>
          </div>
          <p className="text-base font-semibold">{total}</p>
        </div>
      </InvoiceSection>

      <InvoiceSection title="Item Details">
        <div className="space-y-6">
          {items.map((item) => (
            <article key={item.id} className="flex items-center gap-4">
              <div className="relative h-16 w-16 shrink-0 overflow-hidden rounded bg-gray-100">
                <Image
                  src={item.imageSrc}
                  alt={item.imageAlt ?? item.name}
                  fill
                  sizes="64px"
                  className="object-cover"
                />
              </div>
              <div className="min-w-0 flex-1">
                <h3 className="truncate text-sm font-semibold">{item.name}</h3>
                <p className="mt-1 text-[11px] text-gray-500">
                  {item.size && <>Size: {item.size}</>}
                  {item.size && item.color && <span> · </span>}
                  {item.color && <>Color: {item.color}</>}
                  {(item.size || item.color) && item.quantity && <span> · </span>}
                  {item.quantity && <>Qty: {item.quantity}</>}
                </p>
              </div>
              <p className="shrink-0 text-sm font-medium">{item.price}</p>
            </article>
          ))}
        </div>
      </InvoiceSection>
    </article>
  );
}
