import 'package:flutter/material.dart';

import '../../core/ui/app_dialog.dart';

import '../../core/i18n/app_locale.dart';
import '../../core/theme/tokens.dart';
import '../../core/ui/app_icons.dart';
import '../planet/moderation.dart';
import '../translation/translation_data.dart';
import '../translation/translation_comments.dart';
import 'inside_data.dart';
import 'inside_ui.dart';

/// 인사이드 상세 — 화면 대조 원장 F9.
///
/// Figma 노드
/// - `207:53130` Inside_인사이드 상세(본인)
/// - `201:49678` Inside/인사이드 상세(타인)
/// - `201:51871` 신고하기 · `207:52152` 차단하기
///
/// 본인 글과 타인 글이 Figma 에서 별도 화면인 이유는 더보기 동작이 갈리기 때문이다 —
/// 본인은 수정·삭제, 타인은 신고·차단. 화면 골격은 같으므로 하나로 두고 동작만 나눈다.
///
/// 댓글(답변)은 [repository] 가 있으면 `answers` 하위 컬렉션에서 읽고, 없으면 [answers]
/// 를 그대로 그린다(화면 대조 · 시연). 질문자는 남의 답변 하나를 채택할 수 있고
/// (명세 2.64 · `fn-answer-accept`), 채택은 되돌릴 수 없다.
class InsideDetailScreen extends StatefulWidget {
  const InsideDetailScreen({
    super.key,
    required this.question,
    this.answers = const [],
    this.repository,
    this.translation,
  });

  final InsideQuestion question;
  final List<InsideAnswer> answers;
  final InsideRepository? repository;

  /// 참여형 번역(FR-I18N-02 · B-63). 있으면 댓글 입력의 지구본으로 번역 댓글을 쓰고,
  /// 번역 댓글을 댓글 목록에 지구본 표시와 함께 그린다.
  final TranslationRepository? translation;

  @override
  State<InsideDetailScreen> createState() => _InsideDetailScreenState();
}

class _InsideDetailScreenState extends State<InsideDetailScreen> {
  late InsideQuestion question = widget.question;
  late List<InsideAnswer> answers = widget.answers;
  bool _busy = false;

  /// 번역할 댓글(대댓글 버튼으로 고른다). 없으면 번역 댓글은 질문 본문의 번역이다.
  TranslationReplyTarget? _replyTo;

  TranslationRepository? get _translation =>
      translationSurfaces.contains(TranslationSurface.inside)
      ? widget.translation
      : null;

  String get _root => 'questions/${question.id}';

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

  Future<void> _reload() async {
    final repo = widget.repository;
    if (repo == null) return;
    try {
      final next = await repo.answers(question.id);
      if (mounted) setState(() => answers = next);
    } catch (error) {
      if (mounted) _notice(insideErrorMessage(error));
    }
  }

  void _notice(String message) => ScaffoldMessenger.of(context)
    ..hideCurrentSnackBar()
    ..showSnackBar(SnackBar(content: Text(message)));

  /// 답변 등록. 저장이 끝난 뒤에만 목록을 다시 읽는다 — 실패를 성공처럼 그리지 않게.
  Future<bool> _send(String body) async {
    final repo = widget.repository;
    if (repo == null) {
      _notice(context.l10n.insideAnswerLater);
      return false;
    }
    try {
      await repo.answer(question.id, body);
    } catch (error) {
      if (mounted) _notice(insideErrorMessage(error));
      return false;
    }
    await _reload();
    return true;
  }

  /// 채택 가능한 답변 — 본인 질문 · 아직 열림 · 남의 답변.
  bool _canAccept(InsideAnswer a) =>
      widget.repository != null &&
      question.isMine &&
      question.isOpen &&
      !a.isMine &&
      a.id.isNotEmpty;

