
import React, { useState, useEffect } from 'react';
import { FormField, FormItem, FormLabel, FormControl, FormMessage } from '@/components/ui/form';
import { Input } from '@/components/ui/input';
import { UseFormReturn } from 'react-hook-form';
import { z } from 'zod';
import { categoryIcons, EXPENSE_CATEGORIES } from '@/constants/categoryIcons';
import { Badge } from '@/components/ui/badge';
import { getPersonalizedTitleSuggestions } from '@/utils/userTitlePreferences';
import { Separator } from '@/components/ui/separator';
import { CreditCard, Banknote } from 'lucide-react';

// Form schema for validation - 카테고리를 4개로 확장 및 지출 방법 추가
export const transactionFormSchema = z.object({
  title: z.string().min(1, '제목을 입력해주세요'),
  amount: z.string().min(1, '금액을 입력해주세요'),
  category: z.enum(['음식', '쇼핑', '교통', '기타']),
  paymentMethod: z.enum(['신용카드', '현금']).default('신용카드'),
});

export type TransactionFormValues = z.infer<typeof transactionFormSchema>;

// Function to format number with commas
export const formatWithCommas = (value: string) => {
  const numericValue = value.replace(/[^0-9]/g, '');
  return numericValue.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
};

interface TransactionFormFieldsProps {
  form: UseFormReturn<TransactionFormValues>;
}

const TransactionFormFields: React.FC<TransactionFormFieldsProps> = ({ form }) => {
  // 상태 관리를 추가합니다
  const [showTitleSuggestions, setShowTitleSuggestions] = useState(false);
  const [showPaymentMethod, setShowPaymentMethod] = useState(false);
  
  const handleAmountChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const formattedValue = formatWithCommas(e.target.value);
    form.setValue('amount', formattedValue);
  };

  // 현재 선택된 카테고리 가져오기
  const selectedCategory = form.watch('category');
  
  // 현재 선택된 지불 방법 가져오기
  const selectedPaymentMethod = form.watch('paymentMethod');
  
  // 선택된 카테고리에 대한 개인화된 제목 제안 목록 상태
  const [titleSuggestions, setTitleSuggestions] = useState<string[]>([]);
  
  // 카테고리가 변경될 때마다 개인화된 제목 목록 업데이트 및 제목 추천 표시
  useEffect(() => {
    if (selectedCategory) {
      const suggestions = getPersonalizedTitleSuggestions(selectedCategory);
      setTitleSuggestions(suggestions);
      // 약간의 지연 후 제목 추천 표시 (애니메이션을 위해)
      setTimeout(() => {
        setShowTitleSuggestions(true);
      }, 100);
    } else {
      setShowTitleSuggestions(false);
    }
  }, [selectedCategory]);

  // 제안된 제목 클릭 시 제목 필드에 설정
  const handleTitleSuggestionClick = (suggestion: string) => {
    form.setValue('title', suggestion);
  };

  return (
    <>
      {/* 카테고리 필드를 첫 번째로 배치 */}
      <FormField
        control={form.control}
        name="category"
        render={({ field }) => (
          <FormItem>
            <FormLabel>카테고리</FormLabel>
            <div className="grid grid-cols-4 gap-2">
              {EXPENSE_CATEGORIES.map((category) => (
                <div
                  key={category}
                  className={`flex items-center gap-2 p-2 rounded-md cursor-pointer border ${
                    field.value === category 
                      ? 'border-neuro-income bg-neuro-income/10' 
                      : 'border-gray-200'
                  }`}
                  onClick={() => form.setValue('category', category as any)}
                >
                  <div className="p-1 rounded-full">
                    {categoryIcons[category]}
                  </div>
                  <span>{category}</span>
                </div>
              ))}
            </div>
            <FormMessage />
          </FormItem>
        )}
      />
      
      {/* 카테고리별 제목 제안 - 카테고리 선택 후에만 표시 */}
      {selectedCategory && (
        <div 
          className={`mt-1 mb-3 overflow-hidden transition-all duration-300 ease-out ${
            showTitleSuggestions 
              ? 'max-h-24 opacity-100 translate-y-0' 
              : 'max-h-0 opacity-0 -translate-y-4'
          }`}
        >
          {titleSuggestions.length > 0 && (
            <div className="flex flex-wrap gap-2">
              {titleSuggestions.map((suggestion) => (
                <Badge 
                  key={suggestion}
                  variant="outline"
                  className="cursor-pointer hover:bg-neuro-income/10 transition-colors px-3 py-1"
                  onClick={() => handleTitleSuggestionClick(suggestion)}
                >
                  {suggestion}
                </Badge>
              ))}
            </div>
          )}
        </div>
      )}
      
      {/* 제목 필드를 두 번째로 배치 */}
      <FormField
        control={form.control}
        name="title"
        render={({ field }) => (
          <FormItem>
            <FormLabel>제목</FormLabel>
            <FormControl>
              <Input placeholder="제목을 입력하세요" {...field} />
            </FormControl>
            <FormMessage />
          </FormItem>
        )}
      />
      
      {/* 금액 필드를 세 번째로 배치 */}
      <FormField
        control={form.control}
        name="amount"
        render={({ field }) => (
          <FormItem>
            <FormLabel>금액</FormLabel>
            <FormControl>
              <Input 
                placeholder="금액을 입력하세요" 
                {...field} 
                onChange={handleAmountChange}
                onFocus={() => setShowPaymentMethod(true)}
              />
            </FormControl>
            <FormMessage />
          </FormItem>
        )}
      />

      {/* 구분선과 지출 방법 필드는 금액 입력 시에만 표시 */}
      <div 
        className={`overflow-hidden transition-all duration-300 ease-out ${
          showPaymentMethod 
            ? 'max-h-36 opacity-100 translate-y-0' 
            : 'max-h-0 opacity-0 -translate-y-4'
        }`}
      >
        <Separator className="my-4" />
        
        {/* 지출 방법 필드 - 버튼 형식으로 변경 및 텍스트 크기 축소 */}
        <FormField
          control={form.control}
          name="paymentMethod"
          render={({ field }) => (
            <FormItem>
              <FormLabel>지출 방법</FormLabel>
              <FormControl>
                <div className="grid grid-cols-2 gap-3">
                  <div
                    className={`flex items-center justify-center gap-2 p-2 rounded-md cursor-pointer border transition-colors ${
                      field.value === '신용카드'
                        ? 'border-neuro-income bg-neuro-income/10'
                        : 'border-gray-200 hover:bg-gray-50'
                    }`}
                    onClick={() => form.setValue('paymentMethod', '신용카드')}
                  >
                    <CreditCard size={16} className="text-neuro-income" />
                    <span className="text-xs">신용카드</span>
                  </div>
                  <div
                    className={`flex items-center justify-center gap-2 p-2 rounded-md cursor-pointer border transition-colors ${
                      field.value === '현금'
                        ? 'border-neuro-income bg-neuro-income/10'
                        : 'border-gray-200 hover:bg-gray-50'
                    }`}
                    onClick={() => form.setValue('paymentMethod', '현금')}
                  >
                    <Banknote size={16} className="text-neuro-income" />
                    <span className="text-xs">현금</span>
                  </div>
                </div>
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />
      </div>
    </>
  );
};

export default TransactionFormFields;
