apskel-owner-flutter/lib/presentation/pages/finance/finance_page.dart

import 'package:auto_route/auto_route.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:line_icons/line_icons.dart';

import '../../../application/analytic/category_analytic_loader/category_analytic_loader_bloc.dart';
import '../../../application/analytic/profit_loss_loader/profit_loss_loader_bloc.dart';
import '../../../common/extension/extension.dart';
import '../../../common/theme/theme.dart';
import '../../../domain/analytic/analytic.dart';
import '../../../injection.dart';
import '../../components/appbar/appbar.dart';
import '../../components/field/date_range_picker_field.dart';
import 'widgets/cash_flow.dart';
import 'widgets/category.dart';
import 'widgets/product.dart';
import 'widgets/profit_loss.dart';
import 'widgets/summary_card.dart';

@RoutePage()
class FinancePage extends StatefulWidget implements AutoRouteWrapper {
  const FinancePage({super.key});

  @override
  State<FinancePage> createState() => _FinancePageState();

  @override
  Widget wrappedRoute(BuildContext context) => MultiBlocProvider(
    providers: [
      BlocProvider(
        create: (_) =>
            getIt<ProfitLossLoaderBloc>()..add(ProfitLossLoaderEvent.fetched()),
      ),
      BlocProvider(
        create: (context) =>
            getIt<CategoryAnalyticLoaderBloc>()
              ..add(CategoryAnalyticLoaderEvent.fetched()),
      ),
    ],
    child: this,
  );
}