  Future<void> _accept(InsideAnswer a) async {
    final ok = await showConfirmDialog(
      context,
      context.l10n.insideAcceptConfirm('${question.bountyPop}'),
      confirmLabel: context.l10n.insideAccept,
    );
    if (!ok || _busy || !mounted) return;
    setState(() => _busy = true);
    try {
      await widget.repository!.accept(question.id, a.id);
      if (mounted) setState(() => question = question.solvedCopy());
    } catch (error) {
      if (mounted) _notice(insideErrorMessage(error));
    } finally {
      if (mounted) setState(() => _busy = false);
    }
    await _reload();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        actions: [
          IconButton(
            tooltip: context.l10n.insideMore,
            icon: const ImageIcon(AppIcons.ellipsisVertical, size: 24),
            onPressed: () => _showMore(context),
          ),
          const SizedBox(width: AppSpace.s1),
        ],
      ),
      body: SafeArea(
        top: false,
        child: Column(
          children: [
            Expanded(
              child: ListView(
                padding: EdgeInsets.zero,
                children: [
                  _Post(question: question),
                  // 시안은 본문과 댓글 사이를 검정 8 로 끊는다.
                  const ColoredBox(
                    color: Colors.black,
                    child: SizedBox(
                      height: AppSpace.s2,
                      width: double.infinity,
                    ),
                  ),
                  Padding(
                    padding: const EdgeInsets.all(AppSpace.s4),
                    child: switch (_translation) {
                      final t? => TranslationThreads(
                        repository: t,
                        rootPath: _root,
                        builder: (_, byTarget) => _comments(t, byTarget),
                      ),
                      null => _comments(null, const {}),
                    },
                  ),
                ],
              ),
            ),
            CommentInputBar(
              hint: context.l10n.insideAnswerHint,
              onComment: _send,
              translation: _translation,
              rootPath: _root,
              replyTo: _replyTo,
              onClearReply: () => setState(() => _replyTo = null),
            ),
          ],
        ),
      ),
    );
  }

  /// 댓글 목록 — 댓글마다 그 댓글의 번역 댓글을 대댓글 자리에, 질문 본문의 번역 댓글은
  /// 댓글 뒤에 붙인다(시안 `201:50554`).
  Widget _comments(
    TranslationRepository? t,
    Map<String, List<TranslationEntry>> byTarget,
  ) {
    final ownTranslations = byTarget[_root] ?? const [];
    if (answers.isEmpty && ownTranslations.isEmpty) return const _NoAnswer();
    const divider = Divider(height: 33, thickness: 1, color: InsideColors.rule);
    return Column(
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: [
        for (final (i, a) in answers.indexed) ...[
          if (i > 0) divider,
          _AnswerThread(
            answer: a,
            onAccept: _canAccept(a) ? () => _accept(a) : null,
            onTranslate: t != null && a.id.isNotEmpty
                ? () => setState(
                    () => _replyTo = (
                      path: '$_root/answers/${a.id}',
                      name: a.authorName,
                    ),
                  )
                : null,
          ),
          for (final e in byTarget['$_root/answers/${a.id}'] ?? const []) ...[
            const SizedBox(height: AppSpace.s5),
            TranslationCommentCard(entry: e, repository: t!, reply: true),
          ],
        ],
        for (final (i, e) in ownTranslations.indexed) ...[
          if (answers.isNotEmpty || i > 0) divider,
          TranslationCommentCard(entry: e, repository: t!),
        ],
      ],
    );
  }

  /// 명세대로 본인 글과 타인 글의 선택지를 갈라 준다.
  void _showMore(BuildContext context) {
    showModalBottomSheet<void>(
      context: context,
      builder: (sheet) => SafeArea(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: question.isMine
              ? [
                  ListTile(
                    title: Text(context.l10n.commonEditAction),
                    onTap: () => Navigator.of(sheet).pop(),
                  ),
                  ListTile(
                    title: Text(context.l10n.commonDeleteAction),
                    onTap: () => Navigator.of(sheet).pop(),
                  ),
                ]
              : [
                  ListTile(
                    title: Text(context.l10n.reportTitle),
                    onTap: () {
                      Navigator.of(sheet).pop();
                      Navigator.of(context).push<String>(
                        MaterialPageRoute(
                          builder: (_) => ReportScreen(
                            target: ModerationTarget(
                              authorName: question.authorName,
                              title: question.title,
                            ),
                          ),
                        ),
                      );
                    },
                  ),
                  ListTile(
                    title: Text(context.l10n.commonBlockAction),
                    onTap: () {
                      Navigator.of(sheet).pop();
                      confirmBlock(context, question.authorName);
                    },
                  ),
                ],
        ),
      ),
    );
  }
}

/// 상세 시각 — 시안 `2026.04.27 09:00`.
String insideStamp(DateTime at) {
  String two(int v) => v.toString().padLeft(2, '0');
  return '${at.year}.${two(at.month)}.${two(at.day)} ${two(at.hour)}:${two(at.minute)}';
}

class _Post extends StatelessWidget {
  const _Post({required this.question});

  final InsideQuestion question;

  @override
  Widget build(BuildContext context) => Padding(
    padding: const EdgeInsets.all(AppSpace.s4),
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: [
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            InsideAuthor(
              name: question.authorName,
              meta: insideStamp(question.createdAt),
            ),
            if (question.bountyPop > 0) InsideBountyChip(question: question),
          ],
        ),
        if (question.refund != InsideRefund.none) ...[
          const SizedBox(height: AppSpace.s2),
          Text(
            question.refund.notice,
            style: insideText(12, color: AppColors.onCosmicMuted),
          ),
        ],
        const SizedBox(height: AppSpace.s3),
        Text(question.title, style: insideText(22)),
        const SizedBox(height: AppSpace.s3),
        Text(
          question.body,
          style: insideText(16, color: AppColors.onCosmicVariant),
        ),
        for (final (i, url) in question.imageUrls.indexed) ...[
          SizedBox(height: i == 0 ? AppSpace.s5 : AppSpace.s3),
          ClipRRect(
            borderRadius: BorderRadius.circular(AppRadius.sm),
            child: AspectRatio(
              aspectRatio: 1,
              child: Image(image: insideImage(url), fit: BoxFit.cover),
            ),
          ),
        ],
        const SizedBox(height: AppSpace.s4),
        InsideStats(
          question: question,
          size: 18,
          textSize: 14,
          color: InsideColors.chipLabel,
        ),
      ],
    ),
  );
}

