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.symmetric(horizontal: 20, vertical: 10),
        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.attach_money),
              ],
            ),
            Text(relation),
          ],
        ),
      ),
      Container(
        padding: EdgeInsets.symmetric(horizontal: 20, vertical: 10),
        decoration: BoxDecoration(
          borderRadius: BorderRadius.all(Radius.circular(20)),
          color: theme.getColorFor(ThemeCode.backgroundPrimary),
        ),
        child: Column(
          children: [
            Row(
              spacing: 10,
              children: [
                Text(
                  "Datos personales",
                  style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20),
                ),
                Spacer(),
                TextButton(onPressed: () => {}, child: Text("Editar")),
              ],
            ),
            Text.rich(
              TextSpan(
                text: "Nombre: ",
                style: TextStyle(fontWeight: FontWeight.bold),
                children: [
                  TextSpan(
                    text: fullName,
                    style: TextStyle(fontWeight: FontWeight.normal),
                  ),
                ],
              ),
            ),
            Text.rich(
              TextSpan(
                text: "Fecha de nacimiento: ",
                style: TextStyle(fontWeight: FontWeight.bold),
                children: [
                  TextSpan(
                    text: birthDate,
                    style: TextStyle(fontWeight: FontWeight.normal),
                  ),
                ],
              ),
            ),
            Text.rich(
              TextSpan(
                text: "Familiar: ",
                style: TextStyle(fontWeight: FontWeight.bold),
                children: [
                  TextSpan(
                    text: relation,
                    style: TextStyle(fontWeight: FontWeight.normal),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
      Container(
        padding: EdgeInsets.symmetric(horizontal: 20, vertical: 10),
        decoration: BoxDecoration(
          borderRadius: BorderRadius.all(Radius.circular(20)),
          color: theme.getColorFor(ThemeCode.backgroundPrimary),
        ),
        child: Column(
          children: [
            Row(
              spacing: 10,
              children: [
                Text(
                  "Dirección",
                  style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20),
                ),
                Spacer(),
                TextButton(onPressed: () => {}, child: Text("Editar")),
              ],
            ),
            Text.rich(
              TextSpan(
                text: "Dirección: ",
                style: TextStyle(fontWeight: FontWeight.bold),
                children: [
                  TextSpan(
                    text: address,
                    style: TextStyle(fontWeight: FontWeight.normal),
                  ),
                ],
              ),
            ),
            Text.rich(
              TextSpan(
                text: "País: ",
                style: TextStyle(fontWeight: FontWeight.bold),
                children: [
                  TextSpan(
                    text: country,
                    style: TextStyle(fontWeight: FontWeight.normal),
                  ),
                ],
              ),
            ),
            Text.rich(
              TextSpan(
                text: "Nacionalidad: ",
                style: TextStyle(fontWeight: FontWeight.bold),
                children: [
                  TextSpan(
                    text: nationality,
                    style: TextStyle(fontWeight: FontWeight.normal),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
      Container(
        padding: EdgeInsets.symmetric(horizontal: 20, vertical: 10),
        decoration: BoxDecoration(
          borderRadius: BorderRadius.all(Radius.circular(20)),
          color: theme.getColorFor(ThemeCode.backgroundPrimary),
        ),
        child: Column(
          children: [
            Row(
              spacing: 10,
              children: [
                Text(
                  "Usuario",
                  style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20),
                ),
                Spacer(),
                TextButton(onPressed: () => {}, child: Text("Editar")),
              ],
            ),
            Text.rich(
              TextSpan(
                text: "Correo: ",
                style: TextStyle(fontWeight: FontWeight.bold),
                children: [
                  TextSpan(
                    text: email,
                    style: TextStyle(fontWeight: FontWeight.normal),
                  ),
                ],
              ),
            ),
            Text.rich(
              TextSpan(
                text: "Teléfono: ",
                style: TextStyle(fontWeight: FontWeight.bold),
                children: [
                  TextSpan(
                    text: phone,
                    style: TextStyle(fontWeight: FontWeight.normal),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),

      Container(
        padding: EdgeInsets.symmetric(horizontal: 20, vertical: 10),
        decoration: BoxDecoration(
          borderRadius: BorderRadius.all(Radius.circular(20)),
          color: theme.getColorFor(ThemeCode.backgroundPrimary),
        ),
        child: Row(
          spacing: 10,
          children: [
            Text(
              "Cambio de contraseña",
              style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20),
            ),
            Spacer(),
            TextButton(onPressed: () => {}, child: Text("Editar")),
          ],
        ),
      ),
      Container(
        padding: EdgeInsets.symmetric(horizontal: 20, vertical: 10),
        decoration: BoxDecoration(
          borderRadius: BorderRadius.all(Radius.circular(20)),
          color: theme.getColorFor(ThemeCode.backgroundPrimary),
        ),
        child: Column(
          children: [
            Row(
              spacing: 10,
              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.symmetric(horizontal: 20, vertical: 10),
        decoration: BoxDecoration(
          borderRadius: BorderRadius.all(Radius.circular(20)),
          color: theme.getColorFor(ThemeCode.backgroundTertiary),
        ),
        child: Column(
          children: [
            Row(
              spacing: 10,
              children: [
                Text(
                  "Plan anual",
                  style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20),
                ),
                Spacer(),
                TextButton(onPressed: () => {}, child: Text("Cambiar Plan")),
              ],
            ),
            Text("Sin permanencia"),
            Text("Llamadas y datos ilimitados"),
            Text("2 meses gratis"),
          ],
        ),
      ),

      TextButton(onPressed: () => {}, child: Text("Contáctanos")),
      TextButton(onPressed: () => {}, child: Text("Preguntas frecuentes")),
    ];

    return Scaffold(
      backgroundColor: theme.getColorFor(ThemeCode.backgroundSecondary),
      body: Stack(
        children: [
          DecoratedBox(
            decoration: BoxDecoration(
              borderRadius: const BorderRadius.all(Radius.circular(30)),
              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: [
                    FilledButton(
                      onPressed: () => {},
                      child: Container(
                        width: double.infinity,
                        padding: EdgeInsets.all(20),
                        child: Center(child: Text("Guardar cambios")),
                      ),
                    ),
                    TextButton(
                      onPressed: () => Navigator.pop(context),
                      child: Text("Cancelar"),
                    ),
                  ],
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }
}
