'use client'

import { Button } from '@/components/button'
import { Checkbox, CheckboxField } from '@/components/checkbox'
import { Dialog, DialogActions, DialogBody, DialogDescription, DialogTitle } from '@/components/dialog'
import { Description, Field, FieldGroup, Label } from '@/components/fieldset'
import { Input } from '@/components/input'
import { Textarea } from '@/components/textarea'
import { useState } from 'react'

export function RejectRefund({
  amount,
  cancellationReason,
  ...props
}: {
  amount: string
  cancellationReason?: string
} & React.ComponentPropsWithoutRef<typeof Button>) {
  let [isOpen, setIsOpen] = useState(false)

  return (
    <>
      <Button type="button" onClick={() => setIsOpen(true)} {...props} />
      <Dialog open={isOpen} onClose={setIsOpen}>
        <DialogTitle>Reject Refund</DialogTitle>
        <DialogDescription>
          고객의 취소 요청을 거부하는 사유를 입력해 주세요. 알림 옵션을 선택하면 고객에게 이메일이 발송됩니다.
        </DialogDescription>
        <DialogBody>
          <FieldGroup>
            <Field>
              <Label>Amount</Label>
              <Input name="amount" defaultValue={amount} placeholder="$0.00" autoFocus />
            </Field>

            <Field>
              <Label>Cancellation Reason (고객 취소 사유)</Label>
              <Input
                name="reason"
                defaultValue={cancellationReason || '사유 없음'}
                readOnly
                className="bg-zinc-50 text-zinc-500"
              />
            </Field>

            {/* 관리자 거부 사유 입력란 추가 */}
            <Field>
              <Label>Reject Reason (취소 거부 사유)</Label>
              <Textarea name="reject_reason" placeholder="관리자 거부/반려 사유를 상세히 입력해 주세요..." rows={4} />
            </Field>

            <CheckboxField>
              <Checkbox name="notify" defaultChecked />
              <Label>Notify customer</Label>
              <Description>이메일 알림이 고객에게 발송됩니다.</Description>
            </CheckboxField>
          </FieldGroup>
        </DialogBody>
        <DialogActions>
          <Button plain onClick={() => setIsOpen(false)}>
            Cancel
          </Button>
          {/* 완료 버튼 텍스트를 Refund에서 Reject로 변경 */}
          <Button onClick={() => setIsOpen(false)}>Reject</Button>
        </DialogActions>
      </Dialog>
    </>
  )
}
