import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import '../../core/theme/app_colors.dart';
import '../../core/theme/app_theme.dart';
import '../../data/models/socratic_checkpoint_model.dart';
import 'luxury_widgets.dart';

class SocraticCheckpointModal extends StatefulWidget {
  final SocraticCheckpointModel checkpoint;
  final Function(SocraticOptionModel) onOptionSelected;

  const SocraticCheckpointModal({
    super.key,
    required this.checkpoint,
    required this.onOptionSelected,
  });

  @override
  State<SocraticCheckpointModal> createState() => _SocraticCheckpointModalState();
}

class _SocraticCheckpointModalState extends State<SocraticCheckpointModal> {
  SocraticOptionModel? _selectedOption;
  bool _submitted = false;
  bool _showHint = false;

  @override
  Widget build(BuildContext context) {
    return Dialog(
      backgroundColor: Colors.transparent,
      insetPadding: const EdgeInsets.symmetric(horizontal: 20, vertical: 24),
      child: Container(
        constraints: const BoxConstraints(maxWidth: 540),
        padding: const EdgeInsets.all(24),
        decoration: BoxDecoration(
          color: const Color(0xFF0C1424),
          borderRadius: BorderRadius.circular(28),
          border: Border.all(color: AppColors.saqelCyan.withAlpha(90), width: 1.5),
          boxShadow: [
            BoxShadow(
              color: AppColors.saqelCyan.withAlpha(40),
              blurRadius: 40,
              spreadRadius: 2,
            ),
            const BoxShadow(
              color: Colors.black,
              blurRadius: 30,
              offset: Offset(0, 10),
            ),
          ],
        ),
        child: Column(
          mainAxisSize: MainAxisSize.min,
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            // Top Badge: understanding checkpoint indicator
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Container(
                  padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 6),
                  decoration: BoxDecoration(
                    color: AppColors.saqelCyan.withAlpha(30),
                    borderRadius: BorderRadius.circular(20),
                    border: Border.all(color: AppColors.saqelCyan.withAlpha(80)),
                  ),
                  child: const Row(
                    mainAxisSize: MainAxisSize.min,
                    children: [
                      Icon(CupertinoIcons.sparkles, color: AppColors.saqelCyan, size: 14),
                      SizedBox(width: 6),
                      Text(
                        'نقطة فهم 🧠',
                        style: TextStyle(
                          fontSize: 12,
                          fontWeight: FontWeight.w700,
                          color: AppColors.saqelCyan,
                        ),
                      ),
                    ],
                  ),
                ),
                Container(
                  padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 4),
                  decoration: BoxDecoration(
                    color: AppColors.darkSurface,
                    borderRadius: BorderRadius.circular(12),
                  ),
                  child: const Text(
                    '+0.5% جاهزية',
                    style: TextStyle(
                      fontSize: 11,
                      fontWeight: FontWeight.w800,
                      color: AppColors.emeraldGreen,
                    ),
                  ),
                ),
              ],
            ),
            const SizedBox(height: 20),

            // Question Text
            Text(
              widget.checkpoint.questionText,
              style: AppTypography.titleLarge.copyWith(
                color: Colors.white,
                fontWeight: FontWeight.w800,
                height: 1.4,
              ),
              textAlign: TextAlign.right,
            ),
            const SizedBox(height: 20),

            // Options List
            ...widget.checkpoint.options.map((opt) {
              final isSelected = _selectedOption?.id == opt.id;
              Color borderColor = AppColors.darkCardBorder;
              Color bgColor = AppColors.darkSurface;

              if (_submitted) {
                if (opt.isCorrect) {
                  borderColor = AppColors.emeraldGreen;
                  bgColor = AppColors.emeraldGreen.withAlpha(30);
                } else if (isSelected && !opt.isCorrect) {
                  borderColor = AppColors.crimsonRed;
                  bgColor = AppColors.crimsonRed.withAlpha(30);
                }
              } else if (isSelected) {
                borderColor = AppColors.saqelCyan;
                bgColor = AppColors.saqelCyan.withAlpha(20);
              }

              return Padding(
                padding: const EdgeInsets.only(bottom: 10),
                child: InkWell(
                  onTap: _submitted
                      ? null
                      : () {
                          setState(() => _selectedOption = opt);
                        },
                  borderRadius: BorderRadius.circular(16),
                  child: Container(
                    padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 14),
                    decoration: BoxDecoration(
                      color: bgColor,
                      borderRadius: BorderRadius.circular(16),
                      border: Border.all(color: borderColor, width: isSelected ? 1.8 : 1.0),
                    ),
                    child: Row(
                      children: [
                        Container(
                          width: 24,
                          height: 24,
                          decoration: BoxDecoration(
                            shape: BoxShape.circle,
                            border: Border.all(
                              color: isSelected ? AppColors.saqelCyan : AppColors.textSecondaryDark,
                              width: 2,
                            ),
                            color: isSelected ? AppColors.saqelCyan : Colors.transparent,
                          ),
                          child: isSelected
                              ? const Icon(Icons.check, size: 16, color: Colors.black)
                              : null,
                        ),
                        const SizedBox(width: 14),
                        Expanded(
                          child: Text(
                            opt.text,
                            style: TextStyle(
                              fontSize: 14,
                              fontWeight: FontWeight.w600,
                              color: isSelected ? Colors.white : AppColors.textSecondaryDark,
                            ),
                            textAlign: TextAlign.right,
                          ),
                        ),
                      ],
                    ),
                  ),
                ),
              );
            }),

            // Hint Drawer (if requested)
            if (_showHint && widget.checkpoint.hint.isNotEmpty) ...[
              const SizedBox(height: 12),
              Container(
                padding: const EdgeInsets.all(14),
                decoration: BoxDecoration(
                  color: AppColors.guardianAmber.withAlpha(20),
                  borderRadius: BorderRadius.circular(14),
                  border: Border.all(color: AppColors.guardianAmber.withAlpha(60)),
                ),
                child: Row(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    const Icon(CupertinoIcons.lightbulb_fill, color: AppColors.guardianAmber, size: 18),
                    const SizedBox(width: 10),
                    Expanded(
                      child: Text(
                        widget.checkpoint.hint,
                        style: const TextStyle(
                          color: Color(0xFFFDE68A),
                          fontSize: 13,
                          fontWeight: FontWeight.w600,
                          height: 1.4,
                        ),
                        textAlign: TextAlign.right,
                      ),
                    ),
                  ],
                ),
              ),
            ],

            const SizedBox(height: 20),

            // Bottom Actions
            Row(
              children: [
                if (!_showHint && widget.checkpoint.hint.isNotEmpty)
                  TextButton.icon(
                    onPressed: () => setState(() => _showHint = true),
                    icon: const Icon(CupertinoIcons.lightbulb, size: 16, color: AppColors.guardianAmber),
                    label: const Text(
                      'تلميح الذكاء الاصطناعي',
                      style: TextStyle(color: AppColors.guardianAmber, fontSize: 12, fontWeight: FontWeight.w700),
                    ),
                  ),
                const Spacer(),
                Expanded(
                  flex: 2,
                  child: LuxuryButton(
                    text: _submitted ? 'متابعة ⚡' : 'تأكيد الإجابة 🚀',
                    onPressed: _selectedOption == null
                        ? null
                        : () {
                            if (!_submitted) {
                              setState(() => _submitted = true);
                              widget.onOptionSelected(_selectedOption!);
                            } else {
                              Navigator.of(context).pop();
                            }
                          },
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}