import 'package:flutter/material.dart';
import '../../widgets/custom_navigation_bar.dart';
import 'bank_account_info_model.dart';

class BankAccountDetailScreen extends StatefulWidget {
  final BankAccountInfoModel model;
  const BankAccountDetailScreen({super.key, required this.model});

  @override
  State<BankAccountDetailScreen> createState() => _BankAccountDetailScreenState();
}

class _BankAccountDetailScreenState extends State<BankAccountDetailScreen> {
  late bool _isDefault;

  @override
  void initState() {
    super.initState();
    _isDefault = widget.model.isDefault ?? false;
  }

  @override
  Widget build(BuildContext context) {
    final title = widget.model.cardName?.isNotEmpty == true
        ? widget.model.cardName!.toUpperCase()
        : (widget.model.paymentMethod ?? 'THẺ/TÀI KHOẢN');

    return Scaffold(
      appBar: CustomNavigationBar(title: 'Thông tin thẻ'),
      body: Column(
        children: [
          const SizedBox(height: 8),
          _CardPreview(
            title: title,
            maskedNumber: widget.model.cardNumber ?? '',
          ),
          const SizedBox(height: 12),
          _defaultRow(context),
          const Spacer(),
          _deleteButton(context),
          const SizedBox(height: 12),
          SafeArea(top: false, child: const SizedBox(height: 0)),
        ],
      ),
      backgroundColor: const Color(0xFFF7F7F7),
    );
  }

  Widget _defaultRow(BuildContext context) {
    return Container(
      margin: const EdgeInsets.symmetric(horizontal: 16),
      padding: const EdgeInsets.symmetric(horizontal: 16),
      height: 56,
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(12),
      ),
      child: Row(
        children: [
          const Expanded(
            child: Text(
              'Đặt làm mặc định',
              style: TextStyle(fontSize: 16),
            ),
          ),
          Switch(
            value: _isDefault,
            activeColor: Colors.white,
            activeTrackColor: const Color(0xFF34C759),
            onChanged: (val) async {
              setState(() => _isDefault = val);
              // if (widget.onMakeDefault != null) {
              //   await widget.onMakeDefault!(widget.model);
              // }
            },
          ),
        ],
      ),
    );
  }

  Widget _deleteButton(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 16),
      child: ElevatedButton(
        onPressed: () async {
          final ok = await showDialog<bool>(
            context: context,
            builder: (_) => AlertDialog(
              title: const Text('Xoá thẻ?'),
              content: Text(
                widget.model.formMessageDelete ??
                    'Bạn có chắc muốn xoá thẻ/tài khoản này?',
              ),
              actions: [
                TextButton(onPressed: () => Navigator.pop(context, false), child: const Text('Huỷ')),
                TextButton(onPressed: () => Navigator.pop(context, true), child: const Text('Xoá')),
              ],
            ),
          );
          // if (ok == true && widget.onDelete != null) {
          //   await widget.onDelete!(widget.model);
          //   if (context.mounted) Navigator.pop(context);
          // }
        },
        style: ElevatedButton.styleFrom(
          backgroundColor: const Color(0xFFF2F2F2),
          elevation: 0,
          minimumSize: const Size.fromHeight(52),
          shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(16)),
        ),
        child: const Text(
          'Xoá',
          style: TextStyle(color: Colors.red, fontWeight: FontWeight.w600, fontSize: 16),
        ),
      ),
    );
  }
}

class _CardPreview extends StatelessWidget {
  final String title;
  final String maskedNumber;

  const _CardPreview({
    required this.title,
    required this.maskedNumber,
  });

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 180,
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(16),
        gradient: const LinearGradient(
          begin: Alignment.topLeft,
          end: Alignment.bottomRight,
          colors: [
            Color(0xFF3E3A6D),
            Color(0xFF6E5DAA),
            Color(0xFF8E77C7),
          ],
        ),
        boxShadow: const [
          BoxShadow(color: Colors.black26, blurRadius: 12, offset: Offset(0, 6)),
        ],
      ),
      margin: const EdgeInsets.all(16),
      padding: const EdgeInsets.all(16),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(
            title, // VISA / MASTER / BANK NAME
            style: const TextStyle(color: Colors.white, fontSize: 20, fontWeight: FontWeight.w700, letterSpacing: 1.2),
          ),
          const Spacer(),
          const Text('Số thẻ', style: TextStyle(color: Colors.white70, fontSize: 13)),
          const SizedBox(height: 6),
          Text(
            maskedNumber,
            style: const TextStyle(color: Colors.white, fontSize: 22, fontWeight: FontWeight.w700, letterSpacing: 2),
          ),
        ],
      ),
    );
  }
}