// SPDX-FileCopyrightText: 2019-Present Christian Kußowski
// SPDX-FileCopyrightText: 2019-Present Contributors to FluffyChat
//
// SPDX-License-Identifier: AGPL-3.0-or-later

import 'package:go_router/go_router.dart';
import 'package:image_picker/image_picker.dart';
import 'package:tatchat/l10n/l10n.dart';
import 'package:tatchat/pages/chat/send_file_dialog.dart';
import 'package:tatchat/pages/image_viewer/video_player.dart';
import 'package:tatchat/utils/adaptive_bottom_sheet.dart';
import 'package:tatchat/utils/matrix_sdk_extensions/matrix_locals.dart';
import 'package:tatchat/utils/stream_extension.dart';
import 'package:tatchat/widgets/adaptive_dialogs/show_text_input_dialog.dart';
import 'package:tatchat/widgets/avatar.dart';
import 'package:tatchat/widgets/matrix.dart';
import 'package:tatchat/widgets/mxc_image.dart';
import 'package:material_ui/material_ui.dart';
import 'package:matrix/matrix.dart';

const _muralMediaTypes = {
  MessageTypes.Image,
  MessageTypes.Video,
  MessageTypes.Sticker,
};

const _likeKey = '👍';

class MuralChatPage extends StatelessWidget {
  final String roomId;

  const MuralChatPage({super.key, required this.roomId});

  @override
  Widget build(BuildContext context) {
    final room = Matrix.of(context).client.getRoomById(roomId);
    if (room == null) {
      return Scaffold(
        appBar: AppBar(title: Text(L10n.of(context).oopsSomethingWentWrong)),
        body: Center(
          child: Padding(
            padding: const EdgeInsets.all(16),
            child: Text(L10n.of(context).youAreNoLongerParticipatingInThisChat),
          ),
        ),
      );
    }
    return MuralChatView(key: Key('mural_chat_page_$roomId'), room: room);
  }
}

class MuralChatView extends StatefulWidget {
  final Room room;

  const MuralChatView({super.key, required this.room});

  @override
  State<MuralChatView> createState() => _MuralChatViewState();
}

class _MuralChatViewState extends State<MuralChatView> {
  Room get room =>
      Matrix.of(context).client.getRoomById(widget.room.id) ?? widget.room;

  Timeline? timeline;

  List<Event> get _mediaEvents => timeline == null
      ? const []
      : timeline!.events
            .where(
              (e) => !e.redacted && _muralMediaTypes.contains(e.messageType),
            )
            .toList();

  bool _descriptionExpanded = false;

  @override
  void initState() {
    super.initState();
    _getTimeline();
  }

  @override
  void dispose() {
    timeline?.cancelSubscriptions();
    super.dispose();
  }

  void updateView() {
    if (!mounted) return;
    setState(() {});
  }

  Future<void> _getTimeline() async {
    timeline?.cancelSubscriptions();
    timeline = await room.getTimeline(onUpdate: updateView);
    if (!mounted) return;
    setState(() {});
  }

  Future<void> _sendFiles(List<XFile>? files) async {
    if (files == null || files.isEmpty || !mounted) return;
    await showAdaptiveDialog(
      context: context,
      builder: (c) => SendFileDialog(
        files: files,
        room: room,
        outerContext: context,
        threadRootEventId: null,
        threadLastEventId: null,
      ),
    );
  }

  Future<void> _postPhoto() async {
    final file = await ImagePicker().pickImage(source: ImageSource.gallery);
    if (!mounted) return;
    await _sendFiles(file == null ? null : [file]);
  }

  Future<void> _takePhoto() async {
    final file = await ImagePicker().pickImage(source: ImageSource.camera);
    if (!mounted) return;
    await _sendFiles(file == null ? null : [file]);
  }

  Future<void> _postVideo() async {
    final file = await ImagePicker().pickVideo(source: ImageSource.gallery);
    if (!mounted) return;
    await _sendFiles(file == null ? null : [file]);
  }

  Future<void> _recordVideo() async {
    final file = await ImagePicker().pickVideo(
      source: ImageSource.camera,
      maxDuration: const Duration(minutes: 1),
    );
    if (!mounted) return;
    await _sendFiles(file == null ? null : [file]);
  }

