import 'package:flutter/material.dart';

import '../../../core/l10n/app_localizations.dart';
import '../../../core/theme/app_colors.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:flutter_widget_from_html_core/flutter_widget_from_html_core.dart';
import 'package:go_router/go_router.dart';

import '../../../providers/help_center_provider.dart';

class HelpDetailScreen extends ConsumerWidget {
  const HelpDetailScreen({super.key, required this.id});
  final String id;

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final cs = Theme.of(context).colorScheme;
    final isDark = Theme.of(context).brightness == Brightness.dark;
    final asyncDetail = ref.watch(helpDetailProvider(id));

    return Scaffold(
      appBar: AppBar(
        elevation: 0,
        leading: IconButton(
          icon: const Icon(Icons.chevron_left, size: 28),
          onPressed: () => context.pop(),
        ),
        title: Text(
          AppLocalizations.of(context)!.helpDetail,
          style: const TextStyle(fontSize: 18, fontWeight: FontWeight.w600),
        ),
        centerTitle: true,
      ),
      body: asyncDetail.when(
        loading: () => const Center(child: CircularProgressIndicator()),
        error: (e, _) => Center(
          child: Text(AppLocalizations.of(context)!.loadFailed,
              style: TextStyle(color: cs.onSurface.withAlpha(153))),
        ),
        data: (detail) {
          if (detail == null) {
            return Center(
              child: Text(AppLocalizations.of(context)!.contentNotFound,
                  style: TextStyle(color: cs.onSurface.withAlpha(153))),
            );
          }
          return SingleChildScrollView(
            padding: const EdgeInsets.all(16),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                // 标题
                Container(
                  width: double.infinity,
                  padding: const EdgeInsets.all(16),
                  decoration: BoxDecoration(
                    color: isDark ? AppColors.darkBgSecondary : AppColors.lightBgSecondary,
                    borderRadius: BorderRadius.circular(10),
                  ),
                  child: Text(
                    detail.title,
                    style: TextStyle(
                      color: cs.onSurface,
                      fontSize: 15,
                      fontWeight: FontWeight.w600,
                    ),
                  ),
                ),
                const SizedBox(height: 16),
                // HTML 正文
                HtmlWidget(
                  detail.content,
                  textStyle: TextStyle(
                    color: cs.onSurface,
                    fontSize: 14,
                    height: 1.7,
                  ),
                ),
              ],
            ),
          );
        },
      ),
    );
  }
}