import React, { Fragment } from 'react'
import { Metadata } from 'next'
import Link from 'next/link'
import { notFound } from 'next/navigation'

import type { Order } from '../../../../payload/payload-types'
import { Button } from '../../../__components/Button'
import { Gutter } from '../../../_components/Gutter'
import { HR } from '../../../_components/HR'
import { Media } from '../../../_components/Media'
import { Price } from '../../../_components/Price'
import { formatDateTime } from '../../../_utilities/formatDateTime'
import { getMeUser } from '../../../_utilities/getMeUser'
import { mergeOpenGraph } from '../../../_utilities/mergeOpenGraph'

import classes from './index.module.scss'

export const dynamic = 'force-dynamic'

export default async function Order({ params: { id } }) {
  const { token } = await getMeUser({
    nullUserRedirect: `/login?error=${encodeURIComponent(
      'Trebuie sa fii logat pentru a putea vedea comanda asta.',
    )}&redirect=${encodeURIComponent(`/orders/${id}`)}`,
  })

  let order: Order | null = null

  try {
    order = await fetch(`${process.env.NEXT_PUBLIC_SERVER_URL}/api/orders/${id}`, {
      headers: {
        'Content-Type': 'application/json',
        Authorization: `JWT ${token}`,
      },
    })?.then(async res => {
      if (!res.ok) notFound()
      const json = await res.json()

      if ('error' in json && json.error) notFound()
      if ('errors' in json && json.errors) notFound()

      return json
    })
  } catch (error) {
    console.error(error) // eslint-disable-line no-console
  }

  if (!order) {
    // notFound()
    console.error('Comanda nu a fost gasita') // eslint-disable-line no-console
  }

  return (
    <Gutter className={classes.orders}>
      <h2>
        {`Comanda `}
        <span className={classes.id}>{`${order?.id}`}</span>
      </h2>
      <div className={classes.itemMeta}>
        <p>{`Numar: ${order?.id}`}</p>
        {/* <p>{`Payment Intent: ${order.stripePaymentIntentID}`}</p> */}
        <p>{`Plasata la data de: ${formatDateTime(order?.createdAt)}`}</p>
        <p className={classes.total}>
          {'Total: '}
          {new Intl.NumberFormat('ro', {
            style: 'currency',
            currency: 'lei',
          }).format(order.total)}
        </p>
        <p>
          <span className="text-[#00ff9f]">Status:</span>
          {` ${order.status}`}
        </p>
      </div>
      <HR />
      <div className={classes.order}>
        <h4 className={classes.orderItems}>Produse</h4>
        {order?.items?.map((item, index) => {
          if (typeof item.product === 'object') {
            const {
              quantity,
              product,
              product: { slug, title, meta },
            } = item

            const isLast = index === (order?.items?.length || 0) - 1

            const metaImage = meta?.image

            return (
              <Fragment key={index}>
                <div className={classes.row}>
                  <Link
                    href={`/products/${slug}`}
                    as={`/products/${slug}`}
                    className={classes.mediaWrapper}
                    prefetch
                  >
                    {!metaImage && <span className={classes.placeholder}>No image</span>}
                    {metaImage && typeof metaImage !== 'string' && (
                      <Media
                        className={classes.media}
                        imgClassName={classes.image}
                        resource={metaImage}
                        fill
                      />
                    )}
                  </Link>
                  <div className={classes.rowContent}>
                    <h5 className={classes.title}>
                      <Link href={`/products/${slug}`} className={classes.titleLink}>
                        {title}
                      </Link>
                    </h5>
                    <p>{`Cantitate: ${quantity}`}</p>
                    <Price product={product} button={false} quantity={quantity} />
                  </div>
                </div>
                {!isLast && <HR />}
              </Fragment>
            )
          }

          return null
        })}
      </div>
      <HR />

      <div className={classes.actions}>
        <Button href="/orders" appearance="primary" label="Vezi toate comenziile" />
        <Button href="/account" appearance="special" label="Spre contul meu" />
      </div>
    </Gutter>
  )
}

export async function generateMetadata({ params: { id } }): Promise<Metadata> {
  return {
    title: `Comanda ${id}`,
    description: `Detaliie comenzii pentru ${id}.`,
    openGraph: mergeOpenGraph({
      title: `Comanda ${id}`,
      url: `/orders/${id}`,
    }),
  }
}