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

import '../../../core/design/tokens.dart';
import '../../../core/design/tripz_colors.dart';
import '../../../core/di.dart';
import '../../../core/l10n/l10n.dart';
import '../../../core/session/session_cubit.dart';
import '../../../core/ui/empty_view.dart';
import '../../../core/ui/tripz_scaffold.dart';
import '../../../core/ui/tripz_text_field.dart';
import '../cubit/chat_cubit.dart';
import '../data/chat_repository.dart';

class ChatPage extends StatefulWidget {
  const ChatPage({super.key, required this.tripId});

  final String tripId;

  @override
  State<ChatPage> createState() => _ChatPageState();
}

class _ChatPageState extends State<ChatPage> {
  late final ChatCubit _cubit = sl<ChatCubit>()..open(widget.tripId);
  final _input = TextEditingController();

  @override
  void dispose() {
    _input.dispose();
    _cubit.close();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    final l10n = context.l10n;
    final myId = sl<SessionCubit>().state.user?.id;

    return BlocProvider.value(
      value: _cubit,
      child: BlocBuilder<ChatCubit, ChatState>(
        builder: (context, state) => TripzScaffold(
          title: l10n.chatTitle,
          status: state.status,
          error: state.error,
          bottomAction: TripzTextField(
            controller: _input,
            hint: l10n.chatHint,
            textInputAction: TextInputAction.send,
            onSubmitted: (v) {
              _cubit.send(v);
              _input.clear();
            },
            suffix: IconButton(
              icon: const Icon(Icons.send_rounded),
              onPressed: () {
                _cubit.send(_input.text);
                _input.clear();
              },
            ),
          ),
          child: state.messages.isEmpty
              ? EmptyView(
                  icon: Icons.forum_outlined,
                  message: l10n.chatEmpty,
                )
              : ListView.builder(
                  // الأحدث أسفل، والقائمة مقلوبة كي تبقى عند آخر رسالة.
                  reverse: true,
                  itemCount: state.messages.length,
                  itemBuilder: (context, i) {
                    final msg = state.messages[state.messages.length - 1 - i];
                    return _Bubble(msg: msg, mine: msg.senderId == myId);
                  },
                ),
        ),
      ),
    );
  }
}

class _Bubble extends StatelessWidget {
  const _Bubble({required this.msg, required this.mine});

  final ChatMessage msg;
  final bool mine;

  @override
  Widget build(BuildContext context) {
    return Align(
      alignment:
          mine ? AlignmentDirectional.centerEnd : AlignmentDirectional.centerStart,
      child: Container(
        margin: const EdgeInsets.symmetric(vertical: Space.xxs),
        padding: const EdgeInsets.symmetric(
          horizontal: Space.sm,
          vertical: Space.xs,
        ),
        constraints: BoxConstraints(
          maxWidth: MediaQuery.sizeOf(context).width * 0.75,
        ),
        decoration: BoxDecoration(
          color: mine
              ? context.colors.primaryContainer
              : context.tripzColors.surfaceRaised,
          borderRadius: Radii.card_,
          border: mine ? null : Border.all(color: context.colors.outlineVariant),
        ),
        child: Text(msg.body, style: context.texts.bodyMedium),
      ),
    );
  }
}