kooltab/lib/views/history_screen_view.dart

import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';
import 'package:kooltab2/views/widgets/closed_tab_card.dart';
import 'package:provider/provider.dart';

import '../app/router.dart';
import '../viewmodels/history_view_model.dart';

class HistoryScreenView extends StatefulWidget {
  const HistoryScreenView({super.key});

  @override
  State<HistoryScreenView> createState() => _HistoryScreenViewState();
}

class _HistoryScreenViewState extends State<HistoryScreenView> with RouteAware {
  final _scrollController = ScrollController();

  @override
  void initState() {
    super.initState();

    _scrollController.addListener(_onScroll);

    WidgetsBinding.instance.addPostFrameCallback((_) {
      context.read<HistoryViewModel>().load();
    });
  }

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    routeObserver.subscribe(this, ModalRoute.of(context)! as PageRoute);
  }

  @override
  void didPopNext() {
    context.read<HistoryViewModel>().load();
  }

  @override
  void dispose() {
    routeObserver.unsubscribe(this);
    _scrollController.removeListener(_onScroll);
    _scrollController.dispose();
    super.dispose();
  }

  void _onScroll() {
    if (_scrollController.position.extentAfter < 300) {
      context.read<HistoryViewModel>().loadMore();
    }
  }

  @override
  Widget build(BuildContext context) {
    final viewModel = context.watch<HistoryViewModel>();

    return Scaffold(
      appBar: AppBar(
        title: Row(
          children: [
            IconButton(
              onPressed: () => context.go('/bar'),
              icon: const Icon(Icons.arrow_back),
            ),
            const SizedBox(width: 5),
            const Text('Tab History'),
          ],
        ),
        actionsPadding: const EdgeInsets.symmetric(horizontal: 8),
        actions: [
          IconButton(
            tooltip: 'Refresh',
            onPressed: viewModel.load,
            icon: const Icon(Icons.refresh_rounded),
          ),
          const SizedBox(width: 8),
        ],
      ),
      body: Builder(
        builder: (context) {
          if (viewModel.isLoading && !viewModel.hasLoaded) {
            return const Center(
              child: CircularProgressIndicator(strokeWidth: 2.5),
            );
          }

          if (viewModel.errorMessage != null) {
            return Center(
              child: Padding(
                padding: const EdgeInsets.all(24),
                child: Column(
                  mainAxisSize: MainAxisSize.min,
                  children: [
                    Icon(
                      Icons.error_outline_rounded,
                      size: 40,
                      color: Theme.of(context).colorScheme.error,
                    ),
                    const SizedBox(height: 12),
                    Text(
                      viewModel.errorMessage!,
                      textAlign: TextAlign.center,
                      style: Theme.of(context).textTheme.bodyLarge,
                    ),
                  ],
                ),
              ),
            );
          }

          return Column(
            children: [
              Padding(
                padding: const EdgeInsets.fromLTRB(20, 16, 20, 8),
                child: Row(
                  children: [
                    Expanded(
                      child: TextField(
                        onChanged: viewModel.search,
                        decoration: const InputDecoration(
                          hintText: 'Search by name…',
                          prefixIcon: Icon(Icons.search_rounded, size: 20),
                          isDense: true,
                        ),
                      ),
                    ),
                    const SizedBox(width: 12),
                    _CustomerDropdown(
                      customerNames: viewModel.customerNames,
                      selectedCustomer: viewModel.selectedCustomer,
                      onSelected: viewModel.filterByCustomer,
                    ),
                  ],
                ),
              ),
              Expanded(
                child: viewModel.closedTabs.isEmpty
                    ? _EmptyState()
                    : ListView.separated(
                        controller: _scrollController,
                        padding: const EdgeInsets.fromLTRB(20, 8, 20, 20),
                        itemCount: viewModel.closedTabs.length +
                            (viewModel.hasMore || viewModel.isLoadingMore
                                ? 1
                                : 0),
                        separatorBuilder: (_, _) =>
                            const SizedBox(height: 10),
                        itemBuilder: (context, index) {
                          if (index == viewModel.closedTabs.length) {
                            return const Padding(
                              padding: EdgeInsets.symmetric(vertical: 24),
                              child: Center(
                                child: CircularProgressIndicator(
                                  strokeWidth: 2.5,
                                ),
                              ),
                            );
                          }

                          final closedTab = viewModel.closedTabs[index];

                          return ClosedTabCard(closedTab: closedTab);
                        },
                      ),
              ),
            ],
          );
        },
      ),
    );
  }
}

