import React, { FC, useState } from 'react'
import {
  Button,
  FormToggle,
  Modal,
  TextControl,
  __experimentalItem as Item,
  __experimentalItemGroup as ItemGroup,
  __experimentalInputControlSuffixWrapper as InputControlSuffixWrapper,
  __experimentalNumberControl as NumberControl,
} from '@wordpress/components'
import { Notice, Stack } from '@wordpress/ui'
import { useAnnounce } from './components/useAnnounce'
import { calendar, mapMarker, pencil, published, undo } from '@wordpress/icons'
import { useI18n } from '@wordpress/react-i18n'
import apiFetch from '@wordpress/api-fetch'
import { speak } from '@wordpress/a11y'
import SettingsRow from './components/SettingsRow'

type ReturnAddress = {
  name: string
  addressLine: string
  addressLine2: string
  postalCode: string
  city: string
}

type ReturnsSettings = {
  enabled: boolean
  autoApprove: boolean
  windowDays: number
  returnAddress?: ReturnAddress | null
  otherReturnsPlugin?: boolean
}

const emptyAddress: ReturnAddress = {
  name: '',
  addressLine: '',
  addressLine2: '',
  postalCode: '',
  city: '',
}

const defaults: ReturnsSettings = {
  enabled: false,
  autoApprove: true,
  windowDays: 30,
}

