import 'package:flutter/material.dart';
import 'package:intl/intl.dart';
import '../../../l10n/app_localizations.dart';

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

  @override
  State<BlockCardScreen> createState() => _BlockCardScreen();
}

class _BlockCardScreen extends State<BlockCardScreen> {
  final _formKey = GlobalKey<FormState>();
  final _cardController = TextEditingController();
  final _cvvController = TextEditingController();
  final _expiryController = TextEditingController();
  final _phoneController = TextEditingController();

  Future<void> _pickExpiryDate() async {
    final now = DateTime.now();
    final selectedDate = await showDatePicker(
      context: context,
      initialDate: now,
      firstDate: now,
      lastDate: DateTime(now.year + 10),
    );
    if (selectedDate != null) {
      _expiryController.text = DateFormat('dd/MM/yyyy').format(selectedDate);
    }
  }

  void _blockCard() {
    if (_formKey.currentState?.validate() ?? false) {
      // Call your backend logic here

      final snackBar = SnackBar(
        content: Text(AppLocalizations.of(context).cardBlocked),
        action: SnackBarAction(
          label: 'X',
          onPressed: () {
            // Just close the SnackBar
          },
          textColor: Theme.of(context).dialogBackgroundColor,
        ),
        backgroundColor: Colors.black,
        behavior: SnackBarBehavior.floating,
      );

      ScaffoldMessenger.of(context).showSnackBar(snackBar);
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(
          AppLocalizations.of(context).blockCard,
        ),
        centerTitle: false,
      ),
      body: Stack(
        children: [
          Padding(
            padding: const EdgeInsets.all(10.0),
            child: Form(
              key: _formKey,
              child: ListView(
                children: [
                  const SizedBox(height: 10),
                  TextFormField(
                    controller: _cardController,
                    decoration: InputDecoration(
                      labelText: AppLocalizations.of(context).cardNumber,
                      border: const OutlineInputBorder(),
                      isDense: true,
                      filled: true,
                      fillColor: Theme.of(context).scaffoldBackgroundColor,
                      enabledBorder: const OutlineInputBorder(
                        borderSide: BorderSide(color: Colors.black),
                      ),
                      focusedBorder: const OutlineInputBorder(
                        borderSide: BorderSide(color: Colors.black, width: 2),
                      ),
                    ),
                    keyboardType: TextInputType.number,
                    textInputAction: TextInputAction.next,
                    validator: (value) => value != null && value.length == 11
                        ? null
                        : AppLocalizations.of(context).enterValidCardNumber,
                  ),
                  const SizedBox(height: 24),
                  Row(
                    children: [
                      Expanded(
                        child: TextFormField(
                          controller: _cvvController,
                          decoration: InputDecoration(
                            labelText: AppLocalizations.of(context).cvv,
                            border: const OutlineInputBorder(),
                            isDense: true,
                            filled: true,
                            fillColor:
                                Theme.of(context).scaffoldBackgroundColor,
                            enabledBorder: const OutlineInputBorder(
                              borderSide: BorderSide(color: Colors.black),
                            ),
                            focusedBorder: const OutlineInputBorder(
                              borderSide:
                                  BorderSide(color: Colors.black, width: 2),
                            ),
                          ),
                          keyboardType: TextInputType.number,
                          textInputAction: TextInputAction.next,
                          obscureText: true,
                          validator: (value) =>
                              value != null && value.length == 3
                                  ? null
                                  : AppLocalizations.of(context).cvv3Digits,
                        ),
                      ),
                      const SizedBox(width: 16),
                      Expanded(
                        child: TextFormField(
                          controller: _expiryController,
                          readOnly: true,
                          onTap: _pickExpiryDate,
                          decoration: InputDecoration(
                            labelText: AppLocalizations.of(context).expiryDate,
                            suffixIcon: const Icon(Icons.calendar_today),
                            border: const OutlineInputBorder(),
                            isDense: true,
                            filled: true,
                            fillColor:
                                Theme.of(context).scaffoldBackgroundColor,
                            enabledBorder: const OutlineInputBorder(
                              borderSide: BorderSide(color: Colors.black),
                            ),
                            focusedBorder: const OutlineInputBorder(
                              borderSide:
                                  BorderSide(color: Colors.black, width: 2),
                            ),
                          ),
                          validator: (value) => value != null &&
                                  value.isNotEmpty
                              ? null
                              : AppLocalizations.of(context).selectExpiryDate,
                        ),
                      ),
                    ],
                  ),
                  const SizedBox(height: 24),
                  TextFormField(
                    controller: _phoneController,
                    decoration: InputDecoration(
                      labelText: AppLocalizations.of(context).phone,
                      prefixIcon: const Icon(Icons.phone),
                      border: const OutlineInputBorder(),
                      isDense: true,
                      filled: true,
                      fillColor: Theme.of(context).scaffoldBackgroundColor,
                      enabledBorder: const OutlineInputBorder(
                        borderSide: BorderSide(color: Colors.black),
                      ),
                      focusedBorder: const OutlineInputBorder(
                        borderSide: BorderSide(color: Colors.black, width: 2),
                      ),
                    ),
                    textInputAction: TextInputAction.done,
                    keyboardType: TextInputType.phone,
                    validator: (value) => value != null && value.length >= 10
                        ? null
                        : AppLocalizations.of(context).enterValidPhone,
                  ),
                  const SizedBox(height: 45),
                  Align(
                    alignment: Alignment.center,
                    child: SizedBox(
                      width: 250,
                      child: ElevatedButton(
                        onPressed: _blockCard,
                        style: ElevatedButton.styleFrom(
                          shape: const StadiumBorder(),
                          padding: const EdgeInsets.symmetric(vertical: 16),
                          backgroundColor: Theme.of(context).primaryColor,
                          foregroundColor:
                              Theme.of(context).scaffoldBackgroundColor,
                        ),
                        child: Text(AppLocalizations.of(context).block),
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ),
          IgnorePointer(
            child: Center(
              child: Opacity(
                opacity: 0.07, // Reduced opacity
                child: ClipOval(
                  child: Image.asset(
                    'assets/images/logo.png',
                    width: 200, // Adjust size as needed
                    height: 200, // Adjust size as needed
                  ),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}