class _CustomerDropdown extends StatelessWidget {
  static const _allSentinel = r'$__all__$';

  final List<String> customerNames;
  final String? selectedCustomer;
  final ValueChanged<String?> onSelected;

  const _CustomerDropdown({
    required this.customerNames,
    required this.selectedCustomer,
    required this.onSelected,
  });

  @override
  Widget build(BuildContext context) {
    final scheme = Theme.of(context).colorScheme;
    final isFiltered = selectedCustomer != null;

    return PopupMenuButton<String>(
      onSelected: (value) {
        onSelected(value == _allSentinel ? null : value);
      },
      offset: const Offset(0, 44),
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(14)),
      color: Theme.of(context).cardTheme.color ?? scheme.surface,
      itemBuilder: (context) => [
        PopupMenuItem<String>(
          value: _allSentinel,
          child: Row(
            children: [
              Icon(
                isFiltered
                    ? Icons.people_outline
                    : Icons.people_rounded,
                size: 18,
                color: isFiltered
                    ? null
                    : scheme.primary,
              ),
              const SizedBox(width: 10),
              Text(
                'All customers',
                style: TextStyle(
                  fontWeight: isFiltered ? FontWeight.w400 : FontWeight.w700,
                  color: isFiltered ? null : scheme.primary,
                ),
              ),
            ],
          ),
        ),
        if (customerNames.isNotEmpty)
          const PopupMenuDivider(height: 1),
        ...customerNames.map(
          (name) => PopupMenuItem<String>(
            value: name,
            child: Row(
              children: [
                Icon(
                  name == selectedCustomer
                      ? Icons.person_rounded
                      : Icons.person_outline_rounded,
                  size: 18,
                ),
                const SizedBox(width: 10),
                Expanded(
                  child: Text(name, overflow: TextOverflow.ellipsis),
                ),
              ],
            ),
          ),
        ),
      ],
      child: Container(
        padding: const EdgeInsets.symmetric(horizontal: 14, vertical: 14),
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(14),
          border: Border.all(color: scheme.onSurface.withValues(alpha: 0.12)),
          color: isFiltered
              ? scheme.primary.withValues(alpha: 0.08)
              : null,
        ),
        child: Row(
          mainAxisSize: MainAxisSize.min,
          children: [
            Icon(
              Icons.person_rounded,
              size: 18,
              color: isFiltered
                  ? scheme.primary
                  : scheme.onSurface.withValues(alpha: 0.5),
            ),
            const SizedBox(width: 6),
            Flexible(
              child: Text(
                selectedCustomer ?? 'Customer',
                overflow: TextOverflow.ellipsis,
                style: TextStyle(
                  fontWeight: FontWeight.w600,
                  fontSize: 13,
                  color: isFiltered
                      ? scheme.primary
                      : scheme.onSurface.withValues(alpha: 0.5),
                ),
              ),
            ),
            const SizedBox(width: 4),
            Icon(
              Icons.arrow_drop_down_rounded,
              size: 18,
              color: isFiltered
                  ? scheme.primary
                  : scheme.onSurface.withValues(alpha: 0.5),
            ),
          ],
        ),
      ),
    );
  }
}

class _EmptyState extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final scheme = Theme.of(context).colorScheme;

    return Center(
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          Container(
            padding: const EdgeInsets.all(20),
            decoration: BoxDecoration(
              shape: BoxShape.circle,
              color: scheme.onSurface.withValues(alpha: 0.05),
            ),
            child: Icon(
              Icons.history_rounded,
              size: 40,
              color: scheme.onSurface.withValues(alpha: 0.3),
            ),
          ),
          const SizedBox(height: 16),
          Text(
            'No closed tabs yet',
            style: Theme.of(context).textTheme.titleMedium,
          ),
          const SizedBox(height: 4),
          Text(
            'Tabs you close will show up here.',
            style: Theme.of(context).textTheme.bodyMedium,
          ),
        ],
      ),
    );
  }
}