'use client'

import { Badge } from '@/components/badge'
import { Button } from '@/components/button'
import { Dialog, DialogActions, DialogBody, DialogDescription, DialogTitle } from '@/components/dialog'
import { Divider } from '@/components/divider'
import { Dropdown, DropdownButton, DropdownItem, DropdownMenu } from '@/components/dropdown'
import { Field, Label } from '@/components/fieldset'
import { Heading } from '@/components/heading'
import { Input, InputGroup } from '@/components/input'
import { Link } from '@/components/link'
import {
  Pagination,
  PaginationGap,
  PaginationList,
  PaginationNext,
  PaginationPage,
  PaginationPrevious,
} from '@/components/pagination'
import { Select } from '@/components/select'
import { EllipsisVerticalIcon, MagnifyingGlassIcon } from '@heroicons/react/16/solid'
import { useState } from 'react'

export default function ProductsClient({ products }: { products: any[] }) {
  let [isOpen, setIsOpen] = useState(false)
  let [selectedProduct, setSelectedProduct] = useState<any>(null)

  const handleOpenDialog = (product: any) => {
    setSelectedProduct(product)
    setIsOpen(true)
  }

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

        <div className="flex w-full flex-col gap-2 sm:max-w-4xl sm:flex-row sm:items-center sm:justify-end">
          <div className="flex gap-2">
            <div className="flex-1 sm:w-32 sm:flex-none">
              <Select name="sort_by_types">
                <option value="all">전체 유형</option>
                <option value="assets">애셋</option>
                <option value="textures">텍스처</option>
              </Select>
            </div>
            <div className="flex-1 sm:w-32 sm:flex-none">
              <Select name="sort_by_sale" defaultValue="on_sale">
                <option value="all">전체 판매 상태</option>
                <option value="on_sale">판매 중</option>
                <option value="non_sale">미판매</option>
              </Select>
            </div>
          </div>

          <div className="flex-none sm:w-40">
            <Select name="sort_by_license" defaultValue="license_04">
              <option value="all">전체 라이선스</option>
              <option value="license_01">단순 읽기</option>
              <option value="license_02">부분 추출</option>
              <option value="license_03">전체 추출</option>
              <option value="license_04">부분 변경</option>
              <option value="license_05">전체 변경</option>
            </Select>
          </div>

          <InputGroup className="w-full sm:flex-1">
            <MagnifyingGlassIcon />
            <Input name="search" placeholder="상품명 검색&hellip;" aria-label="Search" />
          </InputGroup>
        </div>
      </div>

      {/* 상품 리스트 */}
      <ul className="mt-10">
        {products.map((product, index) => (
          <li key={product.id}>
            <Divider soft={index > 0} />
            <div className="flex items-center justify-between">
              <div className="flex gap-6 py-6">
                <div className="w-32 shrink-0">
                  <Link href={product.url} aria-hidden="true">
                    <img
                      className="aspect-3/2 rounded-lg object-cover shadow-sm"
                      src={product.imgUrl}
                      alt={product.name}
                    />
                  </Link>
                </div>
                <div className="space-y-1.5">
                  <div className="text-xs/6 text-zinc-600">
                    <Badge color="lime">{product.productType}</Badge>
                  </div>
                  <div className="text-base/6 font-semibold">
                    <Link href={product.url}>{product.name}</Link>
                  </div>
                  <div>
                    <span className="text-xs/6 text-zinc-500">{product.licenseType} 라이선스</span>
                  </div>
                </div>
              </div>

              <div className="flex items-center gap-4">
                <Badge
                  className="max-sm:hidden"
                  color={product.status === '판매 중' ? 'sky' : product.status === '판매 보류' ? 'amber' : 'zinc'}
                >
                  {product.status}
                </Badge>

                <Dropdown>
                  <DropdownButton plain aria-label="More options">
                    <EllipsisVerticalIcon />
                  </DropdownButton>
                  <DropdownMenu anchor="bottom end">
                    {product.status === '판매 보류' ? (
                      <DropdownItem onClick={() => {}}>보류 해제</DropdownItem>
                    ) : (
                      <DropdownItem onClick={() => handleOpenDialog(product)}>판매 보류 등록</DropdownItem>
                    )}
                  </DropdownMenu>
                </Dropdown>
              </div>
            </div>
          </li>
        ))}
      </ul>

      {/* 판매 보류 다이얼로그 */}
      <Dialog open={isOpen} onClose={setIsOpen}>
        <DialogTitle>판매 보류 등록</DialogTitle>
        <DialogDescription>{selectedProduct?.name} 상품의 판매 보류 지정 사유를 입력하세요.</DialogDescription>
        <DialogBody>
          <Field>
            <Label>등록 사유</Label>
            <Input name="ban" placeholder="사유를 입력해주세요..." />
          </Field>
        </DialogBody>
        <DialogActions>
          <Button plain onClick={() => setIsOpen(false)}>
            취소
          </Button>
          <Button onClick={() => setIsOpen(false)}>등록</Button>
        </DialogActions>
      </Dialog>

      {/* 페이지네이션 */}
      <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>
    </>
  )
}
