import 'dart:math' as math;

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import '../../../core/providers/sensor_provider.dart';
import '../../../core/providers/settings_provider.dart';
import '../../theme/app_colors.dart';
import 'dashboard_slots_provider.dart';
import 'widgets/dashboard_common.dart';
import 'widgets/flag_pill.dart';
import 'widgets/sensor_tile.dart';

/// Portrait layout (requirements): main + sub sensor on top, 4 flags in the
/// middle, 2×5 values below — all on one screen, the gauge taking whatever
/// height the flags and values leave.
class DashboardVertical extends ConsumerWidget {
  const DashboardVertical({super.key});

  static const _tileHeight = 64.0;
  static const _gap = 6.0;
  static const _flagsHeight = 30.0 + 2 * _gap;

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final c = AppColors.of(context);
    final state = ref.watch(latestSensorProvider);
    final config = ref.watch(dashboardConfigProvider);
    final units = ref.watch(unitPrefsProvider);

    final tiles = Padding(
      padding: const EdgeInsets.fromLTRB(8, 0, 8, 8),
      child: Column(
        children: [
          // Left column is values 0-4, right column 5-9, matching landscape.
          for (int row = 0; row < 5; row++)
            Padding(
              padding: EdgeInsets.only(top: row == 0 ? 0 : _gap),
              child: SizedBox(
                height: _tileHeight,
                child: Row(
                  children: [
                    for (final i in [row, row + 5]) ...[
                      if (i != row) const SizedBox(width: _gap),
                      Expanded(
                        child: SensorTile(
                          sensorId: config.values[i],
                          state: state,
                          units: units,
                          onLongPress: () =>
                              editDashboardValue(context, ref, i),
                        ),
                      ),
                    ],
                  ],
                ),
              ),
            ),
        ],
      ),
    );

    return Container(
      color: c.background,
      child: LayoutBuilder(builder: (context, box) {
        const tilesHeight = 5 * _tileHeight + 4 * _gap + 8;
        final gaugeSize = math.max(
          140.0,
          math.min(box.maxWidth - 32, box.maxHeight - tilesHeight - _flagsHeight),
        );
        // Scrolls only if the screen is too short even for a small gauge.
        return SingleChildScrollView(
          child: Column(
            children: [
              SizedBox(
                height: gaugeSize,
                child: Center(child: MainGauge(state: state)),
              ),
              Padding(
                padding:
                    const EdgeInsets.symmetric(vertical: _gap, horizontal: 8),
                child: FlagRow(
                  state: state,
                  flagIds: config.flags,
                  onLongPress: (i) => editDashboardFlag(context, ref, i),
                ),
              ),
              tiles,
            ],
          ),
        );
      }),
    );
  }
}