import 'package:doublefeel_flutter/app/modules/friends/views/select_friend_view.dart';
import 'package:doublefeel_flutter/app/modules/interact/controllers/interact_controller.dart';
import 'package:doublefeel_flutter/app/modules/friends/models/friend_health_data.dart';
import 'package:doublefeel_flutter/data/models/interaction/interaction_models.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';

class InteractView extends GetView<InteractController> {
  const InteractView({super.key});

  static const _purple = Color(0xff896cdc);
  static const _brandText = Color(0xff845eee);
  static const _muted = Color(0xff78787d);
  static const _placeholder = Color(0xffded3ff);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color(0xfff5f2ff),
      body: DecoratedBox(
        decoration: const BoxDecoration(
          gradient: LinearGradient(
            colors: [Color(0xffc5b0ff), Color(0xfff5f2ff)],
            begin: Alignment.topCenter,
            end: Alignment(0, -.25),
          ),
        ),
        child: SafeArea(
          child: Obx(() {
            final hasInteractions = controller.records.isNotEmpty;
            return Column(
              children: [
                _appBar(context),
                Expanded(
                  child: RefreshIndicator(
                    onRefresh: controller.refreshPage,
                    child: ListView(
                      physics: const AlwaysScrollableScrollPhysics(),
                      padding: const EdgeInsets.only(bottom: 28),
                      children: [
                        _interactionHero(hasInteractions),
                        _actionButtons(context),
                        const SizedBox(height: 16),
                        _records(),
                      ],
                    ),
                  ),
                ),
              ],
            );
          }),
        ),
      ),
    );
  }

  Widget _appBar(BuildContext context) {
    return SizedBox(
      height: 44,
      child: Row(
        children: [
          IconButton(
            icon: const Icon(
              Icons.arrow_back_ios_new,
              color: Color(0xff0f0f11),
              size: 20,
            ),
            onPressed: Get.back,
          ),
          Expanded(
            child: Text(
              textAlign: TextAlign.center,
              style: const TextStyle(
                color: Color(0xff0f0f11),
                fontSize: 16,
                fontWeight: FontWeight.w600,
              ),
              '互动',
            ),
          ),
          IconButton(
            tooltip: '切换好友',
            icon: const Icon(
              Icons.swap_horiz_rounded,
              color: Color(0xff0f0f11),
              size: 23,
            ),
            onPressed: _changeFriend,
          ),
        ],
      ),
    );
  }

  Widget _interactionHero(bool hasInteractions) {
    // The 71px difference matches the Figma's extra interaction bubbles.
    final characterTop = hasInteractions ? 127.0 : 56.0;
    return SizedBox(
      height: hasInteractions ? 299 : 228,
      child: Stack(
        clipBehavior: Clip.none,
        children: [
          if (hasInteractions)
            Positioned.fill(
              child: _FloatingInteractionBubbles(
                records: controller.records.take(3).toList(growable: false),
                recordText: controller.recordText,
              ),
            ),
          Positioned(
            top: characterTop,
            left: 28,
            right: 28,
            child: Row(
              children: [
                Expanded(
                  child: _personPreview(
                    controller.friendLabel,
                    '好友',
                    controller.friendAvatarUrl,
                  ),
                ),
                const SizedBox(width: 28),
                Expanded(
                  child: _personPreview(
                    controller.selfName,
                    '我',
                    controller.selfAvatarUrl,
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }

  Widget _personPreview(String name, String role, String? avatarUrl) {
    return Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        _profileImage(avatarUrl, size: 96, radius: 48),
        const SizedBox(height: 8),
        Container(
          width: 78,
          height: 2,
          color: Colors.white.withValues(alpha: .8),
        ),
        const SizedBox(height: 14),
        Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            _profileImage(avatarUrl, size: 36, radius: 18),
            const SizedBox(width: 4),
            Flexible(
              child: Text.rich(
                TextSpan(
                  text: name,
                  style: const TextStyle(
                    color: Color(0xff0f0f11),
                    fontSize: 14,
                  ),
                  children: [
                    TextSpan(
                      text: '（$role）',
                      style: const TextStyle(color: _muted),
                    ),
                  ],
                ),
                maxLines: 1,
                overflow: TextOverflow.ellipsis,
              ),
            ),
          ],
        ),
      ],
    );
  }

  Widget _actionButtons(BuildContext context) {
    return SizedBox(
      height: 112,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          _actionButton(
            context,
            InteractAction.miss,
            width: 90,
            elevated: false,
          ),
          const SizedBox(width: 12),
          _actionButton(
            context,
            InteractAction.stick,
            width: 116,
            elevated: true,
          ),
          const SizedBox(width: 12),
          _actionButton(
            context,
            InteractAction.punch,
            width: 90,
            elevated: false,
          ),
        ],
      ),
    );
  }

  Widget _actionButton(
    BuildContext context,
    InteractAction action, {
    required double width,
    required bool elevated,
  }) {
    final enabled =
        controller.isPaired && (!action.needsVip || controller.isVip);
    final sending = controller.sendingAction.value == action;
    return GestureDetector(
      onLongPress: () => _showActionSheet(context),
      child: SizedBox(
        width: width,
        height: 112,
        child: Stack(
          clipBehavior: Clip.none,
          alignment: Alignment.topCenter,
          children: [
            Positioned(
              top: elevated ? 34 : 49,
              child: Opacity(
                opacity: enabled ? 1 : .4,
                child: Material(
                  color: _purple,
                  borderRadius: BorderRadius.circular(elevated ? 24 : 16),
                  child: InkWell(
                    onTap: sending ? null : () => controller.sendAction(action),
                    borderRadius: BorderRadius.circular(elevated ? 24 : 16),
                    child: SizedBox(
                      width: width,
                      height: elevated ? 78 : 56,
                      child: Center(
                        child: sending
                            ? const SizedBox(
                                width: 22,
                                height: 22,
                                child: CircularProgressIndicator(
                                  color: Colors.white,
                                  strokeWidth: 2,
                                ),
                              )
                            : Text(
                                action.title,
                                style: TextStyle(
                                  color: Colors.white,
                                  fontSize: elevated ? 20 : 14,
                                  fontWeight: FontWeight.w600,
                                ),
                              ),
                      ),
                    ),
                  ),
                ),
              ),
            ),
            Positioned(
              top: elevated ? 0 : 19,
              child: _colorPlaceholder(
                elevated ? 68 : 52,
                color: enabled
                    ? const Color(0xffc5b0ff)
                    : const Color(0xffd5cfe3),
                radius: elevated ? 22 : 18,
              ),
            ),
          ],
        ),
      ),
    );
  }

  Widget _records() {
    final records = controller.records.take(10).toList(growable: false);
    return Container(
      constraints: const BoxConstraints(minHeight: 208),
      margin: const EdgeInsets.symmetric(horizontal: 16),
      padding: const EdgeInsets.fromLTRB(16, 17, 16, 18),
      decoration: BoxDecoration(
        color: Colors.white.withValues(alpha: .76),
        borderRadius: BorderRadius.circular(16),
      ),
      child: Column(
        children: [
          Row(
            children: [
              const Text(
                '互动记录',
                style: TextStyle(
                  fontSize: 16,
                  fontWeight: FontWeight.w600,
                  color: Color(0xff0f0f11),
                ),
              ),
              const Spacer(),
              Text('仅保留10条', style: TextStyle(fontSize: 12, color: _muted)),
            ],
          ),
          const SizedBox(height: 15),
          if (controller.isLoading.value && records.isEmpty)
            const Padding(
              padding: EdgeInsets.all(40),
              child: CircularProgressIndicator(),
            )
          else if (records.isEmpty)
            const Padding(
              padding: EdgeInsets.symmetric(vertical: 76),
              child: Text(
                '暂无互动记录',
                style: TextStyle(color: _muted, fontSize: 14),
              ),
            )
          else
            ...records.map(_recordItem),
        ],
      ),
    );
  }

  Widget _recordItem(InteractionRecord record) {
    return Padding(
      padding: const EdgeInsets.only(bottom: 13),
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Container(
            width: 8,
            height: 8,
            margin: const EdgeInsets.only(top: 5),
            decoration: const BoxDecoration(
              color: _brandText,
              shape: BoxShape.circle,
            ),
          ),
          const SizedBox(width: 8),
          Expanded(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  controller.recordText(record),
                  style: const TextStyle(
                    fontSize: 14,
                    color: Color(0xff0f0f11),
                  ),
                ),
                const SizedBox(height: 3),
                Text(
                  controller.recordTime(record),
                  style: const TextStyle(
                    fontSize: 12,
                    color: Color(0xffb0b0b6),
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }

  Widget _colorPlaceholder(
    double size, {
    required Color color,
    required double radius,
  }) {
    return Container(
      width: size,
      height: size,
      decoration: BoxDecoration(
        color: color,
        borderRadius: BorderRadius.circular(radius),
      ),
    );
  }

  Widget _profileImage(
    String? avatarUrl, {
    required double size,
    required double radius,
  }) {
    if (avatarUrl == null || avatarUrl.trim().isEmpty) {
      return _colorPlaceholder(size, color: _placeholder, radius: radius);
    }
    return ClipRRect(
      borderRadius: BorderRadius.circular(radius),
      child: Image.network(
        avatarUrl,
        width: size,
        height: size,
        fit: BoxFit.cover,
        errorBuilder: (_, __, ___) =>
            _colorPlaceholder(size, color: _placeholder, radius: radius),
      ),
    );
  }

  Future<void> _changeFriend() async {
    final selectedFriend = await Get.bottomSheet<FriendHealthData>(
      SizedBox(height: Get.height * 0.9, child: const SelectFriendView()),
      ignoreSafeArea: false,
      isScrollControlled: true,
      backgroundColor: Colors.transparent,
      barrierColor: const Color(0xB3000000),
    );
    if (selectedFriend == null) return;
    if (selectedFriend.userId == controller.selectedFriend.value?.userId) {
      return;
    }
    await controller.selectFriend(selectedFriend);
  }

  void _showActionSheet(BuildContext context) {
    Get.bottomSheet(
      InteractActionBottomSheet(controller: controller),
      isScrollControlled: true,
      backgroundColor: Colors.transparent,
    );
  }
}

/// A deliberately sparse, looping barrage.  Each message begins offscreen on
/// the right and re-enters after it has fully left the left edge.
class _FloatingInteractionBubbles extends StatefulWidget {
  const _FloatingInteractionBubbles({
    required this.records,
    required this.recordText,
  });

  final List<InteractionRecord> records;
  final String Function(InteractionRecord record) recordText;

  @override
  State<_FloatingInteractionBubbles> createState() =>
      _FloatingInteractionBubblesState();
}

class _FloatingInteractionBubblesState
    extends State<_FloatingInteractionBubbles>
    with SingleTickerProviderStateMixin {
  late final AnimationController _animationController = AnimationController(
    vsync: this,
    duration: const Duration(seconds: 11),
  )..repeat();

  @override
  void dispose() {
    _animationController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    // The staggered vertical tracks and phases prevent this from looking like
    // a single marquee while still keeping it a calm, readable barrage.
    const tracks = <double>[12, 53, 74];
    const phases = <double>[.06, .47, .79];
    return LayoutBuilder(
      builder: (context, constraints) => AnimatedBuilder(
        animation: _animationController,
        builder: (context, _) => Stack(
          clipBehavior: Clip.hardEdge,
          children: List.generate(widget.records.length, (index) {
            final progress = (_animationController.value + phases[index]) % 1;
            // 170 covers the maximum bubble width and its exit gap.
            final left =
                constraints.maxWidth - progress * (constraints.maxWidth + 170);
            return Positioned(
              top: tracks[index],
              left: left,
              child: _FloatingInteractionBubble(
                record: widget.records[index],
                recordText: widget.recordText,
              ),
            );
          }),
        ),
      ),
    );
  }
}

class _FloatingInteractionBubble extends StatelessWidget {
  const _FloatingInteractionBubble({
    required this.record,
    required this.recordText,
  });

  final InteractionRecord record;
  final String Function(InteractionRecord record) recordText;

  @override
  Widget build(BuildContext context) {
    return Container(
      constraints: const BoxConstraints(maxWidth: 142),
      padding: const EdgeInsets.fromLTRB(6, 5, 10, 5),
      decoration: BoxDecoration(
        color: const Color(0xffa084ef),
        borderRadius: BorderRadius.circular(16),
      ),
      child: Row(
        mainAxisSize: MainAxisSize.min,
        children: [
          Container(
            width: 28,
            height: 28,
            decoration: BoxDecoration(
              color: const Color(0xffc5b0ff),
              borderRadius: BorderRadius.circular(9),
            ),
          ),
          const SizedBox(width: 5),
          Flexible(
            child: Text(
              recordText(record),
              maxLines: 1,
              overflow: TextOverflow.ellipsis,
              style: const TextStyle(color: Colors.white, fontSize: 12),
            ),
          ),
        ],
      ),
    );
  }
}

class InteractActionBottomSheet extends StatelessWidget {
  const InteractActionBottomSheet({required this.controller, super.key});

  final InteractController controller;

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      top: false,
      child: Container(
        height: 331,
        decoration: const BoxDecoration(
          image: DecorationImage(
            image: AssetImage('assets/images/interact/bottom_sheet_bg.png'),
            fit: BoxFit.fill,
          ),
        ),
        child: Stack(
          children: [
            Align(
              alignment: const Alignment(.2, -.98),
              child: Image.asset(
                'assets/images/interact/bottom_sheet_label.png',
                width: 126,
              ),
            ),
            Column(
              children: [
                const SizedBox(height: 18),
                _sheetAvatar(),
                const SizedBox(height: 13),
                const Text(
                  '给搭子送去一份互动',
                  style: TextStyle(color: Color(0xff908b91), fontSize: 14),
                ),
                const SizedBox(height: 3),
                const Text(
                  '想念要说出来',
                  style: TextStyle(
                    color: Color(0xff896cdc),
                    fontSize: 24,
                    fontWeight: FontWeight.w700,
                  ),
                ),
                const SizedBox(height: 24),
                Obx(
                  () => Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    crossAxisAlignment: CrossAxisAlignment.end,
                    children: InteractAction.values
                        .map(
                          (action) => Padding(
                            padding: const EdgeInsets.symmetric(horizontal: 6),
                            child: _sheetButton(action),
                          ),
                        )
                        .toList(growable: false),
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }

  Widget _sheetAvatar() {
    final avatar = controller.partner?.avatar;
    return Container(
      width: 56,
      height: 56,
      clipBehavior: Clip.antiAlias,
      decoration: BoxDecoration(
        shape: BoxShape.circle,
        border: Border.all(color: const Color(0xff896cdc), width: 2),
      ),
      child: avatar == null || avatar.isEmpty
          ? const Icon(Icons.person, color: Color(0xff908b91))
          : Image.network(avatar, fit: BoxFit.cover),
    );
  }

  Widget _sheetButton(InteractAction action) {
    final enabled =
        controller.isPaired && (!action.needsVip || controller.isVip);
    final sending = controller.sendingAction.value == action;
    return SizedBox(
      width: action == InteractAction.stick ? 112 : 88,
      height: action == InteractAction.stick ? 74 : 56,
      child: ElevatedButton(
        onPressed: sending
            ? null
            : () async {
                await controller.sendAction(
                  action,
                  actionVariables: const InteractionDataAction(objectTarget: 2),
                );
                if (controller.sendingAction.value == null) Get.back();
              },
        style: ElevatedButton.styleFrom(
          padding: EdgeInsets.zero,
          backgroundColor: const Color(
            0xff896cdc,
          ).withValues(alpha: enabled ? 1 : .4),
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(28),
          ),
        ),
        child: sending
            ? const CircularProgressIndicator(
                color: Colors.white,
                strokeWidth: 2,
              )
            : Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Image.asset(
                    enabled
                        ? action.iconAsset
                        : 'assets/images/interact/icon_locked.png',
                    height: 38,
                  ),
                  Image.asset(
                    enabled ? action.titleAsset : action.lockedTitleAsset,
                    height: 18,
                  ),
                ],
              ),
      ),
    );
  }
}