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

import { Order } from '../../../payload/payload-types'
import { Button } from '../../__components/Button'
import { Gutter } from '../../_components/Gutter'
import { HR } from '../../_components/HR'
import { RenderParams } from '../../_components/RenderParams'
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 Orders() {
  const { token } = await getMeUser({
    nullUserRedirect: `/login?error=${encodeURIComponent(
      'You must be logged in to view your orders.',
    )}&redirect=${encodeURIComponent('/orders')}`,
  })

  let orders: Order[] | null = null

  try {
    orders = await fetch(`${process.env.NEXT_PUBLIC_SERVER_URL}/api/orders`, {
      headers: {
        'Content-Type': 'application/json',
        Authorization: `JWT ${token}`,
      },
      cache: 'no-store',
    })
      ?.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
      })
      ?.then(json => json.docs)
  } catch (error) {
    // when deploying this template on Payload Cloud, this page needs to build before the APIs are live
    // so swallow the error here and simply render the page with fallback data where necessary
    // in production you may want to redirect to a 404  page or at least log the error somewhere
    // console.error(error)
  }

  return (
    <Gutter className={classes.orders}>
      <h1>Comenzi</h1>
      {(!orders || !Array.isArray(orders) || orders?.length === 0) && (
        <p className={classes.noOrders}>Nu ai nici-o comanda.</p>
      )}
      <RenderParams />
      {orders && orders.length > 0 && (
        <ul className={classes.ordersList}>
          {orders?.map((order, index) => {
            const href = `/orders/${encodeURIComponent(order.id)}`

            return (
              <li key={order.id} className={classes.listItem}>
                <Link className={classes.item} href={href} as={href} prefetch>
                  <div className={classes.itemContent}>
                    <h4 className={classes.itemTitle}>
                      <span className="text-[#00ff9f]">Comanda:</span>
                      {` ${order.id}`}
                    </h4>
                    <div className={classes.itemMeta}>
                      <p>
                        <span className="text-[#00ff9f]">Plasata la data de:</span>
                        {` ${formatDateTime(order.createdAt)}`}
                      </p>
                      <p>
                        <span className="text-[#00ff9f]">Total: </span>
                        {new Intl.NumberFormat('ro', {
                          style: 'currency',
                          currency: 'lei',
                        }).format(order.total)}
                      </p>
                      <p>
                        <span className="text-[#00ff9f]">Status:</span>
                        {`${order.status}`}
                      </p>
                    </div>
                  </div>
                  <Button
                    appearance="special"
                    label="Vezi comanda"
                    className={classes.button}
                    el="button"
                  />
                </Link>
                {index !== orders.length - 1 && <HR />}
              </li>
            )
          })}
        </ul>
      )}
      <HR />
      <Button href="/account" appearance="primary" label="Spre contul meu" />
    </Gutter>
  )
}

export const metadata: Metadata = {
  title: 'Comenzi',
  description: 'Comenziile tale.',
  openGraph: mergeOpenGraph({
    title: 'Comenzi',
    url: '/orders',
  }),
}