import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

import 'package:doormile/main.dart';
import 'package:doormile/shared/state/app_state.dart';
import 'package:doormile/core/theme/app_colors.dart';
import 'package:doormile/core/theme/app_theme.dart';
import 'package:doormile/core/widgets/common.dart';
import 'package:doormile/features/booking/screens/booking_scaffold.dart';

class ServicePriceScreen extends StatelessWidget {
  const ServicePriceScreen({super.key});

  @override
  Widget build(BuildContext context) {
    final state = context.watch<AppState>();
    final draft = state.draft;
    return BookingScaffold(
      title: 'Service & Price',
      step: 3,
      stepLabel: 'Step 3: Choose Service',
      buttonLabel: 'Confirm & Continue',
      onContinue: () => Navigator.pushNamed(context, Routes.bookingPreview),
      children: [
        Text('CHOOSE SERVICE',
            style: AppTheme.caption
                .copyWith(letterSpacing: 1.2, fontWeight: FontWeight.w700)),
        const SizedBox(height: 12),
        _ServiceCard(
          active: draft.service == 'Standard',
          title: 'Standard',
          badge: 'EV-FIRST',
          subtitle: 'Today by 6:00 PM',
          note: '3-Wheeler Collection included',
          price: '₹${draft.minPrice.toStringAsFixed(0)}',
          icon: Icons.eco,
          iconColor: AppColors.tertiary,
          onTap: () {
            draft.service = 'Standard';
            state.touch();
          },
        ),
        const SizedBox(height: 12),
        _ServiceCard(
          active: draft.service == 'Express',
          title: 'Express',
          subtitle: 'Arrival in 2 hrs',
          price: '₹${draft.maxPrice.toStringAsFixed(0)}',
          icon: Icons.bolt,
          iconColor: AppColors.secondary,
          onTap: () {
            draft.service = 'Express';
            state.touch();
          },
        ),
        const SizedBox(height: 20),
        // Selected slot
        Container(
          padding: const EdgeInsets.all(16),
          decoration: BoxDecoration(
            color: AppColors.surfaceContainerLow,
            borderRadius: BorderRadius.circular(16),
            border: Border.all(color: AppColors.outlineVariant),
          ),
          child: Row(
            children: [
              const Icon(Icons.calendar_month, color: AppColors.primary),
              const SizedBox(width: 12),
              Expanded(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text('SELECTED SLOT',
                        style: AppTheme.caption
                            .copyWith(letterSpacing: 1, fontWeight: FontWeight.w600)),
                    Text('Pickup: ${draft.pickupDay}, ${draft.pickupSlot}',
                        style: AppTheme.labelMd),
                  ],
                ),
              ),
            ],
          ),
        ),
        const SizedBox(height: 16),
        // Fare breakdown
        AppCard(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text('ESTIMATED FARE',
                  style: AppTheme.caption.copyWith(
                      color: AppColors.onSurfaceVariant,
                      letterSpacing: 1.2,
                      fontWeight: FontWeight.w700)),
              const SizedBox(height: 14),
              _fareRow('Estimated Range', '₹${draft.minPrice.toStringAsFixed(0)} - ₹${draft.maxPrice.toStringAsFixed(0)}'),
              const Divider(height: 24, color: AppColors.surfaceContainerHigh),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Text('Final price determined at pickup', style: AppTheme.caption),
                ],
              ),
            ],
          ),
        ),
        const SizedBox(height: 16),
        // Pay-by row
        AppCard(
          onTap: () {},
          child: Row(
            children: [
              const IconBadge(
                icon: Icons.account_balance_wallet,
                bg: AppColors.surfaceContainer,
                color: AppColors.primary,
                size: 36,
                iconSize: 18,
                circle: true,
              ),
              const SizedBox(width: 12),
              Expanded(child: Text('Pay by: UPI', style: AppTheme.labelMd)),
              const Icon(Icons.expand_more, color: AppColors.onSurfaceVariant),
            ],
          ),
        ),
        const SizedBox(height: 12),
        const Row(
          children: [
            Icon(Icons.shield_outlined, size: 16, color: AppColors.tertiary),
            SizedBox(width: 6),
            Text('Secured by Doormile Pay Protection',
                style: TextStyle(
                    fontSize: 12, color: AppColors.onSurfaceVariant)),
          ],
        ),
      ],
    );
  }

  Widget _fareRow(String label, String value) => Padding(
        padding: const EdgeInsets.symmetric(vertical: 5),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Text(label, style: AppTheme.bodyMd.copyWith(color: AppColors.onSurfaceVariant)),
            Text(value, style: AppTheme.labelMd),
          ],
        ),
      );
}

class _ServiceCard extends StatelessWidget {
  final bool active;
  final String title;
  final String? badge;
  final String subtitle;
  final String? note;
  final String price;
  final IconData icon;
  final Color iconColor;
  final VoidCallback onTap;

  const _ServiceCard({
    required this.active,
    required this.title,
    this.badge,
    required this.subtitle,
    this.note,
    required this.price,
    required this.icon,
    required this.iconColor,
    required this.onTap,
  });

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: onTap,
      child: AnimatedContainer(
        duration: const Duration(milliseconds: 150),
        padding: const EdgeInsets.all(16),
        decoration: BoxDecoration(
          color: active ? const Color(0xFFFBE3E6) : AppColors.surfaceContainerLowest,
          borderRadius: BorderRadius.circular(16),
          border: Border.all(
            color: active ? AppColors.primary : AppColors.outlineVariant,
            width: active ? 2 : 1,
          ),
          boxShadow: active ? null : AppTheme.cardShadow,
        ),
        child: Row(
          children: [
            Container(
              width: 48,
              height: 48,
              decoration: BoxDecoration(
                color: AppColors.surfaceContainerLowest,
                borderRadius: BorderRadius.circular(12),
              ),
              child: Icon(icon, color: iconColor),
            ),
            const SizedBox(width: 14),
            Expanded(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Row(
                    children: [
                      Flexible(
                        child: Text(title,
                            style: AppTheme.headlineSm, overflow: TextOverflow.ellipsis),
                      ),
                      if (badge != null) ...[
                        const SizedBox(width: 8),
                        StatusChip(
                          label: badge!,
                          color: AppColors.tertiary,
                          bg: AppColors.tertiaryFixed.withValues(alpha: 0.5),
                        ),
                      ],
                    ],
                  ),
                  const SizedBox(height: 2),
                  Text(subtitle, style: AppTheme.bodyMd.copyWith(color: AppColors.onSurfaceVariant)),
                  if (note != null)
                    Text(note!,
                        style: AppTheme.caption.copyWith(
                            color: AppColors.tertiary, fontWeight: FontWeight.w600)),
                ],
              ),
            ),
            const SizedBox(width: 8),
            Column(
              crossAxisAlignment: CrossAxisAlignment.end,
              children: [
                if (active)
                  const CircleAvatar(
                    radius: 11,
                    backgroundColor: AppColors.primary,
                    child: Icon(Icons.check, size: 14, color: Colors.white),
                  ),
                const SizedBox(height: 6),
                Text(price,
                    style: AppTheme.headlineSm.copyWith(color: AppColors.primary)),
              ],
            ),
          ],
        ),
      ),
    );
  }
}
