/**
 * ShipmentPreviewModal Component
 *
 * Main modal component for displaying shipment preview before creation.
 */
import { Modal, Button } from '@wordpress/components';
import { useState, useRef, useEffect } from '@wordpress/element';
import { __ } from '@wordpress/i18n';

import styles from './styles.module.scss';

import { ValidationErrors } from './sections/ValidationErrors';
import { SenderSection } from './sections/SenderSection';
import { RecipientSection } from './sections/RecipientSection';
import { ParcelsSection } from './sections/ParcelsSection';
import { InvoiceSection } from './sections/InvoiceSection';
import { ServicesSection } from './sections/ServicesSection';
import { NoteSection } from './sections/NoteSection';

export const ShipmentPreviewModal = ({ previewData, onClose, onAction }) => {
  const [note, setNote] = useState(previewData.shipment_data.note || '');
  const [isCreating, setIsCreating] = useState(false);
  const [creationError, setCreationError] = useState(null);
  const contentRef = useRef(null);

  useEffect(() => {
    if (creationError && contentRef.current) {
      const modalContent = contentRef.current.closest('.components-modal__content');
      if (modalContent) {
        modalContent.scrollTo({
          top: 0,
          behavior: 'smooth'
        });
      }
    }
  }, [creationError]);

  const handleCreate = async () => {
    const errorMsg = (err) => err?.data?.api_errors || err?.message || __('Failed to create shipment', 'nova-post-for-woocommerce')

    setIsCreating(true);
    setCreationError(null);

    try {
      await onAction({ note });
    } catch (error) {
      setCreationError(errorMsg(error));
      setIsCreating(false);
    }
  };

  const { shipment_data, validation_error, is_valid, delivery_type } = previewData;

  const displayError = creationError || validation_error;

  const formatParcels = (parcels) => {
    if (!parcels) return [];
    
    return parcels.map(parcel => ({
      ...parcel,
      length: parcel.length / 10,
      width: parcel.width / 10,
      height: parcel.height / 10,
      actualWeight: parcel.actualWeight / 1000
    }));
  };

  return (
    <Modal
      title={__('Create Waybill - Preview', 'nova-post-for-woocommerce')}
      onRequestClose={onClose}
      className={styles['shipment-preview-modal']}
      shouldCloseOnClickOutside={false}
      isDismissible={!isCreating}
      size={"large"}
    >
      <div ref={contentRef} className={styles['shipment-preview-modal__content']}>
        <ValidationErrors errors={displayError} />

        <SenderSection sender={shipment_data.sender} />

        <RecipientSection recipient={shipment_data.recipient} />

        <ParcelsSection parcels={formatParcels(shipment_data.parcels)} />

        {delivery_type.is_international && shipment_data.invoice && (
          <InvoiceSection invoice={shipment_data.invoice} />
        )}

        {shipment_data.services && shipment_data.services.length > 0 && (
          <ServicesSection services={shipment_data.services} />
        )}

        <NoteSection note={note} onChange={setNote} />
      </div>

      <div className={styles['shipment-preview-modal__footer']}>
        <Button variant="secondary" onClick={onClose} disabled={isCreating}>
          {__('Cancel', 'nova-post-for-woocommerce')}
        </Button>
        <Button
          variant="primary"
          onClick={handleCreate}
          isBusy={isCreating}
          disabled={!is_valid || isCreating}
        >
          {__('Create Waybill', 'nova-post-for-woocommerce')}
        </Button>
      </div>
    </Modal>
  );
};
