zellyy-finance/src/pages/Analytics.tsx

import React, { useState } from 'react';
import NavBar from '@/components/NavBar';
import ExpenseChart from '@/components/ExpenseChart';
import AddTransactionButton from '@/components/AddTransactionButton';
import { BarChart, Bar, XAxis, YAxis, Tooltip, ResponsiveContainer, Legend } from 'recharts';
import { ChevronLeft, ChevronRight } from 'lucide-react';

const Analytics = () => {
  const [selectedPeriod, setSelectedPeriod] = useState('이번 달');
  
  // Sample data for the expense categories
  const expenseData = [
    { name: '식비', value: 350000, color: '#9b87f5' },
    { name: '주거', value: 650000, color: '#6e59a5' },
    { name: '교통', value: 125000, color: '#81c784' },
    { name: '취미', value: 200000, color: '#64b5f6' },
    { name: '기타', value: 175000, color: '#e57373' },
  ];
  
  // Sample data for the monthly comparison
  const monthlyData = [
    { name: '3월', income: 2400000, expense: 1800000 },
    { name: '4월', income: 2300000, expense: 1700000 },
    { name: '5월', income: 2700000, expense: 1900000 },
    { name: '6월', income: 2200000, expense: 1500000 },
    { name: '7월', income: 2500000, expense: 1650000 },
    { name: '8월', income: 2550000, expense: 1740000 },
  ];
  
  const totalIncome = 2550000;
  const totalExpense = 1740000;
  const savings = totalIncome - totalExpense;
  const savingsPercentage = Math.round((savings / totalIncome) * 100);
  
  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>
          
          {/* Period Selector */}
          <div className="flex items-center justify-between mb-6">
            <button className="neuro-flat p-2 rounded-full">
              <ChevronLeft size={20} />
            </button>
            
            <div className="flex items-center">
              <span className="font-medium text-lg">{selectedPeriod}</span>
            </div>
            
            <button className="neuro-flat p-2 rounded-full">
              <ChevronRight size={20} />
            </button>
          </div>
          
          {/* Summary Cards */}
          <div className="grid grid-cols-3 gap-3 mb-8">
            <div className="neuro-card">
              <p className="text-xs text-gray-500 mb-1">수입</p>
              <p className="text-sm font-bold text-neuro-income">
                {new Intl.NumberFormat('ko-KR', {
                  style: 'currency',
                  currency: 'KRW',
                  notation: 'compact',
                  maximumFractionDigits: 1
                }).format(totalIncome)}
              </p>
            </div>
            <div className="neuro-card">
              <p className="text-xs text-gray-500 mb-1">지출</p>
              <p className="text-sm font-bold text-neuro-expense">
                {new Intl.NumberFormat('ko-KR', {
                  style: 'currency',
                  currency: 'KRW',
                  notation: 'compact',
                  maximumFractionDigits: 1
                }).format(totalExpense)}
              </p>
            </div>
            <div className="neuro-card">
              <p className="text-xs text-gray-500 mb-1">저축</p>
              <p className="text-sm font-bold">
                {savingsPercentage}%
              </p>
            </div>
          </div>
        </header>
        
        {/* Category Pie Chart */}
        <ExpenseChart data={expenseData} />
        
        {/* Monthly Comparison */}
        <div className="mt-6 mb-8">
          <h2 className="text-lg font-semibold mb-3">월별 추이</h2>
          <div className="neuro-card h-72">
            <ResponsiveContainer width="100%" height="100%">
              <BarChart
                data={monthlyData}
                margin={{
                  top: 20,
                  right: 10,
                  left: -10,
                  bottom: 5,
                }}
              >
                <XAxis dataKey="name" />
                <YAxis 
                  tickFormatter={(value) => 
                    new Intl.NumberFormat('ko-KR', {
                      style: 'currency',
                      currency: 'KRW',
                      notation: 'compact',
                      maximumFractionDigits: 1
                    }).format(value)
                  } 
                />
                <Tooltip 
                  formatter={(value) => 
                    new Intl.NumberFormat('ko-KR', {
                      style: 'currency',
                      currency: 'KRW',
                      maximumFractionDigits: 0
                    }).format(value)
                  }
                />
                <Legend />
                <Bar 
                  dataKey="income" 
                  name="수입" 
                  fill="#81c784" 
                  radius={[4, 4, 0, 0]} 
                />
                <Bar 
                  dataKey="expense" 
                  name="지출" 
                  fill="#e57373" 
                  radius={[4, 4, 0, 0]} 
                />
              </BarChart>
            </ResponsiveContainer>
          </div>
        </div>
        
        {/* Top Spending Categories */}
        <h2 className="text-lg font-semibold mb-3">주요 지출 카테고리</h2>
        <div className="neuro-card mb-6">
          <div className="space-y-4">
            {expenseData.slice(0, 3).map((category, index) => (
              <div key={category.name} className="flex items-center justify-between">
                <div className="flex items-center gap-3">
                  <div className="w-6 h-6 rounded-full" style={{ backgroundColor: category.color }}></div>
                  <span>{category.name}</span>
                </div>
                <div className="text-right">
                  <p className="font-medium">
                    {new Intl.NumberFormat('ko-KR', {
                      style: 'currency',
                      currency: 'KRW',
                      maximumFractionDigits: 0
                    }).format(category.value)}
                  </p>
                  <p className="text-xs text-gray-500">
                    {Math.round((category.value / totalExpense) * 100)}%
                  </p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>

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

export default Analytics;