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

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

  @override
  State<CardPinSetScreen> createState() => _CardPinSetScreen();
}

class _CardPinSetScreen extends State<CardPinSetScreen> {
  final _formKey = GlobalKey<FormState>();
  final _pinController = TextEditingController();
  final _confirmPinController = TextEditingController();

  void _submit() {
    if (_formKey.currentState!.validate()) {
      // Handle PIN submission logic here
      final snackBar = SnackBar(
        content: Text(AppLocalizations.of(context).pinSetSuccess),
        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
  void dispose() {
    _pinController.dispose();
    _confirmPinController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(
          AppLocalizations.of(context).cardPin,
        ),
        centerTitle: false,
      ),
      body: Stack(
        children: [
          Padding(
            padding: const EdgeInsets.all(16.0),
            child: Form(
              key: _formKey,
              child: Column(
                children: [
                  TextFormField(
                    controller: _pinController,
                    obscureText: true,
                    decoration: InputDecoration(
                      labelText: AppLocalizations.of(context).enterNewPin,
                      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) {
                      if (value == null || value.isEmpty) {
                        return AppLocalizations.of(context).pleaseEnterNewPin;
                      }
                      if (value.length < 4) {
                        return AppLocalizations.of(context).pin4Digits;
                      }
                      return null;
                    },
                  ),
                  const SizedBox(height: 24),
                  TextFormField(
                    controller: _confirmPinController,
                    obscureText: true,
                    decoration: InputDecoration(
                      labelText: AppLocalizations.of(context).enterAgain,
                      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.done,
                    validator: (value) {
                      if (value != _pinController.text) {
                        return AppLocalizations.of(context).pinsDoNotMatch;
                      }
                      return null;
                    },
                  ),
                  const SizedBox(height: 45),
                  Align(
                    alignment: Alignment.center,
                    child: SizedBox(
                      width: 250,
                      child: ElevatedButton(
                        onPressed: _submit,
                        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).submit),
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ),
          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
                  ),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}
