import 'package:flutter/material.dart';
import 'package:tatlock_ui/shared/widgets/widgets.dart';
import 'package:tatlock_ui/version.g.dart';

/// Dashboard content shown in Front Hall when mode is dashboard.
///
/// Displays system stats with gauges, weather, air quality, and version info.
class DashboardContent extends StatelessWidget {
  const DashboardContent({super.key});

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

    return ListView(
      padding: const EdgeInsets.all(16),
      children: [
        // Welcome card
        Card(
          child: Padding(
            padding: const EdgeInsets.all(24),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Row(
                  children: [
                    Icon(
                      Icons.waving_hand,
                      size: 32,
                      color: colorScheme.primary,
                    ),
                    const SizedBox(width: 12),
                    Flexible(
                      child: Text(
                        'Welcome to Tatlock',
                        style: Theme.of(context).textTheme.headlineSmall,
                      ),
                    ),
                  ],
                ),
                const SizedBox(height: 12),
                Text(
                  'Your homelab dashboard is ready.',
                  style: Theme.of(context).textTheme.bodyLarge?.copyWith(
                        color: colorScheme.onSurfaceVariant,
                      ),
                ),
              ],
            ),
          ),
        ),
        const SizedBox(height: 16),

        // System Stats - Gauges
        _SectionHeader(title: 'System Stats', icon: Icons.monitor_heart),
        const SizedBox(height: 8),
        Card(
          child: Padding(
            padding: const EdgeInsets.all(16),
            child: GaugeRow(
              gaugeSize: 90,
              gauges: [
                GaugeData(
                  value: 0.35,
                  label: 'CPU',
                  icon: Icons.memory,
                  color: colorScheme.primary,
                ),
                GaugeData(
                  value: 0.62,
                  label: 'Memory',
                  icon: Icons.storage,
                  color: colorScheme.secondary,
                ),
                GaugeData(
                  value: 0.78,
                  label: 'Disk',
                  icon: Icons.disc_full,
                  color: colorScheme.tertiary,
                ),
                GaugeData(
                  value: 0.12,
                  label: 'Network',
                  icon: Icons.wifi,
                  color: Colors.teal,
                ),
              ],
            ),
          ),
        ),
        const SizedBox(height: 24),

        // Environment - Weather & Air Quality
        _SectionHeader(title: 'Environment', icon: Icons.eco),
        const SizedBox(height: 8),
        LayoutBuilder(
          builder: (context, constraints) {
            // Responsive layout: side-by-side on wider screens
            if (constraints.maxWidth > 500) {
              return Row(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Expanded(child: WeatherWidget()),
                  const SizedBox(width: 12),
                  Expanded(child: AirQualityWidget()),
                ],
              );
            }
            // Stack on narrow screens
            return Column(
              children: [
                WeatherWidget(),
                const SizedBox(height: 12),
                AirQualityWidget(),
              ],
            );
          },
        ),
        const SizedBox(height: 24),

        // Version info
        Center(
          child: Text(
            '${AppVersion.name} v${AppVersion.fullVersion}',
            style: Theme.of(context).textTheme.bodySmall?.copyWith(
                  color: colorScheme.outline,
                ),
          ),
        ),
      ],
    );
  }
}

/// Section header with icon and title.
class _SectionHeader extends StatelessWidget {
  const _SectionHeader({
    required this.title,
    required this.icon,
  });

  final String title;
  final IconData icon;

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

    return Row(
      children: [
        Icon(
          icon,
          size: 18,
          color: colorScheme.onSurfaceVariant,
        ),
        const SizedBox(width: 8),
        Text(
          title,
          style: Theme.of(context).textTheme.titleSmall?.copyWith(
                color: colorScheme.onSurfaceVariant,
                fontWeight: FontWeight.w500,
              ),
        ),
      ],
    );
  }
}