'use client';

import { useState } from 'react';
import { FoxButtonGroup } from '@fox/core/components/fox-button-group';
import { FoxIconButton } from '@fox/core/components/fox-icon-button';
import { useFeedback } from '@/app/_hooks/use-feedback';
import type { Merchant, MerchantCodeTables } from '@/lib/domain/merchant';
import { MerchantFormModal } from './merchant-form-modal';

interface MerchantRowActionsProps {
  merchant: Merchant;
  codeTables: MerchantCodeTables;
}

/**
 * 수정은 모달을 열어 고친다(`PUT /api/v1/mngr/voc`).
 *
 * TODO(백엔드): 삭제 API가 없다(`/api/v1/mngr/voc/{frcsNo}` DELETE는 가맹몰 상세를 지운다). 시안의
 * 자리는 두되 눌러도 할 수 있는 일이 없어 사유를 알린다.
 *
 * 어느 행의 버튼인지는 각 버튼 라벨이 말한다 — 감싼 요소의 `aria-label`은 의미 없는
 * 요소에 붙어 읽히지 않을 수 있다(공통코드 행과 같은 방식).
 */
export function MerchantRowActions({ merchant, codeTables }: MerchantRowActionsProps) {
  const { showToast } = useFeedback();
  const [isDetailOpen, setIsDetailOpen] = useState(false);

  return (
    <>
      <FoxButtonGroup size="sm" align="center">
        <FoxIconButton
          type="default"
          size="sm"
          icon={<i className="fox-ico fox-ico-PencilSimple" aria-hidden="true" />}
          label={`${merchant.name} 수정`}
          onAction={() => setIsDetailOpen(true)}
        />
        <FoxIconButton
          type="default"
          size="sm"
          icon={<i className="fox-ico fox-ico-Trash" aria-hidden="true" />}
          label={`${merchant.name} 삭제`}
          onAction={() =>
            showToast({
              variant: 'warning',
              message: '가맹점 삭제 기능은 백엔드 준비 중입니다.',
            })
          }
        />
      </FoxButtonGroup>

      {isDetailOpen && (
        <MerchantFormModal
          merchant={merchant}
          codeTables={codeTables}
          onClose={() => setIsDetailOpen(false)}
        />
      )}
    </>
  );
}