class _FinancePageState extends State<FinancePage>
    with TickerProviderStateMixin {
  late AnimationController _slideController;
  late AnimationController _fadeController;
  late AnimationController _scaleController;

  late Animation<Offset> _slideAnimation;
  late Animation<double> _fadeAnimation;
  late Animation<double> _scaleAnimation;

  @override
  void initState() {
    super.initState();

    _slideController = AnimationController(
      duration: const Duration(milliseconds: 800),
      vsync: this,
    );

    _fadeController = AnimationController(
      duration: const Duration(milliseconds: 1000),
      vsync: this,
    );

    _scaleController = AnimationController(
      duration: const Duration(milliseconds: 600),
      vsync: this,
    );

    _slideAnimation =
        Tween<Offset>(begin: const Offset(0, 0.3), end: Offset.zero).animate(
          CurvedAnimation(parent: _slideController, curve: Curves.easeOutCubic),
        );

    _fadeAnimation = Tween<double>(
      begin: 0.0,
      end: 1.0,
    ).animate(CurvedAnimation(parent: _fadeController, curve: Curves.easeIn));

    _scaleAnimation = Tween<double>(begin: 0.8, end: 1.0).animate(
      CurvedAnimation(parent: _scaleController, curve: Curves.elasticOut),
    );

    // Start animations
    _fadeController.forward();
    Future.delayed(const Duration(milliseconds: 200), () {
      _slideController.forward();
    });
    Future.delayed(const Duration(milliseconds: 400), () {
      _scaleController.forward();
    });
  }

  @override
  void dispose() {
    _slideController.dispose();
    _fadeController.dispose();
    _scaleController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: AppColor.background,
      body: BlocListener<ProfitLossLoaderBloc, ProfitLossLoaderState>(
        listenWhen: (previous, current) =>
            previous.dateFrom != current.dateFrom &&
            previous.dateTo != current.dateTo,
        listener: (context, state) {
          context.read<ProfitLossLoaderBloc>().add(
            ProfitLossLoaderEvent.fetched(),
          );
        },
        child: BlocBuilder<ProfitLossLoaderBloc, ProfitLossLoaderState>(
          builder: (context, state) {
            return CustomScrollView(
              slivers: [
                // SliverAppBar with animated background
                SliverAppBar(
                  expandedHeight: 120,
                  floating: false,
                  pinned: true,
                  backgroundColor: AppColor.primary,
                  elevation: 0,
                  flexibleSpace: CustomAppBar(title: 'Keuangan'),
                ),

                // Header dengan filter periode
                SliverToBoxAdapter(
                  child: FadeTransition(
                    opacity: _fadeAnimation,
                    child: Padding(
                      padding: const EdgeInsets.all(16.0),
                      child: DateRangePickerField(
                        maxDate: DateTime.now(),
                        startDate: state.dateFrom,
                        endDate: state.dateTo,
                        onChanged: (startDate, endDate) {
                          context.read<ProfitLossLoaderBloc>().add(
                            ProfitLossLoaderEvent.rangeDateChanged(
                              startDate!,
                              endDate!,
                            ),
                          );
                        },
                      ),
                    ),
                  ),
                ),

                // Summary Cards
                SliverToBoxAdapter(
                  child: SlideTransition(
                    position: _slideAnimation,
                    child: _buildSummaryCards(state.profitLoss.summary),
                  ),
                ),

                // Cash Flow Analysis
                SliverToBoxAdapter(
                  child: ScaleTransition(
                    scale: _scaleAnimation,
                    child: FinanceCashFlow(dailyData: state.profitLoss.data),
                  ),
                ),

                // Profit Loss Detail
                SliverToBoxAdapter(
                  child: FadeTransition(
                    opacity: _fadeAnimation,
                    child: FinanceProfitLoss(data: state.profitLoss.summary),
                  ),
                ),

                BlocBuilder<
                  CategoryAnalyticLoaderBloc,
                  CategoryAnalyticLoaderState
                >(
                  builder: (context, stateCategory) {
                    return SliverToBoxAdapter(
                      child: SlideTransition(
                        position: _slideAnimation,
                        child: FinanceCategory(
                          categories: stateCategory.categoryAnalytic.data,
                        ),
                      ),
                    );
                  },
                ),

                // Product Analysis Section
                SliverToBoxAdapter(
                  child: SlideTransition(
                    position: _slideAnimation,
                    child: _buildProductAnalysis(state.profitLoss.productData),
                  ),
                ),

                // Transaction Categories

                // Bottom spacing
                const SliverToBoxAdapter(child: SizedBox(height: 100)),
              ],
            );
          },
        ),
      ),
    );
  }

  Widget _buildSummaryCards(ProfitLossSummary summary) {
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 16),
      child: Column(
        children: [
          Row(
            children: [
              Expanded(
                child: FinanceSummaryCard(
                  title: 'Total Pendapatan',
                  amount: summary.totalRevenue.currencyFormatRp,
                  icon: LineIcons.arrowUp,
                  color: AppColor.success,
                  isPositive: true,
                ),
              ),
              const SizedBox(width: 12),
              Expanded(
                child: FinanceSummaryCard(
                  title: 'Total Pengeluaran',
                  amount: summary.totalCost.currencyFormatRp,
                  icon: LineIcons.arrowDown,
                  color: AppColor.error,
                  isPositive: false,
                ),
              ),
            ],
          ),
          const SizedBox(height: 12),
          Row(
            children: [
              Expanded(
                child: FinanceSummaryCard(
                  title: 'Keuntungan Bersih',
                  amount: summary.netProfit.currencyFormatRp,
                  icon: LineIcons.lineChart,
                  color: AppColor.info,
                  isPositive: true,
                ),
              ),
              const SizedBox(width: 12),
              Expanded(
                child: FinanceSummaryCard(
                  title: 'Margin Profit',
                  amount: '${summary.profitabilityRatio.round()}%',
                  icon: LineIcons.percent,
                  color: AppColor.warning,
                  isPositive: true,
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }

  Widget _buildProductAnalysis(List<ProfitLossProductData> products) {
    return Container(
      margin: const EdgeInsets.all(16),
      padding: const EdgeInsets.all(20),
      decoration: BoxDecoration(
        color: AppColor.white,
        borderRadius: BorderRadius.circular(16),
        boxShadow: [
          BoxShadow(
            color: AppColor.textLight.withOpacity(0.1),
            spreadRadius: 1,
            blurRadius: 8,
            offset: const Offset(0, 2),
          ),
        ],
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Row(
            children: [
              Container(
                padding: const EdgeInsets.all(8),
                decoration: BoxDecoration(
                  color: AppColor.info.withOpacity(0.1),
                  borderRadius: BorderRadius.circular(8),
                ),
                child: const Icon(
                  LineIcons.shoppingBag,
                  color: AppColor.info,
                  size: 20,
                ),
              ),
              const SizedBox(width: 12),
              Text(
                'Analisis Produk',
                style: AppStyle.lg.copyWith(fontWeight: FontWeight.bold),
              ),
              const Spacer(),
              TextButton(
                onPressed: () {},
                child: Text(
                  'Lihat Semua',
                  style: AppStyle.sm.copyWith(color: AppColor.primary),
                ),
              ),
            ],
          ),
          // Product list
          ListView.separated(
            shrinkWrap: true,
            physics: const NeverScrollableScrollPhysics(),
            padding: const EdgeInsets.only(top: 12),
            itemCount: products.length,
            separatorBuilder: (context, index) => const SizedBox(height: 12),
            itemBuilder: (context, index) {
              final product = products[index];
              return ProfitLossProduct(product: product);
            },
          ),
        ],
      ),
    );
  }
}