import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_gen/gen_l10n/app_localizations.dart';
import 'package:flutter_application_1/enums.dart';
import 'package:flutter_application_1/pages/chart_page.dart';
import 'package:flutter_application_1/pages/milestone_page.dart';
import 'package:flutter_application_1/widgets/custom_image_button_widget.dart';

// Widget zur Anzeige der Ergebnisse der Berechnungen und zur Navigation zu anderen Seiten
class ResultWidget extends StatelessWidget {
  final String compoundInterest;
  final String investedMoney;
  final String time;
  final String monthlySavingsRate;
  final String interestRate;
  final PayoutInterval payoutInterval;
  final List<double> investedMoneyList;
  final List<double> compoundInterestList;

  const ResultWidget({
    super.key, 
    required this.compoundInterest,
    required this.investedMoney,
    required this.time,
    required this.monthlySavingsRate,
    required this.interestRate,
    required this.payoutInterval,
    required this.investedMoneyList,
    required this.compoundInterestList,
  });

  @override
  Widget build(BuildContext context) {
    final localizations = AppLocalizations.of(context)!;

    List<Map<String, dynamic>> milestoneList = [
      {'value': 700.0, 'emoji': '📱', 'text': localizations.milestone_text1 + localizations.amount(700)},
      {'value': 3250.0, 'emoji': '🚲', 'text': localizations.milestone_text2 + localizations.amount(3250)},
      {'value': 20000.0, 'emoji': '🌎', 'text': localizations.milestone_text3 + localizations.amount(20000)},
      {'value': 100000.0, 'emoji': '🏎️', 'text': localizations.milestone_text4 + localizations.amount(100000)},
      {'value': 350000.0, 'emoji': '🏡', 'text': localizations.milestone_text5 + localizations.amount(350000)},
    ];

    return Column(
      children: <Widget>[
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            Expanded(child: _buildResultBox(localizations.final_capital, localizations.amount(compoundInterest))),
            Expanded(child: _buildResultBox(localizations.deposits, localizations.amount(investedMoney))),
            Expanded(child: _buildResultBox(localizations.interest_received, localizations.amount(double.parse(compoundInterest) - double.parse(investedMoney)))),
          ],
        ),
        const SizedBox(height: 10),
        Text(
          localizations.result_text(double.parse(compoundInterest) - double.parse(investedMoney), compoundInterest, interestRate, investedMoney, time, monthlySavingsRate)
        ),
        const SizedBox(height: 20),
        CustomImageButton(
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(
                builder: (context) => ChartPage(
                  investedMoneyList: investedMoneyList,
                  compoundInterestList: compoundInterestList,
                ),
              ),
            );
          },
          backgroundImage: 'assets/images/button_bg1.jpg',
          child: Text(
            localizations.graphic,
            style: const TextStyle(color: CupertinoColors.white, fontSize: 20),
          ),
        ),
        const SizedBox(height: 20),
        CustomImageButton(
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(
                builder: (context) => MilestonePage(
                  compoundInterest: compoundInterest,
                  investedMoney: investedMoney,
                  milestoneList: milestoneList
                ),
              ),
            );
          },
          backgroundImage: 'assets/images/button_bg2.jpg',
          child: Text(
            localizations.milestones,
            style: const TextStyle(color: CupertinoColors.white, fontSize: 20),
          ),
        ),
      ],
    );
  }

  // Widget zum Aufbau einer Ergebnisbox
  Widget _buildResultBox(String label, String value) {
    return Container(
      padding: const EdgeInsets.all(8.0),
      margin: const EdgeInsets.symmetric(horizontal: 5.0),
      decoration: BoxDecoration(
        color: CupertinoColors.extraLightBackgroundGray,
        borderRadius: BorderRadius.circular(5),
      ),
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          Text(
            label,
            style: const TextStyle(
              fontWeight: FontWeight.bold,
              fontSize: 10,
            ),
          ),
          const SizedBox(height: 5),
          Text(
            value,
            style: const TextStyle(
              fontWeight: FontWeight.bold,
            ),
          ),
        ],
      ),
    );
  }
}