import 'package:ambito/src/packages/ambito_theme/ambito_theme.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:percent_indicator/linear_percent_indicator.dart';
import 'package:screen_breakpoints/screen_breakpoints.dart';

import '../../../main.dart';
import '../../widgets/appbar/ambito_appbar.dart';

class DashboardPage extends StatefulWidget {
  const DashboardPage(
      {super.key, required this.businessId, required this.userId});

  final int businessId;
  final int userId;

  @override
  State<StatefulWidget> createState() => DashboardPageState();
}

class DashboardPageState extends State<DashboardPage> {
  List<Widget> cards = [];

  @override
  void initState() {
    cards.add(
      _buildCard(
        Colors.green,
        'images/actions/nist_brut_unterschlupforte.jpg',
        'Meine\nMaßnahmen',
        '/dashboard/meine-massnahmen',
      ),
    );
    cards.add(
      _buildCard(
        Colors.green,
        'images/actions/steinhaufen.jpg',
        'Urkunde',
        '/dashboard/urkunde',
      ),
    );
    cards.add(
      _buildCard(
        Colors.green,
        'images/actions/staudenbeete.jpg',
        'Flächen',
        '/dashboard/flaechen',
      ),
    );
    cards.add(
      _buildCard(
        Colors.green,
        'images/actions/pflanzgefaesse.jpg',
        'Stammdaten',
        '/dashboard/stammdaten',
      ),
    );
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AmbitoAppbar(
        links: const ['dashboard', 'massnahmen'],
        breakpoint: Breakpoint.fromContext(context),
      ),
      body: SingleChildScrollView(
        child: Align(
          alignment: Alignment.topCenter,
          child: SizedBox(
            width: 1152,
            child: Column(
              mainAxisSize: MainAxisSize.min,
              mainAxisAlignment: MainAxisAlignment.start,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                largeTheme.verticalSpacerMax,
                Text(
                  'Willkommen, Max Mustermann!',
                  textAlign: TextAlign.start,
                  style: largeTheme.currentThemeData.textTheme.headlineLarge
                      ?.copyWith(
                    color: largeTheme.currentColorScheme.onSurface,
                  ),
                ),
                largeTheme.verticalSpacerMax,
                Wrap(
                  alignment: WrapAlignment.center,
                  spacing: 32,
                  children: cards,
                ),
                largeTheme.verticalSpacerMax,
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    SizedBox(
                      width: 532,
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Text(
                            'Biodiversitätsbewertung',
                            textAlign: TextAlign.start,
                            style: largeTheme
                                .currentThemeData.textTheme.headlineMedium
                                ?.copyWith(
                              color: largeTheme.currentColorScheme.onSurface,
                            ),
                          ),
                          largeTheme.verticalSpacer,
                          SizedBox(
                            width: 532,
                            child: Card(
                              elevation: 0,
                              color: orangeColors['primary']?.withOpacity(0.1),
                              child: Padding(
                                padding: const EdgeInsets.all(16),
                                child: Column(
                                  crossAxisAlignment: CrossAxisAlignment.start,
                                  children: [
                                    Text(
                                      'Fragebögen',
                                      textAlign: TextAlign.left,
                                      style: largeTheme.currentThemeData
                                          .textTheme.headlineSmall
                                          ?.copyWith(
                                        color: orangeColors['primary'],
                                        fontWeight: FontWeight.bold,
                                      ),
                                    ),
                                    largeTheme.verticalSpacerSmall,
                                    Row(
                                      children: [
                                        LinearPercentIndicator(
                                          width: 440,
                                          lineHeight: 20.0,
                                          animation: true,
                                          percent: 0.8,
                                          padding: EdgeInsets.zero,
                                          backgroundColor: largeTheme
                                              .currentColorScheme.surface,
                                          progressColor:
                                              orangeColors['primary'],
                                          barRadius: const Radius.circular(8),
                                        ),
                                        const Spacer(),
                                        IconButton(
                                          iconSize: 24,
                                          onPressed: () {},
                                          icon: const Icon(
                                            Icons.arrow_forward_ios,
                                          ),
                                          color: Colors.white,
                                          style: IconButton.styleFrom(
                                            fixedSize: const Size(20, 20),
                                            padding: const EdgeInsets.all(2),
                                            backgroundColor:
                                                orangeColors['primary'],
                                            shape: RoundedRectangleBorder(
                                              borderRadius:
                                                  BorderRadius.circular(8),
                                            ),
                                          ),
                                        ),
                                      ],
                                    ),
                                    largeTheme.verticalSpacerSmall,
                                    Text(
                                      '4 / 5 abgeschlossen',
                                      textAlign: TextAlign.start,
                                      style: largeTheme
                                          .currentThemeData.textTheme.bodyLarge
                                          ?.copyWith(
                                        color: largeTheme
                                            .currentColorScheme.onSurface,
                                      ),
                                    ),
                                  ],
                                ),
                              ),
                            ),
                          ),
                          largeTheme.verticalSpacer,
                          SizedBox(
                            width: 532,
                            child: Card(
                              elevation: 0,
                              color: greenColors['primary']?.withOpacity(0.3),
                              child: Padding(
                                padding: const EdgeInsets.all(16),
                                child: Column(
                                  crossAxisAlignment: CrossAxisAlignment.start,
                                  children: [
                                    Text(
                                      'Ergebnisse',
                                      textAlign: TextAlign.left,
                                      style: largeTheme.currentThemeData
                                          .textTheme.headlineSmall
                                          ?.copyWith(
                                        color: greenColors['primary'],
                                        fontWeight: FontWeight.bold,
                                      ),
                                    ),
                                    largeTheme.verticalSpacerSmall,
                                    Row(
                                      children: [
                                        LinearPercentIndicator(
                                          width: 480,
                                          lineHeight: 20.0,
                                          animation: true,
                                          percent: 0.8,
                                          padding: EdgeInsets.zero,
                                          backgroundColor: largeTheme
                                              .currentColorScheme.surface,
                                          progressColor: greenColors['primary'],
                                          barRadius: const Radius.circular(8),
                                        ),
                                      ],
                                    ),
                                    largeTheme.verticalSpacerSmall,
                                    Text(
                                      'Weinberg: 80%',
                                      textAlign: TextAlign.start,
                                      style: largeTheme
                                          .currentThemeData.textTheme.bodyLarge
                                          ?.copyWith(
                                        color: largeTheme
                                            .currentColorScheme.onSurface,
                                      ),
                                    ),
                                    largeTheme.verticalSpacerSmall,
                                    Row(
                                      children: [
                                        LinearPercentIndicator(
                                          width: 480,
                                          lineHeight: 20.0,
                                          animation: true,
                                          percent: 0.52,
                                          padding: EdgeInsets.zero,
                                          backgroundColor: largeTheme
                                              .currentColorScheme.surface,
                                          progressColor: greenColors['primary'],
                                          barRadius: const Radius.circular(8),
                                        ),
                                      ],
                                    ),
                                    largeTheme.verticalSpacerSmall,
                                    Text(
                                      'Landschaft: 52%',
                                      textAlign: TextAlign.start,
                                      style: largeTheme
                                          .currentThemeData.textTheme.bodyLarge
                                          ?.copyWith(
                                        color: largeTheme
                                            .currentColorScheme.onSurface,
                                      ),
                                    ),
                                    largeTheme.verticalSpacerSmall,
                                    Row(
                                      children: [
                                        LinearPercentIndicator(
                                          width: 480,
                                          lineHeight: 20.0,
                                          animation: true,
                                          percent: 0.27,
                                          padding: EdgeInsets.zero,
                                          backgroundColor: largeTheme
                                              .currentColorScheme.surface,
                                          progressColor: greenColors['primary'],
                                          barRadius: const Radius.circular(8),
                                        ),
                                      ],
                                    ),
                                    largeTheme.verticalSpacerSmall,
                                    Text(
                                      'Betriebsstätte: 27%',
                                      textAlign: TextAlign.start,
                                      style: largeTheme
                                          .currentThemeData.textTheme.bodyLarge
                                          ?.copyWith(
                                        color: largeTheme
                                            .currentColorScheme.onSurface,
                                      ),
                                    ),
                                  ],
                                ),
                              ),
                            ),
                          ),
                        ],
                      ),
                    ),
                    const Spacer(),
                    SizedBox(
                      width: 532,
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.start,
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Text(
                            'Förderungen',
                            textAlign: TextAlign.start,
                            style: largeTheme
                                .currentThemeData.textTheme.headlineMedium
                                ?.copyWith(
                              color: largeTheme.currentColorScheme.onSurface,
                            ),
                          ),
                          largeTheme.verticalSpacer,
                          Text(
                            'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.',
                            textAlign: TextAlign.start,
                            style: largeTheme
                                .currentThemeData.textTheme.bodyLarge
                                ?.copyWith(
                              color: largeTheme.currentColorScheme.onSurface,
                            ),
                          ),
                          largeTheme.verticalSpacer,
                          _buildProjectCard(
                            'Projekt A',
                            'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.',
                          ),
                          largeTheme.verticalSpacer,
                          _buildProjectCard(
                            'Projekt B',
                            'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.',
                          ),
                        ],
                      ),
                    ),
                  ],
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }

  Widget _buildCard(Color background, String image, String title, String link) {
    return GestureDetector(
      onTap: () {
        Get.toNamed(link);
      },
      child: SizedBox(
        width: 262,
        height: 250,
        child: Card(
          elevation: 0,
          color: const Color(0xff666666).withOpacity(.1),
          child: Column(
            children: [
              ClipRRect(
                borderRadius: BorderRadius.circular(4.0),
                child: Image.asset(
                  image,
                ),
              ),
              Expanded(
                child: Center(
                  child: Text(
                    title,
                    textAlign: TextAlign.center,
                    style: largeTheme.currentThemeData.textTheme.headlineSmall
                        ?.copyWith(
                      color: const Color(0xFF666666),
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }

  Widget _buildProjectCard(String title, String text) {
    return SizedBox(
      width: 532,
      child: Card(
        elevation: 0,
        color: Theme.of(context).colorScheme.outline.withOpacity(.1),
        child: Padding(
          padding: const EdgeInsets.all(16),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(
                title,
                textAlign: TextAlign.center,
                style: largeTheme.currentThemeData.textTheme.headlineSmall
                    ?.copyWith(
                  color: greenColors['primary'],
                  fontWeight: FontWeight.bold,
                ),
              ),
              largeTheme.verticalSpacerSmall,
              Row(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Expanded(
                    child: Text(
                      text,
                      softWrap: true,
                      overflow: TextOverflow.ellipsis,
                      maxLines: 3,
                      textAlign: TextAlign.start,
                      style: largeTheme.currentThemeData.textTheme.bodyLarge
                          ?.copyWith(
                        color: largeTheme.currentColorScheme.onSurface,
                      ),
                    ),
                  ),
                  IconButton(
                    iconSize: 24,
                    onPressed: () {},
                    icon: const Icon(
                      Icons.arrow_forward_ios,
                    ),
                    color: Colors.white,
                    style: IconButton.styleFrom(
                      fixedSize: const Size(20, 20),
                      padding: const EdgeInsets.all(2),
                      backgroundColor: greenColors['primary'],
                      shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(8),
                      ),
                    ),
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}