import { Avatar } from '@/components/avatar'
import { Badge } from '@/components/badge'
import { Heading } from '@/components/heading'
import { Input, InputGroup } from '@/components/input'
import { Pagination, 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: '취소 관리',
}

export default async function CancellationPage() {
  const allOrders = await getOrders()
  const cancelledOrders = allOrders.filter((order) => order.isCancelled === true)

  return (
    <>
      <div className="flex flex-col gap-4 sm:mt-10 sm:flex-row sm:items-end sm:justify-between lg:mt-14">
        <Heading>Cancellation</Heading>

        <div className="flex w-full flex-col gap-2 sm:max-w-2xl sm:flex-row sm:items-center sm:justify-end">
          <div className="flex gap-2">
            <div className="flex-1 sm:w-40 sm:flex-none">
              <Select name="cancel_status">
                <option value="all">전체 취소 상태</option>
                <option value="요청 대기">요청 대기</option>
                <option value="취소 완료">취소 완료</option>
                <option value="취소 불가">취소 불가</option>
              </Select>
            </div>

            <div className="flex-1 sm:w-32 sm:flex-none">
              <Select name="product_type">
                <option value="all">전체 유형</option>
                <option value="애셋">애셋</option>
                <option value="텍스처">텍스처</option>
              </Select>
            </div>
          </div>

          <InputGroup className="w-full sm:flex-1">
            <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>상품 유형</TableHeader>
            <TableHeader>상품명</TableHeader>
            <TableHeader className="text-right">결제 금액</TableHeader>
            <TableHeader>상태</TableHeader>
          </TableRow>
        </TableHead>
        <TableBody>
          {cancelledOrders.length > 0 ? (
            cancelledOrders.map((order) => (
              <TableRow key={order.id} href={order.cancellationUrl || order.url} title={`Order #${order.id} 취소 상세`}>
                <TableCell className="font-medium">{order.id}</TableCell>
                {/* <TableCell className="text-zinc-500">{order.date}</TableCell> */}
                <TableCell className="font-medium text-zinc-500">{order.cancellationDate}</TableCell>
                {/* 처리 일자 추가 (값이 없으면 '-' 출력) */}
                <TableCell className="text-zinc-500">
                  {order.cancellationResolvedDate ? order.cancellationResolvedDate : '-'}
                </TableCell>
                <TableCell>
                  <div className="flex items-center gap-2">
                    <Avatar src={undefined} initials={order.customer.name[0]} className="size-6" />
                    <span className="">{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 className="max-w-[150px] truncate">{order.event.name}</span>
                  </div>
                </TableCell>
                <TableCell className="text-right font-semibold ">{order.amount.krw}</TableCell>
                <TableCell>
                  <Badge
                    color={
                      order.cancellationStatus === '취소 완료'
                        ? 'zinc'
                        : order.cancellationStatus === '요청 대기'
                          ? 'amber'
                          : 'rose'
                    }
                  >
                    {order.cancellationStatus}
                  </Badge>
                </TableCell>
              </TableRow>
            ))
          ) : (
            <TableRow>
              <TableCell colSpan={9} className="py-10 text-center text-zinc-500">
                취소 요청 내역이 없습니다.
              </TableCell>
            </TableRow>
          )}
        </TableBody>
      </Table>

      {cancelledOrders.length > 0 && (
        <Pagination className="mt-10">
          <PaginationPrevious href="?page=1" />
          <PaginationList>
            <PaginationPage href="?page=1" current>
              1
            </PaginationPage>
          </PaginationList>
          <PaginationNext href="?page=1" />
        </Pagination>
      )}
    </>
  )
}