import React, { useState } from 'react';
import { cn } from '@/lib/utils';
import TransactionEditDialog from './TransactionEditDialog';
import TransactionIcon from './transaction/TransactionIcon';
import TransactionDetails from './transaction/TransactionDetails';
import TransactionAmount from './transaction/TransactionAmount';
import { Transaction } from '@/contexts/budget/types';

interface TransactionCardProps {
  transaction: Transaction;
  onUpdate?: (updatedTransaction: Transaction) => void;
  onDelete?: (id: string) => Promise<boolean> | boolean; // 타입 변경됨: boolean 또는 Promise<boolean> 반환
}

const TransactionCard: React.FC<TransactionCardProps> = ({ 
  transaction,
  onDelete, 
}) => {
  const [isEditDialogOpen, setIsEditDialogOpen] = useState(false);
  const { title, amount, date, category } = transaction;
  
  // 삭제 핸들러 - 인자로 받은 onDelete가 없거나 타입이 맞지 않을 때 기본 함수 제공
  const handleDelete = async (id: string): Promise<boolean> => {
    try {
      if (onDelete) {
        return await onDelete(id);
      }
      console.log('삭제 핸들러가 제공되지 않았습니다');
      return false;
    } catch (error) {
      console.error('트랜잭션 삭제 처리 중 오류:', error);
      return false;
    }
  };
  
  return (
    <>
      <div 
        className="neuro-flat p-4 transition-all duration-300 hover:shadow-neuro-convex animate-scale-in cursor-pointer"
        onClick={() => setIsEditDialogOpen(true)}
      >
        <div className="flex items-center justify-between">
          <div className="flex items-center gap-3">
            <TransactionIcon category={category} />
            <TransactionDetails title={title} date={date} />
          </div>
          
          <TransactionAmount amount={amount} />
        </div>
      </div>

      <TransactionEditDialog 
        transaction={transaction}
        open={isEditDialogOpen}
        onOpenChange={setIsEditDialogOpen}
        onDelete={handleDelete} // 래핑된 핸들러 사용
      />
    </>
  );
};

export default TransactionCard;
// Transaction 타입을 context에서 직접 다시 내보냅니다
export type { Transaction } from '@/contexts/budget/types';