import React, { useState, useEffect } from 'react';
import { PlusIcon } from 'lucide-react';
import { Dialog, DialogContent, DialogHeader, DialogTitle } from './ui/dialog';
import { toast } from '@/components/ui/use-toast';
import { supabase } from '@/lib/supabase';
import { isSyncEnabled } from '@/utils/syncUtils';
import ExpenseForm, { ExpenseFormValues } from './expenses/ExpenseForm';

const AddTransactionButton = () => {
  const [showExpenseDialog, setShowExpenseDialog] = useState(false);
  const [userId, setUserId] = useState<string | null>(null);
  
  useEffect(() => {
    // 현재 로그인한 사용자 가져오기
    const getUser = async () => {
      const { data: { user } } = await supabase.auth.getUser();
      setUserId(user?.id || null);
    };
    
    getUser();
  }, []);
  
  // Format number with commas
  const formatWithCommas = (value: string): string => {
    // Remove commas first to avoid duplicates when typing
    const numericValue = value.replace(/[^0-9]/g, '');
    return numericValue.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
  };
  
  const onSubmit = async (data: ExpenseFormValues) => {
    // Remove commas before processing the amount
    const numericAmount = data.amount.replace(/,/g, '');
    
    // 현재 날짜와 시간을 가져옵니다
    const now = new Date();
    const formattedDate = `오늘, ${now.getHours()}:${now.getMinutes() < 10 ? '0' + now.getMinutes() : now.getMinutes()} ${now.getHours() >= 12 ? 'PM' : 'AM'}`;
    
    const newExpense = {
      id: Date.now().toString(),
      title: data.title,
      amount: parseInt(numericAmount),
      date: formattedDate,
      category: data.category,
      type: 'expense'
    };
    
    // 로컬 스토리지에서 기존 지출 내역을 가져옵니다
    const existingTransactionsJSON = localStorage.getItem('transactions');
    let existingTransactions = existingTransactionsJSON ? JSON.parse(existingTransactionsJSON) : [];
    
    // 새 지출을 추가하고 다시 저장합니다
    existingTransactions = [newExpense, ...existingTransactions];
    localStorage.setItem('transactions', JSON.stringify(existingTransactions));
    
    // 동기화가 활성화되어 있고 사용자가 로그인되어 있다면 Supabase에도 저장
    if (isSyncEnabled() && userId) {
      try {
        const { error } = await supabase.from('transactions').insert({
          user_id: userId,
          title: data.title,
          amount: parseInt(numericAmount),
          date: formattedDate,
          category: data.category,
          type: 'expense',
          transaction_id: newExpense.id
        });
        
        if (error) throw error;
      } catch (error) {
        console.error('Supabase에 지출 추가 실패:', error);
        // 실패해도 로컬에는 저장되어 있으므로 사용자에게 알리지 않음
      }
    }
    
    // 다이얼로그를 닫습니다
    setShowExpenseDialog(false);
    
    // 사용자에게 알림을 표시합니다
    toast({
      title: "지출이 추가되었습니다",
      description: `${data.title} 항목이 ${formatWithCommas(numericAmount)}원으로 등록되었습니다.`,
    });
  };
  
  return (
    <>
      <div className="fixed bottom-24 right-6 z-20">
        <button 
          className="p-4 rounded-full transition-all duration-300 bg-neuro-income shadow-neuro-flat hover:shadow-neuro-convex text-white animate-pulse-subtle"
          onClick={() => setShowExpenseDialog(true)}
          aria-label="지출 추가"
        >
          <PlusIcon size={24} />
        </button>
      </div>
      
      <Dialog open={showExpenseDialog} onOpenChange={setShowExpenseDialog}>
        <DialogContent className="sm:max-w-md">
          <DialogHeader>
            <DialogTitle>지출 추가</DialogTitle>
          </DialogHeader>
          <ExpenseForm 
            onSubmit={onSubmit} 
            onCancel={() => setShowExpenseDialog(false)} 
          />
        </DialogContent>
      </Dialog>
    </>
  );
};

export default AddTransactionButton;