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

import '../../../../services/analysis_providers.dart';
import '../../../shared/presentation/widgets/async_value_view.dart';
import '../../../shared/presentation/widgets/lab_section_scaffold.dart';

class HistoryPage extends ConsumerWidget {
  const HistoryPage({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final theme = Theme.of(context);
    final observations = ref.watch(observationListProvider);
    final sessions = ref.watch(sessionListProvider);

    return LabSectionScaffold(
      eyebrow: 'History',
      title: 'Browse prior observations and experiment sessions.',
      description:
          'This page keeps the mobile lab stateful by showing the observation archive and the experiment session archive side by side.',
      children: [
        AsyncValueView(
          value: observations,
          loadingMessage: 'Loading observations...',
          data: (items) => Card(
            child: Padding(
              padding: const EdgeInsets.all(20),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    'Observation Archive',
                    style: theme.textTheme.titleLarge,
                  ),
                  const SizedBox(height: 8),
                  if (items.isEmpty)
                    Text(
                      'No observations stored yet.',
                      style: theme.textTheme.bodyMedium,
                    )
                  else
                    ...items.map(
                      (item) => ListTile(
                        contentPadding: EdgeInsets.zero,
                        title: Text(item.id),
                        subtitle: Text(
                          '${item.durationMs} ms | ${item.sampleRate} Hz | ${item.tags.join(', ')}',
                        ),
                        trailing: const Icon(Icons.chevron_right),
                        onTap: () {
                          ref
                              .read(sessionActionsProvider)
                              .selectObservation(item.id);
                          context.goNamed('observation');
                        },
                      ),
                    ),
                ],
              ),
            ),
          ),
        ),
        const SizedBox(height: 16),
        AsyncValueView(
          value: sessions,
          loadingMessage: 'Loading session archive...',
          data: (items) => Card(
            child: Padding(
              padding: const EdgeInsets.all(20),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text('Session Archive', style: theme.textTheme.titleLarge),
                  const SizedBox(height: 8),
                  if (items.isEmpty)
                    Text(
                      'No backend sessions found yet.',
                      style: theme.textTheme.bodyMedium,
                    )
                  else
                    ...items.map(
                      (item) => ListTile(
                        contentPadding: EdgeInsets.zero,
                        title: Text(item.observationId),
                        subtitle: Text('${item.status} | ${item.message}'),
                        trailing: const Icon(Icons.chevron_right),
                        onTap: () {
                          ref
                              .read(sessionActionsProvider)
                              .selectSession(item.sessionId);
                          context.goNamed('observation');
                        },
                      ),
                    ),
                ],
              ),
            ),
          ),
        ),
      ],
    );
  }
}