import 'package:flutter/material.dart';

/// Eine Widget-Klasse, die die Einstellungsseite der Anwendung darstellt.
class Settings extends StatefulWidget {
  /// Erstellt eine neue Instanz dieser Klasse.
  const Settings({super.key});

  @override
  State<Settings> createState() => _SettingsState();
}

class _SettingsState extends State<Settings> {
  final List<String> _accounts = <String>[
    'Girokonto',
    'Sparkonto',
    'Kreditkarte',
  ];

  Future<void> _addAccount() async {
    final controller = TextEditingController();

    await showDialog(
      context: context,
      builder: (final BuildContext context) => AlertDialog(
        title: const Text('Konto hinzufügen'),
        content: TextField(
          controller: controller,
          decoration: const InputDecoration(
            labelText: 'Kontoname',
            border: OutlineInputBorder(),
          ),
          autofocus: true,
        ),
        actions: <Widget>[
          TextButton(
            onPressed: () => Navigator.pop(context),
            child: const Text('Abbrechen'),
          ),
          ElevatedButton(
            onPressed: () {
              if (controller.text.isNotEmpty) {
                setState(() => _accounts.add(controller.text));
              }
              Navigator.pop(context);
            },
            child: const Text('Hinzufügen'),
          ),
        ],
      ),
    );
  }

  Future<void> _renameAccount(final int index) async {
    final controller = TextEditingController(
      text: _accounts[index],
    );

    await showDialog(
      context: context,
      builder: (final BuildContext context) => AlertDialog(
        title: const Text('Konto umbenennen'),
        content: TextField(
          controller: controller,
          decoration: const InputDecoration(
            labelText: 'Neuer Name',
            border: OutlineInputBorder(),
          ),
          autofocus: true,
        ),
        actions: <Widget>[
          TextButton(
            onPressed: () => Navigator.pop(context),
            child: const Text('Abbrechen'),
          ),
          ElevatedButton(
            onPressed: () {
              if (controller.text.isNotEmpty) {
                setState(() => _accounts[index] = controller.text);
              }
              Navigator.pop(context);
            },
            child: const Text('Speichern'),
          ),
        ],
      ),
    );
  }

  Future<void> _removeAccount(final int index) async {
    await showDialog(
      context: context,
      builder: (final BuildContext context) => AlertDialog(
        title: const Text('Konto entfernen'),
        content: Text(
          'Möchtest du das Konto "${_accounts[index]}" wirklich löschen?',
        ),
        actions: <Widget>[
          TextButton(
            onPressed: () => Navigator.pop(context),
            child: const Text('Abbrechen'),
          ),
          ElevatedButton(
            style: ElevatedButton.styleFrom(
              backgroundColor: Theme.of(context).colorScheme.error,
            ),
            onPressed: () {
              setState(() => _accounts.removeAt(index));
              Navigator.pop(context);
            },
            child: const Text('Löschen'),
          ),
        ],
      ),
    );
  }

  @override
  Widget build(final BuildContext context) {
    final ThemeData theme = Theme.of(context);

    return Scaffold(
      body: SafeArea(
        child: Padding(
          padding: const EdgeInsets.all(16),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              const Text(
                'Einstellungen',
                style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
              ),

              const SizedBox(height: 24),
              _accountHeader(),

              const SizedBox(height: 8),
              _accountList(),

              const SizedBox(height: 8),
              _versionNumber(theme),
            ],
          ),
        ),
      ),
    );
  }

  Widget _accountHeader() => Row(
    mainAxisAlignment: MainAxisAlignment.spaceBetween,
    children: <Widget>[
      const Text(
        'Konten',
        style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
      ),
      IconButton(
        onPressed: _addAccount,
        icon: const Icon(Icons.add),
        tooltip: 'Konto hinzufügen',
      ),
    ],
  );

  Widget _accountList() => Expanded(
    child: ListView.separated(
      itemCount: _accounts.length,
      separatorBuilder: (_, _) => const Divider(),
      itemBuilder: (final BuildContext context, final int index) => ListTile(
        contentPadding: EdgeInsets.zero,
        title: Text(_accounts[index]),
        leading: const Icon(Icons.account_balance_wallet),
        trailing: PopupMenuButton<String>(
          onSelected: (final String value) async {
            if (value == 'rename') {
              await _renameAccount(index);
            } else if (value == 'delete') {
              await _removeAccount(index);
            }
          },
          itemBuilder: (final BuildContext context) =>
              const <PopupMenuEntry<String>>[
                PopupMenuItem<String>(
                  value: 'rename',
                  child: Text('Umbenennen'),
                ),
                PopupMenuItem<String>(
                  value: 'delete',
                  child: Text('Entfernen'),
                ),
              ],
        ),
      ),
    ),
  );

  Widget _versionNumber(final ThemeData theme) => Align(
    alignment: Alignment.bottomLeft,
    child: Text(
      'Version 0.0.0+0',
      style: theme.textTheme.bodySmall?.copyWith(
        color: theme.colorScheme.onSurface.withAlpha((0.6 * 255).round()),
      ),
    ),
  );
}