import Image from "next/image";

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

interface OrderStatus {
  label: string;
  location?: string;
  date?: string;
  active?: boolean;
}

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

interface OrderCompleteProps {
  statuses?: OrderStatus[];
  orderId?: string;
  paymentMethod?: string;
  paymentLastDigits?: string;
  shippingTo?: string;
  billingTo?: string;
  products?: OrderCompleteProduct[];
  subtotal?: string;
  deliveryFee?: string;
  discount?: string;
  total?: string;
  className?: string;
}

const defaultStatuses: OrderStatus[] = [
  {
    label: "Delivered",
    location: "Gampaha",
    date: "Saturday | May 31 | 2025, 8:31 pm",
    active: true,
  },
  {
    label: "Out for Delivery",
    location: "Gampaha",
    date: "Saturday | May 31 | 2025, 8:31 pm",
  },
  {
    label: "Have been picked and are waiting to be packed",
    date: "Monday | April 21 | 2025, 5:18 am",
  },
  {
    label: "Started preparing your order",
    date: "Sunday | April 20 | 2025, 1:04 pm",
  },
  {
    label: "Order Paid Successfully",
    date: "Sunday | April 20, 2025, 1:03 pm",
  },
  {
    label: "Order Submitted",
    date: "Sunday | April 20, 2025, 1:03 pm",
  },
];

const defaultProducts: OrderCompleteProduct[] = [
  {
    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 ActiveStatusIcon() {
  return (
    <span className="flex h-5 w-5 items-center justify-center rounded-full bg-[#00AFC1] text-white">
      <svg className="h-3.5 w-3.5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
        <path
          fillRule="evenodd"
          d="M16.7 5.3a1 1 0 0 1 0 1.4l-7.5 7.5a1 1 0 0 1-1.4 0L3.3 9.7a1 1 0 0 1 1.4-1.4l3.8 3.79 6.8-6.79a1 1 0 0 1 1.4 0Z"
          clipRule="evenodd"
        />
      </svg>
    </span>
  );
}

function OrderDetailsCard({
  orderId,
  paymentMethod,
  paymentLastDigits,
  shippingTo,
  billingTo,
  products,
  subtotal,
  deliveryFee,
  discount,
  total,
}: Required<Omit<OrderCompleteProps, "statuses" | "className">>) {
  return (
    <section className="w-full rounded-xl border border-gray-200 bg-white p-5 sm:p-8">
      <h2 className="text-center text-sm font-medium text-[#1f2440]">Order Details</h2>

      <div className="mt-5 grid gap-5 rounded-md bg-gray-50 p-4 text-xs sm:grid-cols-2">
        <div>
          <p className="text-gray-500">Order ID</p>
          <p className="mt-2 font-semibold text-gray-900">{orderId}</p>
        </div>
        <div className="sm: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 className="border-t border-gray-200 pt-4 sm:col-span-2" />
        <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="sm: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="my-7 h-px bg-gray-200" />

      <div className="mb-5 flex items-center justify-between text-sm font-medium">
        <span>Products</span>
        <span>Sub Total</span>
      </div>

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

      <div className="my-7 h-px bg-gray-200" />

      <div className="space-y-4 text-sm">
        <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="my-7 h-px bg-gray-200" />

      <div className="flex items-center justify-between text-xl font-medium">
        <span>Total</span>
        <span>{total}</span>
      </div>
    </section>
  );
}

function DesktopTimeline({ statuses }: { statuses: OrderStatus[] }) {
  return (
    <ol className="hidden w-full max-w-[430px] space-y-0 lg:block">
      {statuses.map((status, index) => (
        <li key={`${status.label}-${index}`} className="relative flex gap-5 pb-12 last:pb-0">
          {index !== statuses.length - 1 && (
            <span className="absolute left-[9px] top-5 h-full w-px bg-gray-300" />
          )}
          <span className="relative z-10 mt-1">
            {status.active ? (
              <ActiveStatusIcon />
            ) : (
              <span className="block h-4 w-4 rounded-full bg-gray-300" />
            )}
          </span>
          <div>
            <h3 className={cn("text-sm font-medium", status.active ? "text-[#00AFC1]" : "text-gray-900")}>
              {status.label}
            </h3>
            {status.location && <p className="mt-1 text-xs text-gray-500">{status.location}</p>}
            {status.date && <p className="mt-1 text-xs text-gray-500">{status.date}</p>}
          </div>
        </li>
      ))}
    </ol>
  );
}

function MobileTimeline({ statuses }: { statuses: OrderStatus[] }) {
  const mobileStatuses = statuses
    .filter((status) => status.label !== "Order Paid Successfully")
    .slice(0, 5);

  return (
    <ol className="flex gap-0 overflow-x-auto pb-2 lg:hidden">
      {mobileStatuses.map((status, index, visibleStatuses) => (
        <li key={`${status.label}-${index}`} className="relative min-w-[170px] flex-1 pt-9">
          {index !== visibleStatuses.length - 1 && (
            <span className="absolute left-5 right-[-20px] top-[17px] h-px bg-gray-300" />
          )}
          <span className="absolute left-0 top-2 z-10">
            {status.active ? (
              <ActiveStatusIcon />
            ) : (
              <span className="block h-3.5 w-3.5 rounded-full bg-gray-300" />
            )}
          </span>
          <h3 className={cn("text-sm font-medium", status.active ? "text-[#00AFC1]" : "text-gray-900")}>
            {status.label === "Have been picked and are waiting to be packed"
              ? "Waiting to be packed"
              : status.label === "Started preparing your order"
                ? "Preparing your order"
                : status.label}
          </h3>
          {status.location && <p className="mt-2 text-xs text-gray-500">{status.location}</p>}
          {status.date && <p className="mt-1 text-xs text-gray-500">{status.date}</p>}
        </li>
      ))}
    </ol>
  );
}

export default function OrderComplete({
  statuses = defaultStatuses,
  orderId = "#SDG123456BFD",
  paymentMethod = "VISA",
  paymentLastDigits = "3816",
  shippingTo = "29 Visakha Private Road,\nColombo, 00500, Sri Lanka",
  billingTo = "29 Visakha Private Road,\nColombo, 00500, Sri Lanka",
  products = defaultProducts,
  subtotal = "LKR 13,000",
  deliveryFee = "LKR 300",
  discount = "- LKR 600",
  total = "LKR 12,700",
  className,
}: OrderCompleteProps) {
  return (
    <section className={cn("w-full bg-white px-4 py-8 text-[#1f2440] sm:px-8 lg:px-10", className)}>
      <MobileTimeline statuses={statuses} />

      <div className="mt-8 grid gap-12 lg:mt-0 lg:grid-cols-[minmax(260px,430px)_minmax(420px,620px)] lg:justify-center">
        <DesktopTimeline statuses={statuses} />
        <OrderDetailsCard
          orderId={orderId}
          paymentMethod={paymentMethod}
          paymentLastDigits={paymentLastDigits}
          shippingTo={shippingTo}
          billingTo={billingTo}
          products={products}
          subtotal={subtotal}
          deliveryFee={deliveryFee}
          discount={discount}
          total={total}
        />
      </div>
    </section>
  );
}

