// 模板画廊页面 — 日记模板浏览和选择

import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';
import 'package:nuanji_app/core/theme/app_colors.dart';

/// 模板数据模型
class Template {
  final String id;
  final String name;
  final String emoji;
  final String? category;
  final bool isFree;
  final String? description;

  const Template({
    required this.id,
    required this.name,
    required this.emoji,
    this.category,
    this.isFree = true,
    this.description,
  });
}

/// 模板画廊页面 — 浏览和选择日记模板
class TemplateGalleryPage extends StatefulWidget {
  const TemplateGalleryPage({super.key});

  @override
  State<TemplateGalleryPage> createState() => _TemplateGalleryPageState();
}

class _TemplateGalleryPageState extends State<TemplateGalleryPage> {
  String _selectedCategory = '全部';

  final _categories = ['全部', '日常', '旅行', '校园', '节日', '创意'];

  // Phase 1 占位数据
  final _templates = const [
    Template(id: '1', name: '今日心情', emoji: '💭', category: '日常', description: '记录今天的心情和感受'),
    Template(id: '2', name: '校园日记', emoji: '📚', category: '校园', description: '在学校的一天'),
    Template(id: '3', name: '旅行手账', emoji: '🗺️', category: '旅行', description: '记录旅行中的美好瞬间'),
    Template(id: '4', name: '美食记录', emoji: '🍜', category: '日常', description: '记录今天吃到的美食'),
    Template(id: '5', name: '读书笔记', emoji: '📖', category: '校园', description: '记录读完一本书的感想'),
    Template(id: '6', name: '节日特辑', emoji: '🎄', category: '节日', description: '特别的节日记录'),
    Template(id: '7', name: '自然观察', emoji: '🌿', category: '创意', description: '记录大自然的发现'),
    Template(id: '8', name: '梦想清单', emoji: '✨', category: '创意', description: '写下心中的梦想'),
    Template(id: '9', name: '周末时光', emoji: '☀️', category: '日常', description: '悠闲的周末记录'),
    Template(id: '10', name: '运动打卡', emoji: '🏃', category: '日常', description: '记录运动和锻炼'),
  ];

  @override
  Widget build(BuildContext context) {
    final theme = Theme.of(context);
    final colorScheme = theme.colorScheme;

    final filtered = _selectedCategory == '全部'
        ? _templates
        : _templates.where((t) => t.category == _selectedCategory).toList();

    return Scaffold(
      appBar: AppBar(
        title: const Text('模板画廊'),
      ),
      body: Column(
        children: [
          // 分类选择器
          SizedBox(
            height: 48,
            child: ListView(
              scrollDirection: Axis.horizontal,
              padding: const EdgeInsets.symmetric(horizontal: 16),
              children: _categories.map((cat) {
                final isSelected = cat == _selectedCategory;
                return Padding(
                  padding: const EdgeInsets.only(right: 8),
                  child: FilterChip(
                    selected: isSelected,
                    label: Text(cat),
                    onSelected: (_) {
                      setState(() => _selectedCategory = cat);
                    },
                    selectedColor: colorScheme.primaryContainer,
                    checkmarkColor: colorScheme.primary,
                  ),
                );
              }).toList(),
            ),
          ),
          const SizedBox(height: 8),

          // 模板网格
          Expanded(
            child: GridView.builder(
              padding: const EdgeInsets.all(16),
              gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 2,
                mainAxisSpacing: 12,
                crossAxisSpacing: 12,
                childAspectRatio: 0.78,
              ),
              itemCount: filtered.length,
              itemBuilder: (context, index) {
                return _TemplateCard(template: filtered[index]);
              },
            ),
          ),
        ],
      ),
    );
  }
}

/// 模板卡片
class _TemplateCard extends StatelessWidget {
  const _TemplateCard({required this.template});

  final Template template;

  @override
  Widget build(BuildContext context) {
    final theme = Theme.of(context);
    final colorScheme = theme.colorScheme;

    return Card(
      elevation: 0,
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(16),
        side: BorderSide(color: colorScheme.outlineVariant),
      ),
      child: InkWell(
        onTap: () {
          // 使用模板创建日记
          context.go('/editor?template=${template.id}');
        },
        borderRadius: BorderRadius.circular(16),
        child: Padding(
          padding: const EdgeInsets.all(16),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              // 模板预览区
              Container(
                width: 72,
                height: 72,
                decoration: BoxDecoration(
                  gradient: LinearGradient(
                    begin: Alignment.topLeft,
                    end: Alignment.bottomRight,
                    colors: [
                      colorScheme.primaryContainer.withValues(alpha: 0.5),
                      AppColors.tertiary.withValues(alpha: 0.3),
                    ],
                  ),
                  borderRadius: BorderRadius.circular(16),
                ),
                alignment: Alignment.center,
                child: Text(
                  template.emoji,
                  style: const TextStyle(fontSize: 36),
                ),
              ),
              const SizedBox(height: 12),
              // 模板名称
              Text(
                template.name,
                style: theme.textTheme.titleSmall?.copyWith(
                  fontWeight: FontWeight.w600,
                ),
              ),
              const SizedBox(height: 4),
              // 描述
              if (template.description != null)
                Text(
                  template.description!,
                  style: theme.textTheme.bodySmall?.copyWith(
                    color: colorScheme.onSurface.withValues(alpha: 0.5),
                  ),
                  maxLines: 2,
                  overflow: TextOverflow.ellipsis,
                  textAlign: TextAlign.center,
                ),
            ],
          ),
        ),
      ),
    );
  }
}