import React, { FC, useEffect, useState } from 'react'
import {
  __experimentalHeading as Heading,
  Button,
  SelectControl,
  TextareaControl,
} from '@wordpress/components'
import { Notice } from '@wordpress/ui'
import { useAnnounce } from './useAnnounce'
import { useI18n } from '@wordpress/react-i18n'
import apiFetch from '@wordpress/api-fetch'

type ReturnAction = {
  action: string
  label: string
}

type ReturnBooking = {
  consignmentNumber: string
  labelUrl: string
  trackingUrl: string
}

type OrderReturn = {
  id: string
  state: string
  statusLabel: string
  statusHint: string
  byStore: boolean
  lines: Array<string>
  note: string
  booking: ReturnBooking | null
  actions: Array<ReturnAction>
}

type ReturnableItem = {
  itemId: number
  name: string
  quantity: number
}

export type OrderReturnsData = {
  enabled: boolean
  returns: Array<OrderReturn>
  returnable: Array<ReturnableItem>
  reasons: Record<string, string>
}

const errorMessage = (e: unknown, fallback: string) =>
  typeof e === 'string' ? e : fallback

const OrderReturns: FC<{ orderId: string }> = ({ orderId }) => {
  const { __ } = useI18n()
  const [data, setData] = useState<OrderReturnsData>()
  const [loadFailed, setLoadFailed] = useState(false)
  const [busy, setBusy] = useState<string>()
  const [error, setError] = useState<string>()
  const [booking, setBooking] = useState(false)
  const [quantities, setQuantities] = useState<Record<number, number>>({})
  const [reasons, setReasons] = useState<Record<number, string>>({})
  const [note, setNote] = useState('')

  const path = `/posten-bring-checkout/orders/${orderId}/returns`

  const load = () => {
    setLoadFailed(false)
    apiFetch<OrderReturnsData>({ path })
      .then(setData)
      .catch(() => setLoadFailed(true))
  }

  useEffect(load, [path])

  const run = async (key: string, request: Promise<OrderReturnsData>) => {
    setBusy(key)
    setError(undefined)
    try {
      setData(await request)
      return true
    } catch (e) {
      setError(
        errorMessage(
          e,
          __(
            'Something went wrong. Please try again.',
            'posten-bring-checkout'
          )
        )
      )
      return false
    } finally {
      setBusy(undefined)
    }
  }

  const handle = (returnId: string, action: string) => {
    if (
      action === 'cancel' &&
      !window.confirm(
        __(
          'Only cancel the return if the customer is not sending the items. They can then return them again.',
          'posten-bring-checkout'
        )
      )
    ) {
      return
    }
    run(
      `${returnId}:${action}`,
      apiFetch<OrderReturnsData>({
        path: `${path}/${returnId}`,
        method: 'POST',
        data: { action },
      })
    )
  }

  const bookReturn = async () => {
    const items = Object.fromEntries(
      Object.entries(quantities).filter(([, quantity]) => quantity > 0)
    )
    const booked = await run(
      'book',
      apiFetch<OrderReturnsData>({
        path,
        method: 'POST',
        data: { items, reasons, note },
      })
    )
    if (booked) {
      setBooking(false)
      setQuantities({})
      setReasons({})
      setNote('')
    }
  }

  const loadError = __(
    'Could not load the returns for this order.',
    'posten-bring-checkout'
  )

  useAnnounce(
    (data?.enabled || (data?.returns.length ?? 0) > 0) && error,
    'assertive'
  )
  useAnnounce(loadFailed && loadError, 'assertive')

  if (loadFailed) {
    return (
      <div className="order-returns mtl">
        <Heading level={4} weight={400}>
          {__('Returns', 'posten-bring-checkout')}
        </Heading>
        <Notice.Root intent="error" className="mtm">
          <Notice.Description>{loadError}</Notice.Description>
        </Notice.Root>
        <div className="order-returns__actions">
          <Button
            variant="secondary"
            __next40pxDefaultSize={true}
            onClick={load}
          >
            {__('Try again', 'posten-bring-checkout')}
          </Button>
        </div>
      </div>
    )
  }

  if (!data || (!data.enabled && data.returns.length === 0)) {
    return null
  }

  const selected = Object.values(quantities).some(quantity => quantity > 0)

  return (
    <div className="order-returns mtl">
      <div className="flex justify-csb align-ic">
        <Heading level={4} weight={400}>
          {__('Returns', 'posten-bring-checkout')}
        </Heading>
        {!booking && data.returnable.length > 0 && (
          <Button
            variant="secondary"
            __next40pxDefaultSize={true}
            onClick={() => setBooking(true)}
          >
            {__('Book return', 'posten-bring-checkout')}
          </Button>
        )}
      </div>

      {data.returns.length === 0 && !booking && (
        <p className="order-returns__empty">
          {__('No returns for this order.', 'posten-bring-checkout')}
        </p>
      )}

      {data.returns.map(orderReturn => (
        <div className="order-returns__return" key={orderReturn.id}>
          <div className="flex justify-csb align-ic">
            <span
              className={`order-returns__state order-returns__state--${orderReturn.state}`}
            >
              {orderReturn.statusLabel}
            </span>
            <span className="order-returns__id">{orderReturn.id}</span>
          </div>
          {orderReturn.statusHint && (
            <p className="order-returns__hint">{orderReturn.statusHint}</p>
          )}
          <ul className="order-returns__lines">
            {orderReturn.lines.map(line => (
              <li key={line}>{line}</li>
            ))}
          </ul>
          {orderReturn.byStore && (
            <p className="order-returns__meta">
              {__('Booked by the store', 'posten-bring-checkout')}
            </p>
          )}
          {orderReturn.note && (
            <p className="order-returns__note">{orderReturn.note}</p>
          )}
          {orderReturn.booking && (
            <p className="order-returns__meta">
              <a
                href={orderReturn.booking.trackingUrl}
                target="_blank"
                rel="noreferrer"
              >
                {orderReturn.booking.consignmentNumber}
              </a>
              {' · '}
              <a
                href={orderReturn.booking.labelUrl}
                target="_blank"
                rel="noreferrer"
              >
                {__('Label', 'posten-bring-checkout')}
              </a>
            </p>
          )}
          {orderReturn.actions.length > 0 && (
            <div className="order-returns__actions">
              {orderReturn.actions.map((action, index) => (
                <Button
                  key={action.action}
                  variant={index === 0 ? 'primary' : 'secondary'}
                  isBusy={busy === `${orderReturn.id}:${action.action}`}
                  disabled={busy !== undefined}
                  onClick={() => handle(orderReturn.id, action.action)}
                >
                  {action.label}
                </Button>
              ))}
            </div>
          )}
        </div>
      ))}

      {booking && (
        <div className="order-returns__form">
          <p>
            {__(
              'Choose what the customer is sending back. Bring emails them a return code and a QR code for handing it in.',
              'posten-bring-checkout'
            )}
          </p>
          {data.returnable.map(item => (
            <div
              className="order-returns__item"
              key={item.itemId}
              role="group"
              aria-labelledby={`order-returns-item-${item.itemId}`}
            >
              <span
                className="order-returns__name"
                id={`order-returns-item-${item.itemId}`}
              >
                {item.name}
              </span>
              <SelectControl
                label={__('Quantity', 'posten-bring-checkout')}
                hideLabelFromVision
                __next40pxDefaultSize={true}
                __nextHasNoMarginBottom={true}
                value={String(quantities[item.itemId] || 0)}
                options={Array.from(
                  { length: item.quantity + 1 },
                  (_, quantity) => ({
                    label: String(quantity),
                    value: String(quantity),
                  })
                )}
                onChange={(value: string) =>
                  setQuantities({
                    ...quantities,
                    [item.itemId]: parseInt(value, 10),
                  })
                }
              />
              <SelectControl
                label={__('Reason', 'posten-bring-checkout')}
                hideLabelFromVision
                __next40pxDefaultSize={true}
                __nextHasNoMarginBottom={true}
                value={reasons[item.itemId] || ''}
                options={[
                  {
                    label: __('Reason (optional)', 'posten-bring-checkout'),
                    value: '',
                  },
                  ...Object.entries(data.reasons).map(([value, label]) => ({
                    label,
                    value,
                  })),
                ]}
                onChange={(value: string) =>
                  setReasons({ ...reasons, [item.itemId]: value })
                }
              />
            </div>
          ))}
          <TextareaControl
            label={__('Note', 'posten-bring-checkout')}
            __nextHasNoMarginBottom={true}
            value={note}
            onChange={setNote}
          />
          <div className="order-returns__actions">
            <Button
              variant="primary"
              __next40pxDefaultSize={true}
              isBusy={busy === 'book'}
              disabled={!selected || busy !== undefined}
              onClick={bookReturn}
            >
              {__('Book return', 'posten-bring-checkout')}
            </Button>
            <Button
              variant="tertiary"
              __next40pxDefaultSize={true}
              disabled={busy !== undefined}
              onClick={() => setBooking(false)}
            >
              {__('Cancel', 'posten-bring-checkout')}
            </Button>
          </div>
        </div>
      )}

      {error && (
        <Notice.Root intent="error" className="mtm">
          <Notice.Description>{error}</Notice.Description>
        </Notice.Root>
      )}
    </div>
  )
}

export default OrderReturns