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

import '../../../core/connections/connection.dart';
import '../../../core/connections/connection_providers.dart';
import '../../../core/theme/theme_x.dart';
import 'connection_form_dialog.dart';

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

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final connections = ref.watch(savedConnectionsProvider);
    final activeId = ref.watch(activeConnectionIdProvider);

    if (connections.isEmpty) {
      return Padding(
        padding: const EdgeInsets.all(20),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          mainAxisSize: MainAxisSize.min,
          children: [
            Text(
              'No connections saved yet.',
              style: context.text.bodyMedium,
            ),
            const SizedBox(height: 4),
            Text(
              "Add one to start managing a NodeMaster host.",
              style: context.text.bodySmall,
            ),
          ],
        ),
      );
    }

    return Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        for (final connection in connections)
          _ConnectionRow(
            connection: connection,
            active: connection.id == activeId,
          ),
      ],
    );
  }
}

class _ConnectionRow extends ConsumerWidget {
  const _ConnectionRow({required this.connection, required this.active});

  final Connection connection;
  final bool active;

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    return InkWell(
      onTap: active
          ? null
          : () => ref.read(activeConnectionIdProvider.notifier).setActive(connection.id),
      child: Padding(
        padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
        child: Row(
          children: [
            Container(
              width: 8,
              height: 8,
              decoration: BoxDecoration(
                shape: BoxShape.circle,
                color: active ? context.status.good : context.colors.outline,
              ),
            ),
            const SizedBox(width: 12),
            Expanded(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                mainAxisSize: MainAxisSize.min,
                children: [
                  Text(
                    active ? '${connection.name} · active' : connection.name,
                    style: context.text.labelLarge,
                  ),
                  Text(connection.baseUrl, style: context.dataStyles.dataMonoSmall),
                ],
              ),
            ),
            IconButton(
              tooltip: 'Edit',
              icon: const Icon(Icons.edit_outlined, size: 18),
              onPressed: () => showConnectionFormDialog(context, existing: connection),
            ),
            IconButton(
              tooltip: 'Remove',
              icon: const Icon(Icons.delete_outline, size: 18),
              onPressed: () => ref.read(savedConnectionsProvider.notifier).remove(connection.id),
            ),
          ],
        ),
      ),
    );
  }
}