'use client';

import { useCallback } from 'react';
import clsx from 'clsx';
import PluginModule, { Component } from '@akinon/next/components/plugin-module';
import { CheckoutPiece } from '@akinon/pz-theme/src/chrome/checkout-piece';
import ContactSection from './sections/contact-section';
import AddressSection from './sections/address-section';
import ShippingSection from './sections/shipping-section';
import PaymentSection from './sections/payment-section';
import OnePageSummary from './one-page-summary';
import MobileSummarySheet from './mobile-summary-sheet';
import TrustBadges from './trust-badges';
import { useSectionState, type SectionId } from './hooks/use-section-state';
import { useCheckoutFunnelGtm } from './hooks/use-checkout-funnel-gtm';
import type { CheckoutVariantProps } from '../types';

const OnePageCheckout = ({ options }: CheckoutVariantProps) => {
  const autoAdvance = options?.autoAdvance ?? true;
  const stickyMobileCta = options?.stickyMobileCta ?? true;
  const enableEditMode = options?.enableEditMode ?? true;
  const showOrderReview = options?.showOrderReview ?? true;
  const showTrustBadges = options?.showTrustBadges ?? true;
  const gtmEnabled = options?.gtmEnabled ?? true;
  const compactMode = options?.compactMode ?? false;

  const { sections, activeSection, openSection } = useSectionState({
    autoAdvance
  });
  useCheckoutFunnelGtm(activeSection, { enabled: gtmEnabled });

  const sectionStatus = useCallback(
    (id: SectionId) =>
      sections.find((section) => section.id === id)?.status ?? 'locked',
    [sections]
  );

  const goTo = useCallback(
    (id: SectionId) => () => openSection(id),
    [openSection]
  );

  return (
    <PluginModule component={Component.MasterpassProvider}>
      <PluginModule component={Component.MasterpassDeleteConfirmationModal} />
      <PluginModule component={Component.MasterpassOtpModal} />
      <PluginModule component={Component.MasterpassLinkModal} />

      <div
        className={clsx(
          'min-h-screen bg-[#fafafa]',
          compactMode ? 'pb-12 md:pb-8' : 'pb-20 md:pb-16'
        )}
        data-compact={compactMode || undefined}
      >
        <div
          className={clsx(
            'container w-full px-4 md:px-6 lg:px-8',
            compactMode ? 'pt-4' : 'pt-6 md:pt-10'
          )}
        >
          <div
            className={clsx(
              'flex flex-col lg:flex-row lg:items-start',
              compactMode ? 'gap-4 lg:gap-6' : 'gap-6 lg:gap-8'
            )}
          >
            <div
              className="w-full lg:w-2/3"
              data-testid="one-page-sections"
            >
              <ContactSection
                status={sectionStatus('contact')}
                onEdit={goTo('contact')}
              />
              <AddressSection
                status={sectionStatus('address')}
                onEdit={goTo('address')}
                onComplete={goTo('shipping')}
                editable={enableEditMode}
              />
              <ShippingSection
                status={sectionStatus('shipping')}
                onEdit={goTo('shipping')}
                onComplete={goTo('payment')}
                editable={enableEditMode}
              />
              <PaymentSection
                status={sectionStatus('payment')}
                onEdit={goTo('payment')}
              />

              {showTrustBadges && <TrustBadges />}
            </div>

            <aside
              className="hidden w-full lg:block lg:w-1/3"
              data-testid="one-page-summary"
            >
              <div className="sticky top-6">
                <CheckoutPiece piece="summary">
                  <OnePageSummary
                    onEditSection={openSection}
                    showReview={showOrderReview}
                  />
                </CheckoutPiece>
              </div>
            </aside>
          </div>
        </div>

        {stickyMobileCta && (
          <div
            className="fixed inset-x-0 bottom-0 z-30 lg:hidden"
            data-testid="one-page-mobile-cta"
          >
            <MobileSummarySheet
              onEditSection={openSection}
              showReview={showOrderReview}
            />
          </div>
        )}
      </div>
    </PluginModule>
  );
};

export default OnePageCheckout;