'use client';
import React from 'react';
import Image from 'next/image';
import Link from 'next/link';
import Loader from '@/components/common/Loader';

// Types
type Product = {
  id: string;
  name: string;
  imageLight: string;
  imageAlt: string;
  productId: string;
  quantity: number;
  price: number;
};

type OrderEvent = {
  id: string;
  date: string;
  title: string;
  description: string;
  icon: React.ReactNode;
  isCurrent?: boolean;
  isCompleted?: boolean;
};

// Constants
const PRODUCTS: Product[] = [
  {
    id: '1',
    name: 'PC system All in One APPLE iMac (2023) mqrq3ro/a, Apple M3, 24" Retina 4.5K, 8GB, SSD 256GB, 10-core GPU, macOS Sonoma, Blue, Keyboard layout INT',
    imageLight: 'https://flowbite.s3.amazonaws.com/blocks/e-commerce/imac-front.svg',
    imageAlt: 'imac image',
    productId: 'BJ8364850',
    quantity: 1,
    price: 1499,
  },
  {
    id: '2',
    name: 'Restored Apple Watch Series 8 (GPS) 41mm Midnight Aluminum Case with Midnight Sport Band',
    imageLight: 'https://flowbite.s3.amazonaws.com/blocks/e-commerce/apple-watch-light.svg',
    imageAlt: 'phone image',
    productId: 'BJ8364850',
    quantity: 2,
    price: 299, // 299 x 2 = 598
  },
  {
    id: '3',
    name: 'Sony Playstation 5 Digital Edition Console with Extra Blue Controller, White PULSE 3D Headset and Surge Dual Controller',
    imageLight: 'https://flowbite.s3.amazonaws.com/blocks/e-commerce/ps5-light.svg',
    imageAlt: 'console image',
    productId: 'BJ8364850',
    quantity: 1,
    price: 799,
  },
  {
    id: '4',
    name: 'Xbox Series X Diablo IV Bundle + 2 Xbox Wireless Controller Carbon Black + Controller Charger',
    imageLight: 'https://flowbite.s3.amazonaws.com/blocks/e-commerce/xbox-light.svg',
    imageAlt: 'xbox image',
    productId: 'BJ8364850',
    quantity: 1,
    price: 699,
  },
  {
    id: '5',
    name: 'APPLE iPhone 15 5G phone, 256GB, Gold',
    imageLight: 'https://flowbite.s3.amazonaws.com/blocks/e-commerce/iphone-light.svg',
    imageAlt: 'phone image',
    productId: 'BJ8364850',
    quantity: 3,
    price: 999, // 999 x 3 = 2997
  },
];

