import { Stat } from '@/app/stat'
import { Avatar } from '@/components/avatar'
import { Divider } from '@/components/divider'
import { Heading, Subheading } from '@/components/heading'
import { Input, InputGroup } from '@/components/input'
import {
  Pagination,
  PaginationGap,
  PaginationList,
  PaginationNext,
  PaginationPage,
  PaginationPrevious,
} from '@/components/pagination'
import { Select } from '@/components/select'
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/table'
import { getOrders } from '@/data'
import { MagnifyingGlassIcon } from '@heroicons/react/16/solid'
import type { Metadata } from 'next'

export const metadata: Metadata = {
  title: 'Orders',
}

export default async function Orders() {
  let orders = await getOrders()

  return (
    <>
      <div className="mt-8 flex items-end justify-between">
        <Subheading>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>
          </Select>
        </div>
      </div>
      <div className="mt-4 grid gap-8 sm:grid-cols-2 lg:grid-cols-4 xl:grid-cols-4">
        <Stat title="총 판매금액(원)" value="2,600,000" change="+3.5%" />
        <Stat title="애셋 판매(원)" value="1,200,000" change="-0.5%" />
        <Stat title="텍스처 판매(원)" value="1,400,000" change="+4.5%" />
        <Stat title="총 주문(건)" value="1,030" change="+1.5%" />
      </div>
      <Divider className="mt-10" />
      <div className="mt-14 flex items-end justify-between gap-4">
        <Heading>Orders</Heading>
        <div className="grid grid-cols-2 gap-2">
          <Select name="order_type">
            <option value="all">전체 유형</option>
            <option value="assets">애셋</option>
            <option value="textures">텍스처</option>
          </Select>
          <InputGroup>
            <MagnifyingGlassIcon />
            <Input name="search" placeholder="검색&hellip;" aria-label="Search" />
          </InputGroup>
        </div>
      </div>
      <Table className="mt-8 [--gutter:--spacing(6)] lg:[--gutter:--spacing(10)]">
        <TableHead>
          <TableRow>
            <TableHeader>주문 번호</TableHeader>
            <TableHeader>주문 일자</TableHeader>
            <TableHeader>주문자</TableHeader>
            <TableHeader>상품 유형</TableHeader>
            <TableHeader>상품명</TableHeader>
            <TableHeader className="text-right">결제 금액</TableHeader>
          </TableRow>
        </TableHead>
        <TableBody>
          {orders.map((order) => (
            <TableRow key={order.id} href={order.url} title={`Order #${order.id}`}>
              <TableCell>{order.id}</TableCell>
              <TableCell className="text-zinc-500">{order.date}</TableCell>
              <TableCell>
                <div className="flex items-center gap-2">
                  <Avatar src={order.event.thumbUser} className="size-6" />
                  <span>{order.customer.name}</span>
                </div>
              </TableCell>
              <TableCell className="text-zinc-500">{order.event.productType}</TableCell>
              <TableCell>
                <div className="flex items-center gap-2">
                  <Avatar src={order.event.thumbUrl} className="size-6" />
                  <span>{order.event.name}</span>
                </div>
              </TableCell>
              <TableCell className="text-right">{order.amount.krw}</TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
      <Pagination className="mt-10">
        <PaginationPrevious href="?page=2" />
        <PaginationList>
          <PaginationPage href="?page=1">1</PaginationPage>
          <PaginationPage href="?page=2">2</PaginationPage>
          <PaginationPage href="?page=3" current>
            3
          </PaginationPage>
          <PaginationPage href="?page=4">4</PaginationPage>
          <PaginationGap />
          <PaginationPage href="?page=65">65</PaginationPage>
          <PaginationPage href="?page=66">66</PaginationPage>
        </PaginationList>
        <PaginationNext href="?page=4" />
      </Pagination>
    </>
  )
}
