
import React, { useState, useEffect, useRef } from 'react';
import { zodResolver } from '@hookform/resolvers/zod';
import { useForm } from 'react-hook-form';
import { Transaction } from '@/components/TransactionCard';
import { useBudget } from '@/contexts/BudgetContext';
import { 
  Dialog, 
  DialogContent, 
  DialogHeader, 
  DialogTitle, 
  DialogFooter,
  DialogClose,
  DialogDescription
} from '@/components/ui/dialog';
import { Button } from '@/components/ui/button';
import { Form } from '@/components/ui/form';
import { toast } from '@/components/ui/use-toast';
import TransactionFormFields, { 
  transactionFormSchema, 
  formatWithCommas,
  TransactionFormValues
} from './transaction/TransactionFormFields';
import TransactionDeleteAlert from './transaction/TransactionDeleteAlert';
import { useIsMobile } from '@/hooks/use-mobile';

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

/**
 * 트랜잭션 편집 다이얼로그 - 안정성 및 UX 개선 버전
 */
const TransactionEditDialog: React.FC<TransactionEditDialogProps> = ({
  transaction,
  open,
  onOpenChange,
  onSave,
  onDelete
}) => {
  const { updateTransaction, deleteTransaction } = useBudget();
  const isMobile = useIsMobile();
  const [isSubmitting, setIsSubmitting] = useState(false);
  
  // 작업 중첩 방지를 위한 참조
  const isProcessingRef = useRef(false);

  // 폼 설정
  const form = useForm<TransactionFormValues>({
    resolver: zodResolver(transactionFormSchema),
    defaultValues: {
      title: transaction.title,
      amount: formatWithCommas(transaction.amount.toString()),
      category: transaction.category as '식비' | '생활비' | '교통비',
    },
  });
  
  // 다이얼로그가 열릴 때 폼 값 초기화
  useEffect(() => {
    if (open) {
      form.reset({
        title: transaction.title,
        amount: formatWithCommas(transaction.amount.toString()),
        category: transaction.category as '식비' | '생활비' | '교통비',
      });
    }
  }, [open, transaction, form]);

  // 저장 처리 함수
  const handleSubmit = async (values: TransactionFormValues) => {
    // 중복 제출 방지
    if (isProcessingRef.current) return;
    isProcessingRef.current = true;
    setIsSubmitting(true);
    
    try {
      // 쉼표 제거 및 숫자로 변환
      const cleanAmount = values.amount.replace(/,/g, '');
      
      const updatedTransaction = {
        ...transaction,
        title: values.title,
        amount: Number(cleanAmount),
        category: values.category,
      };
      
      // 컨텍스트를 통해 트랜잭션 업데이트
      updateTransaction(updatedTransaction);
      
      // 부모 컴포넌트의 onSave 콜백이 있다면 호출
      if (onSave) {
        onSave(updatedTransaction);
      }
      
      // 다이얼로그 닫기
      onOpenChange(false);
      
      // 토스트 메시지
      toast({
        title: "지출이 수정되었습니다",
        description: `${values.title} 항목이 ${formatWithCommas(cleanAmount)}원으로 수정되었습니다.`,
      });
    } catch (error) {
      console.error('트랜잭션 업데이트 오류:', error);
      toast({
        title: "저장 실패",
        description: "지출 항목을 저장하는데 문제가 발생했습니다.",
        variant: "destructive"
      });
    } finally {
      // 상태 초기화
      setIsSubmitting(false);
      isProcessingRef.current = false;
    }
  };

  // 삭제 처리 함수
  const handleDelete = async (): Promise<boolean> => {
    // 중복 처리 방지
    if (isProcessingRef.current) return false;
    isProcessingRef.current = true;
    
    try {
      // 다이얼로그 닫기를 먼저 수행 (UI 블로킹 방지)
      onOpenChange(false);
      
      // 부모 컴포넌트의 onDelete 콜백이 있다면 호출
      if (onDelete) {
        const result = await onDelete(transaction.id);
        isProcessingRef.current = false;
        return result;
      }
      
      // 부모 컴포넌트에서 처리하지 않은 경우 기본 처리
      deleteTransaction(transaction.id);
      isProcessingRef.current = false;
      return true;
    } catch (error) {
      console.error('트랜잭션 삭제 중 오류:', error);
      toast({
        title: "삭제 실패",
        description: "지출 항목을 삭제하는데 문제가 발생했습니다.",
        variant: "destructive"
      });
      isProcessingRef.current = false;
      return false;
    }
  };
  
  return (
    <Dialog open={open} onOpenChange={(newOpen) => {
      // 제출 중이면 닫기 방지
      if (isSubmitting && !newOpen) return;
      onOpenChange(newOpen);
    }}>
      <DialogContent className={`sm:max-w-md mx-auto ${isMobile ? 'rounded-xl overflow-hidden' : ''}`}>
        <DialogHeader>
          <DialogTitle>지출 수정</DialogTitle>
          <DialogDescription>
            지출 내역을 수정하거나 삭제할 수 있습니다.
          </DialogDescription>
        </DialogHeader>
        
        <Form {...form}>
          <form onSubmit={form.handleSubmit(handleSubmit)} className="space-y-4">
            <TransactionFormFields form={form} />
            
            <DialogFooter className="flex justify-between gap-2 mt-6">
              <TransactionDeleteAlert onDelete={handleDelete} />
              <div className="flex gap-2">
                <DialogClose asChild>
                  <Button 
                    type="button" 
                    variant="outline"
                    disabled={isSubmitting}
                  >
                    취소
                  </Button>
                </DialogClose>
                <Button 
                  type="submit"
                  className="bg-neuro-income text-white hover:bg-neuro-income/90"
                  disabled={isSubmitting}
                >
                  {isSubmitting ? '저장 중...' : '저장'}
                </Button>
              </div>
            </DialogFooter>
          </form>
        </Form>
      </DialogContent>
    </Dialog>
  );
};

export default TransactionEditDialog;
