import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';

import '../../domain/catalog/catalog_item.dart';
import '../../domain/catalog/display_category.dart';
import '../../state/catalog_providers.dart';
import '../widgets/catalog_card.dart';
import '../widgets/category_chip_row.dart';
import 'protocol_preview_screen.dart';

class ProtocolGalleryScreen extends ConsumerStatefulWidget {
  const ProtocolGalleryScreen({super.key});

  @override
  ConsumerState<ProtocolGalleryScreen> createState() =>
      _ProtocolGalleryScreenState();
}

class _ProtocolGalleryScreenState extends ConsumerState<ProtocolGalleryScreen> {
  DisplayCategory? _selected;

  @override
  Widget build(BuildContext context) {
    final groupedAsync = ref.watch(groupedByCategoryProvider);
    return Scaffold(
      appBar: AppBar(title: const Text('카탈로그 탐색')),
      body: groupedAsync.when(
        loading: () => const Center(child: CircularProgressIndicator()),
        error: (e, _) => Center(child: Text('로드 실패: $e')),
        data: (grouped) {
          final categories = DisplayCategory.values
              .where((c) => grouped.containsKey(c))
              .toList();
          final items = _selected == null
              ? grouped.values.expand((e) => e).toList()
              : (grouped[_selected] ?? const <CatalogItem>[]);
          // Sort within filtered view by id (consistent with repo sort).
          items.sort((a, b) {
            final c = a.displayCategory.index - b.displayCategory.index;
            return c != 0 ? c : a.id.compareTo(b.id);
          });
          return Column(
            children: [
              CategoryChipRow(
                categories: categories,
                selected: _selected,
                onSelect: (c) => setState(() => _selected = c),
              ),
              Expanded(
                child: items.isEmpty
                    ? const Center(child: Text('항목이 없습니다.'))
                    : GridView.builder(
                        padding: const EdgeInsets.all(12),
                        gridDelegate:
                            const SliverGridDelegateWithMaxCrossAxisExtent(
                          maxCrossAxisExtent: 240,
                          mainAxisExtent: 160,
                          crossAxisSpacing: 8,
                          mainAxisSpacing: 8,
                        ),
                        itemCount: items.length,
                        itemBuilder: (context, i) => CatalogCard(
                          item: items[i],
                          onTap: () => Navigator.of(context).push(
                            MaterialPageRoute(
                              builder: (_) =>
                                  ProtocolPreviewScreen(item: items[i]),
                            ),
                          ),
                        ),
                      ),
              ),
            ],
          );
        },
      ),
    );
  }
}