const ToggleReturns: FC = () => {
  const [settings, setSettings] = useState<ReturnsSettings>(
    // @ts-expect-error 2339
    window.shopDetails?.returns || defaults
  )
  const [open, setOpen] = useState<boolean>(false)
  const [windowDays, setWindowDays] = useState<string>(
    String(settings.windowDays)
  )
  const [address, setAddress] = useState<ReturnAddress>(
    settings.returnAddress || emptyAddress
  )
  const [editingAddress, setEditingAddress] = useState<boolean>(false)
  const [isSaving, setIsSaving] = useState<boolean>(false)
  const [error, setError] = useState<string>()

  const { __ } = useI18n()

  const otherReturnsPluginWarning = __(
    'WooCommerce Returns and Warranty Requests is active. Use only one of them, so customers see one way to return items.',
    'posten-bring-checkout'
  )

  const save = async (changes: Partial<ReturnsSettings>): Promise<boolean> => {
    setIsSaving(true)
    setError(undefined)
    try {
      const saved: ReturnsSettings = await apiFetch({
        path: '/posten-bring-checkout/returns',
        method: 'POST',
        data: changes,
      })
      setSettings(saved)
      // @ts-expect-error 2339
      if (window.shopDetails) {
        // @ts-expect-error 2339
        window.shopDetails.returns = saved
      }
      setWindowDays(String(saved.windowDays))
      if ('returnAddress' in changes) {
        setAddress(saved.returnAddress || emptyAddress)
        setEditingAddress(false)
      }
      return true
    } catch (e) {
      setError(
        __(
          'An error occurred while updating the return settings. Please try again.',
          'posten-bring-checkout'
        )
      )
      return false
    } finally {
      setIsSaving(false)
    }
  }

  const saveWindowDays = async () => {
    const days = parseInt(windowDays, 10)
    if (days >= 1 && days <= 365 && days !== settings.windowDays) {
      return save({ windowDays: days })
    }
    setWindowDays(String(settings.windowDays))
    return true
  }

  const editAddress = () => {
    setError(undefined)
    setAddress(settings.returnAddress || emptyAddress)
    setEditingAddress(true)
  }

  const cancelAddress = () => {
    setError(undefined)
    setAddress(settings.returnAddress || emptyAddress)
    setEditingAddress(false)
  }

  const toggleAddress = () => {
    if (settings.returnAddress) {
      save({ returnAddress: null })
    } else if (editingAddress) {
      cancelAddress()
    } else {
      editAddress()
    }
  }

  const closeModal = async () => {
    if (await saveWindowDays()) {
      cancelAddress()
      setOpen(false)
    }
  }

  const toggleEnabled = () => {
    if (settings.enabled) {
      cancelAddress()
    }
    save({ enabled: !settings.enabled })
  }

  const rejectAddress = (message: string) => {
    if (message === error) {
      speak(message, 'assertive')
    }
    setError(message)
  }

  const saveAddress = () => {
    const trimmed = Object.fromEntries(
      Object.entries(address).map(([field, value]) => [field, value.trim()])
    ) as ReturnAddress
    if (
      !trimmed.name ||
      !trimmed.addressLine ||
      !trimmed.postalCode ||
      !trimmed.city
    ) {
      rejectAddress(
        __(
          'Fill in name, address, postal code and city.',
          'posten-bring-checkout'
        )
      )
    } else if (!/^\d{4}$/.test(trimmed.postalCode)) {
      rejectAddress(
        __('The postal code must be 4 digits.', 'posten-bring-checkout')
      )
    } else {
      save({ returnAddress: trimmed })
    }
  }

  const addressField = (field: keyof ReturnAddress, label: string) => (
    <TextControl
      label={label}
      __next40pxDefaultSize
      __nextHasNoMarginBottom
      value={address[field]}
      maxLength={field === 'postalCode' ? 4 : 35}
      disabled={isSaving}
      onChange={(value: string) => setAddress({ ...address, [field]: value })}
    />
  )

  const savedAddress = settings.returnAddress

  useAnnounce(open && settings.otherReturnsPlugin && otherReturnsPluginWarning)
  useAnnounce(open && error, 'assertive')

  return (
    <>
      <SettingsRow
        icon={undo}
        title={__('Self-service returns', 'posten-bring-checkout')}
        on={settings.enabled}
        description={
          <>
            {__(
              'Customers return items from their order. Bring emails them a return code and a QR code.',
              'posten-bring-checkout'
            )}
            {settings.otherReturnsPlugin && (
              <div>
                {__(
                  'Another returns plugin is active.',
                  'posten-bring-checkout'
                )}
              </div>
            )}
          </>
        }
        onClick={() => setOpen(true)}
      />

      {open && (
        <Modal
          onRequestClose={closeModal}
          title={__('Self-service returns', 'posten-bring-checkout')}
        >
          <div id="returns-settings-container">
            {settings.otherReturnsPlugin && (
              <Notice.Root intent="warning" className="mbm">
                <Notice.Description>
                  {otherReturnsPluginWarning}
                </Notice.Description>
              </Notice.Root>
            )}
            {error && (
              <Notice.Root intent="error" className="mbm">
                <Notice.Description>{error}</Notice.Description>
              </Notice.Root>
            )}
            <ItemGroup isBordered isSeparated isRounded>
              <SettingsRow
                icon={undo}
                title={__('Self-service returns', 'posten-bring-checkout')}
                on={settings.enabled}
                description={__(
                  'Customers start a return in My Account or from the link in the Order completed email, and hand in the parcel at a parcel locker, Post i butikk or a post office.',
                  'posten-bring-checkout'
                )}
              >
                <FormToggle
                  aria-label={__(
                    'Self-service returns',
                    'posten-bring-checkout'
                  )}
                  checked={settings.enabled}
                  disabled={isSaving}
                  onChange={toggleEnabled}
                />
              </SettingsRow>
              {settings.enabled && (
                <SettingsRow
                  icon={published}
                  title={__(
                    'Approve returns automatically',
                    'posten-bring-checkout'
                  )}
                  description={__(
                    'Otherwise you approve each return on the order.',
                    'posten-bring-checkout'
                  )}
                >
                  <FormToggle
                    aria-label={__(
                      'Approve returns automatically',
                      'posten-bring-checkout'
                    )}
                    checked={settings.autoApprove}
                    disabled={isSaving}
                    onChange={() =>
                      save({ autoApprove: !settings.autoApprove })
                    }
                  />
                </SettingsRow>
              )}
              {settings.enabled && (
                <SettingsRow
                  icon={calendar}
                  title={__('Return window', 'posten-bring-checkout')}
                  description={__(
                    'Counted from when the order is completed.',
                    'posten-bring-checkout'
                  )}
                >
                  <NumberControl
                    className="settings-row__number"
                    label={__('Return window in days', 'posten-bring-checkout')}
                    hideLabelFromVision
                    __next40pxDefaultSize
                    min={1}
                    max={365}
                    spinControls="none"
                    value={windowDays}
                    disabled={isSaving}
                    onChange={(value?: string) => setWindowDays(value ?? '')}
                    onBlur={saveWindowDays}
                    suffix={
                      <InputControlSuffixWrapper>
                        {__('days', 'posten-bring-checkout')}
                      </InputControlSuffixWrapper>
                    }
                  />
                </SettingsRow>
              )}
              {settings.enabled && (
                <SettingsRow
                  icon={mapMarker}
                  title={__('Return address', 'posten-bring-checkout')}
                  on={Boolean(savedAddress)}
                  description={__(
                    'Returns go to the store address unless you enter another address in Norway here.',
                    'posten-bring-checkout'
                  )}
                  extra={
                    editingAddress ? (
                      <Stack direction="column" gap="md">
                        {addressField(
                          'name',
                          __('Name', 'posten-bring-checkout')
                        )}
                        {addressField(
                          'addressLine',
                          __('Address line 1', 'posten-bring-checkout')
                        )}
                        {addressField(
                          'addressLine2',
                          __(
                            'Address line 2 (optional)',
                            'posten-bring-checkout'
                          )
                        )}
                        {addressField(
                          'postalCode',
                          __('Postal code', 'posten-bring-checkout')
                        )}
                        {addressField(
                          'city',
                          __('City', 'posten-bring-checkout')
                        )}
                        <Stack direction="row" gap="md">
                          <Button
                            variant="primary"
                            __next40pxDefaultSize
                            disabled={isSaving}
                            onClick={saveAddress}
                          >
                            {__('Save address', 'posten-bring-checkout')}
                          </Button>
                          <Button
                            variant="tertiary"
                            __next40pxDefaultSize
                            disabled={isSaving}
                            onClick={cancelAddress}
                          >
                            {__('Cancel', 'posten-bring-checkout')}
                          </Button>
                        </Stack>
                      </Stack>
                    ) : (
                      savedAddress && (
                        <Stack
                          direction="row"
                          align="flex-start"
                          gap="lg"
                          className="settings-row__address-box"
                        >
                          <address className="settings-row__address settings-row__text">
                            {savedAddress.name}
                            <br />
                            {savedAddress.addressLine}
                            {savedAddress.addressLine2 && (
                              <>
                                <br />
                                {savedAddress.addressLine2}
                              </>
                            )}
                            <br />
                            {savedAddress.postalCode} {savedAddress.city}
                          </address>
                          <Button
                            icon={pencil}
                            label={__('Edit address', 'posten-bring-checkout')}
                            size="compact"
                            disabled={isSaving}
                            onClick={editAddress}
                          />
                        </Stack>
                      )
                    )
                  }
                >
                  <FormToggle
                    aria-label={__(
                      'Send returns to another address',
                      'posten-bring-checkout'
                    )}
                    checked={editingAddress || Boolean(savedAddress)}
                    disabled={isSaving}
                    onChange={toggleAddress}
                  />
                </SettingsRow>
              )}
            </ItemGroup>
          </div>
        </Modal>
      )}
    </>
  )
}

export default ToggleReturns