import 'package:cupertino_ui/cupertino_ui.dart';
import 'package:go_router/go_router.dart';

import '../../../core/widgets/feature_ui.dart';
import '../../../l10n/app_localizations.dart';

/// 相册页（管理 → 相册）。
///
/// 对应移动端设计稿：分段切换（全部/收藏/视频/相簿）、照片数量统计、
/// 三列照片墙与右下上传按钮。
class AlbumPage extends StatefulWidget {
  const AlbumPage({super.key});

  @override
  State<AlbumPage> createState() => _AlbumPageState();
}

class _AlbumPageState extends State<AlbumPage> {
  int _segment = 0;
  final _segments = ['全部', '收藏', '视频', '相簿'];

  static const _gradients = [
    [AppColors.purple, AppColors.blue],
    [AppColors.red, Color(0xFFF5576C)],
    [AppColors.teal, Color(0xFF00F2FE)],
    [Color(0xFF43E97B), Color(0xFF38F9D7)],
    [Color(0xFFFA709A), Color(0xFFFEE140)],
    [Color(0xFF30CFD0), Color(0xFF330867)],
    [Color(0xFFA8ED92), Color(0xFFFED6E3)],
    [Color(0xFFFBC2EB), Color(0xFFFECFEF)],
    [Color(0xFF5EE7DF), Color(0xFFB490CA)],
    [Color(0xFFF6D365), Color(0xFFFDA085)],
    [Color(0xFF84FAB0), Color(0xFF8FD3F4)],
    [Color(0xFFD4FC79), Color(0xFF96E6A1)],
    [Color(0xFFE0C3FC), Color(0xFF8EC5FC)],
    [Color(0xFFFBC2EB), Color(0xFFA6C1EE)],
    [Color(0xFF21D4FD), Color(0xFFB721FF)],
  ];

  @override
  Widget build(BuildContext context) {
    final l10n = AppLocalizations.of(context);
    return CupertinoPageScaffold(
      navigationBar: CupertinoNavigationBar(
        middle: Text(l10n.albumTitle),
        leading: CupertinoButton(
          padding: EdgeInsets.zero,
          child: const Icon(CupertinoIcons.back),
          onPressed: () => context.go('/messages'),
        ),
        trailing: CupertinoButton(
          padding: EdgeInsets.zero,
          child: const Text('选择'),
          onPressed: () {},
        ),
      ),
      child: Stack(
        children: [
          ListView(
            padding: const EdgeInsets.only(bottom: 90),
            children: [
              // 分段切换
              Padding(
                padding: const EdgeInsets.fromLTRB(16, 10, 16, 0),
                child: Container(
                  padding: const EdgeInsets.all(3),
                  decoration: BoxDecoration(
                    color: AppColors.track,
                    borderRadius: BorderRadius.circular(12),
                  ),
                  child: Row(
                    children: [
                      for (var i = 0; i < _segments.length; i++)
                        Expanded(
                          child: GestureDetector(
                            onTap: () => setState(() => _segment = i),
                            child: Container(
                              padding: const EdgeInsets.symmetric(vertical: 8),
                              decoration: BoxDecoration(
                                color: _segment == i ? CupertinoColors.white : const Color(0x00000000),
                                borderRadius: BorderRadius.circular(9),
                                boxShadow: _segment == i
                                    ? const [BoxShadow(color: Color(0x14141E3C), blurRadius: 6, offset: Offset(0, 2))]
                                    : null,
                              ),
                              child: Center(
                                child: Text(_segments[i],
                                    style: TextStyle(
                                        fontSize: 13,
                                        fontWeight: FontWeight.w600,
                                        color: _segment == i ? AppColors.ink : AppColors.sub)),
                              ),
                            ),
                          ),
                        ),
                    ],
                  ),
                ),
              ),
              Padding(
                padding: const EdgeInsets.fromLTRB(18, 10, 18, 10),
                child: Text('1280 张照片 · 42 个视频 · 已占用 6.4 GB',
                    style: const TextStyle(fontSize: 12, color: AppColors.sub)),
              ),
              Padding(
                padding: const EdgeInsets.symmetric(horizontal: 3),
                child: GridView.builder(
                  shrinkWrap: true,
                  physics: const NeverScrollableScrollPhysics(),
                  gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                    crossAxisCount: 3,
                    crossAxisSpacing: 3,
                    mainAxisSpacing: 3,
                  ),
                  itemCount: _gradients.length,
                  itemBuilder: (_, i) => Container(
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(8),
                      gradient: LinearGradient(
                        colors: _gradients[i],
                        begin: Alignment.topLeft,
                        end: Alignment.bottomRight,
                      ),
                    ),
                  ),
                ),
              ),
            ],
          ),
          Positioned(
            right: 18,
            bottom: 26,
            child: GestureDetector(
              onTap: () {},
              child: Container(
                width: 54,
                height: 54,
                decoration: BoxDecoration(
                  color: AppColors.green,
                  shape: BoxShape.circle,
                  boxShadow: const [BoxShadow(color: Color(0x6607C160), blurRadius: 20, offset: Offset(0, 8))],
                ),
                child: const Center(child: Text('＋', style: TextStyle(fontSize: 28, color: CupertinoColors.white))),
              ),
            ),
          ),
        ],
      ),
    );
  }
}