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('이번 달');

  // Updated expense categories with green color scheme
  const expenseData = [{
    name: '식비',
    value: 350000,
    color: '#81c784' // Green (matching neuro-income)
  }, {
    name: '생활비',
    value: 650000,
    color: '#AED581' // Light green
  }, {
    name: '교통비',
    value: 175000,
    color: '#2E7D32' // Dark green (replacing yellow)
  }];

  // Sample data for the monthly comparison - renamed income to budget
  const monthlyData = [{
    name: '3월',
    budget: 2400000,
    expense: 1800000
  }, {
    name: '4월',
    budget: 2300000,
    expense: 1700000
  }, {
    name: '5월',
    budget: 2700000,
    expense: 1900000
  }, {
    name: '6월',
    budget: 2200000,
    expense: 1500000
  }, {
    name: '7월',
    budget: 2500000,
    expense: 1650000
  }, {
    name: '8월',
    budget: 2550000,
    expense: 1740000
  }];
  
  // Updated variable names to match new terminology
  const totalBudget = 2550000;
  const totalExpense = 1740000;
  const savings = totalBudget - totalExpense;
  const savingsPercentage = Math.round(savings / totalBudget * 100);
  
  // Custom formatter for Y-axis that removes currency symbol and uses K format
  const formatYAxisTick = (value: number) => {
    return `${Math.round(value / 1000)}K`;
  };
  
  // Custom formatter for tooltip that keeps the original formatting with currency symbol
  const formatTooltip = (value: number | string) => {
    if (typeof value === 'number') {
      return new Intl.NumberFormat('ko-KR', {
        style: 'currency',
        currency: 'KRW',
        maximumFractionDigits: 0
      }).format(value);
    }
    return value;
  };
  
  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(totalBudget)}
              </p>
            </div>
            <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(totalExpense)}
              </p>
            </div>
            <div className="neuro-card">
              <p className="text-xs text-gray-500 mb-1">저축</p>
              <p className="text-sm font-bold text-neuro-income">
                {savingsPercentage}%
              </p>
            </div>
          </div>
        </header>
        
        {/* Monthly Comparison - MOVED UP */}
        <div className="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
                }}
                style={{ fontSize: '11px' }}
              >
                <XAxis dataKey="name" />
                <YAxis tickFormatter={formatYAxisTick} />
                <Tooltip formatter={formatTooltip} />
                <Legend />
                <Bar dataKey="budget" name="예산" fill="#C8C8C9" radius={[4, 4, 0, 0]} />
                <Bar dataKey="expense" name="지출" fill="#81c784" radius={[4, 4, 0, 0]} />
              </BarChart>
            </ResponsiveContainer>
          </div>
        </div>
        
        {/* Category Pie Chart - MOVED DOWN */}
        <h2 className="text-lg font-semibold mb-3">카테고리별 지출</h2>
        <ExpenseChart data={expenseData} />
        
        {/* Top Spending Categories */}
        <h2 className="text-lg font-semibold mb-3 mt-6">주요 지출 카테고리</h2>
        <div className="neuro-card mb-6">
          <div className="space-y-4">
            {expenseData.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;