'use client';

import { useTransition } from 'react';
import { FoxButton } from '@fox/core/components/fox-button';
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 { SystemMenuNode } from '@/lib/domain/system-menu';
import { deleteSystemMenuAction } from '../_actions';
import styles from './menu-tree.module.scss';

interface MenuRowActionsProps {
  node: SystemMenuNode;
  onEdit: (node: SystemMenuNode) => void;
  onAddChild: (node: SystemMenuNode) => void;
}

export function MenuRowActions({ node, onEdit, onAddChild }: MenuRowActionsProps) {
  const { showAlert, hideAlert, showToast } = useFeedback();
  const [isDeleting, startDeleting] = useTransition();

  function runDelete() {
    hideAlert();
    startDeleting(async () => {
      const result = await deleteSystemMenuAction(node.id);
      if (result.status === 'error') {
        showToast({ variant: 'danger', message: result.message });
        return;
      }
      showToast({ variant: 'success', message: '메뉴를 삭제했습니다.' });
    });
  }

  function confirmDelete() {
    showAlert({
      variant: 'danger',
      title: '메뉴를 삭제하시겠습니까?',
      message:
        node.children.length > 0
          ? `"${node.name}" 아래에 하위 메뉴 ${node.children.length}개가 있습니다. 삭제 후에는 되돌릴 수 없습니다.`
          : `"${node.name}" 메뉴를 삭제합니다. 삭제 후에는 되돌릴 수 없습니다.`,
      actions: (
        <FoxButtonGroup size="md">
          <FoxButton type="default" size="md" label="취소" onAction={hideAlert} />
          <FoxButton type="primary" size="md" label="삭제" onAction={runDelete} />
        </FoxButtonGroup>
      ),
    });
  }

  return (
    <div className={styles.actions}>
      <FoxIconButton
        type="default"
        size="sm"
        icon={<i className="fox-ico fox-ico-PencilSimple" aria-hidden="true" />}
        label="수정"
        onAction={() => onEdit(node)}
      />
      <FoxIconButton
        type="default"
        size="sm"
        icon={<i className="fox-ico fox-ico-Plus" aria-hidden="true" />}
        label="하위 메뉴 추가"
        onAction={() => onAddChild(node)}
      />
      <FoxIconButton
        type="default"
        size="sm"
        icon={<i className="fox-ico fox-ico-Trash" aria-hidden="true" />}
        label={isDeleting ? '삭제 중' : '삭제'}
        disabled={isDeleting}
        onAction={confirmDelete}
      />
    </div>
  );
}