import React from 'react';
import { Transaction } from '@/components/TransactionCard';
import { 
  Dialog, 
  DialogContent, 
  DialogHeader, 
  DialogTitle,
  DialogDescription
} from '@/components/ui/dialog';
import { useIsMobile } from '@/hooks/use-mobile';
import { useTransactionEdit } from './transaction/useTransactionEdit';
import TransactionEditForm from './transaction/TransactionEditForm';

interface TransactionEditDialogProps {
  transaction: Transaction;
  open: boolean;
  onOpenChange: (open: boolean) => void;
  onSave?: (updatedTransaction: Transaction) => void;
  onDelete?: (id: string) => Promise<boolean> | boolean;
}

/**
 * 트랜잭션 편집 다이얼로그 - 리팩토링 후 간소화된 버전
 */
const TransactionEditDialog: React.FC<TransactionEditDialogProps> = ({
  transaction,
  open,
  onOpenChange,
  onSave,
  onDelete
}) => {
  const isMobile = useIsMobile();
  const { form, isSubmitting, handleSubmit, handleDelete } = useTransactionEdit(
    transaction,
    open,
    onOpenChange,
    onSave,
    onDelete
  );
  
  return (
    <Dialog open={open} onOpenChange={(newOpen) => {
      // 제출 중이면 닫기 방지
      if (isSubmitting && !newOpen) return;
      onOpenChange(newOpen);
    }}>
      <DialogContent className={`sm:max-w-md mx-auto bg-white ${isMobile ? 'rounded-xl overflow-hidden' : ''}`}>
        <DialogHeader>
          <DialogTitle>지출 수정</DialogTitle>
          <DialogDescription>
            지출 내역을 수정하거나 삭제할 수 있습니다.
          </DialogDescription>
        </DialogHeader>
        
        <TransactionEditForm
          form={form}
          onSubmit={handleSubmit}
          onDelete={handleDelete}
          isSubmitting={isSubmitting}
        />
      </DialogContent>
    </Dialog>
  );
};

export default TransactionEditDialog;