  Future<void> _showPostSheet() async {
    final l10n = L10n.of(context);
    await showAdaptiveBottomSheet(
      context: context,
      builder: (context) => SafeArea(
        child: Padding(
          padding: const EdgeInsets.symmetric(vertical: 12),
          child: Column(
            mainAxisSize: MainAxisSize.min,
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: [
              Padding(
                padding: const EdgeInsets.symmetric(
                  horizontal: 24,
                  vertical: 8,
                ),
                child: Text(
                  l10n.newPost,
                  style: Theme.of(context).textTheme.titleLarge,
                ),
              ),
              ListTile(
                leading: const Icon(Icons.photo_library_outlined),
                title: Text(l10n.postPhoto),
                onTap: () {
                  Navigator.of(context, rootNavigator: true).pop();
                  _postPhoto();
                },
              ),
              ListTile(
                leading: const Icon(Icons.photo_camera_outlined),
                title: Text(l10n.takeAPhoto),
                onTap: () {
                  Navigator.of(context, rootNavigator: true).pop();
                  _takePhoto();
                },
              ),
              ListTile(
                leading: const Icon(Icons.video_library_outlined),
                title: Text(l10n.postVideo),
                onTap: () {
                  Navigator.of(context, rootNavigator: true).pop();
                  _postVideo();
                },
              ),
              ListTile(
                leading: const Icon(Icons.videocam_outlined),
                title: Text(l10n.recordAVideo),
                onTap: () {
                  Navigator.of(context, rootNavigator: true).pop();
                  _recordVideo();
                },
              ),
            ],
          ),
        ),
      ),
    );
  }

