import { useAppSelector } from '@akinon/next/redux/hooks';
import { useLocalization } from '@akinon/next/hooks';
import PluginModule, { Component } from '@akinon/next/components/plugin-module';
import { Price, Link } from '@theme/components';
import { partAttrs } from '@akinon/pz-theme/src/utils/part-styles';
import { Image } from '@akinon/next/components/image';
import { StoreCredits } from '@theme/views/checkout/steps/payment/options/store-credit';
import type { RootState } from '@theme/redux/store';
import type { SectionId } from './hooks/use-section-state';

interface OnePageSummaryProps {
  onEditSection: (section: SectionId) => void;
  showReview?: boolean;
}

const OnePageSummary = ({
  onEditSection,
  showReview = true
}: OnePageSummaryProps) => {
  const { t } = useLocalization();
  const preOrder = useAppSelector(
    (state: RootState) => state.checkout.preOrder
  );
  const { isMobileApp } = useAppSelector((state: RootState) => state.root);

  if (!preOrder?.basket) return null;

  const itemCount = preOrder.basket.basketitem_set.length;

  return (
    <div className="flex flex-col gap-4">
      <PluginModule
        component={Component.CheckoutGiftPack}
        props={{
          className:
            'flex flex-col w-full rounded-2xl bg-white shadow-[0_1px_3px_rgba(0,0,0,0.04)] ring-1 ring-black/[0.04]'
        }}
      />
      <StoreCredits />

      <section
        className="overflow-hidden rounded-2xl bg-white shadow-[0_1px_3px_rgba(0,0,0,0.04)] ring-1 ring-black/[0.04]"
        {...partAttrs('summary')}
      >
        <header
          className="flex items-baseline justify-between px-6 py-5"
          {...partAttrs('summary-header')}
        >
          <span
            className="text-lg font-semibold tracking-tight text-black-800"
            {...partAttrs('summary-title')}
          >
            {t('checkout.summary.title')}
          </span>
          <span className="text-[11px] font-medium uppercase tracking-wider text-gray-500">
            {itemCount} {t('checkout.summary.items')}
          </span>
        </header>

        <ul className="max-h-72 divide-y divide-gray-100 overflow-y-auto border-t border-gray-100">
          {preOrder.basket.basketitem_set.map((item, index) => (
            <li
              key={`one-page-summary-item-${index}`}
              className="flex gap-3 px-6 py-4"
              {...partAttrs('summary-item')}
            >
              <Link
                href={item.product.absolute_url || '#'}
                passHref
                className={
                  isMobileApp
                    ? 'pointer-events-none flex-shrink-0'
                    : 'flex-shrink-0 overflow-hidden rounded-md'
                }
              >
                <Image
                  src={item.product.productimage_set[0]?.image}
                  alt={item.product.name}
                  width={56}
                  height={84}
                />
              </Link>
              <div className="flex flex-1 flex-col justify-between text-xs">
                <Link
                  href={item.product.absolute_url || '#'}
                  className="line-clamp-2 text-sm font-medium text-black-800 transition-colors hover:text-secondary"
                >
                  {item.product.name}
                </Link>
                <div className="flex items-end justify-between gap-2">
                  <span className="text-gray-500">
                    {t('checkout.summary.quantity')}:{' '}
                    <span className="font-medium tabular-nums text-black-800">
                      {item.quantity}
                    </span>
                  </span>
                  <div className="flex flex-col items-end gap-0.5">
                    {item.product.retail_price !== item.product.price && (
                      <span className="text-[10px] text-gray-400 line-through">
                        <Price value={item.product.retail_price} />
                      </span>
                    )}
                    <span className="text-sm font-semibold text-black-800 tabular-nums">
                      <Price value={item.product.price} />
                    </span>
                  </div>
                </div>
              </div>
            </li>
          ))}
        </ul>

        <dl className="space-y-2.5 border-t border-gray-100 px-6 py-5 text-sm text-gray-600">
          <div
            className="flex items-center justify-between"
            {...partAttrs('summary-row')}
          >
            <dt {...partAttrs('summary-row-label')}>
              {t('checkout.summary.subtotal')}
            </dt>
            {/*
              The amount declares its own weight and colour, so a rule on the
              row can never reach it by inheritance — it gets its own part
              instead of leaving the row's Text Color a dead control.
            */}
            <dd
              className="font-medium tabular-nums text-black-800"
              {...partAttrs('summary-row-value')}
            >
              <Price value={preOrder.basket.total_amount} />
            </dd>
          </div>
          <div
            className="flex items-center justify-between"
            {...partAttrs('summary-row')}
          >
            <dt {...partAttrs('summary-row-label')}>
              {t('checkout.summary.shipping')}
            </dt>
            <dd
              className="font-medium tabular-nums text-black-800"
              {...partAttrs('summary-row-value')}
            >
              <Price value={preOrder.shipping_amount} />
            </dd>
          </div>
          {parseFloat(preOrder.loyalty_money || '0') > 0 && (
            <div
              className="flex items-center justify-between"
              {...partAttrs('summary-row')}
            >
              <dt {...partAttrs('summary-row-label')}>
                {t('checkout.summary.loyalty_money_total')}
              </dt>
              <dd
                className="font-medium tabular-nums text-black-800"
                {...partAttrs('summary-row-value')}
              >
                <Price value={preOrder.loyalty_money} />
              </dd>
            </div>
          )}
          {parseFloat(preOrder.basket.total_discount_amount || '0') > 0 && (
            <div
              className="flex items-center justify-between"
              {...partAttrs('summary-row')}
            >
              <dt {...partAttrs('summary-row-label')}>
                {t('checkout.summary.discounts_total')}
              </dt>
              <dd
                className="font-medium tabular-nums text-black-800"
                {...partAttrs('summary-row-value')}
              >
                <Price
                  value={preOrder.basket.total_discount_amount}
                  useNegative
                />
              </dd>
            </div>
          )}
        </dl>

        {/*
          The row carries the baseline typography that used to live on the
          label span, so the row's own controls have something to change; the
          amount keeps its distinct treatment and answers to its own part.
        */}
        <div
          className="flex items-baseline justify-between border-t border-gray-100 px-6 py-5 text-sm font-medium uppercase tracking-wider text-gray-700"
          {...partAttrs('summary-total')}
        >
          <span {...partAttrs('summary-total-label')}>
            {t('checkout.summary.total')}
          </span>
          <span
            className="text-2xl font-bold tracking-tight text-black-800 tabular-nums"
            {...partAttrs('summary-total-value')}
          >
            <Price value={preOrder.unpaid_amount} />
          </span>
        </div>
      </section>

      {showReview &&
        (preOrder.shipping_address ||
          preOrder.shipping_option ||
          preOrder.payment_option) && (
          <section className="overflow-hidden rounded-2xl bg-white shadow-[0_1px_3px_rgba(0,0,0,0.04)] ring-1 ring-black/[0.04]">
            <header className="px-6 py-5">
              <span className="text-base font-semibold tracking-tight text-black-800">
                {t('checkout.one_page.summary.review_title')}
              </span>
            </header>

            <ul className="divide-y divide-gray-100 border-t border-gray-100 text-sm text-black-800">
              {preOrder.shipping_address && (
                <li className="flex items-start justify-between gap-3 px-6 py-4">
                  <div className="flex-1">
                    <div className="mb-1 text-[10px] font-semibold uppercase tracking-wider text-gray-500">
                      {t('checkout.one_page.summary.deliver_to')}
                    </div>
                    <div className="font-medium">
                      {preOrder.shipping_address.title}
                    </div>
                    <div className="text-xs text-gray-600">
                      {preOrder.shipping_address.line},{' '}
                      {preOrder.shipping_address.township?.name},{' '}
                      {preOrder.shipping_address.city?.name}
                    </div>
                  </div>
                  <button
                    type="button"
                    onClick={() => onEditSection('address')}
                    className="rounded-md px-2 py-1 text-xs font-medium text-gray-600 transition-colors hover:bg-gray-100 hover:text-black-800"
                    data-testid="one-page-summary-edit-address"
                    {...partAttrs('summary-edit')}
                  >
                    {t('checkout.one_page.edit')}
                  </button>
                </li>
              )}

              {preOrder.shipping_option && (
                <li className="flex items-start justify-between gap-3 px-6 py-4">
                  <div className="flex-1">
                    <div className="mb-1 text-[10px] font-semibold uppercase tracking-wider text-gray-500">
                      {t('checkout.one_page.summary.shipping_method')}
                    </div>
                    <div className="font-medium">
                      {preOrder.shipping_option.name}
                    </div>
                    {preOrder.shipping_option.shipping_amount && (
                      <div className="text-xs tabular-nums text-gray-600">
                        <Price value={preOrder.shipping_option.shipping_amount} />
                      </div>
                    )}
                  </div>
                  <button
                    type="button"
                    onClick={() => onEditSection('shipping')}
                    className="rounded-md px-2 py-1 text-xs font-medium text-gray-600 transition-colors hover:bg-gray-100 hover:text-black-800"
                    data-testid="one-page-summary-edit-shipping"
                    {...partAttrs('summary-edit')}
                  >
                    {t('checkout.one_page.edit')}
                  </button>
                </li>
              )}

              {preOrder.payment_option && (
                <li className="flex items-start justify-between gap-3 px-6 py-4">
                  <div className="flex-1">
                    <div className="mb-1 text-[10px] font-semibold uppercase tracking-wider text-gray-500">
                      {t('checkout.one_page.summary.payment_method')}
                    </div>
                    <div className="font-medium">
                      {preOrder.payment_option.name}
                    </div>
                  </div>
                  <button
                    type="button"
                    onClick={() => onEditSection('payment')}
                    className="rounded-md px-2 py-1 text-xs font-medium text-gray-600 transition-colors hover:bg-gray-100 hover:text-black-800"
                    data-testid="one-page-summary-edit-payment"
                    {...partAttrs('summary-edit')}
                  >
                    {t('checkout.one_page.edit')}
                  </button>
                </li>
              )}
            </ul>
          </section>
        )}
    </div>
  );
};

export default OnePageSummary;