import React, { useMemo } from 'react';
import { Calendar, Search, ChevronLeft, ChevronRight } from 'lucide-react';
import { formatCurrency } from '@/utils/formatters';
import { formatMonthForDisplay } from '@/hooks/transactions/dateUtils';

interface TransactionsHeaderProps {
  selectedMonth: string;
  searchQuery: string;
  setSearchQuery: (query: string) => void;
  handlePrevMonth: () => void;
  handleNextMonth: () => void;
  budgetData: any;
  totalExpenses: number;
  isDisabled: boolean;
}

const TransactionsHeader: React.FC<TransactionsHeaderProps> = ({
  selectedMonth,
  searchQuery,
  setSearchQuery,
  handlePrevMonth,
  handleNextMonth,
  budgetData,
  totalExpenses,
  isDisabled
}) => {
  // 월 표시 형식 변환 (2024-04 -> 2024년 04월)
  const displayMonth = useMemo(() => 
    formatMonthForDisplay(selectedMonth), 
    [selectedMonth]
  );
  
  // 예산 정보가 없는 경우 기본값 사용
  const targetAmount = budgetData?.monthly?.targetAmount || 0;
  
  // 디버깅을 위한 로그
  React.useEffect(() => {
    console.log('TransactionsHeader 렌더링:', { 
      selectedMonth, 
      displayMonth, 
      totalExpenses,
      targetAmount
    });
  }, [selectedMonth, displayMonth, totalExpenses, targetAmount]);
  
  return (
    <header className="py-4">
      <h1 className="font-bold neuro-text mb-3 text-xl">지출 내역</h1>
      
      {/* Search */}
      <div className="neuro-pressed mb-5 flex items-center px-4 py-3 rounded-xl">
        <Search size={18} className="text-gray-500 mr-2" />
        <input 
          type="text" 
          placeholder="지출 검색..." 
          className="bg-transparent flex-1 outline-none text-sm" 
          value={searchQuery} 
          onChange={e => setSearchQuery(e.target.value)} 
          disabled={isDisabled} 
        />
      </div>
      
      {/* Month Selector */}
      <div className="flex items-center justify-between mb-5">
        <button 
          className="neuro-flat p-2 rounded-full" 
          onClick={handlePrevMonth} 
          disabled={isDisabled}
        >
          <ChevronLeft size={20} />
        </button>
        
        <div className="flex items-center gap-2">
          <Calendar size={18} className="text-neuro-income" />
          <span className="font-medium text-lg">{displayMonth}</span>
        </div>
        
        <button 
          className="neuro-flat p-2 rounded-full" 
          onClick={handleNextMonth} 
          disabled={isDisabled}
        >
          <ChevronRight size={20} />
        </button>
      </div>
      
      {/* Summary */}
      <div className="grid grid-cols-2 gap-4 mb-8">
        <div className="neuro-card">
          <p className="text-sm text-gray-500 mb-1">총 예산</p>
          <p className="font-bold text-neuro-income text-base">
            {formatCurrency(targetAmount)}
          </p>
        </div>
        <div className="neuro-card">
          <p className="text-sm text-gray-500 mb-1">총 지출</p>
          <p className="font-bold text-neuro-income text-base">
            {formatCurrency(totalExpenses)}
          </p>
        </div>
      </div>
    </header>
  );
};

export default React.memo(TransactionsHeader);