import 'dart:async';
import 'package:flutter/material.dart';
import 'story_detail_page.dart';

class StoryLoadingPage extends StatefulWidget {
  const StoryLoadingPage({super.key});

  @override
  State<StoryLoadingPage> createState() => _StoryLoadingPageState();
}

class _StoryLoadingPageState extends State<StoryLoadingPage>
    with SingleTickerProviderStateMixin {
  double _progress = 0.0;
  String _loadingText = "构思故事中...";
  final List<Map<String, dynamic>> _milestones = [
    {'pct': 0.2, 'text': "正在收集灵感碎片..."},
    {'pct': 0.5, 'text': "正在往故事里撒魔法粉..."},
    {'pct': 0.8, 'text': "正在编制最后的魔法..."},
    {'pct': 0.98, 'text': "大功告成！"},
  ];

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

  void _startLoading() {
    // Total duration approx 3.5s (match Web 35ms * 100 steps)
    Timer.periodic(const Duration(milliseconds: 35), (timer) {
      if (!mounted) {
        timer.cancel();
        return;
      }

      setState(() {
        _progress += 0.01;
        // Check text updates
        for (var m in _milestones) {
          if ((_progress - m['pct'] as double).abs() < 0.01) {
            _loadingText = m['text'] as String;
          }
        }
      });

      if (_progress >= 1.0) {
        timer.cancel();
        _navigateToDetail();
      }
    });
  }

  void _navigateToDetail() async {
    // Use push instead of pushReplacement to properly return the result
    final result = await Navigator.of(context).push<String>(
      MaterialPageRoute(
        builder: (context) => const StoryDetailPage(
          mode: StoryMode.generated,
          story: {
            'title': '新生成的冒险',
            'content': '在遥远的未来，勇敢的宇航员发现了一个神秘的星球...\n(这是生成的示例故事内容)',
          },
        ),
      ),
    );

    // Pass the result back to DeviceControlPage
    if (mounted) {
      Navigator.of(context).pop(result);
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color(0xFFFDF9F3),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            // Image
            Image.asset(
              'assets/www/kapi_writing.png',
              width: 200,
              height: 200, // Approximate
              errorBuilder: (c, e, s) => const Icon(
                Icons.edit_note,
                size: 100,
                color: Color(0xFFD1D5DB),
              ),
            ),
            const SizedBox(height: 32),

            // Text - HTML: font-size 18px, color #4B2404 (dark brown)
            Text(
              _loadingText,
              style: const TextStyle(
                fontFamily: 'Inter',
                fontSize: 18, // HTML: 18px
                color: Color(0xFF4B2404), // HTML: dark chocolate brown
                fontWeight: FontWeight.w600,
              ),
            ),
            const SizedBox(height: 24),

            // Progress Bar - HTML: height 12px, max-width 280px
            // Track: rgba(201,150,114,0.2), Fill: gradient #ECCFA8 to #C99672
            Container(
              width: 280, // HTML: max-width 280px
              height: 12, // HTML: height 12px
              decoration: BoxDecoration(
                color: const Color(0xFFC99672).withOpacity(0.2), // Warm sand
                borderRadius: BorderRadius.circular(6), // HTML: 6px
              ),
              child: ClipRRect(
                borderRadius: BorderRadius.circular(6),
                child: FractionallySizedBox(
                  alignment: Alignment.centerLeft,
                  widthFactor: _progress.clamp(0.0, 1.0),
                  child: Container(
                    decoration: const BoxDecoration(
                      // HTML: gradient #ECCFA8 to #C99672
                      gradient: LinearGradient(
                        colors: [Color(0xFFECCFA8), Color(0xFFC99672)],
                      ),
                    ),
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}