import 'package:flutter/material.dart';
import 'package:sigap/src/utils/constants/colors.dart';
import 'package:sigap/src/utils/constants/sizes.dart';

class ValidationMessageCard extends StatelessWidget {
  final String message;
  final bool isValid;
  final bool hasConfirmed;
  final VoidCallback? onConfirm;
  final VoidCallback? onTryAnother;
  final String? title;
  final IconData? icon;
  final bool isLoading;
  final Widget? customAction;
  final Color? customColor;

  const ValidationMessageCard({
    super.key,
    required this.message,
    required this.isValid,
    this.hasConfirmed = false,
    this.onConfirm,
    this.onTryAnother,
    this.title,
    this.icon,
    this.isLoading = false,
    this.customAction,
    this.customColor,
  });

  @override
  Widget build(BuildContext context) {
    // Determine the appropriate color based on status
    final Color baseColor =
        customColor ??
        (isValid ? Colors.green : (isLoading ? Colors.orange : TColors.error));

    // Determine appropriate icon
    final IconData statusIcon =
        icon ??
        (isValid
            ? Icons.check_circle
            : (isLoading ? Icons.hourglass_top : Icons.error));

    // Determine appropriate title
    final String statusTitle =
        title ??
        (isValid
            ? (hasConfirmed
                ? 'Verified & Confirmed'
                : 'Verification Successful')
            : (isLoading ? 'Processing' : 'Verification Failed'));

    return Container(
      margin: const EdgeInsets.symmetric(vertical: TSizes.sm),
      padding: const EdgeInsets.all(TSizes.md),
      decoration: BoxDecoration(
        color: baseColor.withOpacity(0.1),
        borderRadius: BorderRadius.circular(TSizes.borderRadiusSm),
        border: Border.all(color: baseColor.withOpacity(0.3)),
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          // Header row with icon and title
          Row(
            children: [
              isLoading
                  ? SizedBox(
                    width: 20,
                    height: 20,
                    child: CircularProgressIndicator(
                      strokeWidth: 2,
                      color: baseColor,
                ),
                  )
                  : Icon(statusIcon, color: baseColor, size: TSizes.iconMd),
              const SizedBox(width: TSizes.sm),
              // Wrap title in Expanded to prevent overflow
              Expanded(
                child: Text(
                  statusTitle,
                  style: TextStyle(
                    fontWeight: FontWeight.bold,
                    color: baseColor,
                  ),
                  overflow: TextOverflow.ellipsis, // Handle long titles
                ),
              ),
            ],
          ),
          const SizedBox(height: TSizes.sm),
          // Message with proper text wrapping
          Text(
            message,
            style: TextStyle(
              fontSize: TSizes.fontSizeSm,
              color: baseColor.withOpacity(0.8),
            ),
            // Enable text wrapping
            softWrap: true,
            overflow: TextOverflow.visible,
          ),

          // Show confirm/try another buttons if valid but not confirmed
          if (isValid &&
              !hasConfirmed &&
              onConfirm != null &&
              onTryAnother != null) ...[
            const SizedBox(height: TSizes.md),
            // Make buttons responsive to screen width
            LayoutBuilder(
              builder: (context, constraints) {
                // If width is too narrow, stack buttons vertically
                if (constraints.maxWidth < 300) {
                  return Column(
                    crossAxisAlignment: CrossAxisAlignment.stretch,
                    children: [
                      ElevatedButton(
                        onPressed: onConfirm,
                        style: ElevatedButton.styleFrom(
                          backgroundColor: Colors.green.withOpacity(0.1),
                          foregroundColor: Colors.green, // Ubah warna teks
                          padding: const EdgeInsets.symmetric(
                            vertical: TSizes.sm,
                          ),
                          shape: RoundedRectangleBorder(
                            borderRadius: BorderRadius.circular(
                              TSizes.borderRadiusSm,
                            ),
                            side: BorderSide(
                              color:
                                  Colors.green, // Ubah border jadi hijau solid
                              width: 1.0,
                            ),
                          ),
                        ),
                        child: const Text('Confirm Image'),
                      ),
                      const SizedBox(height: TSizes.sm),
                      OutlinedButton(
                        onPressed: onTryAnother,
                        style: OutlinedButton.styleFrom(
                          padding: const EdgeInsets.symmetric(
                            vertical: TSizes.sm,
                          ),
                          shape: RoundedRectangleBorder(
                            borderRadius: BorderRadius.circular(
                              TSizes.borderRadiusSm,
                            ),
                            side: BorderSide(
                              color: TColors.warning.withOpacity(0.1),
                            ),
                          ),
                        ),

                        child: const Text(
                          'Try Another',
                          style: TextStyle(
                            fontSize: TSizes.fontSizeSm,
                            color: TColors.warning,
                          ),
                        ),
                      ),
                    ],
                  );
                } else {
                  // Otherwise use row layout
                  return Row(
                    children: [
                      Expanded(
                        child: ElevatedButton(
                          onPressed: onConfirm,
                          
                          style: ElevatedButton.styleFrom(
                            backgroundColor: Colors.green.withOpacity(0.1),
                            foregroundColor: Colors.green, // Warna teks
                            padding: const EdgeInsets.symmetric(
                              vertical: TSizes.sm,
                            ),
                            shape: RoundedRectangleBorder(
                              borderRadius: BorderRadius.circular(
                                TSizes.borderRadiusSm,
                              ),
                              side: BorderSide(
                                color:
                                    Colors
                                        .green, // Ubah border jadi hijau solid
                                width: 1.0,
                              ),
                            ),
                          ),
                          child: const Text(
                            'Confirm',
                            overflow: TextOverflow.ellipsis,
                            style: TextStyle(
                              fontSize: TSizes.fontSizeSm,
                              color: Colors.green, // Pastikan warna teks hijau
                            ),
                          ),
                        ),
                      ),
                      const SizedBox(width: TSizes.sm),
                      Expanded(
                        child: OutlinedButton(
                          onPressed: onTryAnother,
                          style: OutlinedButton.styleFrom(
                            padding: const EdgeInsets.symmetric(
                              vertical: TSizes.sm,
                            ),
                            shape: RoundedRectangleBorder(
                              borderRadius: BorderRadius.circular(
                                TSizes.borderRadiusSm,
                              ),
                              side: BorderSide(
                                color: TColors.warning.withOpacity(0.1),
                              ),
                            ),
                          ),
                          child: const Text(
                            'Try Another',
                            overflow: TextOverflow.ellipsis,
                            style: TextStyle(fontSize: TSizes.fontSizeSm),
                          ),
                        ),
                      ),
                    ],
                  );
                }
              },
            ),
          ],

          // Show custom action if provided
          if (customAction != null) ...[
            const SizedBox(height: TSizes.sm),
            customAction!,
          ],

          // Show confirmed status if confirmed
          if (hasConfirmed) ...[
            const SizedBox(height: TSizes.sm),
            Row(
              children: [
                Icon(
                  Icons.verified_user,
                  color: Colors.green,
                  size: TSizes.iconSm,
                ),
                const SizedBox(width: TSizes.xs),
                Expanded(
                  child: Text(
                    'Image confirmed',
                    style: TextStyle(
                      color: Colors.green,
                      fontWeight: FontWeight.bold,
                      fontSize: TSizes.fontSizeSm,
                    ),
                    overflow: TextOverflow.ellipsis,
                  ),
                ),
              ],
            ),
          ],
        ],
      ),
    );
  }
}
