import React, { ReactElement } from 'react';
import Head from 'next/head';
import Link from 'next/link';
import MadeDreamsStoreHeader from '../components/MadeDreamsStoreHeader';
import LayoutGuest from '../layouts/Guest';
import { getPageTitle } from '../config';
import useMadeDreamsCart from '../hooks/useMadeDreamsCart';
import { formatCurrency } from '../helpers/madeDreamsCart';

export default function MadeDreamsCartPage() {
  const { items, totals, updateQuantity, removeItem, clearCart } = useMadeDreamsCart();

  return (
    <div className="min-h-screen bg-[#f8f1e8] text-[#201713] antialiased">
      <Head>
        <title>{getPageTitle('Made Dreams Cart')}</title>
        <meta name="description" content="Review your Made Dreams paint by numbers cart before checkout." />
      </Head>

      <MadeDreamsStoreHeader />

      <main className="mx-auto max-w-7xl px-5 py-12 lg:px-8 lg:py-16">
        <div className="flex flex-col justify-between gap-5 md:flex-row md:items-end">
          <div>
            <p className="text-sm font-semibold uppercase tracking-[0.35em] text-[#a0672a]">Shopping cart</p>
            <h1 className="mt-3 font-serif text-5xl tracking-[-0.04em] md:text-7xl">Review your art kits.</h1>
          </div>
          <Link
            href="/#products"
            className="w-fit rounded-full border border-[#cbb49b] bg-white/45 px-6 py-3 text-sm font-bold uppercase tracking-[0.18em] text-[#2b201a] transition hover:bg-white"
          >
            Continue shopping
          </Link>
        </div>

        {items.length === 0 ? (
          <section className="mt-10 rounded-[2.5rem] border border-dashed border-[#d8b88f] bg-[#fffaf3] p-10 text-center shadow-sm">
            <p className="font-serif text-4xl">Your cart is empty.</p>
            <p className="mx-auto mt-4 max-w-xl leading-7 text-[#6d5546]">
              Choose a ready-made canvas or upload a photo to create a personalized paint by numbers kit.
            </p>
            <div className="mt-8 flex flex-col justify-center gap-3 sm:flex-row">
              <Link href="/#products" className="rounded-full bg-[#201713] px-6 py-4 text-sm font-bold uppercase tracking-[0.18em] text-white">
                Shop products
              </Link>
              <Link href="/#generator" className="rounded-full border border-[#cbb49b] px-6 py-4 text-sm font-bold uppercase tracking-[0.18em] text-[#201713]">
                Create custom kit
              </Link>
            </div>
          </section>
        ) : (
          <section className="mt-10 grid gap-8 lg:grid-cols-[1fr_24rem]">
            <div className="space-y-5">
              {items.map((item) => (
                <article key={item.id} className="rounded-[2rem] border border-[#ead8c3] bg-[#fffaf3] p-5 shadow-sm">
                  <div className="grid gap-5 md:grid-cols-[9rem_1fr_auto] md:items-start">
                    <div className={`h-36 rounded-[1.5rem] bg-gradient-to-br ${item.imageClass} p-4`}>
                      <div className="grid h-full grid-cols-4 gap-1 opacity-70">
                        {Array.from({ length: 16 }).map((_, index) => (
                          <span key={index} className="rounded bg-white/20 text-center text-[9px] text-white">
                            {index + 1}
                          </span>
                        ))}
                      </div>
                    </div>

                    <div>
                      <p className="text-xs font-bold uppercase tracking-[0.25em] text-[#a0672a]">{item.category}</p>
                      <h2 className="mt-2 font-serif text-3xl tracking-[-0.02em]">{item.name}</h2>
                      <p className="mt-3 max-w-2xl text-sm leading-6 text-[#6d5546]">{item.description}</p>
                      {item.options && (
                        <div className="mt-4 rounded-2xl bg-[#f5eadc] p-4 text-sm text-[#5e493d]">
                          {item.options.uploadedFileName && <p>Photo: {item.options.uploadedFileName}</p>}
                          {item.options.size && <p>Canvas size: {item.options.size}</p>}
                          {item.options.difficulty && <p>Difficulty: {item.options.difficulty}</p>}
                        </div>
                      )}
                    </div>

                    <div className="md:text-right">
                      <p className="font-serif text-3xl">{formatCurrency(item.price)}</p>
                      <p className="mt-1 text-xs uppercase tracking-[0.22em] text-[#8b6f57]">each</p>
                      <div className="mt-5 inline-flex items-center rounded-full border border-[#d8b88f] bg-white">
                        <button
                          type="button"
                          className="px-4 py-2 text-lg text-[#4e3b31] disabled:opacity-40"
                          onClick={() => updateQuantity(item.id, item.quantity - 1)}
                          disabled={item.quantity <= 1}
                          aria-label={`Decrease quantity for ${item.name}`}
                        >
                          −
                        </button>
                        <span className="min-w-10 px-2 text-center text-sm font-bold text-[#201713]">{item.quantity}</span>
                        <button
                          type="button"
                          className="px-4 py-2 text-lg text-[#4e3b31] disabled:opacity-40"
                          onClick={() => updateQuantity(item.id, item.quantity + 1)}
                          disabled={Boolean(item.maxInventory && item.quantity >= item.maxInventory)}
                          aria-label={`Increase quantity for ${item.name}`}
                        >
                          +
                        </button>
                      </div>
                      <button
                        type="button"
                        className="mt-4 block text-sm font-semibold text-[#8c3d2b] underline underline-offset-4 md:ml-auto"
                        onClick={() => removeItem(item.id)}
                      >
                        Remove
                      </button>
                    </div>
                  </div>
                </article>
              ))}
            </div>

            <aside className="h-fit rounded-[2rem] border border-[#ead8c3] bg-[#201713] p-6 text-[#fff8ef] shadow-xl shadow-[#201713]/15">
              <p className="text-sm font-bold uppercase tracking-[0.3em] text-[#d7a25d]">Order summary</p>
              <div className="mt-6 space-y-3 text-sm text-[#d9c9bc]">
                <div className="flex justify-between">
                  <span>Products</span>
                  <span>{totals.itemCount}</span>
                </div>
                <div className="flex justify-between">
                  <span>Subtotal</span>
                  <span>{formatCurrency(totals.subtotal)}</span>
                </div>
                <div className="flex justify-between">
                  <span>Shipping cost</span>
                  <span>{totals.shipping === 0 ? 'Free' : formatCurrency(totals.shipping)}</span>
                </div>
                <div className="flex justify-between border-t border-white/10 pt-4 text-lg font-bold text-white">
                  <span>Total price</span>
                  <span>{formatCurrency(totals.total)}</span>
                </div>
              </div>

              <div className="mt-6 rounded-[1.5rem] border border-[#d7a25d]/30 bg-[#d7a25d]/10 p-4 text-sm leading-6 text-[#f4ddbf]">
                Checkout, Stripe, PayPal, order creation, inventory reduction, and confirmation emails are the next production
                payment phase. This cart is now saved and ready for that connection.
              </div>

              <button
                type="button"
                className="mt-5 w-full cursor-not-allowed rounded-full bg-[#d7a25d]/60 px-5 py-4 text-sm font-bold uppercase tracking-[0.18em] text-[#201713]"
                disabled
              >
                Checkout coming next
              </button>
              <button
                type="button"
                className="mt-4 w-full text-sm font-semibold text-[#d9c9bc] underline underline-offset-4"
                onClick={clearCart}
              >
                Clear cart
              </button>
            </aside>
          </section>
        )}
      </main>
    </div>
  );
}

MadeDreamsCartPage.getLayout = function getLayout(page: ReactElement) {
  return <LayoutGuest>{page}</LayoutGuest>;
};
