import 'dart:ui';
import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';
import 'package:lucide_icons/lucide_icons.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import '../../widgets/status_bar.dart';
import '../../providers/device_provider.dart';
import '../../widgets/glass_bottom_nav.dart';

class MainScreen extends ConsumerStatefulWidget {
  final StatefulNavigationShell navigationShell;

  const MainScreen({
    super.key,
    required this.navigationShell,
  });

  @override
  ConsumerState<MainScreen> createState() => _MainScreenState();
}

class _MainScreenState extends ConsumerState<MainScreen> {
  void _goBranch(int index) {
    widget.navigationShell.goBranch(
      index,
      initialLocation: index == widget.navigationShell.currentIndex,
    );
  }

  Map<String, String> _getPageTitle(int index) {
    switch (index) {
      case 0:
        return {'title': '专属推荐', 'subtitle': '基于偏好生成的私密匹配列表'};
      case 1:
        return {'title': '剧本馆', 'subtitle': '沉浸式感官体验库'};
      case 2:
        return {'title': '手动实验室', 'subtitle': '实时触觉反馈控制'};
      case 3:
        return {'title': '个人中心', 'subtitle': 'ID: 884-291-00X'};
      default:
        return {'title': 'Wei AI', 'subtitle': ''};
    }
  }

  @override
  Widget build(BuildContext context) {
    final pageMeta = _getPageTitle(widget.navigationShell.currentIndex);

    return Container(
      decoration: const BoxDecoration(
        color: Color(0xFF2E1065), // Fallback
        gradient: LinearGradient(
          begin: Alignment.topLeft,
          end: Alignment.bottomRight,
          colors: [
            Color(0xFF2E1065), // #2e1065
            Color(0xFF4C1D95), // #4c1d95
            Color(0xFF831843), // #831843
          ],
          stops: [0.0, 0.4, 1.0],
        ),
      ),
      child: Stack(
        children: [
          // Radial Gradient 1 (Top Left)
          Positioned(
            top: -100,
            left: -100,
            child: Container(
              width: 500, // Larger size for smoother gradient
              height: 500,
              decoration: BoxDecoration(
                shape: BoxShape.circle,
                gradient: RadialGradient(
                  colors: [
                    const Color(0xFFA855F7).withOpacity(0.4), // rgba(168, 85, 247, 0.4)
                    Colors.transparent,
                  ],
                ),
              ),
            ),
          ),
          // Radial Gradient 2 (Top Right)
          Positioned(
            top: -100,
            right: -100,
            child: Container(
              width: 500,
              height: 500,
              decoration: BoxDecoration(
                shape: BoxShape.circle,
                gradient: RadialGradient(
                  colors: [
                    const Color(0xFFEC4899).withOpacity(0.3), // rgba(236, 72, 153, 0.3)
                    Colors.transparent,
                  ],
                ),
              ),
            ),
          ),

          // Scaffold
          Scaffold(
            backgroundColor: Colors.transparent,
            extendBody: true, // Important for glass nav
            extendBodyBehindAppBar: false, // Body starts below AppBar naturally
            appBar: AppBar(
              backgroundColor: Colors.transparent,
              elevation: 0,
              titleSpacing: 20,
              title: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                mainAxisSize: MainAxisSize.min,
                children: [
                  Row(
                    children: [
                      const Icon(LucideIcons.hexagon, size: 12, color: Colors.white70),
                      const SizedBox(width: 6),
                      Text(
                        'WEI AI',
                        style: TextStyle(
                          fontSize: 10,
                          fontWeight: FontWeight.bold,
                          letterSpacing: 2,
                          color: Colors.white.withOpacity(0.8),
                        ),
                      ),
                    ],
                  ),
                  const SizedBox(height: 4),
                  Text(
                    pageMeta['title']!, 
                    style: const TextStyle(
                      fontSize: 24, 
                      fontWeight: FontWeight.bold, 
                      color: Colors.white,
                      shadows: [Shadow(color: Colors.black26, offset: Offset(0, 2), blurRadius: 4)]
                    )
                  ),
                ],
              ),
              centerTitle: false,
              toolbarHeight: 90, // Increased toolbar height to accommodate subtitle
              actions: [
                Padding(
                  padding: const EdgeInsets.only(right: 20.0, top: 20), // Adjusted top padding to align with title
                  child: StatusBar(
                    status: ref.watch(deviceProvider),
                    onTap: () {
                      ref.read(deviceProvider.notifier).toggleConnection();
                    },
                  ),
                ),
              ],
              bottom: pageMeta['subtitle']!.isNotEmpty ? PreferredSize(
                preferredSize: const Size.fromHeight(20),
                child: Padding(
                  padding: const EdgeInsets.only(left: 20, bottom: 10),
                  child: Align(
                    alignment: Alignment.centerLeft,
                    child: Text(
                        pageMeta['subtitle']!,
                        style: TextStyle(fontSize: 10, color: Colors.white.withOpacity(0.6)),
                     ),
                  ),
                ),
              ) : null,
            ),
            body: widget.navigationShell,
            bottomNavigationBar: GlassBottomNav(
              currentIndex: widget.navigationShell.currentIndex,
              onTap: _goBranch,
            ),
          ),
        ],
      ),
    );
  }
}