import 'package:animate_do/animate_do.dart';
import 'package:flutter/material.dart';
import 'package:turquessa_mesas_hoster/utils/themes.dart';

class PerfilScreen extends StatefulWidget {
  const PerfilScreen({super.key});

  @override
  State<PerfilScreen> createState() => _PerfilScreenState();
}

class _PerfilScreenState extends State<PerfilScreen> {
  @override
  Widget build(BuildContext context) {
    return SlideInRight(
      duration: const Duration(milliseconds: 250),
      child: Scaffold(
        body: Padding(
          padding: const EdgeInsets.symmetric(horizontal: 16),
          child: Column(
            children: [
              // Banner principal con fondo azul
              // Banner principal con fondo azul
              Container(
                width: double.infinity,
                height: 200,
                decoration: const BoxDecoration(
                  color: Colors.blue,
                  borderRadius: BorderRadius.only(
                    bottomLeft: Radius.circular(20),
                    bottomRight: Radius.circular(20),
                  ),
                ),
                child: ClipRRect(
                  // Añadimos ClipRRect para asegurar que nada se salga de los bordes
                  borderRadius: const BorderRadius.only(
                    bottomLeft: Radius.circular(20),
                    bottomRight: Radius.circular(20),
                  ),
                  child: Stack(
                    children: [
                      // Texto del banner
                      const Positioned(
                        left: 20,
                        top: 60,
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Text(
                              'Bienvenido!',
                              style: TextStyle(
                                fontSize: 28,
                                fontWeight: FontWeight.bold,
                                color: Colors.white,
                              ),
                            ),
                            SizedBox(height: 8),
                            Text(
                              'Visitanos el día de hoy para una oferta \n especial en productos seleccionados',
                              style: TextStyle(
                                fontSize: 24,
                                fontWeight: FontWeight.bold,
                                color: Colors.white,
                              ),
                            ),
                          ],
                        ),
                      ),

                      // Imagen posicionada en la esquina inferior derecha
                      Positioned(
                        right: 0,
                        bottom: 0,
                        child: Image.asset(
                          'assets/props.png',
                          height: 190,
                          fit: BoxFit.contain,
                        ),
                      ),

                      // Icono de bombilla
                      Positioned(
                        right: 80,
                        top: 60,
                        child: Container(
                          padding: const EdgeInsets.all(8),
                          decoration: const BoxDecoration(
                            color: Colors.yellow,
                            shape: BoxShape.circle,
                          ),
                          child: const Icon(
                            Icons.lightbulb,
                            color: Colors.white,
                            size: 24,
                          ),
                        ),
                      ),
                    ],
                  ),
                ),
              ),
              //? Informaicon de usuario
              Padding(
                padding: const EdgeInsets.only(top: 16),
                child: Container(
                  width: double.infinity,
                  padding: const EdgeInsets.all(20),
                  decoration: BoxDecoration(
                    color: const Color(0xFFF5F5F5),
                    borderRadius: BorderRadius.circular(16),
                  ),
                  child: Row(
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: [
                      // Columna izquierda con la información del usuario
                      Expanded(
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            // Nombre del usuario
                            Text(
                              'Usuario Conocido',
                              style: TextStyle(
                                fontSize: 22,
                                fontWeight: FontWeight.bold,
                                color: AppTheme.secondary,
                              ),
                            ),
                            const SizedBox(height: 8),
                            // Correo electrónico
                            Text(
                              'yadidelias@gmail.com',
                              style: TextStyle(
                                fontSize: 16,
                                color: AppTheme.secondary,
                              ),
                            ),
                            const SizedBox(height: 8),

                            // Botón de editar
                            GestureDetector(
                              onTap: () {
                                // Navigator.of(context)
                                //     .pushNamed('editar-perfil');
                              },
                              child: const Text(
                                'Editar',
                                style: TextStyle(
                                  fontSize: 16,
                                  fontWeight: FontWeight.w500,
                                  color: Colors.blue,
                                ),
                              ),
                            ),
                          ],
                        ),
                      ),
                      Container(
                        width: 80,
                        height: 80,
                        child: Image.network(
                          'https://st4.depositphotos.com/9998432/22597/v/450/depositphotos_225976914-stock-illustration-person-gray-photo-placeholder-man.jpg',
                          fit: BoxFit.cover,
                        ),
                      ),
                    ],
                  ),
                ),
              ),
              Padding(
                padding: const EdgeInsets.only(top: 16),
                child: ClipRRect(
                  borderRadius: BorderRadius.circular(16),
                  child: Container(
                    height: 110,
                    padding: const EdgeInsets.symmetric(horizontal: 16),
                    width: double.infinity,
                    color: Colors.white,
                    child: Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          const Row(
                            children: [
                              Icon(Icons.nights_stay_rounded, size: 36),
                              Padding(
                                padding: EdgeInsets.only(left: 8),
                                child: Text("Modo oscuro",
                                    style: TextStyle(
                                        fontSize: 29,
                                        fontWeight: FontWeight.bold)),
                              ),
                            ],
                          ),
                          Switch(
                            activeColor: Theme.of(context).primaryColor,
                            value: false,
                            onChanged: (value) {},
                          ),
                        ]),
                  ),
                ),
              ),
              Padding(
                padding: const EdgeInsets.only(top: 16),
                child: ClipRRect(
                  borderRadius: BorderRadius.circular(16),
                  child: Container(
                    height: 110,
                    padding: const EdgeInsets.symmetric(horizontal: 16),
                    width: double.infinity,
                    color: Colors.white,
                    child: Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          const Row(
                            children: [
                              Icon(Icons.lock_clock, size: 36),
                              Padding(
                                padding: EdgeInsets.only(left: 8),
                                child: Text("Mis Pedidos",
                                    style: TextStyle(
                                        fontSize: 29,
                                        fontWeight: FontWeight.bold)),
                              ),
                            ],
                          ),
                          IconButton(
                              onPressed: () {},
                              icon:
                                  const Icon(Icons.arrow_forward_ios_rounded)),
                        ]),
                  ),
                ),
              ),
              Padding(
                padding: const EdgeInsets.only(top: 16),
                child: ClipRRect(
                  borderRadius: BorderRadius.circular(16),
                  child: Container(
                    height: 110,
                    padding: const EdgeInsets.symmetric(horizontal: 16),
                    width: double.infinity,
                    color: Colors.white,
                    child: Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          const Row(
                            children: [
                              Icon(Icons.supervised_user_circle_sharp,
                                  size: 36),
                              Padding(
                                padding: EdgeInsets.only(left: 8),
                                child: Text("Conoce más de nosotros",
                                    style: TextStyle(
                                        fontSize: 29,
                                        fontWeight: FontWeight.bold)),
                              ),
                            ],
                          ),
                          IconButton(
                              onPressed: () {},
                              icon:
                                  const Icon(Icons.arrow_forward_ios_rounded)),
                        ]),
                  ),
                ),
              ),
              Padding(
                padding: const EdgeInsets.only(top: 16),
                child: ClipRRect(
                  borderRadius: BorderRadius.circular(16),
                  child: Container(
                      decoration: BoxDecoration(
                        color: Colors.white,
                        borderRadius: BorderRadius.circular(16),
                        border: Border.all(color: Colors.red, width: 3),
                      ),
                      height: 110,
                      padding: const EdgeInsets.symmetric(horizontal: 16),
                      width: double.infinity,
                      child: const Center(
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.center,
                          crossAxisAlignment: CrossAxisAlignment.center,
                          children: [
                            Icon(
                              Icons.logout_outlined,
                              size: 36,
                              color: Colors.red,
                            ),
                            Text(
                              "Cerrar Perfil",
                              style: TextStyle(
                                  fontWeight: FontWeight.bold,
                                  fontSize: 30,
                                  color: Colors.red),
                            ),
                          ],
                        ),
                      )),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}