import 'package:flutter/material.dart';

import '../../../core/theme/tokens.dart';
import '../quest_data.dart';
import '../quest_detail_screen.dart';
import 'quest_card_tile.dart' show pausedLabel;

/// 탭 화면(HOME · INSIDE · GALAXY · MY) 하단 탭 바로 위 한 줄 캡슐 — 원장 C-83(10/3 통합회신 Q-OB-01 A).
///
/// 일시 정지한 Quest 가 있을 때만 가장 최근 1건을 「일시 정지 · Quest명 · 43/60」으로 띄우고, 누르면 그
/// Quest 상세로 간다. Walk · 출석은 대상이 아니다(일시 정지가 되지 않는다). 새 탭 · 독립 화면이 아니다.
class PausedQuestCapsule extends StatefulWidget {
  const PausedQuestCapsule({super.key, required this.repository});

  final QuestRepository repository;

  @override
  State<PausedQuestCapsule> createState() => _PausedQuestCapsuleState();
}

class _PausedQuestCapsuleState extends State<PausedQuestCapsule> {
  QuestCard? _card;

  @override
  void initState() {
    super.initState();
    questSessionSignal.addListener(_load);
    _load();
  }

  @override
  void dispose() {
    questSessionSignal.removeListener(_load);
    super.dispose();
  }

  Future<void> _load() async {
    QuestCard? card;
    try {
      card = await widget.repository.pausedQuest();
    } catch (_) {
      card = null; // 캡슐은 보조 표시다 — 못 읽으면 띄우지 않는다.
    }
    if (mounted) setState(() => _card = card);
  }

  Future<void> _open(QuestCard card) async {
    await Navigator.of(context, rootNavigator: true).push<void>(
      MaterialPageRoute(
        builder: (_) =>
            QuestDetailScreen(questId: card.id, repository: widget.repository),
      ),
    );
    await _load();
  }

  @override
  Widget build(BuildContext context) {
    final card = _card;
    if (card == null) return const SizedBox.shrink();
    return ColoredBox(
      color: AppColors.cosmicVoid,
      child: Padding(
        padding: const EdgeInsets.fromLTRB(16, 8, 16, 0),
        child: Material(
          color: AppColors.cosmicSurfaceContainer,
          borderRadius: BorderRadius.circular(AppRadius.full),
          child: InkWell(
            key: const ValueKey('paused-quest-capsule'),
            onTap: () => _open(card),
            borderRadius: BorderRadius.circular(AppRadius.full),
            child: Padding(
              padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
              child: Row(
                children: [
                  const Icon(
                    Icons.pause_circle_filled_rounded,
                    size: 18,
                    color: AppColors.cosmicAccent,
                  ),
                  const SizedBox(width: 8),
                  Expanded(
                    child: Text(
                      pausedLabel(card, title: true),
                      maxLines: 1,
                      overflow: TextOverflow.ellipsis,
                      style: const TextStyle(
                        fontSize: 14,
                        fontWeight: FontWeight.w500,
                        height: 20 / 14,
                        color: AppColors.onCosmic,
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}