import { Stat } from '@/app/stat'
import { Badge } from '@/components/badge'
import { Button } from '@/components/button'
import { Heading, Subheading } from '@/components/heading'
import { Link } from '@/components/link'
import { Select } from '@/components/select'
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/table'
import { getProductOrders, getProducts } from '@/data'
import { ChevronLeftIcon } from '@heroicons/react/16/solid'
import type { Metadata } from 'next'
import { notFound } from 'next/navigation'

export async function generateMetadata({ params }: { params: Promise<{ id: string }> }): Promise<Metadata> {
  let { id } = await params
  let products = await getProducts()
  let product = products.find((p: any) => p.id.toString() === id)

  return {
    title: product?.name,
  }
}

export default async function ProductPage({ params }: { params: Promise<{ id: string }> }) {
  let { id } = await params

  let products = await getProducts()
  let product = products.find((p: any) => p.id.toString() === id)

  let orders = await getProductOrders(id)

  if (!product) {
    notFound()
  }

  return (
    <>
      <div className="max-lg:hidden">
        <Link href="/products" className="inline-flex items-center gap-2 text-sm/6 text-zinc-500 dark:text-zinc-400">
          <ChevronLeftIcon className="size-4 fill-zinc-400 dark:fill-zinc-500" />
          Products
        </Link>
      </div>
      <div className="mt-4 flex flex-wrap items-end justify-between gap-4">
        <div className="flex flex-wrap items-center gap-6">
          <div className="w-32 shrink-0">
            <img className="aspect-3/2 rounded-lg object-cover shadow-sm" src={product.imgUrl} alt="" />
          </div>
          <div>
            <div className="flex flex-wrap items-center gap-x-4 gap-y-2">
              <Heading>{product.name}</Heading>
              <Badge color={product.status === '판매 중' ? 'sky' : product.status === '판매 보류' ? 'amber' : 'zinc'}>
                {product.status}
              </Badge>
            </div>
            <div className="mt-2 text-sm/6 text-zinc-500">
              {product.date} <span aria-hidden="true">·</span> {product.productType}
            </div>
          </div>
        </div>
        <div className="flex gap-4">
          <Button>제품 상세 보기</Button>
        </div>
      </div>
      <div className="mt-12 flex items-end justify-between">
        <Subheading>Orders Overview</Subheading>
        <div>
          <Select name="period">
            <option value="last_week">최근 1주일</option>
            <option value="last_month">최근 1개월</option>
            <option value="last_quarter">최근 3개월</option>
            <option value="last_year">최근 1년</option>
            <option value="all">전체 기간</option>
          </Select>
        </div>
      </div>
      <div className="mt-8 grid gap-8 sm:grid-cols-3">
        <Stat title="총 판매(원)" value={product.totalRevenue} change={product.totalRevenueChange} />
        <Stat title="총 판매(건)" value={`${product.ticketsSold}`} change={product.ticketsSoldChange} />
        <Stat title="조회수" value={product.pageViews} change={product.pageViewsChange} />
      </div>

      <Subheading className="mt-12">Recent orders</Subheading>
      <Table className="mt-4 [--gutter:--spacing(6)] lg:[--gutter:--spacing(10)]">
        <TableHead>
          <TableRow>
            <TableHeader>주문번호</TableHeader>
            <TableHeader>주문일</TableHeader>
            <TableHeader>구매자</TableHeader>
            <TableHeader className="text-right">가격</TableHeader>
          </TableRow>
        </TableHead>
        <TableBody>
          {orders.map((order: any) => (
            <TableRow key={order.id} href={order.url} title={`Order #${order.id}`}>
              <TableCell>#{order.id}</TableCell>
              <TableCell className="text-zinc-500">{order.date}</TableCell>
              <TableCell>{order.customer.name}</TableCell>
              <TableCell className="text-right font-medium">{order.amount.krw || `US${order.amount.usd}`}</TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </>
  )
}
