import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:shadcn_ui/shadcn_ui.dart';

import '../../../common/domain/metal_type.dart';
import '../../../common/domain/money.dart';
import '../../../common/router/app_router.dart';
import '../../../common/widgets/prototype_ui.dart';
import '../application/exchange_calculator_controller.dart';
import '../application/market_controller.dart';
import '../data/market_models.dart';
import '../../profile/application/price_color_theme.dart';
import '../../profile/application/profile_settings_controller.dart';

class MarketPage extends HookConsumerWidget {
  const MarketPage({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final market = ref.watch(marketControllerProvider);
    final exchange = ref.watch(exchangeCalculatorControllerProvider);
    final palette = priceColorPalette(
      ref.watch(profileSettingsControllerProvider).priceColorMode,
    );
    final gramCtrl = useTextEditingController(
      text: exchange.gram.toStringAsFixed(2),
    );
    final amountCtrl = useTextEditingController(
      text: exchange.amount.toStringAsFixed(2),
    );
    final gramFocus = useFocusNode();
    final amountFocus = useFocusNode();
    final cs = ShadTheme.of(context).colorScheme;

    useEffect(
      () {
        if (!gramFocus.hasFocus) {
          gramCtrl.text = exchange.gram.toStringAsFixed(
            exchange.gram % 1 == 0 ? 0 : 2,
          );
        }
        if (!amountFocus.hasFocus) {
          amountCtrl.text = exchange.amount.toStringAsFixed(2);
        }
        return null;
      },
      [
        exchange.gram,
        exchange.amount,
        exchange.selectedChannel.id,
        exchange.metal.id,
      ],
    );

    return SafeArea(
      top: false,
      child: ListView(
        padding: const EdgeInsets.fromLTRB(0, 8, 0, 86),
        children: [
          PrototypeFrame(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: [
                Row(
                  children: [
                    const Text(
                      '行情',
                      style: TextStyle(
                        fontSize: 17,
                        fontWeight: FontWeight.w600,
                      ),
                    ),
                    const Spacer(),
                    GestureDetector(
                      onTap: () =>
                          _showPriceAlertSheet(context, market.selectedMetal),
                      child: Container(
                        width: 30,
                        height: 30,
                        decoration: BoxDecoration(
                          color: const Color(0xFFF7F4EE),
                          borderRadius: BorderRadius.circular(999),
                        ),
                        child: const Icon(
                          Icons.notifications_none_outlined,
                          size: 18,
                          color: Color(0xFF9A968D),
                        ),
                      ),
                    ),
                  ],
                ),
                const SizedBox(height: 14),
                Row(
                  children: [
                    for (var i = 0; i < MetalType.values.length; i++) ...[
                      Expanded(
                        child: _MetalTab(
                          label: MetalType.values[i].label,
                          selected: MetalType.values[i] == market.selectedMetal,
                          onTap: () {
                            final metal = MetalType.values[i];
                            ref
                                .read(marketControllerProvider.notifier)
                                .selectMetal(metal);
                            ref
                                .read(
                                  exchangeCalculatorControllerProvider.notifier,
                                )
                                .selectMetal(metal);
                          },
                        ),
                      ),
                      if (i != MetalType.values.length - 1)
                        const SizedBox(width: 8),
                    ],
                  ],
                ),
                const SizedBox(height: 10),
                PrototypeCard(
                  padding: const EdgeInsets.fromLTRB(14, 12, 14, 13),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Row(
                        crossAxisAlignment: CrossAxisAlignment.end,
                        children: [
                          Text(
                            '¥',
                            style: TextStyle(
                              fontSize: 15,
                              fontWeight: FontWeight.w600,
                              color: cs.foreground,
                            ),
                          ),
                          const SizedBox(width: 2),
                          Text(
                            formatCny(
                              market.quote.spotPrice,
                            ).replaceFirst('¥', ''),
                            style: TextStyle(
                              fontSize: 29,
                              fontWeight: FontWeight.w600,
                              color: cs.foreground,
                              letterSpacing: -1,
                              height: 1,
                            ),
                          ),
                          const Padding(
                            padding: EdgeInsets.only(left: 4, bottom: 2),
                            child: Text(
                              '元/克',
                              style: TextStyle(
                                fontSize: 12,
                                color: Color(0xFF8A8780),
                              ),
                            ),
                          ),
                        ],
                      ),
                      const SizedBox(height: 6),
                      Row(
                        children: [
                          _ChangeChip(
                            amount: market.quote.changeAmount,
                            percent: market.quote.changePercent,
                            upColor: Color(palette.up),
                            downColor: Color(palette.down),
                            upBackground: Color(palette.upBackground),
                            downBackground: Color(palette.downBackground),
                          ),
                          const SizedBox(width: 8),
                          Text(
                            '报价 ${_timeLabel(market.quote.updatedAt)}',
                            style: const TextStyle(
                              fontSize: 12,
                              color: Color(0xFF8A8780),
                            ),
                          ),
                          const Spacer(),
                          GestureDetector(
                            onTap: () {},
                            child: const Icon(
                              Icons.info_outline,
                              size: 16,
                              color: Color(0xFFB3AFA5),
                            ),
                          ),
                        ],
                      ),
                      const SizedBox(height: 10),
                      Row(
                        children: [
                          for (final period in MarketPeriod.values) ...[
                            _PeriodPill(
                              label: period.label,
                              selected: period == market.period,
                              onTap: () => ref
                                  .read(marketControllerProvider.notifier)
                                  .selectPeriod(period),
                            ),
                            if (period != MarketPeriod.values.last)
                              const SizedBox(width: 6),
                          ],
                        ],
                      ),
                      const SizedBox(height: 8),
                      GestureDetector(
                        onTap: () => context.push(
                          '${AppRoutes.marketKline}?metal=${market.selectedMetal.id}&period=${market.period.id}',
                        ),
                        child: SizedBox(
                          height: 88,
                          child: ClipRRect(
                            borderRadius: BorderRadius.circular(10),
                            child: PrototypeLineChart(
                              values: market.points
                                  .map((p) => p.close)
                                  .toList(growable: false),
                            ),
                          ),
                        ),
                      ),
                      const SizedBox(height: 10),
                      Container(height: 0.5, color: cs.border),
                      const SizedBox(height: 10),
                      Row(
                        children: [
                          const Text(
                            '兑换试算',
                            style: TextStyle(
                              fontSize: 14,
                              fontWeight: FontWeight.w600,
                            ),
                          ),
                          const Spacer(),
                          const PrototypePill(label: '多渠道参考', selected: true),
                        ],
                      ),
                      const SizedBox(height: 8),
                      SizedBox(
                        height: 32,
                        child: ListView.separated(
                          scrollDirection: Axis.horizontal,
                          physics: const BouncingScrollPhysics(),
                          itemCount: exchange.channels.length,
                          separatorBuilder: (context, index) =>
                              const SizedBox(width: 7),
                          itemBuilder: (context, index) {
                            final channel = exchange.channels[index];
                            return PrototypePill(
                              label: channel.name,
                              selected:
                                  channel.id == exchange.selectedChannel.id,
                              onTap: () => ref
                                  .read(
                                    exchangeCalculatorControllerProvider
                                        .notifier,
                                  )
                                  .selectChannel(channel.id),
                            );
                          },
                        ),
                      ),
                      const SizedBox(height: 10),
                      if (!exchange.swapped) ...[
                        _ExchangeField(
                          controller: gramCtrl,
                          focusNode: gramFocus,
                          unit: exchange.metal.label,
                          leading: '克',
                          onChanged: (value) {
                            final gram = double.tryParse(value) ?? 0;
                            ref
                                .read(
                                  exchangeCalculatorControllerProvider.notifier,
                                )
                                .setGram(gram);
                          },
                        ),
                        const SizedBox(height: 8),
                        Center(
                          child: GestureDetector(
                            onTap: () => ref
                                .read(
                                  exchangeCalculatorControllerProvider.notifier,
                                )
                                .toggleSwapped(),
                            child: Container(
                              width: 30,
                              height: 30,
                              decoration: BoxDecoration(
                                color: Colors.white,
                                border: Border.all(
                                  color: cs.border,
                                  width: 0.5,
                                ),
                                shape: BoxShape.circle,
                                boxShadow: const [
                                  BoxShadow(
                                    color: Color(0x1F281F0C),
                                    blurRadius: 7,
                                    offset: Offset(0, 2),
                                  ),
                                ],
                              ),
                              child: const Icon(
                                Icons.swap_vert,
                                size: 16,
                                color: Color(0xFFB5862A),
                              ),
                            ),
                          ),
                        ),
                        const SizedBox(height: 8),
                        _ExchangeField(
                          controller: amountCtrl,
                          focusNode: amountFocus,
                          unit: 'CNY',
                          leading: '¥',
                          onChanged: (value) {
                            final amount = double.tryParse(value) ?? 0;
                            ref
                                .read(
                                  exchangeCalculatorControllerProvider.notifier,
                                )
                                .setAmount(amount);
                          },
                        ),
                      ] else ...[
                        _ExchangeField(
                          controller: amountCtrl,
                          focusNode: amountFocus,
                          unit: 'CNY',
                          leading: '¥',
                          onChanged: (value) {
                            final amount = double.tryParse(value) ?? 0;
                            ref
                                .read(
                                  exchangeCalculatorControllerProvider.notifier,
                                )
                                .setAmount(amount);
                          },
                        ),
                        const SizedBox(height: 8),
                        Center(
                          child: GestureDetector(
                            onTap: () => ref
                                .read(
                                  exchangeCalculatorControllerProvider.notifier,
                                )
                                .toggleSwapped(),
                            child: Container(
                              width: 30,
                              height: 30,
                              decoration: BoxDecoration(
                                color: Colors.white,
                                border: Border.all(
                                  color: cs.border,
                                  width: 0.5,
                                ),
                                shape: BoxShape.circle,
                                boxShadow: const [
                                  BoxShadow(
                                    color: Color(0x1F281F0C),
                                    blurRadius: 7,
                                    offset: Offset(0, 2),
                                  ),
                                ],
                              ),
                              child: const Icon(
                                Icons.swap_vert,
                                size: 16,
                                color: Color(0xFFB5862A),
                              ),
                            ),
                          ),
                        ),
                        const SizedBox(height: 8),
                        _ExchangeField(
                          controller: gramCtrl,
                          focusNode: gramFocus,
                          unit: exchange.metal.label,
                          leading: '克',
                          onChanged: (value) {
                            final gram = double.tryParse(value) ?? 0;
                            ref
                                .read(
                                  exchangeCalculatorControllerProvider.notifier,
                                )
                                .setGram(gram);
                          },
                        ),
                      ],
                      const SizedBox(height: 10),
                      Text(
                        '1 克 ${exchange.metal.label} = ${formatCny(exchange.selectedChannel.pricePerGram)} · ${exchange.selectedChannel.source} · ${_timeLabel(exchange.selectedChannel.updatedAt)} · 参考',
                        style: const TextStyle(
                          fontSize: 12,
                          color: Color(0xFF6E6A60),
                        ),
                      ),
                      const SizedBox(height: 5),
                      Text(
                        exchange.selectedChannel.hint,
                        style: const TextStyle(
                          fontSize: 11,
                          color: Color(0xFFB3AFA5),
                          height: 1.5,
                        ),
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

class _ExchangeField extends StatelessWidget {
  const _ExchangeField({
    required this.controller,
    required this.focusNode,
    required this.unit,
    required this.leading,
    required this.onChanged,
  });

  final TextEditingController controller;
  final FocusNode focusNode;
  final String unit;
  final String leading;
  final ValueChanged<String> onChanged;

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.symmetric(horizontal: 13, vertical: 9),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(13),
        border: Border.all(color: const Color(0xFFE3D6B4), width: 0.5),
      ),
      child: Row(
        children: [
          Text(
            leading,
            style: const TextStyle(fontSize: 14, color: Color(0xFF8A8780)),
          ),
          const SizedBox(width: 8),
          Expanded(
            child: TextField(
              controller: controller,
              focusNode: focusNode,
              keyboardType: const TextInputType.numberWithOptions(
                decimal: true,
              ),
              textAlign: TextAlign.right,
              decoration: const InputDecoration(
                border: InputBorder.none,
                isDense: true,
                contentPadding: EdgeInsets.zero,
              ),
              style: const TextStyle(fontSize: 21, fontWeight: FontWeight.w600),
              onChanged: onChanged,
            ),
          ),
          const SizedBox(width: 8),
          Text(
            unit,
            style: const TextStyle(fontSize: 14, color: Color(0xFF8A8780)),
          ),
        ],
      ),
    );
  }
}

class _PeriodPill extends StatelessWidget {
  const _PeriodPill({
    required this.label,
    required this.selected,
    required this.onTap,
  });

  final String label;
  final bool selected;
  final VoidCallback onTap;

  @override
  Widget build(BuildContext context) {
    return PrototypePill(label: label, selected: selected, onTap: onTap);
  }
}

class _MetalTab extends StatelessWidget {
  const _MetalTab({
    required this.label,
    required this.selected,
    required this.onTap,
  });

  final String label;
  final bool selected;
  final VoidCallback onTap;

  @override
  Widget build(BuildContext context) {
    return InkWell(
      onTap: onTap,
      borderRadius: BorderRadius.circular(12),
      child: Container(
        height: 32,
        alignment: Alignment.center,
        decoration: BoxDecoration(
          color: selected ? const Color(0xFFF6ECD6) : Colors.white,
          borderRadius: BorderRadius.circular(12),
          border: Border.all(
            color: selected ? const Color(0xFFE3D6B4) : const Color(0xFFE6E1D8),
            width: 0.5,
          ),
        ),
        child: Text(
          label,
          style: TextStyle(
            fontSize: 13,
            fontWeight: selected ? FontWeight.w600 : FontWeight.w500,
            color: selected ? const Color(0xFF7A5B12) : const Color(0xFF6E6A60),
          ),
        ),
      ),
    );
  }
}

class _ChangeChip extends StatelessWidget {
  const _ChangeChip({
    required this.amount,
    required this.percent,
    required this.upColor,
    required this.downColor,
    required this.upBackground,
    required this.downBackground,
  });

  final double amount;
  final double percent;
  final Color upColor;
  final Color downColor;
  final Color upBackground;
  final Color downBackground;

  @override
  Widget build(BuildContext context) {
    final positive = amount >= 0;
    return Container(
      padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 4),
      decoration: BoxDecoration(
        color: positive ? upBackground : downBackground,
        borderRadius: BorderRadius.circular(999),
      ),
      child: Text(
        '${positive ? '↑' : '↓'}¥${amount.abs().toStringAsFixed(2)} · ${positive ? '+' : '-'}${percent.abs().toStringAsFixed(2)}%',
        style: TextStyle(
          fontSize: 13,
          fontWeight: FontWeight.w600,
          color: positive ? upColor : downColor,
        ),
      ),
    );
  }
}

Future<void> _showPriceAlertSheet(BuildContext context, MetalType metal) async {
  var dir = 'up';
  final controller = TextEditingController(text: '960.00');
  try {
    await showModalBottomSheet<void>(
      context: context,
      backgroundColor: Colors.white,
      isScrollControlled: true,
      shape: const RoundedRectangleBorder(
        borderRadius: BorderRadius.vertical(top: Radius.circular(22)),
      ),
      builder: (ctx) {
        return StatefulBuilder(
          builder: (ctx, setState) {
            return SafeArea(
              child: Padding(
                padding: EdgeInsets.only(
                  bottom: MediaQuery.viewInsetsOf(ctx).bottom,
                ),
                child: Padding(
                  padding: const EdgeInsets.fromLTRB(20, 8, 20, 24),
                  child: Column(
                    mainAxisSize: MainAxisSize.min,
                    crossAxisAlignment: CrossAxisAlignment.stretch,
                    children: [
                      Center(
                        child: Container(
                          width: 38,
                          height: 4,
                          margin: const EdgeInsets.only(bottom: 14),
                          decoration: BoxDecoration(
                            color: const Color(0xFFE3DFD4),
                            borderRadius: BorderRadius.circular(999),
                          ),
                        ),
                      ),
                      const Text(
                        '设置到价提醒',
                        style: TextStyle(
                          fontSize: 16,
                          fontWeight: FontWeight.w600,
                        ),
                      ),
                      const SizedBox(height: 4),
                      Text(
                        '${metal.label} 到价时提醒你',
                        style: const TextStyle(
                          fontSize: 12,
                          color: Color(0xFF8A8780),
                        ),
                      ),
                      const SizedBox(height: 14),
                      Row(
                        children: [
                          Expanded(
                            child: GestureDetector(
                              onTap: () => setState(() => dir = 'up'),
                              child: Container(
                                padding: const EdgeInsets.symmetric(
                                  vertical: 10,
                                ),
                                decoration: BoxDecoration(
                                  color: dir == 'up'
                                      ? const Color(0xFFF6ECD6)
                                      : Colors.white,
                                  borderRadius: BorderRadius.circular(10),
                                  border: Border.all(
                                    color: dir == 'up'
                                        ? const Color(0xFFE3D6B4)
                                        : const Color(0xFFECEAE3),
                                    width: 0.5,
                                  ),
                                ),
                                child: const Text(
                                  '涨到',
                                  textAlign: TextAlign.center,
                                  style: TextStyle(
                                    fontSize: 13,
                                    fontWeight: FontWeight.w600,
                                  ),
                                ),
                              ),
                            ),
                          ),
                          const SizedBox(width: 8),
                          Expanded(
                            child: GestureDetector(
                              onTap: () => setState(() => dir = 'down'),
                              child: Container(
                                padding: const EdgeInsets.symmetric(
                                  vertical: 10,
                                ),
                                decoration: BoxDecoration(
                                  color: dir == 'down'
                                      ? const Color(0xFFF6ECD6)
                                      : Colors.white,
                                  borderRadius: BorderRadius.circular(10),
                                  border: Border.all(
                                    color: dir == 'down'
                                        ? const Color(0xFFE3D6B4)
                                        : const Color(0xFFECEAE3),
                                    width: 0.5,
                                  ),
                                ),
                                child: const Text(
                                  '跌到',
                                  textAlign: TextAlign.center,
                                  style: TextStyle(
                                    fontSize: 13,
                                    fontWeight: FontWeight.w600,
                                  ),
                                ),
                              ),
                            ),
                          ),
                        ],
                      ),
                      const SizedBox(height: 14),
                      Container(
                        padding: const EdgeInsets.symmetric(
                          horizontal: 13,
                          vertical: 10,
                        ),
                        decoration: BoxDecoration(
                          color: Colors.white,
                          borderRadius: BorderRadius.circular(13),
                          border: Border.all(
                            color: const Color(0xFFE3D6B4),
                            width: 0.5,
                          ),
                        ),
                        child: Row(
                          children: [
                            const Text(
                              '¥',
                              style: TextStyle(
                                fontSize: 14,
                                color: Color(0xFF8A8780),
                              ),
                            ),
                            const SizedBox(width: 8),
                            Expanded(
                              child: TextField(
                                controller: controller,
                                keyboardType:
                                    const TextInputType.numberWithOptions(
                                      decimal: true,
                                    ),
                                textAlign: TextAlign.right,
                                decoration: const InputDecoration(
                                  border: InputBorder.none,
                                  isDense: true,
                                ),
                                style: const TextStyle(
                                  fontSize: 20,
                                  fontWeight: FontWeight.w600,
                                ),
                              ),
                            ),
                            const SizedBox(width: 8),
                            const Text(
                              '元/克',
                              style: TextStyle(
                                fontSize: 13,
                                color: Color(0xFF8A8780),
                              ),
                            ),
                          ],
                        ),
                      ),
                      const SizedBox(height: 16),
                      FilledButton(
                        onPressed: () {
                          Navigator.of(ctx).pop();
                          ScaffoldMessenger.of(context).showSnackBar(
                            SnackBar(
                              content: Text(
                                '已设到价提醒 · $metal ${dir == 'up' ? '涨到' : '跌到'} ¥${controller.text}',
                              ),
                            ),
                          );
                        },
                        child: const Text('完成'),
                      ),
                    ],
                  ),
                ),
              ),
            );
          },
        );
      },
    );
  } finally {
    controller.dispose();
  }
}

String _timeLabel(DateTime value) {
  return '${value.hour.toString().padLeft(2, '0')}:${value.minute.toString().padLeft(2, '0')}';
}