import 'package:appframe/bloc/setting/account_cubit.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';

class AccountPageV2 extends StatelessWidget {
  const AccountPageV2({super.key});

  @override
  Widget build(BuildContext context) {
    return BlocProvider(
      create: (context) => AccountCubit(AccountState()),
      child: BlocConsumer<AccountCubit, AccountState>(
        builder: (context, state) {
          return Scaffold(
            backgroundColor: Colors.white,
            appBar: AppBar(
              title: const Text(
                '账号与安全',
                style: TextStyle(
                  color: Color(0xFF333333),
                  fontSize: 16,
                  fontWeight: FontWeight.bold,
                  height: 20 / 16,
                ),
              ),
              centerTitle: true,
              backgroundColor: Colors.white,
              elevation: 0,
              iconTheme: const IconThemeData(color: Colors.black),
            ),
            body: state.loaded
                ? _buildBody(context, state)
                : const Center(
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        CircularProgressIndicator(color: Color(0xFF7691FA)),
                        SizedBox(height: 16),
                        Text('加载中...'),
                      ],
                    ),
                  ),
          );
        },
        listener: (context, state) {},
      ),
    );
  }

  Widget _buildBody(BuildContext context, AccountState state) {
    final cubit = context.read<AccountCubit>();
    return Column(
      children: [
        Expanded(
          child: ListView(
            padding: EdgeInsets.zero,
            children: [
              const Divider(height: 1, thickness: 0.5, color: Color(0xFFE5E5E5)),
              _buildItem(
                label: '微信账号',
                value: state.name.isNotEmpty ? state.nickname : '未绑定',
                showArrow: false,
                onTap: null,
              ),
              const Divider(height: 1, thickness: 0.5, color: Color(0xFFE5E5E5)),
              _buildItem(
                label: '手机号',
                value: state.phone.isNotEmpty
                    ? '${state.phone.substring(0, 3)}****${state.phone.substring(7, 11)}'
                    : '未绑定',
                showArrow: true,
                onTap: () => cubit.goBind(),
              ),
              const Divider(height: 1, thickness: 0.5, color: Color(0xFFE5E5E5)),
              _buildItem(
                label: 'Apple账号',
                value: state.appleId.isNotEmpty ? '已绑定' : '未绑定',
                showArrow: true,
                onTap: state.appleId.isEmpty ? () => cubit.appleBind() : () => cubit.goApple(),
              ),
              const Divider(height: 1, thickness: 0.5, color: Color(0xFFE5E5E5)),
            ],
          ),
        ),
        Padding(
          padding: const EdgeInsets.only(left: 15, right: 15, bottom: 40),
          child: SizedBox(
            width: double.infinity,
            height: 44,
            child: OutlinedButton(
              onPressed: () => cubit.goLogoff(),
              style: OutlinedButton.styleFrom(
                foregroundColor: const Color(0xFF333333),
                side: const BorderSide(color: Color(0xFFE5E5E5), width: 0.5),
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(26),
                ),
              ),
              child: const Text(
                '注销用户',
                style: TextStyle(
                  fontSize: 16,
                  height: 20 / 16,
                  color: Color(0xFF333333),
                ),
              ),
            ),
          ),
        ),
      ],
    );
  }

  Widget _buildItem({
    required String label,
    required String value,
    required bool showArrow,
    VoidCallback? onTap,
  }) {
    return InkWell(
      onTap: onTap,
      child: Padding(
        padding: const EdgeInsets.symmetric(horizontal: 15, vertical: 18),
        child: Row(
          children: [
            Text(
              label,
              style: const TextStyle(
                fontSize: 16,
                height: 1.0,
                color: Color(0xFF333333),
              ),
            ),
            const Spacer(),
            Text(
              value,
              style: const TextStyle(
                fontSize: 16,
                color: Color(0xFF333333),
              ),
            ),
            if (showArrow) ...const [
              SizedBox(width: 7.5),
              Icon(Icons.arrow_forward_ios, size: 18, color: Color(0xFFCCCCCC)),
            ],
          ],
        ),
      ),
    );
  }
}