import 'package:flutter/material.dart';
import 'package:airhub_app/theme/design_tokens.dart';
import 'package:airhub_app/widgets/animated_gradient_background.dart';

class GuideFeedingPage extends StatelessWidget {
  const GuideFeedingPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.transparent,
      body: Stack(
        children: [
          const AnimatedGradientBackground(),
          Column(
            children: [
              _buildHeader(context),
              Expanded(
                child: ShaderMask(
                  shaderCallback: (Rect rect) {
                    return const LinearGradient(
                      begin: Alignment.topCenter,
                      end: Alignment.bottomCenter,
                      colors: [Colors.transparent, Colors.black, Colors.black, Colors.transparent],
                      stops: [0.0, 0.05, 0.95, 1.0],
                    ).createShader(rect);
                  },
                  blendMode: BlendMode.dstIn,
                  child: SingleChildScrollView(
                    padding: EdgeInsets.only(
                      top: 20,
                      left: 20,
                      right: 20,
                      bottom: 40 + MediaQuery.of(context).padding.bottom,
                    ),
                    child: _buildManualCard(),
                  ),
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }

  Widget _buildHeader(BuildContext context) {
    return Container(
      padding: EdgeInsets.only(
        top: MediaQuery.of(context).padding.top + 20,
        left: AppSpacing.lg,
        right: AppSpacing.lg,
        bottom: AppSpacing.md,
      ),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          GestureDetector(
            onTap: () => Navigator.pop(context),
            child: Container(
              width: 40,
              height: 40,
              decoration: BoxDecoration(
                color: AppColors.iconBtnBg,
                borderRadius: BorderRadius.circular(AppRadius.button),
              ),
              child: const Icon(
                Icons.arrow_back_ios_new,
                color: AppColors.textPrimary,
                size: 18,
              ),
            ),
          ),
          Text('喂养指南', style: AppTextStyles.title),
          const SizedBox(width: 40),
        ],
      ),
    );
  }

  Widget _buildManualCard() {
    return Container(
      padding: const EdgeInsets.all(24),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(24),
        border: Border.all(color: const Color(0xFFF3F4F6), width: 2),
        boxShadow: [
          BoxShadow(
            color: Colors.black.withOpacity(0.05),
            blurRadius: 20,
            offset: const Offset(0, 4),
          ),
        ],
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Center(
            child: Container(
              margin: const EdgeInsets.only(bottom: 24),
              child: Image.asset(
                'assets/www/pixel_capybara_eating_guide_1770187625762.png',
                width: 128,
                height: 128,
                fit: BoxFit.contain,
                filterQuality: FilterQuality.none, // Pixelated
              ),
            ),
          ),

          _buildSection('如何喂食你的电子宠物？', [
            const TextSpan(text: '当你的毛绒机芯显示“饿了”的图标时，它需要补充能量！\n\n'),
            const TextSpan(text: '1. 打开 APP 首页，点击右下角的 '),
            TextSpan(
              text: '[能量]',
              style: TextStyle(
                fontWeight: FontWeight.bold,
                color: Colors.black,
              ),
            ),
            const TextSpan(text: ' 按钮。\n'),
            const TextSpan(text: '2. 从列表中选择它喜欢的食物（胡萝卜、西瓜或干草饼干）。\n'),
            const TextSpan(text: '3. 点击“投喂”，观察它的反应！'),
          ], highlight: '💡 小贴士： 不同的食物会增加不同的心情值哦！西瓜会让它超级开心。'),

          _buildSection('心情与成长', [
            const TextSpan(text: '保持饱腹感可以提升心情值。心情值越高，它的互动反应就越丰富。\n'),
            const TextSpan(text: '如果你连续 3 天忘记喂食，它可能会变得懒洋洋的，不愿理人哦... 💤'),
          ]),

          _buildSection('特殊互动', [
            const TextSpan(text: '在喂食的时候，试着抚摸它的头（在屏幕上滑动），它会发出满意的咕噜声！'),
          ]),
        ],
      ),
    );
  }

  Widget _buildSection(
    String title,
    List<InlineSpan> content, {
    String? highlight,
  }) {
    return Padding(
      padding: const EdgeInsets.only(bottom: 32),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          // Styled H2 mimic
          Container(
            margin: const EdgeInsets.only(bottom: 16),
            child: Row(
              children: [
                Container(
                  width: 8,
                  height: 8,
                  margin: const EdgeInsets.only(right: 10),
                  decoration: const BoxDecoration(color: Color(0xFF8B5E3C)),
                ),
                Text(
                  title,
                  style: const TextStyle(
                    color: Color(0xFF8B5E3C),
                    fontSize: 14,
                    fontWeight: FontWeight.bold,
                    fontFamily: 'Courier', // Monospace-ish backup
                  ),
                ),
              ],
            ),
          ),

          // Content
          RichText(
            text: TextSpan(
              style: const TextStyle(
                fontSize: 15,
                color: Color(0xFF4B5563),
                height: 1.7,
              ),
              children: content,
            ),
          ),

          if (highlight != null) ...[
            const SizedBox(height: 16),
            Container(
              padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
              decoration: const BoxDecoration(
                color: Color(0xFFFFF7ED),
                borderRadius: BorderRadius.horizontal(
                  right: Radius.circular(8),
                ),
                border: Border(
                  left: BorderSide(color: Color(0xFFF97316), width: 4),
                ),
              ),
              child: Text(
                highlight,
                style: const TextStyle(fontSize: 14, color: Color(0xFF9A3412)),
              ),
            ),
          ],
        ],
      ),
    );
  }
}