import 'package:flutter/material.dart';
import '../constants/mpob_colors.dart';
import '../services/app_strings.dart';
import '../theme/locale_controller.dart';

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

  @override
  Widget build(BuildContext context) {
    return ValueListenableBuilder<String>(
      valueListenable: LocaleController.localeCode,
      builder: (context, _, _) {
        final colorScheme = Theme.of(context).colorScheme;
        return Scaffold(
          appBar: AppBar(title: Text(AppStrings.t('manual_title'))),
          body: ListView(
            padding: const EdgeInsets.symmetric(vertical: 8),
            children: [
              _buildSection(
                icon: Icons.photo_library,
                title: AppStrings.t('manual_gallery_title'),
                body: AppStrings.t('manual_gallery_body'),
              ),
              _buildSection(
                icon: Icons.camera_alt,
                title: AppStrings.t('manual_snap_title'),
                body: AppStrings.t('manual_snap_body'),
              ),
              _buildSection(
                icon: Icons.camera,
                title: AppStrings.t('manual_live_title'),
                body: AppStrings.t('manual_live_body'),
              ),
              _buildSection(
                icon: Icons.history,
                title: AppStrings.t('manual_history_title'),
                body: AppStrings.t('manual_history_body'),
              ),
              _buildSection(
                icon: Icons.edit_outlined,
                title: AppStrings.t('manual_correction_title'),
                body: AppStrings.t('manual_correction_body'),
              ),
              _buildSection(
                icon: Icons.insights,
                title: AppStrings.t('manual_batch_title'),
                body: AppStrings.t('manual_batch_body'),
              ),
              ExpansionTile(
                leading: const Icon(Icons.palette_outlined),
                title: Text(AppStrings.t('manual_classes_title')),
                children: mpobClasses.map((key) {
                  return Padding(
                    padding: const EdgeInsets.fromLTRB(16, 0, 16, 16),
                    child: Row(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Container(
                          width: 14,
                          height: 14,
                          margin: const EdgeInsets.only(top: 3),
                          decoration: BoxDecoration(
                            color: getMPOBColor(key),
                            shape: BoxShape.circle,
                          ),
                        ),
                        const SizedBox(width: 10),
                        Expanded(
                          child: Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: [
                              Text(
                                AppStrings.className(key),
                                style: TextStyle(fontWeight: FontWeight.bold, color: colorScheme.onSurface),
                              ),
                              const SizedBox(height: 2),
                              Text(
                                AppStrings.t('manual_class_desc_$key'),
                                style: TextStyle(fontSize: 13, color: colorScheme.onSurface.withValues(alpha: 0.75)),
                              ),
                            ],
                          ),
                        ),
                      ],
                    ),
                  );
                }).toList(),
              ),
            ],
          ),
        );
      },
    );
  }

  Widget _buildSection({required IconData icon, required String title, required String body}) {
    return ExpansionTile(
      leading: Icon(icon),
      title: Text(title),
      children: [
        Padding(
          padding: const EdgeInsets.fromLTRB(16, 0, 16, 16),
          child: Text(body),
        ),
      ],
    );
  }
}