  void _openMedia(Event event) {
    final timeline = this.timeline;
    if (timeline == null) return;
    final theme = Theme.of(context);
    showModalBottomSheet<void>(
      context: context,
      useSafeArea: true,
      isScrollControlled: true,
      backgroundColor: theme.colorScheme.surface,
      builder: (context) => FractionallySizedBox(
        heightFactor: 0.92,
        child: _PostViewer(
          key: Key('post_viewer_${event.eventId}'),
          event: event,
          room: room,
          timeline: timeline,
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    final theme = Theme.of(context);
    final l10n = L10n.of(context);
    final coverColor = theme.colorScheme.secondaryContainer;
    final gridCellSize = (MediaQuery.sizeOf(context).width - 4) / 3;
    final events = _mediaEvents;
    final isAdmin = room.ownPowerLevel >= PowerLevel.admin;

    return Scaffold(
      extendBodyBehindAppBar: true,
      floatingActionButton: isAdmin
          ? FloatingActionButton(
              onPressed: _showPostSheet,
              tooltip: l10n.newPost,
              child: const Icon(Icons.add_photo_alternate_outlined),
            )
          : null,
      appBar: AppBar(
        backgroundColor: Colors.transparent,
        elevation: 0,
        foregroundColor: Colors.white,
        iconTheme: const IconThemeData(color: Colors.white),
      ),
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: [
          _Header(
            room: room,
            coverColor: coverColor,
            descriptionExpanded: _descriptionExpanded,
            onToggleDescription: () =>
                setState(() => _descriptionExpanded = !_descriptionExpanded),
            onEditInfo: () => context.go('/rooms/${room.id}/details'),
          ),
          const Divider(height: 1),
          Expanded(
            child: events.isEmpty
                ? Center(
                    child: Padding(
                      padding: const EdgeInsets.all(24),
                      child: Column(
                        mainAxisSize: MainAxisSize.min,
                        children: [
                          Icon(
                            Icons.photo_library_outlined,
                            size: 72,
                            color: theme.colorScheme.secondary,
                          ),
                          const SizedBox(height: 12),
                          Text(
                            l10n.noPostsYet,
                            textAlign: TextAlign.center,
                            style: TextStyle(
                              color: theme.colorScheme.onSurfaceVariant,
                            ),
                          ),
                        ],
                      ),
                    ),
                  )
                : GridView.builder(
                    padding: const EdgeInsets.all(2),
                    gridDelegate:
                        const SliverGridDelegateWithFixedCrossAxisCount(
                          crossAxisCount: 3,
                          mainAxisSpacing: 2,
                          crossAxisSpacing: 2,
                        ),
                    itemCount: events.length,
                    itemBuilder: (context, i) {
                      final event = events[i];
                      return _MediaCell(
                        event: event,
                        client: room.client,
                        cellSize: gridCellSize,
                        onTap: () => _openMedia(event),
                      );
                    },
                  ),
          ),
        ],
      ),
    );
  }
}

class _Header extends StatelessWidget {
  final Room room;
  final Color coverColor;
  final bool descriptionExpanded;
  final VoidCallback onToggleDescription;
  final VoidCallback onEditInfo;

  const _Header({
    required this.room,
    required this.coverColor,
    required this.descriptionExpanded,
    required this.onToggleDescription,
    required this.onEditInfo,
  });

  @override
  Widget build(BuildContext context) {
    const coverHeight = 200.0;
    const avatarSize = 72.0;
    final theme = Theme.of(context);
    final l10n = L10n.of(context);
    final displayName = room.getLocalizedDisplayname(MatrixLocals(l10n));
    final creatorId = room.creatorUserIds.isEmpty
        ? null
        : room.creatorUserIds.first;
    final creatorState = creatorId == null
        ? null
        : room.getState(EventTypes.RoomMember, creatorId);
    final creatorName =
        creatorState?.content.tryGet<String>('displayname') ?? creatorId;
    final creatorAvatar = Uri.tryParse(
      creatorState?.content.tryGet<String>('avatar_url') ?? '',
    );
    final topic = room.topic.trim();

    return Column(
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: [
        Stack(
          clipBehavior: Clip.none,
          children: [
            SizedBox(
              height: coverHeight,
              child: Stack(
                fit: StackFit.expand,
                children: [
                  DecoratedBox(
                    decoration: BoxDecoration(
                      gradient: LinearGradient(
                        begin: Alignment.topLeft,
                        end: Alignment.bottomRight,
                        colors: [
                          coverColor,
                          theme.colorScheme.primaryContainer,
                        ],
                      ),
                    ),
                  ),
                  if (room.avatar != null)
                    MxcImage(
                      uri: room.avatar,
                      client: room.client,
                      width: MediaQuery.sizeOf(context).width,
                      height: coverHeight,
                      fit: BoxFit.cover,
                    ),
                  DecoratedBox(
                    decoration: BoxDecoration(
                      gradient: LinearGradient(
                        begin: Alignment.topCenter,
                        end: Alignment.bottomCenter,
                        colors: [
                          Colors.transparent,
                          Colors.black.withValues(alpha: 0.45),
                        ],
                        stops: const [0.55, 1.0],
                      ),
                    ),
                  ),
                ],
              ),
            ),
            Positioned(
              left: 16,
              bottom: -avatarSize / 2,
              child: Avatar(
                mxContent: creatorAvatar,
                name: creatorName,
                size: avatarSize,
                client: room.client,
                shapeBorder: CircleBorder(
                  side: BorderSide(width: 3, color: theme.colorScheme.surface),
                ),
              ),
            ),
            Positioned(
              left: 16 + avatarSize + 12,
              right: 8,
              bottom: -avatarSize / 2,
              child: Row(
                crossAxisAlignment: CrossAxisAlignment.end,
                children: [
                  Expanded(
                    child: Padding(
                      padding: const EdgeInsets.symmetric(horizontal: 8),
                      child: Text(
                        displayName,
                        maxLines: 2,
                        overflow: TextOverflow.ellipsis,
                        style: theme.textTheme.titleLarge?.copyWith(
                          fontWeight: FontWeight.bold,
                          color: Colors.white,
                          shadows: const [
                            Shadow(
                              color: Colors.black54,
                              blurRadius: 6,
                              offset: Offset(0, 1),
                            ),
                          ],
                        ),
                      ),
                    ),
                  ),
                  DecoratedBox(
                    decoration: BoxDecoration(
                      color: Colors.black.withValues(alpha: 0.35),
                      shape: BoxShape.circle,
                    ),
                    child: IconButton(
                      tooltip: l10n.settings,
                      icon: const Icon(Icons.more_vert),
                      color: Colors.white,
                      onPressed: onEditInfo,
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
        Padding(
          padding: const EdgeInsets.fromLTRB(16, 48, 16, 4),
          child: _ExpandableDescription(
            text: topic,
            expanded: descriptionExpanded,
            onToggle: onToggleDescription,
          ),
        ),
      ],
    );
  }
}

class _ExpandableDescription extends StatelessWidget {
  final String? text;
  final bool expanded;
  final VoidCallback onToggle;

  const _ExpandableDescription({
    required this.text,
    required this.expanded,
    required this.onToggle,
  });

  @override
  Widget build(BuildContext context) {
    final theme = Theme.of(context);
    final l10n = L10n.of(context);
    final text = this.text?.trim();
    if (text == null || text.isEmpty) return const SizedBox.shrink();
    final style = theme.textTheme.bodyMedium?.copyWith(height: 1.4);
    return LayoutBuilder(
      builder: (context, constraints) {
        final painter = TextPainter(
          text: TextSpan(text: text, style: style),
          maxLines: 4,
          textDirection: TextDirection.ltr,
        )..layout(maxWidth: constraints.maxWidth);
        final exceeds = painter.didExceedMaxLines;
        return Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              text,
              style: style,
              maxLines: expanded ? null : 4,
              overflow: expanded ? null : TextOverflow.ellipsis,
            ),
            if (exceeds)
              TextButton(
                onPressed: onToggle,
                style: TextButton.styleFrom(
                  padding: EdgeInsets.zero,
                  minimumSize: const Size(0, 32),
                  tapTargetSize: MaterialTapTargetSize.shrinkWrap,
                ),
                child: Text(expanded ? l10n.showLess : l10n.showMore),
              ),
          ],
        );
      },
    );
  }
}

class _MediaCell extends StatelessWidget {
  final Event event;
  final Client client;
  final double cellSize;
  final VoidCallback onTap;

  const _MediaCell({
    required this.event,
    required this.client,
    required this.cellSize,
    required this.onTap,
  });

  @override
  Widget build(BuildContext context) {
    final theme = Theme.of(context);
    final isVideo = event.messageType == MessageTypes.Video;
    final thumbnailUri = isVideo
        ? Uri.tryParse(
            event.content
                    .tryGetMap<String, Object?>('info')
                    ?.tryGet<String>('thumbnail_url') ??
                '',
          )
        : null;
    return GestureDetector(
      onTap: onTap,
      child: ColoredBox(
        color: theme.colorScheme.surfaceContainerHighest,
        child: Stack(
          fit: StackFit.expand,
          children: [
            if (isVideo)
              thumbnailUri == null
                  ? ColoredBox(
                      color: theme.colorScheme.surfaceContainerHighest,
                      child: const Center(
                        child: Icon(
                          Icons.video_library_outlined,
                          size: 36,
                          color: Colors.white70,
                        ),
                      ),
                    )
                  : MxcImage(
                      uri: thumbnailUri,
                      client: client,
                      width: cellSize,
                      height: cellSize,
                      fit: BoxFit.cover,
                    )
            else
              MxcImage(
                key: ValueKey(event.eventId),
                event: event,
                width: cellSize,
                height: cellSize,
                fit: BoxFit.cover,
                isThumbnail: true,
              ),
            if (isVideo)
              const Center(
                child: Icon(
                  Icons.play_circle_fill,
                  size: 40,
                  color: Colors.white,
                ),
              ),
          ],
        ),
      ),
    );
  }
}

class _PostViewer extends StatefulWidget {
  final Event event;
  final Room room;
  final Timeline timeline;

  const _PostViewer({
    super.key,
    required this.event,
    required this.room,
    required this.timeline,
  });

  @override
  State<_PostViewer> createState() => _PostViewerState();
}

class _PostViewerState extends State<_PostViewer> {
  final TextEditingController _commentController = TextEditingController();
  bool _sending = false;

  Event get event => widget.event;

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

  Event? _myReaction() {
    final reactions = event.aggregatedEvents(
      widget.timeline,
      RelationshipTypes.reaction,
    );
    for (final reaction in reactions) {
      final senderId = reaction.senderId;
      if (senderId != widget.room.client.userID) continue;
      final key = reaction.content
          .tryGetMap<String, Object?>('m.relates_to')
          ?.tryGet<String>('key');
      if (key == _likeKey) return reaction;
    }
    return null;
  }

  int get _likeCount => event
      .aggregatedEvents(widget.timeline, RelationshipTypes.reaction)
      .where(
        (e) =>
            e.content
                .tryGetMap<String, Object?>('m.relates_to')
                ?.tryGet<String>('key') ==
            _likeKey,
      )
      .length;

  Future<void> _toggleLike() async {
    final reaction = _myReaction();
    if (reaction != null) {
      await reaction.redactEvent();
    } else {
      await widget.room.sendReaction(event.eventId, _likeKey);
    }
  }

  Future<void> _editCaption() async {
    final l10n = L10n.of(context);
    final currentBody = event.getDisplayEvent(widget.timeline).body.trim();
    final result = await showTextInputDialog(
      context: context,
      title: l10n.editCaption,
      okLabel: l10n.ok,
      cancelLabel: l10n.cancel,
      hintText: l10n.captionHint,
      initialText: currentBody,
      maxLines: 3,
    );
    if (result == null ||
        result.trim().isEmpty ||
        result.trim() == currentBody) {
      return;
    }
    await widget.room.sendTextEvent(result.trim(), editEventId: event.eventId);
  }

  Future<void> _sendComment() async {
    final text = _commentController.text.trim();
    if (text.isEmpty || _sending) return;
    _commentController.clear();
    setState(() => _sending = true);
    try {
      await widget.room.sendTextEvent(text, threadRootEventId: event.eventId);
    } finally {
      if (mounted) setState(() => _sending = false);
    }
  }

  List<Event> _comments() {
    final comments = widget.timeline.events
        .where(
          (e) =>
              !e.redacted &&
              e.relationshipType == RelationshipTypes.thread &&
              e.relationshipEventId == event.eventId,
        )
        .toList();
    comments.sort((a, b) => a.originServerTs.compareTo(b.originServerTs));
    return comments;
  }

  @override
  Widget build(BuildContext context) {
    final theme = Theme.of(context);
    final l10n = L10n.of(context);
    final isVideo = event.messageType == MessageTypes.Video;

    return StreamBuilder(
      stream: widget.room.client.onSync.stream
          .where((syncUpdate) => syncUpdate.hasRoomUpdate)
          .rateLimit(const Duration(seconds: 1)),
      builder: (context, snapshots) {
        final comments = _comments();
        final caption = event.getDisplayEvent(widget.timeline).body.trim();
        final liked = _myReaction() != null;

        return SafeArea(
          top: false,
          left: false,
          right: false,
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: [
              Center(
                child: Container(
                  width: 36,
                  height: 5,
                  margin: const EdgeInsets.symmetric(vertical: 8),
                  decoration: BoxDecoration(
                    color: theme.colorScheme.outlineVariant,
                    borderRadius: BorderRadius.circular(3),
                  ),
                ),
              ),
              Padding(
                padding: const EdgeInsets.symmetric(horizontal: 8),
                child: Row(
                  children: [
                    Expanded(
                      child: Text(
                        widget.room.getLocalizedDisplayname(MatrixLocals(l10n)),
                        maxLines: 1,
                        overflow: TextOverflow.ellipsis,
                        style: theme.textTheme.titleMedium?.copyWith(
                          fontWeight: FontWeight.bold,
                        ),
                      ),
                    ),
                    IconButton(
                      icon: const Icon(Icons.close),
                      tooltip: l10n.close,
                      onPressed: () => Navigator.of(context).pop(),
                    ),
                  ],
                ),
              ),
              Expanded(
                flex: 5,
                child: Container(
                  color: theme.colorScheme.surfaceContainerHighest,
                  width: double.infinity,
                  child: isVideo
                      ? EventVideoPlayer(event)
                      : MxcImage(
                          key: ValueKey(event.eventId),
                          event: event,
                          fit: BoxFit.contain,
                          isThumbnail: false,
                        ),
                ),
              ),
              Padding(
                padding: const EdgeInsets.symmetric(horizontal: 4),
                child: Row(
                  crossAxisAlignment: CrossAxisAlignment.end,
                  children: [
                    IconButton(
                      tooltip: l10n.editCaption,
                      icon: const Icon(Icons.edit_outlined),
                      onPressed: _editCaption,
                    ),
                    const Spacer(),
                    if (_likeCount > 0)
                      Padding(
                        padding: const EdgeInsets.only(bottom: 10),
                        child: Text(
                          '$_likeCount',
                          style: theme.textTheme.bodyMedium?.copyWith(
                            color: theme.colorScheme.onSurfaceVariant,
                          ),
                        ),
                      ),
                    IconButton(
                      tooltip: liked ? l10n.unlike : l10n.like,
                      icon: Icon(
                        liked ? Icons.favorite : Icons.favorite_border,
                        color: liked ? Colors.redAccent : null,
                      ),
                      onPressed: _toggleLike,
                    ),
                  ],
                ),
              ),
              if (caption.trim().isNotEmpty)
                Padding(
                  padding: const EdgeInsets.fromLTRB(16, 0, 16, 8),
                  child: Text(
                    caption.trim(),
                    style: theme.textTheme.bodyMedium,
                  ),
                ),
              const Divider(height: 1),
              Expanded(
                flex: 3,
                child: comments.isEmpty
                    ? Center(
                        child: Padding(
                          padding: const EdgeInsets.all(16),
                          child: Text(
                            l10n.noCommentsYet,
                            textAlign: TextAlign.center,
                            style: TextStyle(
                              color: theme.colorScheme.onSurfaceVariant,
                            ),
                          ),
                        ),
                      )
                    : ListView.builder(
                        padding: const EdgeInsets.symmetric(vertical: 4),
                        itemCount: comments.length,
                        itemBuilder: (context, i) {
                          final comment = comments[i];
                          return Padding(
                            padding: const EdgeInsets.symmetric(
                              horizontal: 16,
                              vertical: 6,
                            ),
                            child: Row(
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: [
                                Avatar(
                                  mxContent: comment
                                      .senderFromMemoryOrFallback
                                      .avatarUrl,
                                  name: comment.senderFromMemoryOrFallback
                                      .calcDisplayname(),
                                  size: 32,
                                  client: widget.room.client,
                                ),
                                const SizedBox(width: 8),
                                Expanded(
                                  child: Column(
                                    crossAxisAlignment:
                                        CrossAxisAlignment.start,
                                    children: [
                                      Text(
                                        comment.senderFromMemoryOrFallback
                                            .calcDisplayname(),
                                        style: theme.textTheme.labelMedium
                                            ?.copyWith(
                                              fontWeight: FontWeight.bold,
                                            ),
                                      ),
                                      const SizedBox(height: 2),
                                      Text(
                                        comment
                                            .getDisplayEvent(widget.timeline)
                                            .calcLocalizedBodyFallback(
                                              MatrixLocals(l10n),
                                              withSenderNamePrefix: false,
                                              hideReply: true,
                                            ),
                                        style: theme.textTheme.bodyMedium,
                                      ),
                                    ],
                                  ),
                                ),
                              ],
                            ),
                          );
                        },
                      ),
              ),
              Padding(
                padding: const EdgeInsets.fromLTRB(16, 4, 8, 8),
                child: Row(
                  children: [
                    Expanded(
                      child: TextField(
                        controller: _commentController,
                        textInputAction: TextInputAction.send,
                        onSubmitted: (_) => _sendComment(),
                        decoration: InputDecoration(
                          hintText: l10n.optionalMessage,
                          isDense: true,
                          border: InputBorder.none,
                        ),
                      ),
                    ),
                    IconButton(
                      tooltip: l10n.send,
                      icon: const Icon(Icons.send_outlined),
                      onPressed: _sendComment,
                    ),
                  ],
                ),
              ),
            ],
          ),
        );
      },
    );
  }
}