import 'package:doublefeel_flutter/app/modules/interact/controllers/interact_controller.dart';
import 'package:doublefeel_flutter/data/models/interaction/interaction_models.dart';
import 'package:doublefeel_flutter/data/models/user/user_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 _muted = Color(0xff908b91);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        fit: StackFit.expand,
        children: [
          Image.asset('assets/images/interact/page_bg.png', fit: BoxFit.cover),
          SafeArea(
            child: Obx(
              () => Column(
                children: [
                  _appBar(),
                  Expanded(
                    child: RefreshIndicator(
                      onRefresh: controller.loadRecords,
                      child: ListView(
                        physics: const AlwaysScrollableScrollPhysics(),
                        padding: const EdgeInsets.only(bottom: 28),
                        children: [
                          _marquee(),
                          _characterArea(),
                          const SizedBox(height: 34),
                          _actionButtons(context),
                          const SizedBox(height: 28),
                          _records(),
                        ],
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ),
          Obx(() {
            final asset = controller.actionMaskAsset();
            if (asset == null) return const SizedBox.shrink();
            return IgnorePointer(
              child: Align(
                alignment: const Alignment(0, -.5),
                child:
                    Image.asset(asset, width: Get.width, fit: BoxFit.fitWidth),
              ),
            );
          }),
        ],
      ),
    );
  }

  Widget _appBar() {
    return SizedBox(
      height: 48,
      child: Row(
        children: [
          IconButton(
            icon: const Icon(Icons.arrow_back_ios_new, color: Colors.black),
            onPressed: Get.back,
          ),
          const Spacer(),
          IconButton(
            tooltip: '刷新互动记录',
            icon: const Icon(Icons.refresh, color: Colors.black87),
            onPressed: controller.loadRecords,
          ),
        ],
      ),
    );
  }

  Widget _marquee() {
    final records = controller.records.take(3).toList(growable: false);
    if (records.isEmpty) return const SizedBox(height: 72);
    return SizedBox(
      height: 72,
      child: ListView.separated(
        padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
        scrollDirection: Axis.horizontal,
        itemCount: records.length,
        separatorBuilder: (_, __) => const SizedBox(width: 10),
        itemBuilder: (_, index) {
          final record = records[index];
          final isMe = record.userId == controller.me?.id;
          return Container(
            constraints: const BoxConstraints(maxWidth: 210),
            padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 7),
            decoration: BoxDecoration(
              image: const DecorationImage(
                image: AssetImage('assets/images/interact/page_bubble_bg.png'),
                fit: BoxFit.fill,
              ),
            ),
            child: Row(
              mainAxisSize: MainAxisSize.min,
              children: [
                _avatar(isMe ? controller.me : controller.partner, size: 28),
                const SizedBox(width: 7),
                Flexible(
                  child: Text(
                    controller.recordText(record),
                    maxLines: 1,
                    overflow: TextOverflow.ellipsis,
                    style: const TextStyle(color: Colors.white, fontSize: 13),
                  ),
                ),
              ],
            ),
          );
        },
      ),
    );
  }

  Widget _characterArea() {
    final actionAsset = controller.partnerActionAsset();
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 24),
      child: Row(
        children: [
          Expanded(child: _person(me: true)),
          const SizedBox(width: 12),
          Expanded(
            child: controller.isPaired
                ? _person(me: false, actionAsset: actionAsset)
                : _unpairedPerson(),
          ),
        ],
      ),
    );
  }

  Widget _person({required bool me, String? actionAsset}) {
    final user = me ? controller.me : controller.partner;
    return Column(
      children: [
        SizedBox(
          height: 132,
          child: actionAsset == null
              ? _avatar(user,
                  size: 108,
                  borderColor: me ? _purple : const Color(0xfffff45b))
              : Image.asset(actionAsset, fit: BoxFit.contain),
        ),
        const SizedBox(height: 6),
        Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            if (me)
              Container(
                padding: const EdgeInsets.symmetric(horizontal: 5, vertical: 2),
                decoration:
                    const BoxDecoration(color: _purple, shape: BoxShape.circle),
                child: const Text('我',
                    style: TextStyle(color: Colors.white, fontSize: 11)),
              ),
            if (me) const SizedBox(width: 5),
            Flexible(
              child: Text(
                user?.nickname ?? '-',
                overflow: TextOverflow.ellipsis,
                style:
                    const TextStyle(fontWeight: FontWeight.w600, fontSize: 16),
              ),
            ),
          ],
        ),
      ],
    );
  }

  Widget _unpairedPerson() {
    return Column(
      children: [
        Image.asset('assets/images/interact/unpaired_avatar.png', width: 58),
        const SizedBox(height: 8),
        const Text('暂未绑定Feel搭子',
            style: TextStyle(color: Color(0xffff2c20), fontSize: 12)),
        const SizedBox(height: 10),
        TextButton.icon(
          onPressed: () => Get.snackbar('互动', '请先前往搭子页面完成绑定'),
          icon: const Text('去绑定'),
          label: const Icon(Icons.chevron_right, size: 18),
          style: TextButton.styleFrom(
            foregroundColor: Colors.white,
            backgroundColor: _purple,
            shape: const StadiumBorder(),
          ),
        ),
      ],
    );
  }

  Widget _actionButtons(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.center,
      crossAxisAlignment: CrossAxisAlignment.end,
      children: [
        _actionButton(context, InteractAction.miss, width: 88, height: 52),
        const SizedBox(width: 12),
        _actionButton(context, InteractAction.stick, width: 112, height: 72),
        const SizedBox(width: 12),
        _actionButton(context, InteractAction.punch, width: 88, height: 52),
      ],
    );
  }

  Widget _actionButton(
    BuildContext context,
    InteractAction action, {
    required double width,
    required double height,
  }) {
    final enabled =
        controller.isPaired && (!action.needsVip || controller.isVip);
    final sending = controller.sendingAction.value == action;
    return GestureDetector(
      onLongPress: () => _showActionSheet(context),
      child: SizedBox(
        width: width,
        height: height + 18,
        child: ElevatedButton(
          onPressed: sending ? null : () => controller.sendAction(action),
          style: ElevatedButton.styleFrom(
            padding: EdgeInsets.zero,
            backgroundColor: _purple.withValues(alpha: enabled ? 1 : .4),
            disabledBackgroundColor: _purple.withValues(alpha: .4),
            elevation: 5,
            shadowColor: _purple.withValues(alpha: .5),
            shape:
                RoundedRectangleBorder(borderRadius: BorderRadius.circular(28)),
          ),
          child: sending
              ? const SizedBox(
                  width: 22,
                  height: 22,
                  child: CircularProgressIndicator(
                      color: Colors.white, strokeWidth: 2))
              : Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Image.asset(
                      enabled
                          ? action.iconAsset
                          : 'assets/images/interact/icon_locked.png',
                      width: action == InteractAction.stick ? 48 : 40,
                      height: action == InteractAction.stick ? 48 : 40,
                    ),
                    Image.asset(
                      enabled ? action.titleAsset : action.lockedTitleAsset,
                      height: 20,
                      fit: BoxFit.contain,
                    ),
                  ],
                ),
        ),
      ),
    );
  }

  Widget _records() {
    final records = controller.records.take(10).toList(growable: false);
    return Container(
      margin: const EdgeInsets.only(top: 2),
      padding: const EdgeInsets.fromLTRB(24, 20, 24, 42),
      decoration: const BoxDecoration(
        gradient: LinearGradient(
          colors: [Color(0xffeae1ff), Color(0x00fcf4ff)],
          begin: Alignment.topCenter,
          end: Alignment.bottomCenter,
        ),
        borderRadius: BorderRadius.vertical(top: Radius.circular(20)),
      ),
      child: Column(
        children: [
          Row(
            children: [
              const Text('互动记录',
                  style: TextStyle(
                      fontSize: 17,
                      fontWeight: FontWeight.w700,
                      color: Color(0xff2c2020))),
              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 Container(
      width: double.infinity,
      margin: const EdgeInsets.only(bottom: 7),
      padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 9),
      decoration: BoxDecoration(
          color: Colors.white.withValues(alpha: .48),
          borderRadius: BorderRadius.circular(7)),
      child: Row(
        children: [
          const Icon(Icons.circle_outlined, size: 10, color: _purple),
          const SizedBox(width: 8),
          Expanded(
              child: Text(controller.recordText(record),
                  style: const TextStyle(fontSize: 14))),
          Text(controller.recordTime(record),
              style: const TextStyle(fontSize: 12, color: _muted)),
        ],
      ),
    );
  }

  Widget _avatar(UserInfoResponse? user,
      {required double size, Color? borderColor}) {
    final avatar = user?.avatar;
    return Container(
      width: size,
      height: size,
      clipBehavior: Clip.antiAlias,
      decoration: BoxDecoration(
          shape: BoxShape.circle,
          border: Border.all(color: borderColor ?? _purple, width: 2),
          color: Colors.white),
      child: avatar == null || avatar.isEmpty
          ? Icon(Icons.person, size: size * .55, color: _muted)
          : Image.network(avatar,
              fit: BoxFit.cover,
              errorBuilder: (_, __, ___) =>
                  Icon(Icons.person, size: size * .55, color: _muted)),
    );
  }

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

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),
                ],
              ),
      ),
    );
  }
}