import React, { useState } from 'react';
import NavBar from '@/components/NavBar';
import TransactionCard, { Transaction } from '@/components/TransactionCard';
import AddTransactionButton from '@/components/AddTransactionButton';
import { Calendar, Search, ChevronLeft, ChevronRight } from 'lucide-react';

const Transactions = () => {
  const [selectedMonth, setSelectedMonth] = useState('8월');

  // Sample data - updated to use only the three specified categories
  const transactions: Transaction[] = [{
    id: '1',
    title: '식료품 구매',
    amount: 25000,
    date: '8월 25일, 12:30 PM',
    category: '식비',
    type: 'expense'
  }, {
    id: '2',
    title: '주유소',
    amount: 50000,
    date: '8월 24일, 3:45 PM',
    category: '교통비',
    type: 'expense'
  }, {
    id: '4',
    title: '생필품 구매',
    amount: 35000,
    date: '8월 18일, 6:00 AM',
    category: '생활비',
    type: 'expense'
  }, {
    id: '5',
    title: '월세',
    amount: 650000,
    date: '8월 15일, 10:00 AM',
    category: '생활비',
    type: 'expense'
  }, {
    id: '6',
    title: '식당',
    amount: 15500,
    date: '8월 12일, 2:15 PM',
    category: '식비',
    type: 'expense'
  }];
  
  // Filter only expense transactions
  const expenseTransactions = transactions.filter(t => t.type === 'expense');
  
  // Calculate total expenses
  const totalExpenses = expenseTransactions.reduce((sum, transaction) => sum + transaction.amount, 0);
  
  // Set budget (for demo purposes - in a real app this would come from user settings)
  const totalBudget = 1000000;

  // Group transactions by date
  const groupedTransactions: Record<string, Transaction[]> = {};
  expenseTransactions.forEach(transaction => {
    const datePart = transaction.date.split(',')[0];
    if (!groupedTransactions[datePart]) {
      groupedTransactions[datePart] = [];
    }
    groupedTransactions[datePart].push(transaction);
  });

  return <div className="min-h-screen bg-neuro-background pb-24">
      <div className="max-w-md mx-auto px-6">
        {/* Header */}
        <header className="py-8">
          <h1 className="text-2xl font-bold neuro-text mb-5">지출 내역</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" />
          </div>
          
          {/* Month Selector */}
          <div className="flex items-center justify-between mb-5">
            <button className="neuro-flat p-2 rounded-full">
              <ChevronLeft size={20} />
            </button>
            
            <div className="flex items-center gap-2">
              <Calendar size={18} className="text-neuro-income" />
              <span className="font-medium text-lg">{selectedMonth}</span>
            </div>
            
            <button className="neuro-flat p-2 rounded-full">
              <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="text-lg font-bold text-neuro-income">
                {new Intl.NumberFormat('ko-KR', {
                  style: 'currency',
                  currency: 'KRW',
                  maximumFractionDigits: 0
                }).format(totalBudget)}
              </p>
            </div>
            <div className="neuro-card">
              <p className="text-sm text-gray-500 mb-1">총 지출</p>
              <p className="text-lg font-bold text-neuro-income">
                {new Intl.NumberFormat('ko-KR', {
                  style: 'currency',
                  currency: 'KRW',
                  maximumFractionDigits: 0
                }).format(totalExpenses)}
              </p>
            </div>
          </div>
        </header>

        {/* Transactions By Date */}
        <div className="space-y-6">
          {Object.entries(groupedTransactions).map(([date, transactions]) => <div key={date}>
              <div className="flex items-center gap-2 mb-3">
                <div className="h-1 flex-1 neuro-pressed"></div>
                <h2 className="text-sm font-medium text-gray-500">{date}</h2>
                <div className="h-1 flex-1 neuro-pressed"></div>
              </div>
              
              <div className="grid gap-3">
                {transactions.map(transaction => <TransactionCard key={transaction.id} transaction={transaction} />)}
              </div>
            </div>)}
        </div>
      </div>

      <AddTransactionButton />
      <NavBar />
    </div>;
};

export default Transactions;