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

import 'package:alt_client/src/integrations/socket/socket_connection_controller.dart';

class DashboardScreen extends StatelessWidget {
  final bool showAppBar;
  final bool showNavigation;

  const DashboardScreen({
    super.key,
    this.showAppBar = true,
    this.showNavigation = true,
  });

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (context, constraints) {
        final wide = constraints.maxWidth >= 840;
        return Scaffold(
          appBar: showAppBar ? AppBar(title: const Text('ALT')) : null,
          body: Row(
            children: [
              if (wide && showNavigation)
                NavigationRail(
                  selectedIndex: 0,
                  destinations: const [
                    NavigationRailDestination(
                      icon: Icon(Icons.analytics_outlined),
                      selectedIcon: Icon(Icons.analytics),
                      label: Text('Backtests'),
                    ),
                    NavigationRailDestination(
                      icon: Icon(Icons.show_chart),
                      label: Text('Market'),
                    ),
                    NavigationRailDestination(
                      icon: Icon(Icons.account_balance_wallet_outlined),
                      label: Text('Portfolio'),
                    ),
                  ],
                ),
              const Expanded(child: _DashboardBody()),
            ],
          ),
          bottomNavigationBar: wide || !showNavigation
              ? null
              : NavigationBar(
                  selectedIndex: 0,
                  destinations: const [
                    NavigationDestination(
                      icon: Icon(Icons.analytics_outlined),
                      selectedIcon: Icon(Icons.analytics),
                      label: 'Backtests',
                    ),
                    NavigationDestination(
                      icon: Icon(Icons.show_chart),
                      label: 'Market',
                    ),
                    NavigationDestination(
                      icon: Icon(Icons.account_balance_wallet_outlined),
                      label: 'Portfolio',
                    ),
                  ],
                ),
        );
      },
    );
  }
}

class _DashboardBody extends ConsumerWidget {
  const _DashboardBody();

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final textTheme = Theme.of(context).textTheme;
    final socketStatus = ref.watch(socketConnectionControllerProvider);

    final String socketStatusText;
    switch (socketStatus.status) {
      case SocketConnectionStatus.disconnected:
        socketStatusText = 'Disconnected';
        break;
      case SocketConnectionStatus.connecting:
        socketStatusText = 'Connecting';
        break;
      case SocketConnectionStatus.connected:
        socketStatusText = 'Connected';
        break;
      case SocketConnectionStatus.error:
        socketStatusText = 'Error';
        break;
      case SocketConnectionStatus.timeout:
        socketStatusText = 'Timeout';
        break;
    }

    return SafeArea(
      child: ListView(
        padding: const EdgeInsets.all(24),
        children: [
          Text('Backtests', style: textTheme.headlineSmall),
          const SizedBox(height: 16),
          const _StatusPanel(
            title: 'Korea Daily Pipeline',
            value: 'Scaffold',
            icon: Icons.calendar_today_outlined,
          ),
          const SizedBox(height: 12),
          _StatusPanel(
            title: 'Socket Contract',
            value: socketStatusText,
            icon: Icons.hub_outlined,
          ),
        ],
      ),
    );
  }
}

class _StatusPanel extends StatelessWidget {
  const _StatusPanel({
    required this.title,
    required this.value,
    required this.icon,
  });

  final String title;
  final String value;
  final IconData icon;

  @override
  Widget build(BuildContext context) {
    final colorScheme = Theme.of(context).colorScheme;
    return DecoratedBox(
      decoration: BoxDecoration(
        border: Border.all(color: colorScheme.outlineVariant),
        borderRadius: BorderRadius.circular(8),
      ),
      child: Padding(
        padding: const EdgeInsets.all(16),
        child: Row(
          children: [
            Icon(icon, color: colorScheme.primary),
            const SizedBox(width: 12),
            Expanded(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(title, style: Theme.of(context).textTheme.titleMedium),
                  const SizedBox(height: 4),
                  Text(value, style: Theme.of(context).textTheme.bodyMedium),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}