class _NoAnswer extends StatelessWidget {
  const _NoAnswer();

  @override
  Widget build(BuildContext context) => Padding(
    padding: const EdgeInsets.symmetric(vertical: AppSpace.s4),
    child: Column(
      children: [
        const ImageIcon(
          AppIcons.messageCircle,
          size: 48,
          color: InsideColors.stat,
        ),
        const SizedBox(height: AppSpace.s4),
        Text(
          context.l10n.insideFirstAnswer,
          style: insideText(12, color: AppColors.onCosmicVariant),
        ),
      ],
    ),
  );
}

/// 댓글 하나와 그 대댓글 — 댓글과 대댓글 사이 24.
class _AnswerThread extends StatelessWidget {
  const _AnswerThread({required this.answer, this.onAccept, this.onTranslate});

  final InsideAnswer answer;
  final VoidCallback? onAccept;
  final VoidCallback? onTranslate;

  @override
  Widget build(BuildContext context) => Column(
    crossAxisAlignment: CrossAxisAlignment.stretch,
    children: [
      _Answer(
        answer: answer,
        reply: false,
        onAccept: onAccept,
        onTranslate: onTranslate,
      ),
      for (final r in answer.replies) ...[
        const SizedBox(height: AppSpace.s5),
        Row(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            const ImageIcon(
              AppIcons.cornerDownRight,
              size: 20,
              color: AppColors.onCosmicMuted,
            ),
            const SizedBox(width: AppSpace.s3),
            Expanded(
              child: Container(
                padding: const EdgeInsets.all(6),
                decoration: BoxDecoration(
                  // 본인 댓글은 분홍 10%, 나머지는 #1a1a1c.
                  color: r.isMine
                      ? AppColors.cosmicAccent.withValues(alpha: 0.1)
                      : AppColors.cosmicSurfaceContainer,
                  borderRadius: BorderRadius.circular(2),
                ),
                child: _Answer(answer: r, reply: true),
              ),
            ),
          ],
        ),
      ],
    ],
  );
}

class _Answer extends StatelessWidget {
  const _Answer({
    required this.answer,
    required this.reply,
    this.onAccept,
    this.onTranslate,
  });

  final InsideAnswer answer;
  final bool reply;

  /// 대댓글 버튼 — 이 댓글을 골라 번역 댓글을 단다(명세 「댓글 선택 UI 변경 후 키보드 노출」).
  final VoidCallback? onTranslate;

  /// 「채택하기」 — 질문자에게만, 채택 전에만 붙는다(명세 2.64-3).
  final VoidCallback? onAccept;

  @override
  Widget build(BuildContext context) => Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          InsideAuthor(name: answer.authorName),
          const Spacer(),
          if (answer.isAccepted)
            _AcceptChip(
              label: context.l10n.insideAcceptDone,
              color: AppColors.cosmicBlue,
            )
          else if (onAccept != null)
            GestureDetector(
              onTap: onAccept,
              child: _AcceptChip(
                label: context.l10n.insideAcceptAction,
                color: AppColors.onCosmic,
              ),
            ),
          if (answer.isAccepted || onAccept != null)
            const SizedBox(width: AppSpace.s2),
          // 댓글 동작 칸 — #1a1a1a · 아이콘 16 · 사이 12. 대댓글에는 답글이 없다.
          Container(
            color: InsideColors.rule,
            padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 5),
            child: Row(
              children: [
                const ImageIcon(
                  AppIcons.heart,
                  size: 16,
                  color: InsideColors.stat,
                ),
                if (!reply) ...[
                  const SizedBox(width: AppSpace.s3),
                  Semantics(
                    button: onTranslate != null,
                    label: onTranslate == null
                        ? null
                        : context.l10n.translationWrite,
                    child: GestureDetector(
                      onTap: onTranslate,
                      child: const ImageIcon(
                        AppIcons.messageCircle,
                        size: 16,
                        color: InsideColors.stat,
                      ),
                    ),
                  ),
                ],
                const SizedBox(width: AppSpace.s3),
                const ImageIcon(
                  AppIcons.ellipsisVertical,
                  size: 16,
                  color: InsideColors.stat,
                ),
              ],
            ),
          ),
        ],
      ),
      const SizedBox(height: AppSpace.s3),
      Text(answer.body, style: insideText(14)),
      const SizedBox(height: AppSpace.s3),
      Text(
        insideStamp(answer.createdAt),
        style: insideText(10, color: AppColors.onCosmicMuted),
      ),
    ],
  );
}

/// 채택 칩 — 「채택하기」 버튼과 「채택 완료」 표시가 같은 모양을 쓴다.
class _AcceptChip extends StatelessWidget {
  const _AcceptChip({required this.label, required this.color});

  final String label;
  final Color color;

  @override
  Widget build(BuildContext context) => Container(
    padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
    decoration: BoxDecoration(
      border: Border.all(color: color),
      borderRadius: BorderRadius.circular(2),
    ),
    child: Text(label, style: insideText(12, color: color, height: 1)),
  );
}