import 'package:design_system/design_system.dart';
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';

class SettingsScreen extends ConsumerWidget {
  const SettingsScreen({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final theme = ref.watch(themePortProvider);

    final name = "Juan";
    final balance = 50;
    final fullName = "Juan Pérez Cruz";
    final birthDate = "08/03/1976";
    final relation = "Padre";
    final address = "Calle Gran Vía 30 6º, 28013";
    final country = "España";
    final nationality = "Español";
    final email = "juanpcruz@gmail.com";
    final phone = "123456789";

    final content = [
      Center(
        child: Column(
          children: [
            Text(
              "Ajustes de la cuenta",
              style: TextStyle(
                fontSize: 30,
                color: theme.getColorFor(ThemeCode.textSecondary),
              ),
            ),
            Text(
              "Saldo: $balance€",
              style: TextStyle(
                color: theme.getColorFor(ThemeCode.textSecondary),
              ),
            ),
          ],
        ),
      ),
      Container(
        padding: EdgeInsets.all(24),
        decoration: BoxDecoration(
          borderRadius: BorderRadius.all(Radius.circular(20)),
          color: theme.getColorFor(ThemeCode.backgroundPrimary),
        ),
        child: Column(
          children: [
            Row(
              spacing: 10,
              children: [
                Text(
                  name,
                  style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20),
                ),
                Spacer(),
                TextButton(onPressed: () => {}, child: Text("Editar wallet")),
                Icon(Icons.account_balance, size: 24),
              ],
            ),
            Align(alignment: Alignment.centerLeft, child: Text(relation)),
          ],
        ),
      ),
      Container(
        padding: EdgeInsets.all(24),
        decoration: BoxDecoration(
          borderRadius: BorderRadius.all(Radius.circular(20)),
          color: theme.getColorFor(ThemeCode.backgroundPrimary),
        ),
        child: Column(
          children: [
            Row(
              children: [
                Text(
                  "Datos personales",
                  style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20),
                ),
                Spacer(),
                TextButton(onPressed: () => {}, child: Text("Editar")),
              ],
            ),
            Align(
              alignment: Alignment.centerLeft,
              child: Text.rich(
                TextSpan(
                  text: "Nombre: ",
                  style: TextStyle(fontWeight: FontWeight.bold),
                  children: [
                    TextSpan(
                      text: fullName,
                      style: TextStyle(fontWeight: FontWeight.normal),
                    ),
                  ],
                ),
              )
            ),
            Align(
              alignment: Alignment.centerLeft,
              child: Text.rich(
                TextSpan(
                  text: "Fecha de nacimiento: ",
                  style: TextStyle(fontWeight: FontWeight.bold),
                  children: [
                    TextSpan(
                      text: birthDate,
                      style: TextStyle(fontWeight: FontWeight.normal),
                    ),
                  ],
                ),
              )
            ),
            Align(
              alignment: Alignment.centerLeft,
              child: Text.rich(
                TextSpan(
                  text: "Familiar: ",
                  style: TextStyle(fontWeight: FontWeight.bold),
                  children: [
                    TextSpan(
                      text: relation,
                      style: TextStyle(fontWeight: FontWeight.normal),
                    ),
                  ],
                ),
              )
            ),
          ],
        ),
      ),
      Container(
        padding: EdgeInsets.all(24),
        decoration: BoxDecoration(
          borderRadius: BorderRadius.all(Radius.circular(20)),
          color: theme.getColorFor(ThemeCode.backgroundPrimary),
        ),
        child: Column(
          children: [
            Row(
              children: [
                Text(
                  "Dirección",
                  style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20),
                ),
                Spacer(),
                TextButton(onPressed: () => {}, child: Text("Editar")),
              ],
            ),
            Align(
              alignment: Alignment.centerLeft,
              child: Text.rich(
                TextSpan(
                  text: "Dirección: ",
                  style: TextStyle(fontWeight: FontWeight.bold),
                  children: [
                    TextSpan(
                      text: address,
                      style: TextStyle(fontWeight: FontWeight.normal),
                    ),
                  ],
                ),
              ),
            ),
            Align(
              alignment: Alignment.centerLeft,
              child: Text.rich(
                TextSpan(
                  text: "País: ",
                  style: TextStyle(fontWeight: FontWeight.bold),
                  children: [
                    TextSpan(
                      text: country,
                      style: TextStyle(fontWeight: FontWeight.normal),
                    ),
                  ],
                ),
              ),
            ),
            Align(
              alignment: Alignment.centerLeft,
              child: Text.rich(
                TextSpan(
                  text: "Nacionalidad: ",
                  style: TextStyle(fontWeight: FontWeight.bold),
                  children: [
                    TextSpan(
                      text: nationality,
                      style: TextStyle(fontWeight: FontWeight.normal),
                    ),
                  ],
                ),
              ),
            )
          ],
        ),
      ),
      Container(
        padding: EdgeInsets.all(24),
        decoration: BoxDecoration(
          borderRadius: BorderRadius.all(Radius.circular(20)),
          color: theme.getColorFor(ThemeCode.backgroundPrimary),
        ),
        child: Column(
          children: [
            Row(
              children: [
                Text(
                  "Usuario",
                  style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20),
                ),
                Spacer(),
                TextButton(onPressed: () => {}, child: Text("Editar")),
              ],
            ),
            Align(
              alignment: Alignment.centerLeft,
              child: Text.rich(
                TextSpan(
                  text: "Correo: ",
                  style: TextStyle(fontWeight: FontWeight.bold),
                  children: [
                    TextSpan(
                      text: email,
                      style: TextStyle(fontWeight: FontWeight.normal),
                    ),
                  ],
                ),
              ),
            ),
            Align(
              alignment: Alignment.centerLeft,
              child: Text.rich(
                TextSpan(
                  text: "Teléfono: ",
                  style: TextStyle(fontWeight: FontWeight.bold),
                  children: [
                    TextSpan(
                      text: phone,
                      style: TextStyle(fontWeight: FontWeight.normal),
                    ),
                  ],
                ),
              ),
            )
          ],
        ),
      ),
      Container(
        padding: EdgeInsets.all(24),
        decoration: BoxDecoration(
          borderRadius: BorderRadius.all(Radius.circular(20)),
          color: theme.getColorFor(ThemeCode.backgroundPrimary),
        ),
        child: Row(
          children: [
            Text(
              "Cambio de contraseña",
              style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20),
            ),
            Spacer(),
            TextButton(onPressed: () => {}, child: Text("Editar")),
          ],
        ),
      ),
      Container(
        padding: EdgeInsets.all(24),
        decoration: BoxDecoration(
          borderRadius: BorderRadius.all(Radius.circular(20)),
          color: theme.getColorFor(ThemeCode.backgroundPrimary),
        ),
        child: Column(
          children: [
            Row(
              children: [
                Text(
                  "Método de pago",
                  style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20),
                ),
                Spacer(),
                TextButton(onPressed: () => {}, child: Text("Editar")),
              ],
            ),
            Text("Puedes cambiar el método de pago en cualquier momento"),
          ],
        ),
      ),
      Container(
        padding: EdgeInsets.all(24),
        decoration: BoxDecoration(
          borderRadius: BorderRadius.all(Radius.circular(20)),
          color: theme.getColorFor(ThemeCode.backgroundPrimary),
        ),
        child: Column(
          spacing: 24,
          children: [
            Text(
              "Retirar y reembolsar dinero del wallet",
              style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20),
            ),
            Text("Para transferirte el saldo a tu cuenta necesitamos tu IBAN y algunos datos básics. Así nos aseguramos de que la transferencia sea segura y rápida."),
            CustomTextField(label: "Nombre y Apellidos", hint: "******"),
            CustomTextField(label: "IBAN con número español", hint: "******")
          ],
        ),
      ),
      Container(
        padding: EdgeInsets.all(24),
        decoration: BoxDecoration(
          borderRadius: BorderRadius.all(Radius.circular(20)),
          color: theme.getColorFor(ThemeCode.backgroundTertiary),
        ),
        child: Column(
          children: [
            Row(
              children: [
                Text(
                  "Plan anual",
                  style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20),
                ),
                Spacer(),
                TextButton(onPressed: () => {}, child: Text("Cambiar Plan")),
              ],
            ),
            Align(
              alignment: Alignment.centerLeft,
              child: Row(
                spacing: 8,
                children: [
                  Icon(Icons.check, size: 24),
                  Text(
                    "Sin permanencia",
                    style: TextStyle(fontSize: 16, letterSpacing: 0),
                  ),
                ],
              )
            ),
            Align(
              alignment: Alignment.centerLeft,
              child: Row(
                spacing: 8,
                children: [
                  Icon(Icons.check, size: 24),
                  Text(
                    "Llamadas y datos ilimitados",
                    style: TextStyle(fontSize: 16, letterSpacing: 0),
                  ),
                ],
              )
            ),
            Align(
              alignment: Alignment.centerLeft,
              child: Row(
                spacing: 8,
                children: [
                  Icon(Icons.check, size: 24),
                  Text(
                    "2 meses gratis",
                    style: TextStyle(fontSize: 16, letterSpacing: 0),
                  ),
                ],
              )
            ),
          ],
        ),
      ),
      Column(
        spacing: 16,
        children: [
          Align(
            alignment: Alignment.topLeft,
            child: TextButton(
              style: ButtonStyle(padding: WidgetStatePropertyAll(EdgeInsets.all(0))),
              onPressed: () => {},
              child: Row(
                spacing: 4,
                children: [
                  Icon(Icons.contact_support_outlined, size: 24),
                  Text("Contáctanos")
                ],
              )
            )
          ),
          Align(
            alignment: Alignment.topLeft,
            child: TextButton(
              style: ButtonStyle(padding: WidgetStatePropertyAll(EdgeInsets.all(0))),
              onPressed: () => {},
              child: Row(
                spacing: 4,
                children: [
                  Icon(Icons.contact_support_outlined, size: 24),
                  Text("Preguntas frecuentes")
                ],
              )
            )
          ),
        ],
      )
    ];

    return Scaffold(
      backgroundColor: theme.getColorFor(ThemeCode.backgroundSecondary),
      body: Stack(
        children: [
          DecoratedBox(
            decoration: BoxDecoration(
              borderRadius: const BorderRadius.only(bottomLeft: Radius.circular(24), bottomRight: Radius.circular(24)),
              color: Color(0xFF4B4B4B),
            ),
            child: SizedBox(width: double.infinity, height: 200),
          ),
          Column(
            children: [
              Expanded(
                child: Container(
                  margin: EdgeInsets.all(20),
                  child: ListView.separated(
                    itemBuilder: (BuildContext context, int index) {
                      return content[index];
                    },
                    separatorBuilder: (BuildContext context, int index) {
                      return Divider(color: Colors.transparent, height: 20);
                    },
                    itemCount: content.length,
                  ),
                ),
              ),
              Container(
                padding: EdgeInsets.all(20),
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.only(
                    topLeft: Radius.circular(20),
                    topRight: Radius.circular(20),
                  ),
                  color: theme.getColorFor(ThemeCode.backgroundPrimary),
                ),
                child: Column(
                  children: [
                    PrimaryButton(
                      onPressed: () => {},
                      text: "Guardar cambios",
                      color: theme.getColorFor(ThemeCode.buttonPrimary)
                    ),
                    TextButton(
                      onPressed: () => Navigator.pop(context),
                      child: Text("Cancelar"),
                    ),
                  ],
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }
}