const ORDER_EVENTS: OrderEvent[] = [
  {
    id: '1',
    date: 'Estimated delivery in 24 Nov 2023',
    title: 'Estimated delivery in 24 Nov 2023',
    description: 'Products delivered',
    icon: (
      <svg
        className="h-4 w-4 text-gray-500"
        aria-hidden="true"
        xmlns="http://www.w3.org/2000/svg"
        width="24"
        height="24"
        fill="none"
        viewBox="0 0 24 24"
      >
        <path
          stroke="currentColor"
          strokeLinecap="round"
          strokeLinejoin="round"
          strokeWidth="2"
          d="m4 12 8-8 8 8M6 10.5V19a1 1 0 0 0 1 1h3v-3a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v3h3a1 1 0 0 0 1-1v-8.5"
        />
      </svg>
    ),
  },
  {
    id: '2',
    date: 'Today',
    title: 'Today',
    description: 'Products being delivered',
    icon: (
      <svg
        className="h-4 w-4 text-gray-500"
        aria-hidden="true"
        xmlns="http://www.w3.org/2000/svg"
        width="24"
        height="24"
        fill="none"
        viewBox="0 0 24 24"
      >
        <path
          stroke="currentColor"
          strokeLinecap="round"
          strokeLinejoin="round"
          strokeWidth="2"
          d="M13 7h6l2 4m-8-4v8m0-8V6a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1v9h2m8 0H9m4 0h2m4 0h2v-4m0 0h-5m3.5 5.5a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0Zm-10 0a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0Z"
        />
      </svg>
    ),
    isCurrent: true,
  },
  {
    id: '3',
    date: '23 Nov 2023, 15:15',
    title: '23 Nov 2023, 15:15',
    description: 'Products in the courier\'s warehouse',
    icon: (
      <svg
        className="h-4 w-4 text-primary-700"
        aria-hidden="true"
        xmlns="http://www.w3.org/2000/svg"
        width="24"
        height="24"
        fill="none"
        viewBox="0 0 24 24"
      >
        <path
          stroke="currentColor"
          strokeLinecap="round"
          strokeLinejoin="round"
          strokeWidth="2"
          d="M5 11.917 9.724 16.5 19 7.5"
        />
      </svg>
    ),
    isCompleted: true,
  },
  {
    id: '4',
    date: '22 Nov 2023, 12:27',
    title: '22 Nov 2023, 12:27',
    description: 'Products delivered to the courier - DHL Express',
    icon: (
      <svg
        className="h-4 w-4 text-primary-700"
        aria-hidden="true"
        xmlns="http://www.w3.org/2000/svg"
        width="24"
        height="24"
        fill="none"
        viewBox="0 0 24 24"
      >
        <path
          stroke="currentColor"
          strokeLinecap="round"
          strokeLinejoin="round"
          strokeWidth="2"
          d="M5 11.917 9.724 16.5 19 7.5"
        />
      </svg>
    ),
    isCompleted: true,
  },
  {
    id: '5',
    date: '19 Nov 2023, 10:47',
    title: '19 Nov 2023, 10:47',
    description: 'Payment accepted - VISA Credit Card',
    icon: (
      <svg
        className="h-4 w-4 text-primary-700"
        aria-hidden="true"
        xmlns="http://www.w3.org/2000/svg"
        width="24"
        height="24"
        fill="none"
        viewBox="0 0 24 24"
      >
        <path
          stroke="currentColor"
          strokeLinecap="round"
          strokeLinejoin="round"
          strokeWidth="2"
          d="M5 11.917 9.724 16.5 19 7.5"
        />
      </svg>
    ),
    isCompleted: true,
  },
  {
    id: '6',
    date: '19 Nov 2023, 10:45',
    title: '19 Nov 2023, 10:45',
    description: 'Order placed - Receipt #647563',
    icon: (
      <svg
        className="h-4 w-4 text-primary-700"
        aria-hidden="true"
        xmlns="http://www.w3.org/2000/svg"
        width="24"
        height="24"
        fill="none"
        viewBox="0 0 24 24"
      >
        <path
          stroke="currentColor"
          strokeLinecap="round"
          strokeLinejoin="round"
          strokeWidth="2"
          d="M5 11.917 9.724 16.5 19 7.5"
        />
      </svg>
    ),
    isCompleted: true,
  },
];

const ORDER_SUMMARY = {
  originalPrice: 6592,
  savings: 299,
  storePickup: 99,
  tax: 799,
  total: 7191,
};

// Components
const ProductItem: React.FC<{ product: Product }> = React.memo(({ product }) => (
  <div className="space-y-4 p-6">
    <div className="flex items-center gap-6">
      <Link href="#" className="h-14 w-14 shrink-0">
        <Image
          className="h-full w-full"
          src={product.imageLight}
          alt={product.imageAlt}
          width={56}
          height={56}
        />
      </Link>
      <Link
        href="#"
        className="min-w-0 flex-1 font-medium text-gray-900 hover:underline"
      >
        {product.name}
      </Link>
    </div>
    <div className="flex items-center justify-between gap-4">
      <p className="text-sm font-normal text-gray-500">
        <span className="font-medium text-gray-900">Product ID:</span> {product.productId}
      </p>
      <div className="flex items-center justify-end gap-4">
        <p className="text-base font-normal text-gray-900">x{product.quantity}</p>
        <p className="text-xl font-bold leading-tight text-gray-900">
          ${(product.price * product.quantity).toLocaleString()}
        </p>
      </div>
    </div>
  </div>
));

ProductItem.displayName = 'ProductItem';

