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

import '../constants/app_constants.dart';
import '../theme/app_theme.dart';

class DebugConfigScreen extends StatelessWidget {
  const DebugConfigScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('🔧 Configuration'),
      ),
      body: ListView(
        padding: const EdgeInsets.all(16),
        children: [
          _buildSection(
            'Environment',
            [
              _buildRow('Environment', AppConstants.environment),
              _buildRow('Debug Mode', AppConstants.isDebugMode.toString()),
              _buildRow(
                  'Is Development', AppConstants.isDevelopment.toString()),
              _buildRow('Is Production', AppConstants.isProduction.toString()),
            ],
          ),
          const SizedBox(height: 16),
          _buildSection(
            'API Configuration',
            [
              _buildRow('Base URL', AppConstants.apiBaseUrl),
              _buildRow('API Version', AppConstants.apiVersion),
            ],
          ),
          const SizedBox(height: 16),
          _buildSection(
            'All Environment Variables',
            dotenv.env.entries.map((e) => _buildRow(e.key, e.value)).toList(),
          ),
        ],
      ),
    );
  }

  Widget _buildSection(String title, List<Widget> children) {
    return Card(
      child: Padding(
        padding: const EdgeInsets.all(16),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              title,
              style: const TextStyle(
                fontSize: 18,
                fontWeight: FontWeight.bold,
                color: AppTheme.primaryColor,
              ),
            ),
            const Divider(),
            ...children,
          ],
        ),
      ),
    );
  }

  Widget _buildRow(String key, String value) {
    return Padding(
      padding: const EdgeInsets.symmetric(vertical: 4),
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          SizedBox(
            width: 120,
            child: Text(
              key,
              style: const TextStyle(
                fontWeight: FontWeight.bold,
                color: Colors.grey,
              ),
            ),
          ),
          Expanded(
            child: Text(
              value,
              style: const TextStyle(color: Colors.white),
            ),
          ),
        ],
      ),
    );
  }
}
