import 'package:flutter/material.dart';
import 'package:gap/gap.dart';
import '../../ui/theme/app_theme.dart';
import '../../ui/widgets/structure_widgets.dart';
import '../../models/ayuel_response.dart';

class AyuelResponseCard extends StatelessWidget {
  final String query;
  final String suggestion;
  final List<AyuelAction> actions;
  final Function(AyuelAction) onActionSelected;
  final VoidCallback onCancel;

  const AyuelResponseCard({
    super.key,
    required this.query,
    required this.suggestion,
    required this.actions,
    required this.onActionSelected,
    required this.onCancel,
  });

  @override
  Widget build(BuildContext context) {
    return AyuelCard(
      backgroundColor: Colors.white,
      padding: const EdgeInsets.all(0),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: [
          Container(
            width: 40,
            height: 4,
            decoration: BoxDecoration(
              color: AppTheme.surface,
              borderRadius: BorderRadius.circular(2),
            ),
          ),
          const Gap(24),
          Row(
            children: [
              const Icon(Icons.person, size: 16, color: AppTheme.textSecondary),
              const Gap(8),
              Expanded(
                child: Text(
                  "You asked: $query",
                  style: AppTheme.textTheme.bodyMedium,
                  maxLines: 2,
                  overflow: TextOverflow.ellipsis,
                ),
              ),
            ],
          ),
          const Gap(24),
          AyuelCard(
            backgroundColor: AppTheme.background,
            child: Column(
              children: [
                Text("Ayuel suggests...", style: AppTheme.textTheme.bodyMedium),
                const Gap(8),
                Text(
                  suggestion,
                  style: AppTheme.textTheme.displayMedium?.copyWith(
                    height: 1.3,
                  ),
                  textAlign: TextAlign.center,
                ),
                const Gap(24),
                Wrap(
                  spacing: 8,
                  runSpacing: 8,
                  alignment: WrapAlignment.center,
                  children: actions.map((action) {
                    return ActionChip(
                      onPressed: () => onActionSelected(action),
                      label: Text(action.label),
                      backgroundColor: Colors.white,
                    );
                  }).toList(),
                ),
              ],
            ),
          ),
          const Gap(24),
          SizedBox(
            width: double.infinity,
            height: 56,
            child: ElevatedButton(
              style: ElevatedButton.styleFrom(
                backgroundColor: AppTheme.primary,
                foregroundColor: Colors.white,
                elevation: 0,
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(100),
                ),
              ),
              onPressed: onCancel,
              child: const Text("Cancel"),
            ),
          ),
          const Gap(20),
        ],
      ),
    );
  }
}