const OrderEventItem: React.FC<{ event: OrderEvent }> = React.memo(({ event }) => (
  <li className="mb-10 ms-6">
    <span
      className={`absolute -start-3 flex h-6 w-6 items-center justify-center rounded-full ring-8 ring-white ${
        event.isCurrent
          ? 'bg-gray-100'
          : event.isCompleted
          ? 'bg-primary-100 text-primary-700'
          : 'bg-gray-100'
      }`}
    >
      {event.icon}
    </span>
    <h4
      className={`mb-0.5 text-base font-semibold ${
        event.isCompleted ? 'text-primary-700' : 'text-gray-900'
      }`}
    >
      {event.title}
    </h4>
    <p
      className={`text-sm ${
        event.isCompleted ? 'text-primary-700' : 'text-gray-500'
      }`}
    >
      {event.description}
    </p>
  </li>
));

OrderEventItem.displayName = 'OrderEventItem';

const OrderSummary: React.FC = React.memo(() => (
  <div className="space-y-4 bg-gray-50 p-6">
    <div className="space-y-2">
      <dl className="flex items-center justify-between gap-4">
        <dt className="font-normal text-gray-500">Original price</dt>
        <dd className="font-medium text-gray-900">
          ${ORDER_SUMMARY.originalPrice.toFixed(2)}
        </dd>
      </dl>
      <dl className="flex items-center justify-between gap-4">
        <dt className="font-normal text-gray-500">Savings</dt>
        <dd className="text-base font-medium text-green-500">
          -${ORDER_SUMMARY.savings.toFixed(2)}
        </dd>
      </dl>
      <dl className="flex items-center justify-between gap-4">
        <dt className="font-normal text-gray-500">Store Pickup</dt>
        <dd className="font-medium text-gray-900">
          ${ORDER_SUMMARY.storePickup.toFixed(2)}
        </dd>
      </dl>
      <dl className="flex items-center justify-between gap-4">
        <dt className="font-normal text-gray-500">Tax</dt>
        <dd className="font-medium text-gray-900">
          ${ORDER_SUMMARY.tax.toFixed(2)}
        </dd>
      </dl>
    </div>
    <dl className="flex items-center justify-between gap-4 border-t border-gray-200 pt-2">
      <dt className="text-lg font-bold text-gray-900">Total</dt>
      <dd className="text-lg font-bold text-gray-900">
        ${ORDER_SUMMARY.total.toFixed(2)}
      </dd>
    </dl>
  </div>
));

OrderSummary.displayName = 'OrderSummary';

const OrderTrackingPage: React.FC = () => {
  const [isLoading, setIsLoading] = React.useState(false);

  // Simulate loading state
  React.useEffect(() => {
    setIsLoading(true);
    const timer = setTimeout(() => setIsLoading(false), 500);
    return () => clearTimeout(timer);
  }, []);

  if (isLoading) {
    return <Loader />;
  }

  return (
    <section className="bg-white py-8 antialiased md:py-16">
      <div className="mx-auto max-w-screen-xl px-4 2xl:px-0">
        <h1 className="text-xl font-semibold text-gray-900 sm:text-2xl">
          Track the delivery of order #957684673
        </h1>

        <div className="mt-6 sm:mt-8 lg:flex lg:gap-8">
          <div className="w-full divide-y divide-gray-200 overflow-hidden rounded-lg border border-gray-200 lg:max-w-xl xl:max-w-2xl">
            {PRODUCTS.map((product) => (
              <ProductItem key={product.id} product={product} />
            ))}
            <OrderSummary />
          </div>

          <div className="mt-6 grow sm:mt-8 lg:mt-0">
            <div className="space-y-6 rounded-lg border border-gray-200 bg-white p-6 shadow-sm">
              <h2 className="text-xl font-semibold text-gray-900">
                Order history
              </h2>

              <ol className="relative ms-3 border-s border-gray-200">
                {ORDER_EVENTS.map((event) => (
                  <OrderEventItem key={event.id} event={event} />
                ))}
              </ol>

              <div className="gap-4 sm:flex sm:items-center">
                <button
                  type="button"
                  className="w-full rounded-lg border border-gray-200 bg-white px-5 py-2.5 text-sm font-medium text-gray-900 hover:bg-gray-100 hover:text-primary-700 focus:z-10 focus:outline-none focus:ring-4 focus:ring-gray-100"
                >
                  Cancel the order
                </button>

                <Link
                  href="#"
                  className="mt-4 flex w-full items-center justify-center rounded-lg bg-primary px-5 py-2.5 text-sm font-medium text-white hover:bg-secondary focus:outline-none focus:ring-4 focus:ring-primary-300 sm:mt-0"
                >
                  Order details
                </Link>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export default OrderTrackingPage;